Support max num routes, fix vcs comment of extra nested data (#142)

* Support max num routes, fix vcs comment of extra nested data

* No need for this since we filter now

* Fix tests

* Try onlyFailures on comment

* Fix up circleci config for example testing

* Use browsers docker image

* Update deps for gimbal

* fix unit tests

* fix error

Author: mitchellsimoens

.circleci/config.yml

@@ -14,20 +14,22 @@ aliases:
       - packages/plugin-mysql/node_modules
       - packages/plugin-sqlite/node_modules
   - &restore-example-cache
-    key: v1-dependencies-{{ checksum "yarn.lock" }}
+    key: v1-dependencies-{{ checksum "examples/angular/yarn.lock" }}-{{ checksum "examples/react/yarn.lock" }}
     name: Restoring examples node_modules/ cache
   - &save-example-cache
-    key: v1-dependencies-{{ checksum "yarn.lock" }}
+    key: v1-dependencies-{{ checksum "examples/angular/yarn.lock" }}-{{ checksum "examples/react/yarn.lock" }}
     name: Saving examples node_modules/ cache
     paths:
+      - examples/angular/dist
       - examples/angular/node_modules
       - examples/angular/gimbal.db
+      - examples/react/build
       - examples/react/node_modules
       - examples/react/gimbal.db
 
 docker-defaults: &docker-defaults
   docker:
-    - image: circleci/node:10-browsers
+    - image: circleci/node:12-browsers
 
 defaults: &defaults
   <<: *docker-defaults

bin/build_examples.sh

@@ -18,6 +18,22 @@ EXAMPLES_DIR="$BASE_DIR/examples"
 for file in $EXAMPLES_DIR/*; do
   cd $file
 
-  yarn
+  if [[ ! -d node_modules ]]; then
+    echo
+    echo "# Installing $file example"
+    echo
+
+    yarn
+  fi
+
+  # if either of these exists, continue
+  if [[ -d build ]] || [[ -d dist ]]; then
+    continue
+  fi
+
+  echo
+  echo "# Building $file example"
+  echo
+
   yarn build
 done

examples/react/.gimbalrc.yml

@@ -6,6 +6,10 @@ audits:
   - heap-snapshot
   - source-map-explorer
 
+configs:
+  comment:
+    onlyFailures: true
+
 outputs:
   html: artifacts/gimbal.html
   json: artifacts/gimbal.json

package.json

@@ -36,22 +36,22 @@
     "@types/jest": "24.0.15",
     "@types/node": "12.6.8",
     "@typescript-eslint/eslint-plugin": "1.12.0",
-    "@typescript-eslint/parser": "1.12.0",
+    "@typescript-eslint/parser": "1.13.0",
     "@zerollup/ts-transform-paths": "1.7.3",
-    "eslint": "6.0.1",
+    "eslint": "6.1.0",
     "eslint-config-airbnb": "17.1.1",
     "eslint-config-prettier": "6.0.0",
     "eslint-import-resolver-lerna": "1.1.0",
     "eslint-import-resolver-typescript": "1.1.1",
-    "eslint-plugin-import": "2.18.0",
-    "eslint-plugin-jest": "22.10.0",
+    "eslint-plugin-import": "2.18.2",
+    "eslint-plugin-jest": "22.15.0",
     "eslint-plugin-jsx-a11y": "6.2.3",
     "eslint-plugin-prettier": "3.1.0",
-    "eslint-plugin-react": "7.14.2",
-    "husky": "3.0.0",
+    "eslint-plugin-react": "7.14.3",
+    "husky": "3.0.3",
     "jest": "24.8.0",
-    "lerna": "3.15.0",
-    "lint-staged": "9.2.0",
+    "lerna": "3.16.4",
+    "lint-staged": "9.2.1",
     "prettier": "1.18.2",
     "rimraf": "2.6.3",
     "ts-jest": "24.0.2",

packages/gimbal/package.json

@@ -73,8 +73,8 @@
   "homepage": "https://github.com/ModusCreateOrg/gimbal/tree/master/packages/gimbal#readme",
   "dependencies": {
     "@modus/gimbal-core": "1.1.11",
-    "@octokit/rest": "16.28.4",
-    "brotli-size": "3.0.1",
+    "@octokit/rest": "16.28.7",
+    "brotli-size": "4.0.0",
     "bytes": "3.1.0",
     "cli-table3": "0.5.1",
     "colors": "1.3.3",
@@ -85,14 +85,14 @@
     "globby": "10.0.1",
     "gzip-size": "5.1.1",
     "js-yaml": "3.13.1",
-    "lighthouse": "5.1.0",
+    "lighthouse": "5.2.0",
     "marked": "0.7.0",
     "minimatch": "3.0.4",
     "mkdirp": "0.5.1",
     "pidusage": "2.0.17",
-    "puppeteer": "1.18.1",
+    "puppeteer": "1.19.0",
     "read-pkg": "5.2.0",
-    "serve-handler": "6.1.0",
+    "serve-handler": "6.1.1",
     "strip-ansi": "5.2.0",
     "update-notifier": "3.0.1"
   },
@@ -106,7 +106,7 @@
     "@types/minimatch": "3.0.3",
     "@types/mkdirp": "0.5.2",
     "@types/pidusage": "2.0.1",
-    "@types/puppeteer": "1.12.4",
+    "@types/puppeteer": "1.19.0",
     "@types/read-pkg": "5.1.0",
     "@types/update-notifier": "2.5.0",
     "copyfiles": "2.1.1"

packages/gimbal/src/command/audit/index.ts

@@ -4,7 +4,7 @@ import findPort from '@modus/gimbal-core/lib/utils/port';
 import Queue from '@modus/gimbal-core/lib/utils/Queue';
 import Config from '@/config';
 import Chrome from '@/module/chrome';
-import { get } from '@/module/registry';
+import { get, getMeta } from '@/module/registry';
 import Serve from '@/module/serve';
 import { Report, ReportItem } from '@/typings/command';
 import { Modules } from '@/typings/module';
@@ -115,32 +115,41 @@ const audit = async (options: CommandOptions): Promise<Report | Report[]> => {
     const queue = new Queue();
 
     options.route.forEach((route: string, index: number): void => {
-      audits.forEach((auditToRun: string): void =>
-        addSpinner(auditToRun, { status: 'stopped', text: `[ ${auditToRun} ] - ${route}` }),
-      );
-
-      queue.add(
-        (): Promise<Report> =>
-          doAudit(
-            {
-              chrome,
-              url: `http://localhost:${servePort}${route}`,
-            },
-            audits,
-            {
-              ...options,
-              route,
-              // if we will run size module, we should only do it once since
-              // it won't change across multiple runs
-              size: options.size && index === 0,
-            },
-          ),
-      );
+      const filteredAudits = audits.filter((name: string): boolean => {
+        const meta = getMeta(name);
+
+        if (meta && meta.maxNumRoutes && index >= meta.maxNumRoutes) {
+          return false;
+        }
+
+        return true;
+      });
+
+      if (filteredAudits.length) {
+        filteredAudits.forEach((name: string): void =>
+          addSpinner(name, { status: 'stopped', text: `[ ${name} ] - ${route}` }),
+        );
+
+        queue.add(
+          (): Promise<Report> =>
+            doAudit(
+              {
+                chrome,
+                url: `http://localhost:${servePort}${route}`,
+              },
+              filteredAudits,
+              {
+                ...options,
+                route,
+              },
+            ),
+        );
+      }
     });
 
     report = (await queue.run()) as Report[];
   } else {
-    audits.forEach((auditToRun: string): void => addSpinner(auditToRun, `[ ${auditToRun} ]`));
+    audits.forEach((name: string): void => addSpinner(name, `[ ${name} ]`));
 
     report = await doAudit(
       {

packages/gimbal/src/module/size/index.ts

@@ -1,6 +1,5 @@
 import { readFile, resolvePath, stats, getDirectorySize } from '@modus/gimbal-core/lib/utils/fs';
-// @ts-ignore
-import brotliSize from 'brotli-size';
+import { sync as brotliSize } from 'brotli-size';
 import bytes from 'bytes';
 import deepmerge from 'deepmerge';
 import globby from 'globby';
@@ -27,7 +26,7 @@ type CompressionMechanisms = 'brotli' | 'gzip' | undefined;
 const getBundleSize = (source: Buffer, compression: CompressionMechanisms = 'gzip'): number => {
   switch (compression) {
     case 'brotli':
-      return brotliSize.sync(source);
+      return brotliSize(source);
     case 'gzip':
       return gzipSize.sync(source);
     default:

packages/gimbal/src/module/size/meta.ts

@@ -1,6 +1,7 @@
 import { Meta } from '@/typings/module';
 
 const meta: Meta = {
+  maxNumRoutes: 1,
   thresholdLimit: 'upper',
   thresholdType: 'size',
 };

packages/gimbal/src/vcs/comment/index.ts

@@ -16,6 +16,8 @@ import {
   Comment,
 } from '@/typings/vcs/comment';
 
+const noFailuresText = 'No Failures';
+
 const renderItem = async (
   reportItem: ReportItem,
   commandOptions: CommandOptions,
@@ -38,32 +40,34 @@ const renderItem = async (
   await EventEmitter.fire(`vcs/comment/render/table/start`, commentRenderTableStartEvent);
 
   const output = [];
+  const { onlyFailures } = comment as CommentObject;
 
   if (reportItem.data && reportItem.data[0] && reportItem.data[0].data && reportItem.data[0].data.length) {
-    const buffered = [`## ${reportItem.label}`];
-
-    await Promise.all(
-      reportItem.data.map(
-        async (childItem: ReportItem): Promise<void> => {
-          const rendered = await outputTable(childItem, commandOptions);
-
-          buffered.push(`### ${childItem.label}`, rendered);
-        },
-      ),
-    );
-
-    output.push(...buffered);
+    if (onlyFailures && !numFailed) {
+      output.push(noFailuresText);
+    } else {
+      const buffered = [`## ${reportItem.label}`];
+
+      await Promise.all(
+        reportItem.data.map(
+          async (childItem: ReportItem): Promise<void> => {
+            const rendered =
+              onlyFailures && childItem.success ? noFailuresText : await outputTable(childItem, commandOptions);
+
+            buffered.push(`### ${childItem.label}`, rendered);
+          },
+        ),
+      );
+
+      output.push(...buffered);
+    }
+  } else if (onlyFailures && reportItem.success) {
+    output.push(noFailuresText);
   } else {
-    const { onlyFailures } = comment as CommentObject;
-    const rendered =
-      onlyFailures && reportItem.success
-        ? 'No Failures'
-        : await outputTable(
-            onlyFailures && reportItem
-              ? (filterReportItemsFailures(reportItem as ReportItem) as ReportItem)
-              : reportItem,
-            commandOptions,
-          );
+    const rendered = await outputTable(
+      onlyFailures && reportItem ? (filterReportItemsFailures(reportItem as ReportItem) as ReportItem) : reportItem,
+      commandOptions,
+    );
 
     output.push(`## ${reportItem.label}`, rendered);
   }

packages/plugin-axe/src/index.ts

@@ -56,7 +56,7 @@ const getThreshold = (entry: Result, { thresholds }: Config): ThresholdValueStri
 };
 
 const isSuccessful = (entry: Result, threshold: ThresholdValueString): boolean =>
-  threshold == null ? true : impactMap[threshold] >= impactMap[entry.impact];
+  threshold == null || !entry.impact ? true : impactMap[threshold] >= impactMap[entry.impact];
 
 const parseEntry = (entry: Result, success: boolean, config: Config): ReportItem => {
   const threshold = getThreshold(entry, config);

packages/plugin-source-map-explorer/src/config.spec.ts

@@ -7,6 +7,7 @@ describe('@modus/gimbal-plugin-source-map-explorer/config', (): void => {
     });
 
     expect(meta).toEqual({
+      maxNumRoutes: 1,
       thresholdLimit: 'upper',
       thresholdType: 'size',
     });

packages/plugin-source-map-explorer/src/config.ts

@@ -21,6 +21,7 @@ export const defaultConfig: Config = {
 };
 
 export const meta: Meta = {
+  maxNumRoutes: 1,
   thresholdLimit: 'upper',
   thresholdType: 'size',
 };

packages/plugin-source-map-explorer/src/mod.spec.ts

@@ -217,7 +217,7 @@ describe('@modus/gimbal-plugin-source-map-explorer/mod', (): void => {
 
       expect(register).toHaveBeenCalledWith(
         'source-map-explorer',
-        { thresholdLimit: 'upper', thresholdType: 'size' },
+        { maxNumRoutes: 1, thresholdLimit: 'upper', thresholdType: 'size' },
         expect.any(Function),
       );
     });

packages/typings/module/index.d.ts

@@ -10,6 +10,7 @@ interface TypesMap {
 
 /* eslint-disable-next-line import/prefer-default-export */
 export interface Meta {
+  maxNumRoutes?: number;
   thresholdLimit: ReportThresholdLimit;
   thresholdType?: Types;
   thresholdTypes?: TypesMap;