@samitouri / QOS-React
Code Commits Issues Pulls Sessions CI/CD
main
main
js 154 lines 3.66 KB
Raw
1 import cn from 'classnames';
2 import semver from 'semver';
3 import PropTypes from 'prop-types';
4 import IssueList from './IssueList';
5 import {parse} from 'query-string';
6 import {semverString} from './propTypes';
7
8 const React = window.React;
9
10 const propTypes = {
11 children: PropTypes.node.isRequired,
12 title: PropTypes.node.isRequired,
13 resolvedIn: semverString,
14 introducedIn: semverString,
15 resolvedBy: PropTypes.string,
16 };
17
18 class TestCase extends React.Component {
19 constructor(props, context) {
20 super(props, context);
21
22 this.state = {
23 complete: false,
24 };
25 }
26
27 handleChange = e => {
28 this.setState({
29 complete: e.target.checked,
30 });
31 };
32
33 render() {
34 const {
35 title,
36 description,
37 introducedIn,
38 resolvedIn,
39 resolvedBy,
40 affectedBrowsers,
41 relatedIssues,
42 children,
43 } = this.props;
44
45 let {complete} = this.state;
46
47 const {version} = parse(window.location.search);
48 const isTestFixed =
49 !version || !resolvedIn || semver.gte(version, resolvedIn);
50
51 complete = !isTestFixed || complete;
52
53 return (
54 <section className={cn('test-case', complete && 'test-case--complete')}>
55 <h2 className="test-case__title type-subheading">
56 <label>
57 <input
58 className="test-case__title__check"
59 type="checkbox"
60 checked={complete}
61 onChange={this.handleChange}
62 />{' '}
63 {title}
64 </label>
65 </h2>
66
67 <dl className="test-case__details">
68 {introducedIn && <dt>First broken in: </dt>}
69 {introducedIn && (
70 <dd>
71 <a
72 href={'https://github.com/facebook/react/tag/v' + introducedIn}>
73 <code>{introducedIn}</code>
74 </a>
75 </dd>
76 )}
77
78 {resolvedIn && <dt>First supported in: </dt>}
79 {resolvedIn && (
80 <dd>
81 <a href={'https://github.com/facebook/react/tag/v' + resolvedIn}>
82 <code>{resolvedIn}</code>
83 </a>
84 </dd>
85 )}
86
87 {resolvedBy && <dt>Fixed by: </dt>}
88 {resolvedBy && (
89 <dd>
90 <a
91 href={
92 'https://github.com/facebook/react/pull/' +
93 resolvedBy.slice(1)
94 }>
95 <code>{resolvedBy}</code>
96 </a>
97 </dd>
98 )}
99
100 {affectedBrowsers && <dt>Affected browsers: </dt>}
101 {affectedBrowsers && <dd>{affectedBrowsers}</dd>}
102
103 {relatedIssues && <dt>Related Issues: </dt>}
104 {relatedIssues && (
105 <dd>
106 <IssueList issues={relatedIssues} />
107 </dd>
108 )}
109 </dl>
110
111 <p className="test-case__desc">{description}</p>
112
113 <div className="test-case__body">
114 {!isTestFixed && (
115 <p className="test-case__invalid-version">
116 <strong>Note:</strong> This test case was fixed in a later version
117 of React. This test is not expected to pass for the selected
118 version, and that's ok!
119 </p>
120 )}
121
122 {children}
123 </div>
124 </section>
125 );
126 }
127 }
128
129 TestCase.propTypes = propTypes;
130
131 TestCase.Steps = class extends React.Component {
132 render() {
133 const {children} = this.props;
134 return (
135 <div>
136 <h3>Steps to reproduce:</h3>
137 <ol>{children}</ol>
138 </div>
139 );
140 }
141 };
142
143 TestCase.ExpectedResult = class extends React.Component {
144 render() {
145 const {children} = this.props;
146 return (
147 <div>
148 <h3>Expected Result:</h3>
149 <p>{children}</p>
150 </div>
151 );
152 }
153 };
154 export default TestCase;