Add more tests

#26

.dockerignore

@@ -0,0 +1 @@
+node_modules

package.json

@@ -11,10 +11,9 @@
     "dev": "fusion dev",
     "build": "fusion build",
     "start": "fusion start",
-    "build-test": "fusion build --test",
     "download-selenium": "node download-selenium.js",
-    "test-chrome": "docker-compose run browser-test-chrome",
-    "test-firefox": "docker-compose run browser-test-firefox",
+    "test-chrome": "docker-compose down && docker-compose run browser-test-chrome",
+    "test-firefox": "docker-compose down && docker-compose run browser-test-firefox",
     "test-remote": "./test-remotely.sh",
     "cover": "fusion test --cover",
     "source-map-explorer": "fusion source-map-explorer",
@@ -27,7 +26,7 @@
     "fusion-plugin-browser-performance-emitter": "^0.1.10",
     "fusion-plugin-csrf-protection-react": "^0.2.0",
     "fusion-plugin-error-handling": "0.1.12",
-    "fusion-plugin-font-loader-react": "0.2.0",
+    "fusion-plugin-font-loader-react": "0.2.1",
     "fusion-plugin-i18n-react": "^0.1.9",
     "fusion-plugin-jwt": "^0.1.8",
     "fusion-plugin-node-performance-emitter": "^0.1.9",
@@ -59,7 +58,7 @@
     "eslint-plugin-react": "^7.4.0",
     "flow-bin": "^0.59.0",
     "nightmare": "^2.10.0",
-    "nightwatch": "^0.9.16",
+    "nightwatch": "^0.9.19",
     "node-fetch": "^1.7.3",
     "prettier": "1.8.2",
     "react-addons-test-utils": "^15.6.2",

src/components/custom-fonts.js

@@ -3,17 +3,17 @@ import {styled} from 'fusion-plugin-styletron-react';
 import {withFontLoading as FontHOC} from 'fusion-plugin-font-loader-react';
 
 // FIXME: as of React 16, <div> props are written to html (e.g. fontstyles)
