Skip to content

Commit e3d5b5e

Browse files
nhunzakernhunzaker
authored
DOM fixture updates (facebook#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
1 parent d04d03e commit e3d5b5e

File tree

4 files changed

+270
-74
lines changed

4 files changed

+270
-74
lines changed

‎fixtures/dom/src/components/Header.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -35,11 +35,11 @@ class Header extends React.Component {
3535
<span className="header__logo">
3636
<img
3737
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"
4141
/>
42-
React Sandbox (v{React.version})
42+
<a href="/">DOM Test Fixtures (v{React.version})</a>
4343
</span>
4444

4545
<div className="header-controls">

‎fixtures/dom/src/components/fixtures/home.js

+117
Original file line numberDiff line numberDiff line change
@@ -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
Original file line numberDiff line numberDiff line change
@@ -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-
181
const React = window.React;
2+
const fixturePath = window.location.pathname;
193

204
/**
215
* A simple routing component that renders the appropriate
226
* fixture based on the location pathname.
237
*/
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+
}
6036
}
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+
);
6160
}
6261

6362
export default FixturesPage;

0 commit comments

Comments
 (0)