feat(infrastructure): react router screenshots (#232)

Author: Matt Goo

.travis.yml

@@ -37,4 +37,4 @@ matrix:
         - docker pull mdcreact/screenshots
         - docker image ls
       script:
-        - docker run -it --rm --cap-add=SYS_ADMIN -e MDC_GCLOUD_SERVICE_ACCOUNT_KEY="${MDC_GCLOUD_SERVICE_ACCOUNT_KEY}" mdcreact/screenshots /bin/sh -c "git fetch; git checkout \"${CURRENT_BRANCH}\"; git pull; npm i; /home/pptruser/material-components-web-react/test/screenshot/start.sh; sleep 330s; npm run test:image-diff"
+        - docker run -it --rm --cap-add=SYS_ADMIN -e MDC_GCLOUD_SERVICE_ACCOUNT_KEY="${MDC_GCLOUD_SERVICE_ACCOUNT_KEY}" mdcreact/screenshots /bin/sh -c "git fetch; git checkout \"${CURRENT_BRANCH}\"; git pull; npm i; /home/pptruser/material-components-web-react/test/screenshot/start.sh; sleep 30s; npm run test:image-diff"

package-lock.json

@@ -18,7 +18,7 @@
     "test:watch": "karma start karma.local.js --auto-watch",
     "test:unit": "npm run clean && NODE_ENV=test karma start karma.local.js --single-run",
     "test:unit-ci": "karma start karma.ci.js --single-run",
-    "test:image-diff": "MDC_COMMIT_HASH=$(git rev-parse --short HEAD) MDC_BRANCH_NAME=$(git rev-parse --abbrev-ref HEAD) mocha --compilers js:babel-core/register --ui tdd --timeout 90000 test/screenshot/diff-suite.js",
+    "test:image-diff": "MDC_COMMIT_HASH=$(git rev-parse --short HEAD) MDC_BRANCH_NAME=$(git rev-parse --abbrev-ref HEAD) mocha --compilers js:babel-core/register --ui tdd --timeout 10000 test/screenshot/diff-suite.js",
     "test:screenshots": "docker run -it --rm --cap-add=SYS_ADMIN -e MDC_GCLOUD_SERVICE_ACCOUNT_KEY=\"${MDC_GCLOUD_SERVICE_ACCOUNT_KEY}\" mdcreact/screenshots /bin/sh -c 'git checkout master; git pull; npm i; /home/pptruser/material-components-web-react/test/screenshot/start.sh; sleep 200s; npm run test:image-diff'",
     "upload:screenshots": "node ./test/screenshot/upload-screenshots.js"
   },
@@ -97,6 +97,7 @@
     "puppeteer": "^1.1.1",
     "react": "^16.4.2",
     "react-dom": "^16.4.2",
+    "react-router-dom": "^4.3.1",
     "resemblejs": "^2.10.3",
     "sass-loader": "^6.0.7",
     "testdouble": "^3.6.0",

package.json

@@ -23,7 +23,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import {MDCSelectFoundation} from '@material/select';
+import {MDCSelectFoundation} from '@material/select/dist/mdc.select';
 
 import FloatingLabel from '@material/react-floating-label';
 import LineRipple from '@material/react-line-ripple';

packages/select/index.js

@@ -24,7 +24,8 @@ const webpack = require('webpack');
 const {readdirSync, lstatSync} = require('fs');
 const path = require('path');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
-
+const {readMaterialPackages} = require('../scripts/package-json-reader');
+const {convertToImportPaths} = require('../scripts/package-name-converter');
 const {importer} = require('./webpack.util');
 
 const isDirectory = (source) => lstatSync(source).isDirectory();