-const FancyLink1 = FontHOC('Lato-Bold')(
+const FancyLink1 = FontHOC('lato-bold')(
   styled('a', props => ({
     ':hover': {fontSize: `${props.answer}px`},
     ...props.fontStyles,
   }))
 );
-const FancyLink2 = FontHOC('Lato-Italic')(
+const FancyLink2 = FontHOC('lato-italic')(
   styled('div', props => ({...props.fontStyles}))
 );
 
-const FontedContainer = FontHOC('Lato-Regular')(
+const FontedContainer = FontHOC('lato-regular')(
   styled('div', props => ({
     background: 'lightgreen',
     border: '5px solid pink',
@@ -32,7 +32,7 @@ export default class CustomFonts extends Component {
         <FancyLink1 href="#" answer={42}>
           Here is Bold
         </FancyLink1>
-        <FancyLink2>Here is thin</FancyLink2>
+        <FancyLink2 id="fancy-link-2">Here is thin</FancyLink2>
       </FontedContainer>
     );
   }

src/components/polyfill-tests.js

@@ -13,6 +13,9 @@ export default class PolyfillsTest extends React.Component {
       arrayInclude: null,
       arrayFind: null,
       promise: null,
+      weakMap: null,
+      map: null,
+      set: null,
     };
   }
 
@@ -48,10 +51,24 @@ export default class PolyfillsTest extends React.Component {
     // Map
     let map = typeof Map === 'function' && new Map();
     const key = {};
+    const value = {};
     if (map) {
-      map.set(key, 'value');
+      map.set(key, value);
     }
-    map = map && map.get(key) === 'value';
+    map = map && map.get(key) === value;
+
+    // Weak Map
+    let weakMap = typeof WeakMap === 'function' && new WeakMap();
+    const weakKey = {};
+    const weakValue = {};
+    if (weakMap) {
+      weakMap.set(weakKey, weakValue);
+    }
+    weakMap = weakMap && weakMap.get(weakKey) === weakValue;
+
+    // Set
+    let set = typeof Set === 'function' && new Set([1, 2, 3, 1, 2]);
+    set = set && set.size === 3;
 
     // Promise
     if (typeof Promise === 'function') {
@@ -64,7 +81,15 @@ export default class PolyfillsTest extends React.Component {
       this.setState({promise: false});
     }
 
-    this.setState({symbol, objectAssign, arrayInclude, arrayFind, map});
+    this.setState({
+      symbol,
+      objectAssign,
+      arrayInclude,
+      arrayFind,
+      map,
+      weakMap,
+      set,
+    });
   }
 
   render() {
@@ -87,6 +112,12 @@ export default class PolyfillsTest extends React.Component {
         {this.state.map !== null ? (
           <div id="map">{`map: ${this.state.map}`}</div>
         ) : null}
+        {this.state.weakMap !== null ? (
+          <div id="weakMap">{`weakMap: ${this.state.weakMap}`}</div>
+        ) : null}
+        {this.state.set !== null ? (
+          <div id="set">{`set: ${this.state.set}`}</div>
+        ) : null}
         {this.state.promise !== null ? (
           <div id="promise">{`promise: ${this.state.promise}`}</div>
         ) : null}

src/components/root.js

@@ -56,7 +56,7 @@ const Root = (
       <li id="image">
         <Link to="/image">Image</Link>
       </li>
-      <li>
+      <li id="split">
         <Link to="/split">Split</Link>
       </li>
       <li>
@@ -65,10 +65,10 @@ const Root = (
       <li>
         <Link to="/styletron">CSS styled (Styletron)</Link>
       </li>
-      <li>
+      <li id="custom-fonts">
         <Link to="/custom-fonts">Custom Fonts</Link>
       </li>
-      <li>
+      <li id="translations">
         <Link to="/translations">Translations</Link>
       </li>
       <li>

src/components/split-example.js

@@ -1,5 +1,5 @@
 import React from 'react';
 
 export default function bundleSplitComponent() {
-  return <div>This should be async loaded</div>;
+  return <div id="split-example">This should be async loaded</div>;
 }

src/components/translations.js

@@ -7,7 +7,9 @@ export default withTranslations(['raw', 'interpolated'])(({translate}) => {
       <h1>Translations example</h1>
       <ul>
         <li>{translate('raw')}</li>
-        <li>{translate('interpolated', {thing: 'doge'})}</li>
+        <li id="doge-translation">
+          {translate('interpolated', {thing: 'doge'})}
+        </li>
         <li>
           <Translate id="some.translation.key" />
         </li>

src/font-config.js

@@ -9,31 +9,31 @@ Purpose
 import {assetUrl} from 'fusion-core';
 export const preloadDepth = 1;
 export const fonts = {
-  'Lato-Regular': {
+  'lato-regular': {
     urls: {
       woff2: assetUrl('./static/lato-regular-webfont.woff2'),
     },
     fallback: {
       name: 'Helvetica',
     },
   },
-  'Lato-Bold': {
+  'lato-bold': {
     urls: {
       woff2: assetUrl('./static/lato-bold-webfont.woff2'),
     },
     fallback: {
-      name: 'Lato-Regular',
+      name: 'lato-regular',
       styles: {
         'font-weight': 'bold',
       },
     },
   },
-  'Lato-Italic': {
+  'lato-italic': {
     urls: {
       woff2: assetUrl('./static/lato-italic-webfont.woff2'),
     },
     fallback: {
-      name: 'Lato-Regular',
+      name: 'lato-regular',
       styles: {
         'font-style': 'italic',
       },

src/test/browser/index.js

@@ -7,16 +7,38 @@ module.exports = {
       .url('http://localhost:3000')
       .waitForElementVisible('#root', 10000)
       .assert.containsText('#root h1', 'Hello')
+
       .waitForElementVisible('li#image', 2000)
       .click('li#image a')
       .waitForElementVisible('img', 2000)
       .pause(1000)
+
+      .waitForElementVisible('li#split', 2000)
+      .click('li#split a')
+      .waitForElementVisible('div#split-example', 2000)
+      .assert.containsText('div#split-example', 'This should be async loaded')
+      .pause(1000)
+
+      .waitForElementVisible('li#custom-fonts', 2000)
+      .click('li#custom-fonts a')
+      .waitForElementVisible('div#fancy-link-2', 2000)
+      .expect.element('div#fancy-link-2')
+      .to.have.css('font-family')
+      .which.contains('lato');
+    browser
+
+      .waitForElementVisible('li#translations', 2000)
+      .click('li#translations a')
+      .waitForElementVisible('li#doge-translation', 2000)
+      .assert.containsText('li#doge-translation', 'doge')
+      .pause(1000)
       .end();
   },
 
   'Polyfill Testing': function(browser) {
     // For reasons unknown. Nightmare overrides polyfills in execute functions.
-    // So we need to insert polyfill reuslts in the DOM
+    // So we need to insert polyfill results in the DOM
+    // See /components/polyfill-tests.js
     browser
       .url('http://localhost:3000')
       .waitForElementVisible('#root', 10000)
@@ -32,6 +54,10 @@ module.exports = {
       .assert.containsText('#arrayfind', 'array.find: true')
       .waitForElementVisible('#map', 10000)
       .assert.containsText('#map', 'map: true')
+      .waitForElementVisible('#weakMap', 10000)
+      .assert.containsText('#weakMap', 'weakMap: true')
+      .waitForElementVisible('#set', 10000)
+      .assert.containsText('#set', 'set: true')
       .waitForElementVisible('#promise', 10000)
       .assert.containsText('#promise', 'promise: true')
       .end();