modernize

.circleci/config.yml

@@ -22,4 +22,8 @@ jobs:
 
       - run:
           name: Run tests
-          command: yarn test
+          command: yarn test
+
+      - run:
+          name: Run codechecks
+          command: yarn codechecks

README.md

@@ -6,6 +6,7 @@
   <p align="center">
     <a href="https://circleci.com/gh/codechecks/build-size-watcher"><img alt="Build Status" src="https://circleci.com/gh/codechecks/build-size-watcher/tree/master.svg?style=svg"></a>
     <a href="/package.json"><img alt="Software License" src="https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat-square"></a>
+    <a href="https://codechecks.io"><img src="https://raw.githubusercontent.com/codechecks/docs/master/images/badges/badge-default.svg?sanitize=true" alt="codechecks.io"></a>
   </p>
 </p>
 

codechecks.yml

@@ -0,0 +1,7 @@
+checks:
+  - name: type-coverage-watcher
+
+  - name: ban-deps-codecheck
+    options:
+      - name: node-gyp
+        reason: "No native modules please! They make installation much harder"

package.json

@@ -39,7 +39,9 @@
     "lib/**/*"
   ],
   "devDependencies": {
-    "@codechecks/client": "^0.1.0",
+    "@codechecks/ban-deps-codecheck": "^0.1.1",
+    "@codechecks/client": "0.1.6-beta.4",
+    "@codechecks/type-coverage-watcher": "^0.1.3",
     "@types/bluebird": "^3.5.25",
     "@types/bytes": "^3.0.0",
     "@types/glob": "^7.1.1",
@@ -66,10 +68,13 @@
   },
   "dependencies": {
     "bytes": "^3.0.0",
+    "canvas": "^2.5.0",
     "get-folder-size": "^2.0.0",
     "glob": "^7.1.3",
     "gzip-size": "^5.0.0",
-    "lodash": "^4.17.11"
+    "lodash": "^4.17.11",
+    "tmp-promise": "^2.0.2",
+    "vega": "^5.4.0"
   },
   "publishConfig": {
     "access": "public"

src/__mocks__/@codechecks/client.ts

@@ -9,6 +9,18 @@ export const codechecks: Partial<typeof CC.codechecks> = {
   saveDirectory: jest.fn(),
   isPr: jest.fn(),
   context: {
+    pr: {
+      base: {
+        sha: "0ac17a3da88d14445a92128393d13c39e9a5b3ec",
+        currentBranchName: "master",
+      },
+      head: {
+        currentSha: "eeb6f98b8d0a93de251ea3e4a9d02e61ec850286",
+        currentBranchName: "kk/feature-brach-1",
+      },
+    },
+    currentSha: "eeb6f98b8d0a93de251ea3e4a9d02e61ec850286",
+    currentBranchName: "kk/feature-brach-1",
     workspaceRoot: join(__dirname, "..", ".."),
   } as any,
 };

src/__tests__/index.spec.ts

@@ -2,10 +2,13 @@ import { buildSizeWatcher } from "../index";
 import * as mockFS from "mock-fs";
 import { join } from "path";
 import { codechecks } from "@codechecks/client";
-import { FullArtifact } from "../types";
+import { generateChart } from "../charts/generateChart";
+import { FullArtifact, HistoryArtifact } from "../types";
 
 type Mocked<T> = { [k in keyof T]: jest.Mock<T[k]> };
 
+jest.mock("../charts/generateChart");
+
 describe("build-size", () => {
   const codeChecksMock = require("../__mocks__/@codechecks/client").codechecks as Mocked<
     typeof codechecks
@@ -45,27 +48,55 @@ describe("build-size", () => {
         },
       },
     ],
+    Array [
+      "build-size-history:Build Size",
+      Array [
+        Object {
+          "artifact": Object {
+            "build/main.*.js": Object {
+              "files": 1,
+              "overallSize": 26,
+              "path": "build/main.*.js",
+            },
+          },
+          "hash": "eeb6f98b8d0a93de251ea3e4a9d02e61ec850286",
+        },
+      ],
+      "kk/feature-brach-1",
+    ],
   ],
   "results": Array [
     Object {
       "isThrow": false,
       "value": undefined,
     },
+    Object {
+      "isThrow": false,
+      "value": undefined,
+    },
   ],
 }
 `);
+    expect(generateChart).toMatchInlineSnapshot(`[MockFunction]`);
   });
 
   it("should work in PR context", async () => {
     codeChecksMock.isPr.mockReturnValue(true);
-    codeChecksMock.getValue.mockReturnValue({
+    const responseArtifact: FullArtifact = {
       "build/main.*.js": {
-        name: "app",
         files: 1,
         overallSize: 10,
         path: "build/main.*.js",
       },
-    } as FullArtifact);
+    };
+    const responseHistoryArtifact: HistoryArtifact = [
+      {
+        hash: "0ac17a3da88d14445a92128393d13c39e9a5b3ec",
+        artifact: responseArtifact,
+      },
+    ];
+    codeChecksMock.getValue.mockReturnValueOnce(responseArtifact);
+    codeChecksMock.getValue.mockReturnValueOnce(responseHistoryArtifact);
     mockFS({
       [join(__dirname, "../build")]: {
         "main.12315123.js": "APP JS",
@@ -81,6 +112,9 @@ describe("build-size", () => {
           path: "build/main.*.js",
         },
       ],
+    }).catch(e => {
+      mockFS.restore();
+      throw e;
     });
 
     mockFS.restore();
@@ -108,6 +142,7 @@ describe("build-size", () => {
   ],
 }
 `);