@@ -75,31 +76,10 @@ function getCommonWebpackParams(entryPath, chunk, {isCss, modules}) {
 }
 
 function getMaterialExternals() {
-  const dashedToCamel = (name) => name.replace(/-(\w)/g, (_, v) => v.toUpperCase());
   const externals = {};
-  [
-    'base',
-    'button',
-    'card',
-    'chips',
-    'fab',
-    'floating-label',
-    'line-ripple',
-    'list',
-    'notched-outline',
-    'ripple',
-    'select',
-    'tab',
-    'tab-indicator',
-    'tab-scroller',
-    'textfield',
-    'top-app-bar',
-    'typography',
-  ].forEach((name) => {
-    // this can be reverted when we change back to @material/foo-package-filename
-    // https://github.com/material-components/material-components-web/pull/3245
-    const fileName = `@material/${name}/dist/mdc.${dashedToCamel(name)}`;
-    externals[fileName] = fileName;
+  const importPaths = convertToImportPaths(readMaterialPackages());
+  importPaths.forEach((importPath) => {
+    externals[importPath] = importPath;
   });
   return externals;
 }

packages/webpack.config.js

@@ -0,0 +1,21 @@
+const fs = require('fs');
+const {resolve, join} = require('path');
+const packageJson = JSON.parse(fs.readFileSync(resolve(__dirname, '../package.json'), 'utf8'));
+
+
+const readMaterialPackages = () => {
+  const dependencies = [
+    // must manually add any packages not in material-components-web-react/package.json
+    'base',
+  ];
+
+  for (let dep in packageJson.devDependencies) {
+    if (dep.startsWith('@material/')) {
+      dependencies.push(dep);
+    }
+  }
+  return dependencies;
+}
+
+
+module.exports = {readMaterialPackages};

scripts/package-json-reader.js

@@ -0,0 +1,15 @@
+const {basename} = require('path');
+
+const dashedToCamel = (name) => name.replace(/-(\w)/g, (_, v) => v.toUpperCase());
+
+const convertToImportPaths = (packageNames) => {
+  const importPaths = [];
+  return packageNames.map((packageName) => {
+    const name = basename(packageName);
+    // this can be reverted when we change back to @material/foo-package-filename
+    // https://github.com/material-components/material-components-web/pull/3245
+    return `@material/${name}/dist/mdc.${dashedToCamel(name)}`;
+  });
+}
+
+module.exports = {convertToImportPaths};

scripts/package-name-converter.js

@@ -0,0 +1,33 @@
+const {lstatSync, readdirSync} = require('fs');
+const {basename, join, resolve} = require('path');
+
+const denyList = [
+  'chips',
+  'images'
+];
+const isDirectory = source => lstatSync(source).isDirectory();
+const getDirectories = source =>
+  readdirSync(source).map(name => join(source, name)).filter(isDirectory);
+
+function read(
+  components = [],
+  path = resolve(__dirname, '../test/screenshot'),
+  parentDirectory = ''
+) {
+  const directories = getDirectories(path);
+  directories.forEach((directory) => {
+    const packageName = basename(directory);
+    if (denyList.includes(packageName)) return;
+
+    // recursively get sub directories
+    const subDirectories = getDirectories(resolve(path, packageName));
+    if (subDirectories.length > 0) {
+      read(components, resolve(path, packageName), packageName);
+    }
+    components.push(`${parentDirectory ? parentDirectory + '/' : ''}${packageName}`);
+  });
+
+  return components;
+}
+
+module.exports = {read};

scripts/screenshot-directory-reader.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import {Link} from 'react-router-dom';
+
+const convertPathNameToSpaces = (name) => name.replace(/-(\w)|\/(\w)/g, (_, first, second) => {
+  // first is if the word has a `-` appended to the beginning
+  // second i if the word has a `/` appended to the beginning
+  return ` ${first ? first : second}`;
+});
+
+const Home = () => {
+  return (
+    <div>
+      {/* COMPONENTS is a global variable defined by webpack found in the
+        webpack.DefinePlugin */}
+      {COMPONENTS.sort().map((componentPath, index) => (
+        <div key={index}>
+          <Link to={componentPath}>{convertPathNameToSpaces(componentPath)}</Link>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default Home;