Add <progress> to DOM fixtures (#18293)
* Add <progress> to DOM fixtures * Remove uncontrolled
Nick Reiley committed
Apr 3, 2020 at 18:39 UTC
c083a643b1539b4d874895fabc19a34ecd2831ed
2 files changed
+88
fixtures/dom/src/components/Header.js
+1
@@ -74,6 +74,7 @@ class Header extends React.Component {
74
<option value="/email-inputs">Email Input</option>
75
<option value="/selects">Selects</option>
76
<option value="/textareas">Textareas</option>
77
+ <option value="/progress">Progress</option>
78
<option value="/input-change-events">
79
Input change events
80
</option>
fixtures/dom/src/components/fixtures/progress/index.js
new
+87
@@ -0,0 +1,87 @@
1
+import Fixture from '../../Fixture';
2
+import FixtureSet from '../../FixtureSet';
3
+import TestCase from '../../TestCase';
4
+
5
+const React = window.React;
6
+
7
+class ProgressFixture extends React.Component {
8
+ state = {value: 0, max: 1, enabled: false, backwards: false};
9
+
10
+ startTest = () => {
11
+ this.setState({enabled: true}, () => {
12
+ this.progressIntervalId = setInterval(() => {
13
+ if (this.state.backwards) {
14
+ if (this.state.value > 0) {
15
+ this.setState({value: this.state.value - this.state.max / 100});
16
+ } else {
17
+ if (this.state.max === 10000) {
18
+ this.resetTest();
19
+ } else {
20
+ this.setState({max: this.state.max * 100, backwards: false});
21
+ }
22
+ }
23
+ } else {
24
+ if (this.state.value < this.state.max) {
25
+ this.setState({value: this.state.value + this.state.max / 100});
26
+ } else {
27
+ this.setState({backwards: true});
28
+ }
29
+ }
30
+ }, 10);
31
+ });
32
+ };
33
+
34
+ resetTest = () => {
35
+ clearInterval(this.progressIntervalId);
36
+ this.setState({value: 0, max: 1, enabled: false, backwards: false});
37
+ };
38
+
39
+ render() {
40
+ return (
41
+ <FixtureSet title="Progress">
42
+ <TestCase title="Fill and reset progress bar">
43
+ <TestCase.Steps>
44
+ <li>Press enable button</li>
45
+ </TestCase.Steps>
46
+
47
+ <TestCase.ExpectedResult>
48
+ When enabled, bar value should increase from 0% to 100% and
49
+ backwards during three step loop: 0-1, 0-100, 0-10000. Reset button
50
+ stops loop, sets value to 0 and max to 1.
51
+ </TestCase.ExpectedResult>
52
+
53
+ <Fixture>
54
+ <div className="control-box">
55
+ <fieldset>
56
+ <legend>Controlled</legend>
57
+ <progress
58
+ value={this.state.value}
59
+ max={this.state.max}></progress>
60
+ <button
61
+ onClick={
62
+ this.state.enabled ? this.resetTest : this.startTest
63
+ }>
64
+ {this.state.enabled ? 'Reset' : 'Enable'}
65
+ </button>
66
+ <br />
67
+ <span className="hint">
68
+ {' '}
69
+ max: {JSON.stringify(this.state.max)}
70
+ </span>
71
+ <span className="hint">
72
+ {' '}
73
+ value:{' '}
74
+ {JSON.stringify(
75
+ Math.round((this.state.value + Number.EPSILON) * 100) / 100
76
+ )}
77
+ </span>
78
+ </fieldset>
79
+ </div>
80
+ </Fixture>
81
+ </TestCase>
82
+ </FixtureSet>
83
+ );
84
+ }
85
+}
86
+
87
+export default ProgressFixture;