[chore] update tests.

DaveVanVliet · Sep 21, 2017 · 13dfc4e · 13dfc4e
1 parent ba81894
commit 13dfc4e
Show file tree

Hide file tree

Showing 11 changed files with 240 additions and 114 deletions.
diff --git a/examples/base.css b/examples/base.css
@@ -0,0 +1,10 @@
+
+/* From http://instructure-react.github.io/library/shared.css */
+
+.padbox {
+  padding: 40px;
+}
+
+.branding {
+  border-bottom: 1px solid hsl(200, 0%, 90%);
+}
diff --git a/examples/basic/app.js b/examples/basic/app.js
@@ -1,39 +1,28 @@
 import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
-import Modal from '../../src/index';
-import ViewA from './view_a';
-import ViewB from './view_b';
+import Modal from 'react-modal';
+import SimpleUsage from './simple_usage';
+import MultipleModals from './multiple_modals';
 
 const appElement = document.getElementById('example');
 
 Modal.setAppElement('#example');
 
-const heading = firstView => {
-  if (firstView) {
-    return "#1. Working with one modal at a time.";
-  }
-  return "#2. Working with many modal.";
-};
+const examples = [
+  SimpleUsage,
+  MultipleModals
+];
 
-class App extends Component {
-  constructor(props) {
-    super(props);
-    this.state = { firstView: true };
-  }
-
-  toggleView = () => {
-    this.setState({ ...this.state, firstView: !this.state.firstView });
-  }
-
-  render() {
+function App(props) {
+  return examples.map((example, key) => {
+    const ExampleApp = example.app;
     return (
-      <div>
-        <button onClick={this.toggleView}>Click to go to the next example!</button>
-        <h2>{heading(this.state.firstView)}</h2>
-        {this.state.firstView ? <ViewA /> : <ViewB />}
+      <div key={key} className="example">
+        <h3>{example.label}</h3>
+        <ExampleApp />
       </div>
     );
-  }
+  });
 }
 
 ReactDOM.render(<App/>, appElement);
diff --git a/examples/basic/view_a.js → examples/basic/forms/index.js b/examples/basic/view_a.js → examples/basic/forms/index.js
@@ -1,13 +1,13 @@
 import React, { Component } from 'react';
-import Modal from '../../src/index';
-import ModalA from './modal_a';
+import Modal from 'react-modal';
+import MyModal from './modal';
 
 const MODAL_A = 'modal_a';
 const MODAL_B = 'modal_b';
 
 const DEFAULT_TITLE = 'Default title';
 
-export default class ViewA extends Component {
+class SimpleUsage extends Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -22,7 +22,12 @@ export default class ViewA extends Component {
       this.handleModalCloseRequest();
       return;
     }
-    this.setState({ ...this.state, currentModal: key, title1: DEFAULT_TITLE });
+
+    this.setState({
+      ...this.state,
+      currentModal: key,
+      title1: DEFAULT_TITLE
+    });
   }
 
   handleModalCloseRequest = () => {
@@ -34,7 +39,7 @@ export default class ViewA extends Component {
     });
   }
 
