From e3d5b5ea7f9287e98d95ef13093684100c2e35c7 Mon Sep 17 00:00:00 2001 From: Nathan Hunzaker Date: Tue, 14 Aug 2018 07:32:52 -0700 Subject: [PATCH] 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 --- fixtures/dom/src/components/Header.js | 8 +- fixtures/dom/src/components/fixtures/home.js | 117 ++++++++++++++++++ fixtures/dom/src/components/fixtures/index.js | 105 ++++++++-------- fixtures/dom/src/style.css | 114 ++++++++++++++--- 4 files changed, 270 insertions(+), 74 deletions(-) create mode 100644 fixtures/dom/src/components/fixtures/home.js diff --git a/fixtures/dom/src/components/Header.js b/fixtures/dom/src/components/Header.js index 7ce25c6c4d..de71a7dca6 100644 --- a/fixtures/dom/src/components/Header.js +++ b/fixtures/dom/src/components/Header.js @@ -35,11 +35,11 @@ class Header extends React.Component { - React Sandbox (v{React.version}) + DOM Test Fixtures (v{React.version})
diff --git a/fixtures/dom/src/components/fixtures/home.js b/fixtures/dom/src/components/fixtures/home.js new file mode 100644 index 0000000000..65450f6830 --- /dev/null +++ b/fixtures/dom/src/components/fixtures/home.js @@ -0,0 +1,117 @@ +const React = window.React; + +export default function Home() { + return ( +
+

DOM Test Fixtures

+

+ Use this site to test browser quirks and other behavior that can not be + captured through unit tests. +

+
+

Tested Browsers

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
BrowserVersions
Chrome - Desktop + 49*, Latest +
Chrome - AndroidLatest
Firefox Desktop + + ESR† + , Latest +
Internet Explorer9, 10, 11
Microsoft Edge14, Latest
Safari - Desktop7, Latest
Safari - iOS7, Latest
+
+ * Chrome 49 is the last release for Windows XP. +
+ + † Firefox Extended Support Release (ESR) is used by many + institutions. + +
+
+
+

How do I test browsers I don't have access to?

+

+ Getting test coverage across all of these browsers can be difficult, + particularly for older versions of evergreen browsers. Fortunately + there are a handful of tools that make browser testing easy. +

+
+

Paid services

+ +

+ These services provide access to all browsers we test, however they + cost money. There is no obligation to pay for them. Maintainers have + access to a BrowserStack subscription; feel free to contact a + maintainer or mention browsers where extra testing is required. +

+
+
+

Browser downloads

+

A handful of browsers are available for download directly:

+ +
+
+
+ ); +} diff --git a/fixtures/dom/src/components/fixtures/index.js b/fixtures/dom/src/components/fixtures/index.js index 3107f535f9..69b220034f 100644 --- a/fixtures/dom/src/components/fixtures/index.js +++ b/fixtures/dom/src/components/fixtures/index.js @@ -1,63 +1,62 @@ -import RangeInputFixtures from './range-inputs'; -import TextInputFixtures from './text-inputs'; -import SelectFixtures from './selects'; -import TextAreaFixtures from './textareas'; -import InputChangeEvents from './input-change-events'; -import NumberInputFixtures from './number-inputs'; -import PasswordInputFixtures from './password-inputs'; -import ButtonFixtures from './buttons'; -import DateInputFixtures from './date-inputs'; -import ErrorHandling from './error-handling'; -import EventPooling from './event-pooling'; -import CustomElementFixtures from './custom-elements'; -import MediaEventsFixtures from './media-events'; -import PointerEventsFixtures from './pointer-events'; -import MouseEventsFixtures from './mouse-events'; -import SelectionEventsFixtures from './selection-events'; - const React = window.React; +const fixturePath = window.location.pathname; /** * A simple routing component that renders the appropriate * fixture based on the location pathname. */ -function FixturesPage() { - switch (window.location.pathname) { - case '/text-inputs': - return ; - case '/range-inputs': - return ; - case '/selects': - return ; - case '/textareas': - return ; - case '/input-change-events': - return ; - case '/number-inputs': - return ; - case '/password-inputs': - return ; - case '/buttons': - return ; - case '/date-inputs': - return ; - case '/error-handling': - return ; - case '/event-pooling': - return ; - case '/custom-elements': - return ; - case '/media-events': - return ; - case '/pointer-events': - return ; - case '/mouse-events': - return ; - case '/selection-events': - return ; - default: - return

Please select a test fixture.

; +class FixturesPage extends React.Component { + static defaultProps = { + fixturePath: fixturePath === '/' ? '/home' : fixturePath, + }; + + state = { + isLoading: true, + error: null, + Fixture: null, + }; + + componentDidMount() { + this.loadFixture(); + } + + async loadFixture() { + const {fixturePath} = this.props; + + try { + const module = await import(`.${fixturePath}`); + + this.setState({Fixture: module.default}); + } catch (error) { + console.error(error); + this.setState({error}); + } finally { + this.setState({isLoading: false}); + } + } + + render() { + const {Fixture, error, isLoading} = this.state; + + if (isLoading) { + return null; + } + + if (error) { + return ; + } + + return ; } } +function FixtureError({error}) { + return ( +
+

Error loading fixture

+

{error.message}

+
+ ); +} + export default FixturesPage; diff --git a/fixtures/dom/src/style.css b/fixtures/dom/src/style.css index a8e1391e1d..675f358081 100644 --- a/fixtures/dom/src/style.css +++ b/fixtures/dom/src/style.css @@ -4,14 +4,13 @@ box-sizing: border-box; } -html { - font-size: 10px; -} body { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", + color: #333; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Arimo", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; - font-size: 1.4rem; + font-size: 15px; + line-height: 24px; margin: 0; padding: 0; } @@ -26,17 +25,78 @@ button { padding: 6px 8px; } +h1, +h2, +h3, +h4, +h5, +h6 { + color: #171717; + font-weight: 600; +} + +h1 { + font-size: 32px; + margin: 24px 0; +} + +h2 { + font-size: 24px; + margin: 24px 0 16px; +} + +h3 { + font-size: 18px; + margin: 8px 0 16px; +} + +h4, h4, h5, h6 { + font-size: 16px; + margin: 0 0 16px; +} + +code { + font-size: 90%; +} + +a { + text-decoration: none; +} + +a:link:hover, +a:link:focus { + text-decoration: underline; +} + +textarea { + border-radius: 2px; + border: 1px solid #d9d9d9; + font-size: 12px; + min-height: 100px; + min-width: 300px; + padding: 8px; +} + .header { - background: #222; + background: #171717; box-shadow: inset 0 -1px 3px #000; - font-size: 1.6rem; - line-height: 3.2rem; overflow: hidden; - padding: .8rem 1.6rem; + padding: 8px; +} + +.header a { + text-decoration: none; + color: white; +} + +.header a:hover, +.header a:focus{ + text-decoration: underline; } .header select { - width: 12rem; + margin-left: 8px; + max-width: 150px; } .header__inner { @@ -108,11 +168,11 @@ fieldset { ul, ol { - margin: 0 0 2rem 0; + margin: 0 0 16px 0; } -li { - margin-bottom: 0.4rem; +p { + margin: 16px 0; } .type-subheading { @@ -130,11 +190,10 @@ li { .footnote { border-left: 4px solid #aaa; color: #444; + font-size: 14px; font-style: italic; - line-height: 1.5; - margin-bottom: 2.4rem; - margin-left: 0.4rem; - padding-left: 1.6rem; + margin-left: 8px; + padding-left: 16px; } .test-case { @@ -222,3 +281,24 @@ li { .field-group { overflow: hidden; } + +table { + border: 1px solid #d9d9d9; + border-width: 1px 1px 1px 0; + border-collapse: collapse; + margin: 16px 0; + font-size: 14px; + line-height: 20px; + width: 100%; +} + +td, +th { + text-align: left; + border: 1px solid #d9d9d9; + padding: 6px; +} + +tbody tr:nth-child(even) { + background: #f0f0f0; +}