topcoder-platform · PrakashDurlabhji · Aug 9, 2018 · Aug 16, 2018 · Aug 16, 2018 · Sep 6, 2018
diff --git a/__tests__/server/__snapshots__/renderer.jsx.snap b/__tests__/server/__snapshots__/renderer.jsx.snap
@@ -2,10 +2,12 @@
 
 exports[`Base rendering of HTML template 1`] = `
 "<!DOCTYPE html>
-        <html>
+        <html lang=\\"en\\">
           <head>
 
 
+            <meta name=\\"theme-color\\" content=\\"#FFFFFF\\"/>
+            <link rel=\\"manifest\\" href=\\"/test/public/path/manifest.json\\">
             <link
               href=\\"/test/public/path/main-1511941200000.css\\"
               id=\\"tru-style\\"
@@ -40,10 +42,12 @@ exports[`Base rendering of HTML template 1`] = `
 
 exports[`Config overriding for injection 1`] = `
 "<!DOCTYPE html>
-        <html>
+        <html lang=\\"en\\">
           <head>
 
 
+            <meta name=\\"theme-color\\" content=\\"#FFFFFF\\"/>
+            <link rel=\\"manifest\\" href=\\"/test/public/path/manifest.json\\">
             <link
               href=\\"/test/public/path/main-1511941200000.css\\"
               id=\\"tru-style\\"
@@ -78,10 +82,12 @@ exports[`Config overriding for injection 1`] = `
 
 exports[`Hemlet integration works 1`] = `
 "<!DOCTYPE html>
-        <html>
+        <html lang=\\"en\\">
           <head>
             <title data-react-helmet=\\"true\\">Test Page Title</title>
             <meta data-react-helmet=\\"true\\" property=\\"description\\" content=\\"Test Page Description\\"/>
+            <meta name=\\"theme-color\\" content=\\"#FFFFFF\\"/>
+            <link rel=\\"manifest\\" href=\\"/test/public/path/manifest.json\\">
             <link
               href=\\"/test/public/path/main-1511941200000.css\\"
               id=\\"tru-style\\"
@@ -116,10 +122,12 @@ exports[`Hemlet integration works 1`] = `
 
 exports[`Injection of additional JS scripts 1`] = `
 "<!DOCTYPE html>
-        <html>
+        <html lang=\\"en\\">
           <head>
 
 
+            <meta name=\\"theme-color\\" content=\\"#FFFFFF\\"/>
+            <link rel=\\"manifest\\" href=\\"/test/public/path/manifest.json\\">
             <link
               href=\\"/test/public/path/main-1511941200000.css\\"
               id=\\"tru-style\\"
@@ -154,10 +162,12 @@ exports[`Injection of additional JS scripts 1`] = `
 
 exports[`Server-side rendering (SSR); injection of CSS chunks & Redux state 1`] = `
 "<!DOCTYPE html>
-        <html>
+        <html lang=\\"en\\">
           <head>
             <title data-react-helmet=\\"true\\"></title>
 
+            <meta name=\\"theme-color\\" content=\\"#FFFFFF\\"/>
+            <link rel=\\"manifest\\" href=\\"/test/public/path/manifest.json\\">
             <link
               href=\\"/test/public/path/main-1511941200000.css\\"
               id=\\"tru-style\\"
@@ -193,10 +203,12 @@ exports[`Server-side rendering (SSR); injection of CSS chunks & Redux state 1`]
 exports[`Setting of response HTTP status the server-side rendering 1`] = `
 "HTTP STATUS: 404
 <!DOCTYPE html>
-        <html>
+        <html lang=\\"en\\">
           <head>
             <title data-react-helmet=\\"true\\"></title>
 
+            <meta name=\\"theme-color\\" content=\\"#FFFFFF\\"/>
+            <link rel=\\"manifest\\" href=\\"/test/public/path/manifest.json\\">
             <link
               href=\\"/test/public/path/main-1511941200000.css\\"
               id=\\"tru-style\\"