-  handleInputChange = (e) => {
+  handleInputChange = e => {
     let text = e.target.value;
     if (text == '') {
       text = DEFAULT_TITLE;
@@ -47,13 +52,16 @@ export default class ViewA extends Component {
     this.heading && (this.heading.style.color = '#F00');
   }
 
+  headingRef = h1 => this.heading = h1;
+
   render() {
     const { currentModal } = this.state;
+
     return (
       <div>
         <button onClick={this.toggleModal(MODAL_A)}>Open Modal A</button>
         <button onClick={this.toggleModal(MODAL_B)}>Open Modal B</button>
-        <ModalA
+        <MyModal
           title={this.state.title1}
           isOpen={currentModal == MODAL_A}
           onAfterOpen={this.handleOnAfterOpenModal}
@@ -72,12 +80,17 @@ export default class ViewA extends Component {
           isOpen={currentModal == MODAL_B}
           onAfterOpen={this.handleOnAfterOpenModal}
           onRequestClose={this.toggleModal(MODAL_B)}>
-          <h1 id="heading" ref={h1 => this.heading = h1}>This is the modal 2!</h1>
+          <h1 id="heading" ref={headingRef}>This is the modal 2!</h1>
           <div id="fulldescription" tabIndex="0" role="document">
             <p>This is a description of what it does: nothing :)</p>
-          </div>
+          </div>p
         </Modal>
       </div>
     );
   }
 }
+
+export default {
+  label: "#1. Working with one modal at a time.",
+  app: SimpleUsage
+};
diff --git a/examples/basic/index.html b/examples/basic/index.html
@@ -1,14 +1,20 @@
 <!doctype html public "embarassment">
-<title>Basic Example</title>
-<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
-<link rel="stylesheet" href="http://instructure-react.github.io/library/shared.css"/>
-<link rel="stylesheet" href="app.css"/>
-<body>
-  <header class="branding padbox">
-    <h1>react-modal</h1>
-    <h2>an accessible React modal dialog component</h2>
-  </header>
-  <div id="example" class="padbox"></div>
-  <a target="_top" href="https://github.com/reactjs/react-modal"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://github-camo.global.ssl.fastly.net/a6677b08c955af8400f44c6298f40e7d19cc5b2d/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677261795f3664366436642e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png"></a>
-  <script src="../__build__/shared.js"></script>
-  <script src="../__build__/basic.js"></script>
+<html>
+  <head>
+    <title>Basic Example</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" type="text/css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous" />
+    <link rel="stylesheet" href="/base.css"/>
+    <link rel="stylesheet" href="app.css"/>
+  </head>
+  <body>
+    <header class="branding padbox">
+      <h1>react-modal</h1>
+      <h2>an accessible React modal dialog component</h2>
+    </header>
+    <div id="example" class="padbox"></div>
+    <a target="_top" href="https://github.com/reactjs/react-modal"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://github-camo.global.ssl.fastly.net/a6677b08c955af8400f44c6298f40e7d19cc5b2d/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677261795f3664366436642e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png"></a>
+    <script src="../__build__/shared.js"></script>
+    <script src="../__build__/basic.js"></script>
+  </body>
+</html>
diff --git a/examples/basic/view_b.js → examples/basic/multiple_modals/index.js b/examples/basic/view_b.js → examples/basic/multiple_modals/index.js
@@ -1,18 +1,15 @@
 import React, { Component } from 'react';
-import Modal from '../../src/index';
-import ModalA from './modal_a';
+import Modal from 'react-modal';
 
 function List(props) {
-  return (
-    <div>
-      {props.items.map(
-        (x, i) => <div key={i} onClick={props.onItemClick(i)}><a href="javascript:void(0)">{x}</a></div>
-      )}
+  return props.items.map((x, i) => (
+    <div key={i} onClick={props.onItemClick(i)}>
+      <a href="javascript:void(0)">{x}</a>
     </div>
-  );
+  ));
 }
 
-export default class ViewB extends Component {
+class MultipleModals extends Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -72,7 +69,7 @@ export default class ViewB extends Component {
     const { listItemsIsOpen } = this.state;
     return (
       <div>
-        <button onClick={this.toggleModal}>Open Modal A</button>
+        <button type="button" className="btn btn-primary" onClick={this.toggleModal}>Open Modal A</button>
         <Modal
           id="test"
           closeTimeoutMS={150}
@@ -108,3 +105,8 @@ export default class ViewB extends Component {
     );
   }
 }
+
+export default {
+  label: "#2. Working with many modal.",
+  app: MultipleModals
+};
diff --git a/examples/basic/simple_usage/index.js b/examples/basic/simple_usage/index.js
@@ -0,0 +1,94 @@
+import React, { Component } from 'react';
+import Modal from 'react-modal';
+import MyModal from './modal';
+
+const MODAL_A = 'modal_a';
+const MODAL_B = 'modal_b';
+
+const DEFAULT_TITLE = 'Default title';
+
+class SimpleUsage extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      title1: DEFAULT_TITLE,
+      currentModal: null
+    };
+  }
+
+  toggleModal = key => event => {
+    event.preventDefault();
+    if (this.state.currentModal) {
+      this.handleModalCloseRequest();
+      return;
+    }
+
+    this.setState({
+      ...this.state,
+      currentModal: key,
+      title1: DEFAULT_TITLE
+    });
+  }
+
+  handleModalCloseRequest = () => {
+    // opportunity to validate something and keep the modal open even if it
+    // requested to be closed
+    this.setState({
+      ...this.state,
+      currentModal: null
+    });
+  }
+
+  handleInputChange = e => {
+    let text = e.target.value;
+    if (text == '') {
+      text = DEFAULT_TITLE;
+    }
+    this.setState({ ...this.state, title1: text });
+  }
+
+  handleOnAfterOpenModal = () => {
+    // when ready, we can access the available refs.
+    this.heading && (this.heading.style.color = '#F00');
+  }
+
+  render() {
+    const { currentModal } = this.state;
+
+    return (
+      <div>
+        <button type="button" className="btn btn-primary" onClick={this.toggleModal(MODAL_A)}>Open Modal A</button>
+        <button type="button" className="btn btn-primary" onClick={this.toggleModal(MODAL_B)}>Open Modal B</button>
+        <MyModal
+          title={this.state.title1}
+          isOpen={currentModal == MODAL_A}
+          onAfterOpen={this.handleOnAfterOpenModal}
+          onRequestClose={this.handleModalCloseRequest}
+          askToClose={this.toggleModal(MODAL_A)}
+          onChangeInput={this.handleInputChange} />
+        <Modal
+          ref="mymodal2"
+          id="test2"
+          aria={{
+            labelledby: "heading",
+            describedby: "fulldescription"
+          }}
+          closeTimeoutMS={150}
+          contentLabel="modalB"
+          isOpen={currentModal == MODAL_B}
+          onAfterOpen={this.handleOnAfterOpenModal}
+          onRequestClose={this.toggleModal(MODAL_B)}>
+          <h1 id="heading" ref={h1 => this.heading = h1}>This is the modal 2!</h1>
+          <div id="fulldescription" tabIndex="0" role="document">
+            <p>This is a description of what it does: nothing :)</p>
+          </div>
+        </Modal>
+      </div>
+    );
+  }
+}
+
+export default {
+  label: "#1. Working with one modal at a time.",
+  app: SimpleUsage
+};
diff --git a/examples/basic/modal_a.js → examples/basic/simple_usage/modal.js b/examples/basic/modal_a.js → examples/basic/simple_usage/modal.js
@@ -1,17 +1,12 @@
 import React from 'react';
-import Modal from '../../src/index';
+import Modal from 'react-modal';
+
+export default props => {
+  const {
+    title, isOpen, askToClose,
+    onAfterOpen, onRequestClose, onChangeInput
+  } = props;
 
-// This way you can provide a correct interface
-// for anyone that will use this modal.
-//
-// NOTE: Code style is just to show the interface.
-// Prefer comment your api.
-export default function ModalA(
-  {
-    title, isOpen, onAfterOpen,
-    onRequestClose, askToClose, onChangeInput
-  }
-) {
   return (
     <Modal
       id="test"