Skeleton outline for a selection events fixture set

Author: Brandon Dail

fixtures/dom/src/components/App.js

@@ -5,14 +5,7 @@ import '../style.css';
 const React = window.React;
 
 function App() {
-  return (
-    <div>
-      <Header />
-      <div className="container">
-        <Fixtures />
-      </div>
-    </div>
-  );
+  return <Fixtures />;
 }
 
 export default App;

fixtures/dom/src/components/Header.js

@@ -64,6 +64,7 @@ class Header extends React.Component {
                 <option value="/event-pooling">Event Pooling</option>
                 <option value="/custom-elements">Custom Elements</option>
                 <option value="/media-events">Media Events</option>
+                <option value="/selection-events">Selection Events</option>
               </select>
             </label>
             <label htmlFor="react_version">

fixtures/dom/src/components/fixtures/index.js

@@ -1,3 +1,5 @@
+import Header from '../Header';
+
 import RangeInputFixtures from './range-inputs';
 import TextInputFixtures from './text-inputs';
 import SelectFixtures from './selects';
@@ -11,44 +13,43 @@ import ErrorHandling from './error-handling';
 import EventPooling from './event-pooling';
 import CustomElementFixtures from './custom-elements';
 import MediaEventsFixtures from './media-events';
+import {
+  SelectionEventFixtureRoot,
+  SelectionEventFixtureIFrame,
+} from './selection-events';
 
 const React = window.React;
 
-/**
- * A simple routing component that renders the appropriate
- * fixture based on the location pathname.
- */
+const RouteConfig = {
+  '/text-inputs': <TextInputFixtures />,
+  '/range-inputs': <RangeInputFixtures />,
+  '/selects': <SelectFixtures />,
+  '/textareas': <TextAreaFixtures />,
+  '/input-change-events': <InputChangeEvents />,
+  '/number-inputs': <NumberInputFixtures />,
+  '/password-inputs': <PasswordInputFixtures />,
+  '/buttons': <ButtonFixtures />,
+  '/date-inputs': <DateInputFixtures />,
+  '/error-handling': <ErrorHandling />,
+  '/event-pooling': <EventPooling />,
+  '/custom-elements': <CustomElementFixtures />,
+  '/media-events': <MediaEventsFixtures />,
+  '/selection-events': <SelectionEventFixtureRoot />,
+};
+
 function FixturesPage() {
-  switch (window.location.pathname) {
-    case '/text-inputs':
-      return <TextInputFixtures />;
-    case '/range-inputs':
-      return <RangeInputFixtures />;
-    case '/selects':
-      return <SelectFixtures />;
-    case '/textareas':
-      return <TextAreaFixtures />;
-    case '/input-change-events':
-      return <InputChangeEvents />;
-    case '/number-inputs':
-      return <NumberInputFixtures />;
-    case '/password-inputs':
-      return <PasswordInputFixtures />;
-    case '/buttons':
-      return <ButtonFixtures />;
-    case '/date-inputs':
-      return <DateInputFixtures />;
-    case '/error-handling':
-      return <ErrorHandling />;
-    case '/event-pooling':
-      return <EventPooling />;
-    case '/custom-elements':
-      return <CustomElementFixtures />;
-    case '/media-events':
-      return <MediaEventsFixtures />;
-    default:
-      return <p>Please select a test fixture.</p>;
+  const {pathname} = window.location;
+  if (pathname === '/selection-events-iframe') {
+    return <SelectionEventFixtureIFrame />;
   }
+  return (
+    <div>
+      <Header />
+      <div className="container">
+        {RouteConfig[pathname] || <p>Please select a test fixture.</p>}
+      </div>
+    </div>
+  );
 }
 
 export default FixturesPage;

fixtures/dom/src/components/fixtures/selection-events/index.js

@@ -0,0 +1,27 @@
+import React, {Component} from 'react';
+import FixtureSet from '../../FixtureSet';
+import TestCase from '../../TestCase';
+
+export class SelectionEventFixtureRoot extends Component {
+  render() {
+    return (
+      <FixtureSet title="Selection Events - iframes" description="">
+        <TestCase
+          title="Selection events across iframes"
+          description="Selection events should work within iframes">
+          <TestCase.Steps>
+            <li>TODO</li>
+          </TestCase.Steps>
+          <TestCase.ExpectedResult>TODO</TestCase.ExpectedResult>
+          <iframe src="/selection-events-iframe" />
+        </TestCase>
+      </FixtureSet>
+    );
+  }
+}
+
+export class SelectionEventFixtureIFrame extends Component {
+  render() {
+    return <div>I'm in an iframe. TODO</div>;
+  }
+}