fix: several enhancements and add tests

.eslintrc

@@ -22,6 +22,10 @@
   },
   "parser": "@typescript-eslint/parser",
   "rules": {
+    "@typescript-eslint/explicit-function-return-type": [
+      "warn",
+      { "allowExpressions": true }
+    ],
     "@typescript-eslint/no-use-before-define": [
       "error",
       { "functions": false, "classes": false }

.gitignore

@@ -1,3 +1,11 @@
 node_modules
+
 extension/build
 extension.zip
+
+.coverage
+.vscode
+.idea
+.DS_Store
+*.log
+report.*.json

.travis.yml

@@ -0,0 +1,11 @@
+language: node_js
+node_js:
+  - v12
+cache:
+  directories:
+    - node_modules
+install:
+  - npm install
+script:
+  - npm test
+  - npm run coveralls

README.md

@@ -10,3 +10,24 @@ npm start
 ```
 
 Follow [Official Tutorial](https://developer.chrome.com/extensions/getstarted), when loading unpacked extension, choose the `brick-next-devtools/extension` directory.
+
+## Testing
+
+```
+npm test
+```
+
+Testing a specified file in watch mode:
+
+```
+npm test src/some-file.spec.ts -- --watch
+```
+
+## Publish
+
+```
+npm run build
+npm zip
+```
+
+Upload zip file through Chrome Web Store Developer Dashboard.

jest.config.js

@@ -1,11 +1,13 @@
 module.exports = {
-  "transform": {
-    "^.+\\.[t|j]sx?$": "babel-jest"
+  transform: {
+    "^.+\\.[t|j]sx?$": "babel-jest",
   },
-  "setupFilesAfterEnv": [
-    "<rootDir>/__jest__/setup.js"
-  ],
-  "snapshotSerializers": [
-    "enzyme-to-json/serializer"
-  ]
-};
+  setupFilesAfterEnv: ["<rootDir>/__jest__/setup.js"],
+  snapshotSerializers: ["enzyme-to-json/serializer"],
+  collectCoverage: true,
+  collectCoverageFrom: ["src/**/*.{ts,tsx,js,jsx}"],
+  coverageDirectory: "<rootDir>/.coverage",
+  coverageReporters: ["lcov", "text-summary"],
+  coveragePathIgnorePatterns: ["/node_modules/", "/extension/"],
+  testPathIgnorePatterns: ["/node_modules/", "/extension/"],
+};

package.json

@@ -2,10 +2,11 @@
   "name": "brick-next-devtools",
   "version": "0.1.0",
   "scripts": {
-    "test": "jest",
+    "test": "cross-env NODE_ENV='test' jest",
     "start": "cross-env NODE_ENV='development' webpack --config webpack.config.js --watch",
     "build": "cross-env NODE_ENV='production' webpack --config webpack.config.js",
-    "zip": "zip -r extension.zip extension"
+    "zip": "zip -r extension.zip extension",
+    "coveralls": "coveralls < .coverage/lcov.info"
   },
   "browserslist": [
     "last 2 Chrome versions"
@@ -34,6 +35,7 @@
     "babel-loader": "^8.1.0",
     "clean-webpack-plugin": "^3.0.0",
     "copy-webpack-plugin": "^5.1.1",
+    "coveralls": "^3.0.11",
     "cross-env": "^7.0.2",
     "css-loader": "^3.4.2",
     "enzyme": "^3.11.0",

src/background.ts

@@ -3,7 +3,6 @@
 const ports: Record<string, Record<string, chrome.runtime.Port>> = {};
 
 chrome.runtime.onConnect.addListener(function (port) {
-  console.log("onConnect", port);
   let tab = null;
   let name = null;
   if (isNumeric(port.name)) {
@@ -52,22 +51,3 @@ function pipeMessages(tab: string | number): void {
     ports[tab] = {};
   }
 }
-
-/* function doublePipe(one: chrome.runtime.Port, two: chrome.runtime.Port): void {
-  one.onMessage.addListener(listenOne);
-  two.onMessage.addListener(listenTwo);
-  one.onDisconnect.addListener(shutdown);
-  two.onDisconnect.addListener(shutdown);
-  function listenOne(message: any): void {
-    two.postMessage(message);
-  }
-  function listenTwo(message: any): void {
-    one.postMessage(message);
-  }
-  function shutdown(): void {
-    one.onMessage.removeListener(listenOne);
-    two.onMessage.removeListener(listenTwo);
-    one.disconnect();
-    two.disconnect();
-  }
-} */

src/components/BrickLabel.spec.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import { shallow } from "enzyme";
+import { Tag } from "@blueprintjs/core";
+import { BrickLabel } from "./BrickLabel";
+import { useShowFullNameContext } from "../libs/ShowFullNameContext";
+
+jest.mock("../libs/ShowFullNameContext");
+
+(useShowFullNameContext as jest.Mock).mockReturnValue({ showFullName: false });
+
+describe("BrickLabel", () => {
+  it("should brick tag name", () => {
+    const wrapper = shallow(<BrickLabel tagName="div" />);
+    expect(wrapper.find(".brick-title").text()).toBe("div");
+    expect(wrapper.find(Tag).length).toBe(0);
+
+    wrapper.setProps({
+      tagName: "basic-bricks.micro-app",
+    });
+
+    expect(wrapper.find(".brick-title").text()).toBe("micro-app");
+    expect(wrapper.find(Tag).prop("intent")).toBe("warning");
+
+    wrapper.setProps({
+      tagName: "basic-bricks.script-brick",
+    });
+
+    expect(wrapper.find(".brick-title").text()).toBe("script-brick");
+    expect(wrapper.find(Tag).prop("intent")).toBe("danger");
+  });
+
+  it("should full brick tag name", () => {
+    (useShowFullNameContext as jest.Mock).mockReturnValueOnce({
+      showFullName: true,
+    });
+
+    const wrapper = shallow(<BrickLabel tagName="your.awesome-brick" />);
+    expect(wrapper.find(".brick-title").text()).toBe("your.awesome-brick");
+  });
+});

src/components/BrickTree.spec.tsx

@@ -0,0 +1,161 @@
+import React from "react";
+import { shallow } from "enzyme";
+import { Tree, Tag } from "@blueprintjs/core";
+import { BrickTree } from "./BrickTree";
+import { useBrickTreeContext } from "../libs/BrickTreeContext";
+import { useSelectedBrickContext } from "../libs/SelectedBrickContext";
+import {
+  useCollapsedBrickIdsContext,
+  ContextOfCollapsedBrickIds,
+} from "../libs/CollapsedBrickIdsContext";
+import { BricksByMountPoint, RichBrickData } from "../libs/interfaces";
+
+jest.mock("../libs/BrickTreeContext");
+jest.mock("../libs/SelectedBrickContext");
+jest.mock("../libs/CollapsedBrickIdsContext");
+
+const setSelectedBrick = jest.fn();
+const collapsedBrickIdsContext: ContextOfCollapsedBrickIds = {
+  collapsedBrickIds: [100],
+  setCollapsedBrickIds: jest.fn(),
+};
+
+(useBrickTreeContext as jest.Mock).mockReturnValue({});
+(useSelectedBrickContext as jest.Mock).mockReturnValue({
+  selectedBrick: null,
+  setSelectedBrick,
+});
+(useCollapsedBrickIdsContext as jest.Mock).mockReturnValue(
+  collapsedBrickIdsContext
+);
+
+const mockEval = jest.fn();
+
+(window as any).chrome = {
+  devtools: {
+    inspectedWindow: {
+      eval: mockEval,
+    },
+  },
+};
+
+describe("BrickTree", () => {
+  afterEach(() => {
+    mockEval.mockClear();
+    setSelectedBrick.mockClear();
+    // collapsedBrickIdsContext.collapsedBrickIds = [];
+    (collapsedBrickIdsContext.setCollapsedBrickIds as jest.Mock).mockClear();
+  });
+
+  it("should work when no tree", () => {
+    const wrapper = shallow(<BrickTree />);
+    expect(wrapper.find(".scroll-container").children.length).toBe(1);
+  });
+
+  it("should display brick tree", () => {
+    const tree: BricksByMountPoint = {
+      main: [
+        {
+          uid: 1,
+          tagName: "a",
+          children: [
+            {
+              uid: 2,
+              tagName: "b",
+              children: [],
+            },
+          ],
+        },
+        {
+          uid: 3,
+          tagName: "c",
+          children: [],
+        },
+      ],
+      bg: [
+        {
+          uid: 10,
+          tagName: "z",
+          children: [],
+        },
+      ],
+    };
+    (useBrickTreeContext as jest.Mock).mockReturnValue({ tree });
+
+    const wrapper = shallow(<BrickTree />);
+
+    expect(wrapper.find(Tag).length).toBe(2);
+    expect(wrapper.find(Tag).at(0).childAt(0).text()).toBe("main");
+    expect(wrapper.find(Tag).at(1).childAt(0).text()).toBe("bg");
+
+    expect(wrapper.find(Tree).length).toBe(2);
+    expect(wrapper.find(Tree).at(0).prop("contents").length).toBe(2);
+    expect(wrapper.find(Tree).at(1).prop("contents").length).toBe(1);
+
+    (useBrickTreeContext as jest.Mock).mockReset();
+  });
+
+  it("should work", () => {
+    const brickA: RichBrickData = {
+      uid: 1,
+      tagName: "a",
+      children: [
+        {
+          uid: 2,
+          tagName: "b",
+          children: [],
+        },
+      ],
+    };
+    const tree: BricksByMountPoint = {
+      main: [brickA],
+    };
+    (useBrickTreeContext as jest.Mock).mockReturnValue({ tree });
+
+    const wrapper = shallow(<BrickTree />);
+
+    expect(wrapper.find(Tree).prop("contents")[0].isExpanded).toBe(true);
+
+    (wrapper.find(Tree).invoke("onNodeClick") as any)({
+      nodeData: brickA,
+    });
+
+    expect(setSelectedBrick).toBeCalledWith(brickA);
+
+    (wrapper.find(Tree).invoke("onNodeCollapse") as any)({
+      id: 1,
+    });
+    expect(
+      collapsedBrickIdsContext.setCollapsedBrickIds
+    ).toHaveBeenNthCalledWith(1, [100, 1]);
+    // Todo(steve): context not updated
+    // expect(wrapper.find(Tree).prop("contents")[0].isExpanded).toBe(false);
+
+    (wrapper.find(Tree).invoke("onNodeExpand") as any)({
+      id: 1,
+    });
+    expect(
+      collapsedBrickIdsContext.setCollapsedBrickIds
+    ).toHaveBeenNthCalledWith(2, [100]);
+    // Todo(steve): context not updated
+    // expect(wrapper.find(Tree).prop("contents")[0].isExpanded).toBe(true);
+
+    (wrapper.find(Tree).invoke("onNodeMouseEnter") as any)({
+      id: 1,
+    });
+    expect(mockEval).toHaveBeenNthCalledWith(
+      1,
+      "inspect(window.__BRICK_NEXT_DEVTOOLS_HOOK__.showInspectBox(1));"
+    );
+
+    (wrapper.find(Tree).invoke("onNodeMouseLeave") as any)({
+      id: 1,
+    });
+    expect(mockEval).toHaveBeenNthCalledWith(
+      2,
+      "inspect(window.__BRICK_NEXT_DEVTOOLS_HOOK__.hideInspectBox(1));"
+    );
+
+    (useBrickTreeContext as jest.Mock).mockReset();
+  });
+});