Test webpack plugins

Author: Enoah Netzach

packages/react-scripts/templates/kitchensink/integration/initDOM.js

@@ -48,7 +48,7 @@ export default feature => new Promise(async resolve => {
   const host = process.env.E2E_URL || 'http://localhost:3000'
   const doc = jsdom.jsdom(markup, {
     features : {
-      FetchExternalResources : ['script'],
+      FetchExternalResources : ['script', 'css'],
       ProcessExternalResources : ['script'],
     },
     resourceLoader,

packages/react-scripts/templates/kitchensink/integration/webpack.test.js

@@ -0,0 +1,46 @@
+import initDOM from './initDOM'
+
+// eslint-disable-next-line no-undef
+jasmine.DEFAULT_TIMEOUT_INTERVAL = 10000
+
+describe('Integration', () => {
+  describe('Webpack plugins', () => {
+    it('css inclusion', async () => {
+      const doc = await initDOM('css-inclusion')
+
+      expect(doc.getElementsByTagName('style')[0].textContent.replace(/\s/g, ''))
+        .toMatch(/#feature-css-inclusion\{background:.+;color:.+}/)
+    })
+
+    it('image inclusion', async () => {
+      const doc = await initDOM('image-inclusion')
+
+      expect(doc.getElementById('feature-image-inclusion').src).toMatch(/^data:image\/jpeg;base64.+==$/)
+    })
+
+    it('no ext inclusion', async () => {
+      const doc = await initDOM('no-ext-inclusion')
+
+      expect(doc.getElementById('feature-no-ext-inclusion').textContent)
+        .toBe('This is just a file without an extension.')
+    })
+
+    it('json inclusion', async () => {
+      const doc = await initDOM('json-inclusion')
+
+      expect(doc.getElementById('feature-json-inclusion').textContent).toBe('This is an abstract.')
+    })
+
+    it('svg inclusion', async () => {
+      const doc = await initDOM('svg-inclusion')
+
+      expect(doc.getElementById('feature-svg-inclusion').src).toMatch(/\/static\/media\/logo\..+\.svg$/)
+    })
+
+    it('unknown ext inclusion', async () => {
+      const doc = await initDOM('unknown-ext-inclusion')
+
+      expect(doc.getElementById('feature-unknown-ext-inclusion').textContent).toBe('Whoooo, spooky!.')
+    })
+  })
+})

packages/react-scripts/templates/kitchensink/src/App.css

@@ -34,6 +34,11 @@ class App extends React.Component {
           this.setState({ feature: require('./features/syntax/ComputedProperties').default })
         );
         break;
+      case 'css-inclusion':
+        require.ensure(['./features/webpack/CssInclusion'], () =>
+          this.setState({ feature: require('./features/webpack/CssInclusion').default })
+        );
+        break;
       case 'custom-interpolation':
         require.ensure(['./features/syntax/CustomInterpolation'], () =>
           this.setState({ feature: require('./features/syntax/CustomInterpolation').default })
@@ -59,11 +64,26 @@ class App extends React.Component {
           this.setState({ feature: require('./features/syntax/Generators').default })
         );
         break;
+      case 'image-inclusion':
+        require.ensure(['./features/webpack/ImageInclusion'], () =>
+          this.setState({ feature: require('./features/webpack/ImageInclusion').default })
+        );
+        break;
+      case 'json-inclusion':
+        require.ensure(['./features/webpack/JsonInclusion'], () =>
+          this.setState({ feature: require('./features/webpack/JsonInclusion').default })
+        );
+        break;
       case 'node-path':
         require.ensure(['./features/env/NodePath'], () =>
           this.setState({ feature: require('./features/env/NodePath').default })
         );
         break;
+      case 'no-ext-inclusion':
+        require.ensure(['./features/webpack/NoExtInclusion'], () =>
+          this.setState({ feature: require('./features/webpack/NoExtInclusion').default })
+        );
+        break;
       case 'object-destructuring':
         require.ensure(['./features/syntax/ObjectDestructuring'], () =>
           this.setState({ feature: require('./features/syntax/ObjectDestructuring').default })
@@ -94,11 +114,21 @@ class App extends React.Component {
           this.setState({ feature: require('./features/env/ShellEnvVariables').default })
         );
         break;
+      case 'svg-inclusion':
+        require.ensure(['./features/webpack/SvgInclusion'], () =>
+          this.setState({ feature: require('./features/webpack/SvgInclusion').default })
+        );
+        break;
       case 'template-interpolation':
         require.ensure(['./features/syntax/TemplateInterpolation'], () =>
           this.setState({ feature: require('./features/syntax/TemplateInterpolation').default })
         );
         break;
+      case 'unknown-ext-inclusion':
+        require.ensure(['./features/webpack/UnknownExtInclusion'], () =>
+          this.setState({ feature: require('./features/webpack/UnknownExtInclusion').default })
+        );
+        break;
       default:
         this.setState({ feature: null });
         break;

packages/react-scripts/templates/kitchensink/src/App.js

@@ -0,0 +1,6 @@
+import React from 'react'
+import './assets/style.css'
+
+export default () => (
+  <p id="feature-css-inclusion">We love useless text.</p>
+)

packages/react-scripts/templates/kitchensink/src/aFileWithExt.unknown

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import CssInclusion from './CssInclusion';
+
+describe('css inclusion', () => {
+  it('renders without crashing', () => {
+    const div = document.createElement('div');
+    ReactDOM.render(<CssInclusion />, div);
+  });
+});

packages/react-scripts/templates/kitchensink/src/aFileWithoutExt

@@ -0,0 +1,6 @@
+import React from 'react'
+import tiniestCat from './assets/tiniest-cat.jpg'
+
+export default () => (
+  <img id="feature-image-inclusion" src={tiniestCat} alt="tiniest cat" />
+)

packages/react-scripts/templates/kitchensink/src/abstract.json

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import ImageInclusion from './ImageInclusion';
+
+describe('image inclusion', () => {
+  it('renders without crashing', () => {
+    const div = document.createElement('div');
+    ReactDOM.render(<ImageInclusion />, div);
+  });
+});

packages/react-scripts/templates/kitchensink/src/features/webpack/CssInclusion.js

@@ -0,0 +1,6 @@
+import React from 'react'
+import { abstract } from './assets/abstract.json'
+
+export default () => (
+  <summary id="feature-json-inclusion">{abstract}</summary>
+)

packages/react-scripts/templates/kitchensink/src/features/webpack/CssInclusion.test.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import JsonInclusion from './JsonInclusion';
+
+describe('JSON inclusion', () => {
+  it('renders without crashing', () => {
+    const div = document.createElement('div');
+    ReactDOM.render(<JsonInclusion />, div);
+  });
+});

packages/react-scripts/templates/kitchensink/src/features/webpack/ImageInclusion.js

@@ -0,0 +1,10 @@
+import React from 'react'
+import aFileWithoutExt from './assets/aFileWithoutExt'
+
+const text = aFileWithoutExt.includes('base64')
+  ? atob(aFileWithoutExt.split('base64,')[1]).trim()
+  : aFileWithoutExt
+
+export default () => (
+  <p id="feature-no-ext-inclusion">{text}.</p>
+)

packages/react-scripts/templates/kitchensink/src/features/webpack/ImageInclusion.test.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import NoExtInclusion from './NoExtInclusion';
+
+describe('no ext inclusion', () => {
+  it('renders without crashing', () => {
+    const div = document.createElement('div');
+    ReactDOM.render(<NoExtInclusion />, div);
+  });
+});

packages/react-scripts/templates/kitchensink/src/features/webpack/JsonInclusion.js

@@ -0,0 +1,6 @@
+import React from 'react'
+import logo from './assets/logo.svg'
+
+export default () => (
+  <img id="feature-svg-inclusion" src={logo} alt="logo" />
+)

packages/react-scripts/templates/kitchensink/src/features/webpack/JsonInclusion.test.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import SvgInclusion from './SvgInclusion';
+
+describe('svg inclusion', () => {
+  it('renders without crashing', () => {
+    const div = document.createElement('div');
+    ReactDOM.render(<SvgInclusion />, div);
+  });
+});

packages/react-scripts/templates/kitchensink/src/features/webpack/NoExtInclusion.js

@@ -0,0 +1,10 @@
+import React from 'react'
+import aFileWithExtUnknown from './assets/aFileWithExt.unknown'
+
+const text = aFileWithExtUnknown.includes('base64')
+  ? atob(aFileWithExtUnknown.split('base64,')[1]).trim()
+  : aFileWithExtUnknown
+
+export default () => (
+  <p id="feature-unknown-ext-inclusion">{text}.</p>
+)

packages/react-scripts/templates/kitchensink/src/features/webpack/NoExtInclusion.test.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import UnknownExtInclusion from './UnknownExtInclusion';
+
+describe('unknown ext inclusion', () => {
+  it('renders without crashing', () => {
+    const div = document.createElement('div');
+    ReactDOM.render(<UnknownExtInclusion />, div);
+  });
+});

packages/react-scripts/templates/kitchensink/src/features/webpack/SvgInclusion.js

@@ -0,0 +1 @@
+Whoooo, spooky!

packages/react-scripts/templates/kitchensink/src/features/webpack/SvgInclusion.test.js

@@ -0,0 +1 @@
+This is just a file without an extension

packages/react-scripts/templates/kitchensink/src/features/webpack/UnknownExtInclusion.js

@@ -0,0 +1,3 @@
+{
+  "abstract": "This is an abstract."
+}

packages/react-scripts/templates/kitchensink/src/features/webpack/UnknownExtInclusion.test.js

@@ -0,0 +1,4 @@
+#feature-css-inclusion {
+  background: palevioletred;
+  color: papayawhip;
+}

packages/react-scripts/templates/kitchensink/src/features/webpack/assets/aFileWithExt.unknown

@@ -1,7 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
-import './index.css';
 
 ReactDOM.render(
   <App />,

packages/react-scripts/templates/kitchensink/src/features/webpack/assets/aFileWithoutExt

@@ -153,9 +153,6 @@ NODE_PATH=src REACT_APP_SHELL_ENV_MESSAGE=fromtheshell npm run build
 # Check for expected output
 test -e build/*.html
 test -e build/static/js/main.*.js
-test -e build/static/css/main.*.css
-# test -e build/static/media/*.svg # TODO uncomment this line
-# test -e build/favicon.ico # TODO uncomment this line
 
 # Unit tests
 REACT_APP_SHELL_ENV_MESSAGE=fromtheshell \
@@ -205,9 +202,6 @@ NODE_PATH=src REACT_APP_SHELL_ENV_MESSAGE=fromtheshell npm run build
 # Check for expected output
 test -e build/*.html
 test -e build/static/js/main.*.js
-test -e build/static/css/main.*.css
-# test -e build/static/media/*.svg # TODO uncomment this line
-# test -e build/favicon.ico # TODO uncomment this line
 
 # Unit tests
 REACT_APP_SHELL_ENV_MESSAGE=fromtheshell \