Add integration tests for buttons with Jest

Author: nickserv

.eslintrc.json

@@ -55,7 +55,7 @@
     {
       "files": ["src/**/*"],
       "plugins": ["react-hooks"],
-      "extends": ["plugin:react/recommended"],
+      "extends": ["plugin:react/recommended", "plugin:jest-dom/recommended"],
       "env": {
         "browser": true,
         "node": false

package.json

@@ -27,9 +27,11 @@
     "@babel/plugin-transform-modules-commonjs": "7.7.0",
     "@babel/preset-react": "7.7.0",
     "@ffflorian/jszip-cli": "3.0.2",
+    "@testing-library/jest-dom": "4.2.0",
     "babel-loader": "8.0.6",
     "eslint": "6.6.0",
     "eslint-config-prettier": "6.5.0",
+    "eslint-plugin-jest-dom": "1.1.3",
     "eslint-plugin-prettier": "3.1.1",
     "eslint-plugin-react": "7.16.0",
     "eslint-plugin-react-hooks": "2.2.0",

src/content/index.test.js

@@ -0,0 +1,60 @@
+import "@testing-library/jest-dom/extend-expect";
+import GitHub from "./github";
+import StackOverflow from "./stackOverflow";
+import Storage from "./storage";
+
+window.chrome = {
+  runtime: {},
+  storage: {
+    onChanged: {
+      addListener() {}
+    },
+    sync: {
+      get(callback) {
+        setTimeout(() => callback({}));
+      }
+    }
+  }
+};
+
+window.MutationObserver = class {
+  constructor() {}
+  observe() {}
+};
+
+describe("Prettier format button injection", () => {
+  function createStorage() {
+    const storage = new Storage();
+    return storage.init();
+  }
+
+  function expectToHavePrettierButton() {
+    expect(document.querySelector(".prettier-btn")).toHaveTextContent(
+      "Prettier"
+    );
+  }
+
+  beforeEach(() => (document.body.innerHTML = ""));
+
+  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);
+    // Hack around JSDOM's lack of offsetHeight support to fix isElementVisible
+    Object.defineProperty(document.body, "offsetHeight", { value: 1 });
+
+    new GitHub(await createStorage());
+    expectToHavePrettierButton();
+  });
+
+  test("Stack Overflow", async () => {
+    // Basis: https://stackoverflow.com/questions/51875054
+    const button = document.createElement("div");
+    button.className = "wmd-button-row";
+    document.body.appendChild(button);
+
+    new StackOverflow(await createStorage());
+    expectToHavePrettierButton();
+  });
+});