+    expect(codechecks.getValue).toMatchInlineSnapshot();
     expect(codechecks.saveValue).toMatchInlineSnapshot(`
 [MockFunction] {
   "calls": Array [
@@ -129,6 +164,31 @@ describe("build-size", () => {
     },
   ],
 }
+`);
+    expect(generateChart).toMatchInlineSnapshot(`
+[MockFunction] {
+  "calls": Array [
+    Array [
+      "./charts/chart1.png",
+      Array [
+        Object {
+          "x": "eeb6f",
+          "y": 6,
+        },
+        Object {
+          "x": "0ac17",
+          "y": 10,
+        },
+      ],
+    ],
+  ],
+  "results": Array [
+    Object {
+      "isThrow": false,
+      "value": undefined,
+    },
+  ],
+}
 `);
   });
 
@@ -194,19 +254,47 @@ describe("build-size", () => {
     },
   ],
 }
+`);
+    expect(generateChart).toMatchInlineSnapshot(`
+[MockFunction] {
+  "calls": Array [
+    Array [
+      "./charts/chart1.png",
+      Array [
+        Object {
+          "x": "eeb6f",
+          "y": 26,
+        },
+      ],
+    ],
+  ],
+  "results": Array [
+    Object {
+      "isThrow": false,
+      "value": undefined,
+    },
+  ],
+}
 `);
   });
 
   it("should work with custom name in PR context", async () => {
     codeChecksMock.isPr.mockReturnValue(true);
-    codeChecksMock.getValue.mockReturnValue({
+    const responseArtifact: FullArtifact = {
       "build/main.*.js": {
-        name: "app",
         files: 1,
         overallSize: 10,
         path: "build/main.*.js",
       },
-    } as FullArtifact);
+    };
+    const responseHistoryArtifact: HistoryArtifact = [
+      {
+        hash: "0ac17a3da88d14445a92128393d13c39e9a5b3ec",
+        artifact: responseArtifact,
+      },
+    ];
+    codeChecksMock.getValue.mockReturnValueOnce(responseArtifact);
+    codeChecksMock.getValue.mockReturnValueOnce(responseHistoryArtifact);
     mockFS({
       [join(__dirname, "../build")]: {
         "main.12315123.js": "APP JS",
@@ -271,6 +359,31 @@ describe("build-size", () => {
     },
   ],
 }
+`);
+    expect(generateChart).toMatchInlineSnapshot(`
+[MockFunction] {
+  "calls": Array [
+    Array [
+      "./charts/chart1.png",
+      Array [
+        Object {
+          "x": "eeb6f",
+          "y": 6,
+        },
+        Object {
+          "x": "0ac17",
+          "y": 10,
+        },
+      ],
+    ],
+  ],
+  "results": Array [
+    Object {
+      "isThrow": false,
+      "value": undefined,
+    },
+  ],
+}
 `);
   });
 });

src/charts/__mocks__/generateChart.ts

@@ -0,0 +1 @@
+export const generateChart = jest.fn();

src/charts/generateChart.ts

@@ -0,0 +1,28 @@
+import * as vega from "vega";
+import * as fs from "fs";
+
+import * as chartDefinition from "./vega-spec.json";
+
+interface DataPoint {
+  x: string;
+  y: number;
+}
+
+export async function generateChart(path: string, dataPoints: DataPoint[]): Promise<void> {
+  const wrappedDataPoints = [
+    {
+      name: "main",
+      values: dataPoints.map(dp => ({ ...dp, c: 0 })),
+    },
+  ];
+  const finalChartDef: any = {
+    ...chartDefinition,
+    data: wrappedDataPoints,
+  };
+
+  const view = new vega.View(vega.parse(finalChartDef), { renderer: "none" }).initialize();
+
+  const canvas = await view.toCanvas();
+
+  fs.writeFileSync(path, canvas.toBuffer());
+}