Testing content

.gitignore

@@ -1,3 +1,5 @@
 node_modules
 extension
+extension.zip
 artifacts/
+coverage

.prettierignore

@@ -1 +1,2 @@
 extension
+coverage

package.json

@@ -33,6 +33,8 @@
     "@babel/plugin-transform-modules-commonjs": "7.10.4",
     "@babel/preset-react": "7.10.4",
     "@svgr/webpack": "5.4.0",
+    "@testing-library/dom": "6.10.1",
+    "@testing-library/jest-dom": "4.2.0",
     "archiver": "5.0.0",
     "babel-loader": "8.1.0",
     "babel-plugin-transform-react-remove-prop-types": "0.4.24",
@@ -41,9 +43,11 @@
     "css-loader": "4.2.2",
     "eslint": "7.7.0",
     "eslint-config-prettier": "6.11.0",
+    "eslint-plugin-jest-dom": "1.3.0",
     "eslint-plugin-prettier": "3.1.4",
     "eslint-plugin-react": "7.20.6",
     "eslint-plugin-react-hooks": "4.1.0",
+    "eslint-plugin-testing-library": "1.3.2",
     "fs-extra": "9.0.1",
     "html-webpack-plugin": "4.3.0",
     "husky": "4.2.5",
@@ -68,5 +72,8 @@
     "hooks": {
       "pre-commit": "lint-staged"
     }
+  },
+  "jest": {
+    "collectCoverage": true
   }
 }

src/__mocks__/webextension-polyfill.js

@@ -0,0 +1,28 @@
+const listeners = [];
+let storageItems = {};
+
+function callListeners() {
+  for (const listener of listeners) {
+    listener();
+  }
+}
+
+export default {
+  storage: {
+    onChanged: {
+      addListener(listener) {
+        listeners.push(listener);
+      },
+    },
+    sync: {
+      async get() {
+        return storageItems;
+      },
+      async set(newItems) {
+        await Promise.resolve();
+        storageItems = { ...storageItems, ...newItems };
+        callListeners();
+      },
+    },
+  },
+};

src/content/.eslintrc.json

@@ -0,0 +1,11 @@
+{
+  "overrides": [
+    {
+      "files": "*test*.js",
+      "extends": [
+        "plugin:jest-dom/recommended",
+        "plugin:testing-library/recommended"
+      ]
+    }
+  ]
+}

src/content/button.test.js

@@ -0,0 +1,30 @@
+import "./testUtils";
+import renderButton from "./button";
+
+const buttonRef = {};
+const element = document.createElement("div");
+
+beforeEach(() => (document.body.innerHTML = ""));
+
+test.each([
+  [{}, [element, buttonRef]],
+  [{ append: false }, [buttonRef, element]],
+  [{ refNode: element }, [buttonRef, element]],
+])("renderButton with %p", (positionOptions, expectedOrder) => {
+  document.body.appendChild(element);
+  buttonRef.current = renderButton(document.body, {
+    classes: ["btn2"],
+    style: { color: "blue" },
+    ...positionOptions,
+  });
+
+  expect(Array.from(document.body.childNodes)).toEqual(
+    expectedOrder.map((thing) => thing.current || thing)
+  );
+  expect(buttonRef.current).toBeInstanceOf(HTMLButtonElement);
+  expect(buttonRef.current).toHaveTextContent("Prettier");
+  expect(buttonRef.current).toHaveAttribute("type", "button");
+  expect(buttonRef.current).toHaveClass("btn", "btn2");
+  expect(buttonRef.current).toHaveStyle("color: blue;");
+  expect(buttonRef.current).toBeInTheDocument();
+});

src/content/domUtils.test.js

@@ -0,0 +1,21 @@
+import { findWithClass, isElementVisible } from "./domUtils";
+import renderButton from "./button";
+
+test("findWithClass", () => {
+  const prettierButton = renderButton(document.body);
+  expect(findWithClass(prettierButton, "comment-form-textarea")).toBeNull();
+
+  // Basis: https://github.com/prettier/prettier-chrome-extension/issues/new
+  const textarea = document.createElement("textarea");
+  textarea.className = "comment-form-textarea";
+  document.body.appendChild(textarea);
+  expect(findWithClass(prettierButton, "comment-form-textarea")).toBe(textarea);
+});
+
+test("isElementVisible", () => {
+  const element = document.createElement("div");
+  expect(isElementVisible(element)).toBeFalsy();
+
+  Object.defineProperty(element, "offsetHeight", { value: 1 });
+  expect(isElementVisible(element)).toBeTruthy();
+});

src/content/extension.test.js

@@ -0,0 +1,8 @@
+import "./testUtils";
+import Extension from "./extension";
+import { queryByText } from "@testing-library/dom";
+
+test("Extension", async () => {
+  await new Extension().init();
+  expect(queryByText(document, "Prettier")).not.toBeInTheDocument();
+});

src/content/github.test.js

@@ -0,0 +1,21 @@
+import { createStorage, expectToFormat } from "./testUtils";
+import GitHub from "./github";
+
+test("GitHub", async () => {
+  // Basis: https://github.com/prettier/prettier-chrome-extension/issues/new
+  const button = document.createElement("button");
+  button.innerText = "Comment";
+  document.body.appendChild(button);
+  const textarea = document.createElement("textarea");
+  textarea.className = "comment-form-textarea";
+  document.body.appendChild(textarea);
+  // Hack around JSDOM's lack of offsetHeight support to fix isElementVisible
+  Object.defineProperty(document.body, "offsetHeight", { value: 1 });
+  // Emulate a matching GitHub pathname
+  Object.defineProperty(window, "location", {
+    value: { pathname: "/prettier/prettier-chrome-extension/issues/new" },
+  });
+
+  new GitHub(await createStorage());
+  expectToFormat(textarea);
+});

src/content/stackOverflow.test.js

@@ -0,0 +1,15 @@
+import { createStorage, expectToFormat } from "./testUtils";
+import StackOverflow from "./stackOverflow";
+
+test("Stack Overflow", async () => {
+  // Basis: https://stackoverflow.com/questions/51875054
+  const button = document.createElement("div");
+  button.className = "wmd-button-row";
+  document.body.appendChild(button);
+  const textarea = document.createElement("textarea");
+  textarea.className = "wmd-input";
+  document.body.appendChild(textarea);
+
+  new StackOverflow(await createStorage());
+  expectToFormat(textarea);
+});

src/content/storage.test.js

@@ -0,0 +1,12 @@
+import Storage from "./storage";
+import browser from "webextension-polyfill";
+
+test("Storage", async () => {
+  const storage = new Storage();
+  expect(storage.get()).toEqual({});
+
+  await storage.init();
+  await browser.storage.sync.set({ valid: true });
+  expect(storage.get("valid")).toBeTruthy();
+  expect(storage.get("invalid")).toBeNull();
+});

src/content/testUtils.js

@@ -0,0 +1,22 @@
+import "@testing-library/jest-dom/extend-expect";
+import { fireEvent, getByText } from "@testing-library/dom";
+import Storage from "./storage";
+
+window.MutationObserver = class {
+  constructor() {}
+  observe() {}
+};
+
+export async function createStorage() {
+  const storage = new Storage();
+  await storage.init();
+  return storage;
+}
+
+export function expectToFormat(textarea) {
+  fireEvent.change(textarea, {
+    target: { value: "```js\nconst variable=value\n```" },
+  });
+  fireEvent.click(getByText(document, "Prettier"));
+  expect(textarea).toHaveValue("```js\nconst variable = value;\n```\n");
+}