diff --git a/__tests__/shared/components/Modal.jsx b/__tests__/shared/components/Modal.jsx
@@ -0,0 +1,49 @@
+import Modal, { BaseModal } from 'components/Modal';
+import React from 'react';
+import ReactDom from 'react-dom';
+import {
+  findInDomByClass,
+  renderDom,
+  simulate,
+  snapshot,
+} from 'utils/jest';
+
+beforeAll(() => {
+  /* Modal uses ReactJS portals to ensure proper rendering. react-test-renderer,
+   * used by utils/jest under the hood, does not support it properly, thus this
+   * simple mock for the createPortal(..) function. */
+  ReactDom.createPortal = jest.fn(element => (
+    <div className="MOCK_PORTAL">
+      {element}
+    </div>
+  ));
+});
+
+test('Snapshot match', () => {
+  snapshot(<Modal>CONTENT</Modal>);
+});
+
+test('onCancel', () => {
+  const onCancel = jest.fn();
+  const dom = renderDom((
+    <BaseModal
+      onCancel={onCancel}
+      theme={{ overlay: 'overlay' }}
+    />
+  ));
+  const overlay = findInDomByClass(dom, 'overlay');
+  simulate.click(overlay);
+  expect(onCancel).toHaveBeenCalled();
+});
+
+test('onWheel', () => {
+  const dom = renderDom((
+    <BaseModal
+      theme={{ container: 'container' }}
+    />
+  ));
+  const container = findInDomByClass(dom, 'container');
+  const stopPropagation = jest.fn();
+  simulate.wheel(container, { stopPropagation });
+  expect(stopPropagation).toHaveBeenCalled();
+});
diff --git a/__tests__/shared/components/__snapshots__/Modal.jsx.snap b/__tests__/shared/components/__snapshots__/Modal.jsx.snap
@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Snapshot match 1`] = `
+<div
+  className="MOCK_PORTAL"
+>
+  <div
+    className="style__container___1SoeQ"
+    onWheel={[Function]}
+  >
+    CONTENT
+  </div>
+  <button
+    className="style__overlay___X12tn"
+    onClick={[Function]}
+    type="button"
+  />
+</div>
+`;
diff --git a/src/server/renderer.jsx b/src/server/renderer.jsx
@@ -184,10 +184,12 @@ export default function factory(webpackConfig, options) {
 
       res.send((
         `<!DOCTYPE html>
-        <html>
+        <html lang="en">
           <head>
             ${helmet ? helmet.title.toString() : ''}
             ${helmet ? helmet.meta.toString() : ''}
+            <meta name="theme-color" content="#FFFFFF"/>
+            <link rel="manifest" href="${publicPath}manifest.json">
             <link
               href="${publicPath}main-${timestamp}.css"
               id="tru-style"

diff --git a/src/server/server.js b/src/server/server.js
@@ -44,6 +44,14 @@ export default async function factory(webpackConfig, options) {
     }),
   }));
 
+  const exludeSW = middleware => (req, res, next) => {
+    if (req.url.indexOf('/sw.js') > -1) {
+      next();
+      return;
+    }
+    middleware(req, res, next);
+  };
+
   /* Setup of Hot Module Reloading for development environment.
    * These dependencies are not used, nor installed for production use,
    * hence we should violate some import-related lint rules. */
@@ -56,18 +64,19 @@ export default async function factory(webpackConfig, options) {
     const webpackHotMiddleware = require('webpack-hot-middleware');
     const compiler = webpack(webpackConfig);
     compiler.apply(new webpack.ProgressPlugin());
-    server.use(webpackDevMiddleware(compiler, {
+    server.use(exludeSW(webpackDevMiddleware(compiler, {
       name: 'main.js',
       publicPath,
       serverSideRender: true,
-    }));
-    server.use(webpackHotMiddleware(compiler));
+    })));
+    server.use(exludeSW(webpackHotMiddleware(compiler)));
   }
   /* eslint-enable global-require */
   /* eslint-enable import/no-extraneous-dependencies */
   /* eslint-enable import/no-unresolved */
 
-  server.use(publicPath, express.static(webpackConfig.output.path));
+  server.use(publicPath, exludeSW(express.static(webpackConfig.output.path)));
+
   if (options.onExpressJsSetup) {
     await options.onExpressJsSetup(server);
   }

diff --git a/src/shared/components/Button.jsx b/src/shared/components/Button.jsx
@@ -71,6 +71,7 @@ export default function Button({
       onClick={onClick}
       onMouseDown={onMouseDown}
       type={type}
+      tabIndex={0}
     >
       {children}
     </button>

diff --git a/src/shared/components/Modal/index.jsx b/src/shared/components/Modal/index.jsx
@@ -19,7 +19,7 @@ import defaultStyle from './style.scss';
 
 /* NOTE: Modal component is implemented as class, as it demands advanced
  * interaction with DOM upon mount and unmount. */
-class Modal extends React.Component {
+class BaseModal extends React.Component {
   constructor(props) {
     super(props);
     this.portal = document.createElement('div');
@@ -62,19 +62,19 @@ class Modal extends React.Component {
   }
 }
 
-Modal.defaultProps = {
+BaseModal.defaultProps = {
   onCancel: _.noop,
   children: null,
   theme: {},
 };
 
-Modal.propTypes = {
+BaseModal.propTypes = {
   onCancel: PT.func,
   children: PT.node,
   theme: PT.shape(),
 };
 
 /* Non-themed version of the Modal. */
-export const BaseModal = Modal;
+export { BaseModal };
 
-export default themr('Modal', defaultStyle)(Modal);
+export default themr('Modal', defaultStyle)(BaseModal);