@samitouri / QOS-React-2 / commits / e3d5b5ea7f

DOM fixture updates (#13368)

* Add home component. Async load fixtures. This commit adds a homepage to the DOM fixtures that includes browser testing information and asynchronously loads fixtures. This should make it easier to find DOM testing information and keep the payload size in check as we add more components to the fixtures. * Update browser support fields * Tweak select width * Fix typo * Report actual error when fixture fails to load * Update browser information * Update browserstack subscription info * English * Switch let for const in fixture loader

Nathan Hunzaker committed Aug 14, 2018 at 07:32 UTC e3d5b5ea7f9287e98d95ef13093684100c2e35c7
4 files changed +270 -74
fixtures/dom/src/components/Header.js
+4 -4
@@ -35,11 +35,11 @@ class Header extends React.Component {
35 <span className="header__logo">
36 <img
37 src={process.env.PUBLIC_URL + '/react-logo.svg'}
38 - alt=""
39 - width="32"
40 - height="32"
38 + alt="React"
39 + width="20"
40 + height="20"
41 />
42 - React Sandbox (v{React.version})
42 + <a href="/">DOM Test Fixtures (v{React.version})</a>
43 </span>
44
45 <div className="header-controls">
fixtures/dom/src/components/fixtures/home.js new
+117
@@ -0,0 +1,117 @@
1 +const React = window.React;
2 +
3 +export default function Home() {
4 + return (
5 + <main>
6 + <h1>DOM Test Fixtures</h1>
7 + <p>
8 + Use this site to test browser quirks and other behavior that can not be
9 + captured through unit tests.
10 + </p>
11 + <section>
12 + <h2>Tested Browsers</h2>
13 + <table>
14 + <thead>
15 + <tr>
16 + <th>Browser</th>
17 + <th>Versions</th>
18 + </tr>
19 + </thead>
20 + <tbody>
21 + <tr>
22 + <td>Chrome - Desktop</td>
23 + <td>
24 + 49<sup>*</sup>, Latest
25 + </td>
26 + </tr>
27 + <tr>
28 + <td>Chrome - Android</td>
29 + <td>Latest</td>
30 + </tr>
31 + <tr>
32 + <td>Firefox Desktop</td>
33 + <td>
34 + <a href="https://www.mozilla.org/en-US/firefox/organizations/">
35 + ESR<sup>†</sup>
36 + </a>, Latest
37 + </td>
38 + </tr>
39 + <tr>
40 + <td>Internet Explorer</td>
41 + <td>9, 10, 11</td>
42 + </tr>
43 + <tr>
44 + <td>Microsoft Edge</td>
45 + <td>14, Latest</td>
46 + </tr>
47 + <tr>
48 + <td>Safari - Desktop</td>
49 + <td>7, Latest</td>
50 + </tr>
51 + <tr>
52 + <td>Safari - iOS</td>
53 + <td>7, Latest</td>
54 + </tr>
55 + </tbody>
56 + </table>
57 + <footer>
58 + <small>* Chrome 49 is the last release for Windows XP.</small>
59 + <br />
60 + <small>
61 + † Firefox Extended Support Release (ESR) is used by many
62 + institutions.
63 + </small>
64 + </footer>
65 + </section>
66 + <section>
67 + <h2>How do I test browsers I don't have access to?</h2>
68 + <p>
69 + Getting test coverage across all of these browsers can be difficult,
70 + particularly for older versions of evergreen browsers. Fortunately
71 + there are a handful of tools that make browser testing easy.
72 + </p>
73 + <section>
74 + <h3>Paid services</h3>
75 + <ul>
76 + <li>
77 + <a href="https://browserstack.com">BrowserStack</a>
78 + </li>
79 + <li>
80 + <a href="https://saucelabs.com">Sauce Labs</a>
81 + </li>
82 + <li>
83 + <a href="https://crossbrowsertesting.com/">CrossBrowserTesting</a>
84 + </li>
85 + </ul>
86 + <p>
87 + These services provide access to all browsers we test, however they
88 + cost money. There is no obligation to pay for them. Maintainers have
89 + access to a BrowserStack subscription; feel free to contact a
90 + maintainer or mention browsers where extra testing is required.
91 + </p>
92 + </section>
93 + <section>
94 + <h3>Browser downloads</h3>
95 + <p>A handful of browsers are available for download directly:</p>
96 + <ul>
97 + <li>
98 + <a href="https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/">
99 + Internet Explorer (9-11) and MS Edge virtual machines
100 + </a>
101 + </li>
102 + <li>
103 + <a href="https://www.chromium.org/getting-involved/download-chromium#TOC-Downloading-old-builds-of-Chrome-Chromium">
104 + Chromium snapshots (for older versions of Chrome)
105 + </a>
106 + </li>
107 + <li>
108 + <a href="https://www.mozilla.org/en-US/firefox/organizations/">
109 + Firefox Extended Support Release (ESR)
110 + </a>
111 + </li>
112 + </ul>
113 + </section>
114 + </section>
115 + </main>
116 + );
117 +}
fixtures/dom/src/components/fixtures/index.js
+52 -53
@@ -1,63 +1,62 @@
1 -import RangeInputFixtures from './range-inputs';
2 -import TextInputFixtures from './text-inputs';
3 -import SelectFixtures from './selects';
4 -import TextAreaFixtures from './textareas';
5 -import InputChangeEvents from './input-change-events';
6 -import NumberInputFixtures from './number-inputs';
7 -import PasswordInputFixtures from './password-inputs';
8 -import ButtonFixtures from './buttons';
9 -import DateInputFixtures from './date-inputs';
10 -import ErrorHandling from './error-handling';
11 -import EventPooling from './event-pooling';
12 -import CustomElementFixtures from './custom-elements';
13 -import MediaEventsFixtures from './media-events';
14 -import PointerEventsFixtures from './pointer-events';
15 -import MouseEventsFixtures from './mouse-events';
16 -import SelectionEventsFixtures from './selection-events';
17 -
1 const React = window.React;
2 +const fixturePath = window.location.pathname;
3
4 /**
5 * A simple routing component that renders the appropriate
6 * fixture based on the location pathname.
7 */
24 -function FixturesPage() {
25 - switch (window.location.pathname) {
26 - case '/text-inputs':
27 - return <TextInputFixtures />;
28 - case '/range-inputs':
29 - return <RangeInputFixtures />;
30 - case '/selects':
31 - return <SelectFixtures />;
32 - case '/textareas':
33 - return <TextAreaFixtures />;
34 - case '/input-change-events':
35 - return <InputChangeEvents />;
36 - case '/number-inputs':
37 - return <NumberInputFixtures />;
38 - case '/password-inputs':
39 - return <PasswordInputFixtures />;
40 - case '/buttons':
41 - return <ButtonFixtures />;
42 - case '/date-inputs':
43 - return <DateInputFixtures />;
44 - case '/error-handling':
45 - return <ErrorHandling />;
46 - case '/event-pooling':
47 - return <EventPooling />;
48 - case '/custom-elements':
49 - return <CustomElementFixtures />;
50 - case '/media-events':
51 - return <MediaEventsFixtures />;
52 - case '/pointer-events':
53 - return <PointerEventsFixtures />;
54 - case '/mouse-events':
55 - return <MouseEventsFixtures />;
56 - case '/selection-events':
57 - return <SelectionEventsFixtures />;
58 - default:
59 - return <p>Please select a test fixture.</p>;
8 +class FixturesPage extends React.Component {
9 + static defaultProps = {
10 + fixturePath: fixturePath === '/' ? '/home' : fixturePath,
11 + };
12 +
13 + state = {
14 + isLoading: true,
15 + error: null,
16 + Fixture: null,
17 + };
18 +
19 + componentDidMount() {
20 + this.loadFixture();
21 + }
22 +
23 + async loadFixture() {
24 + const {fixturePath} = this.props;
25 +
26 + try {
27 + const module = await import(`.${fixturePath}`);
28 +
29 + this.setState({Fixture: module.default});
30 + } catch (error) {
31 + console.error(error);
32 + this.setState({error});
33 + } finally {
34 + this.setState({isLoading: false});
35 + }
36 }
37 +
38 + render() {
39 + const {Fixture, error, isLoading} = this.state;
40 +
41 + if (isLoading) {
42 + return null;
43 + }
44 +
45 + if (error) {
46 + return <FixtureError error={error} />;
47 + }
48 +
49 + return <Fixture />;
50 + }
51 +}
52 +
53 +function FixtureError({error}) {
54 + return (
55 + <section>
56 + <h2>Error loading fixture</h2>
57 + <p>{error.message}</p>
58 + </section>
59 + );
60 }
61
62 export default FixturesPage;
fixtures/dom/src/style.css
+97 -17
@@ -4,14 +4,13 @@
4 box-sizing: border-box;
5 }
6
7 -html {
8 - font-size: 10px;
9 -}
7 body {
11 - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
8 + color: #333;
9 + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Arimo", "Roboto", "Oxygen",
10 "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
11 sans-serif;
14 - font-size: 1.4rem;
12 + font-size: 15px;
13 + line-height: 24px;
14 margin: 0;
15 padding: 0;
16 }
@@ -26,17 +25,78 @@ button {
25 padding: 6px 8px;
26 }
27
28 +h1,
29 +h2,
30 +h3,
31 +h4,
32 +h5,
33 +h6 {
34 + color: #171717;
35 + font-weight: 600;
36 +}
37 +
38 +h1 {
39 + font-size: 32px;
40 + margin: 24px 0;
41 +}
42 +
43 +h2 {
44 + font-size: 24px;
45 + margin: 24px 0 16px;
46 +}
47 +
48 +h3 {
49 + font-size: 18px;
50 + margin: 8px 0 16px;
51 +}
52 +
53 +h4, h4, h5, h6 {
54 + font-size: 16px;
55 + margin: 0 0 16px;
56 +}
57 +
58 +code {
59 + font-size: 90%;
60 +}
61 +
62 +a {
63 + text-decoration: none;
64 +}
65 +
66 +a:link:hover,
67 +a:link:focus {
68 + text-decoration: underline;
69 +}
70 +
71 +textarea {
72 + border-radius: 2px;
73 + border: 1px solid #d9d9d9;
74 + font-size: 12px;
75 + min-height: 100px;
76 + min-width: 300px;
77 + padding: 8px;
78 +}
79 +
80 .header {
30 - background: #222;
81 + background: #171717;
82 box-shadow: inset 0 -1px 3px #000;
32 - font-size: 1.6rem;
33 - line-height: 3.2rem;
83 overflow: hidden;
35 - padding: .8rem 1.6rem;
84 + padding: 8px;
85 +}
86 +
87 +.header a {
88 + text-decoration: none;
89 + color: white;
90 +}
91 +
92 +.header a:hover,
93 +.header a:focus{
94 + text-decoration: underline;
95 }
96
97 .header select {
39 - width: 12rem;
98 + margin-left: 8px;
99 + max-width: 150px;
100 }
101
102 .header__inner {
@@ -108,11 +168,11 @@ fieldset {
168
169 ul,
170 ol {
111 - margin: 0 0 2rem 0;
171 + margin: 0 0 16px 0;
172 }
173
114 -li {
115 - margin-bottom: 0.4rem;
174 +p {
175 + margin: 16px 0;
176 }
177
178 .type-subheading {
@@ -130,11 +190,10 @@ li {
190 .footnote {
191 border-left: 4px solid #aaa;
192 color: #444;
193 + font-size: 14px;
194 font-style: italic;
134 - line-height: 1.5;
135 - margin-bottom: 2.4rem;
136 - margin-left: 0.4rem;
137 - padding-left: 1.6rem;
195 + margin-left: 8px;
196 + padding-left: 16px;
197 }
198
199 .test-case {
@@ -222,3 +281,24 @@ li {
281 .field-group {
282 overflow: hidden;
283 }
284 +
285 +table {
286 + border: 1px solid #d9d9d9;
287 + border-width: 1px 1px 1px 0;
288 + border-collapse: collapse;
289 + margin: 16px 0;
290 + font-size: 14px;
291 + line-height: 20px;
292 + width: 100%;
293 +}
294 +
295 +td,
296 +th {
297 + text-align: left;
298 + border: 1px solid #d9d9d9;
299 + padding: 6px;
300 +}
301 +
302 +tbody tr:nth-child(even) {
303 + background: #f0f0f0;
304 +}