Bug 1587690: Add jest tests for components. r=ladybenko

Depends on D48950

Differential Revision: https://phabricator.services.mozilla.com/D49256

--HG--
extra : moz-landing-system : lando

devtools/client/bin/devtools-node-test-runner.js

@@ -37,6 +37,10 @@ const SUITES = {
     path: "../application/test/components",
     type: TEST_TYPES.JEST,
   },
+  compatibility: {
+    path: "../inspector/compatibility/test/components",
+    type: TEST_TYPES.JEST,
+  },
   framework: {
     path: "../framework/test/jest",
     type: TEST_TYPES.JEST,

devtools/client/inspector/compatibility/test/components/.eslintrc.js

@@ -0,0 +1,10 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+module.exports = {
+  "env": {
+    "jest": true,
+  },
+};

devtools/client/inspector/compatibility/test/components/__snapshots__/components-compatibility-IssueItem.test.js.snap

@@ -0,0 +1,51 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`IssueItem component renders an issue of CSS property 1`] = `
+<li
+  data-qa-property="test-property"
+  key="test-property:CSS_PROPERTY"
+>
+  <div
+    data-qa-key="type"
+    data-qa-value="CSS_PROPERTY"
+    key="type"
+  >
+    type:CSS_PROPERTY
+  </div>
+  <div
+    data-qa-key="property"
+    data-qa-value="test-property"
+    key="property"
+  >
+    property:test-property
+  </div>
+  <div
+    data-qa-key="url"
+    data-qa-value="test-url"
+    key="url"
+  >
+    url:test-url
+  </div>
+  <div
+    data-qa-key="deprecated"
+    data-qa-value="false"
+    key="deprecated"
+  >
+    deprecated:false
+  </div>
+  <div
+    data-qa-key="experimental"
+    data-qa-value="false"
+    key="experimental"
+  >
+    experimental:false
+  </div>
+  <div
+    data-qa-key="unsupportedBrowsers"
+    data-qa-value=""
+    key="unsupportedBrowsers"
+  >
+    unsupportedBrowsers:
+  </div>
+</li>
+`;

devtools/client/inspector/compatibility/test/components/__snapshots__/components-compatibility-IssueList.test.js.snap

@@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`IssueList component renders some issues 1`] = `
+<ul>
+  <IssueItem
+    deprecated={false}
+    experimental={true}
+    property="border-block-color"
+    type="CSS_PROPERTY"
+    unsupportedBrowsers={Array []}
+    url="https://developer.mozilla.org/docs/Web/CSS/border-block-color"
+  />
+  <IssueItem
+    aliases={
+      Array [
+        "user-modify",
+      ]
+    }
+    deprecated={true}
+    experimental={false}
+    property="user-modify"
+    type="CSS_PROPERTY_ALIASES"
+    unsupportedBrowsers={Array []}
+    url="https://developer.mozilla.org/docs/Web/CSS/user-modify"
+  />
+</ul>
+`;

devtools/client/inspector/compatibility/test/components/babel.config.js

@@ -0,0 +1,8 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+module.exports = {
+  plugins: ["@babel/plugin-proposal-async-generator-functions"],
+};

devtools/client/inspector/compatibility/test/components/components-compatibility-IssueItem.test.js

@@ -0,0 +1,32 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Unit tests for the IssueItem component.
+ */
+
+const { shallow } = require("enzyme");
+const React = require("react");
+
+const MDNCompatibility = require("devtools/client/inspector/compatibility/lib/MDNCompatibility");
+const IssueItem = React.createFactory(
+  require("devtools/client/inspector/compatibility/components/IssueItem")
+);
+
+describe("IssueItem component", () => {
+  it("renders an issue of CSS property", () => {
+    const item = shallow(
+      IssueItem({
+        type: MDNCompatibility.ISSUE_TYPE.CSS_PROPERTY,
+        property: "test-property",
+        url: "test-url",
+        deprecated: false,
+        experimental: false,
+        unsupportedBrowsers: [],
+      })
+    );
+    expect(item).toMatchSnapshot();
+  });
+});

devtools/client/inspector/compatibility/test/components/components-compatibility-IssueList.test.js

@@ -0,0 +1,46 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Unit tests for the IssueList component.
+ */
+
+const { shallow } = require("enzyme");
+const React = require("react");
+
+const MDNCompatibility = require("devtools/client/inspector/compatibility/lib/MDNCompatibility");
+const IssueList = React.createFactory(
+  require("devtools/client/inspector/compatibility/components/IssueList")
+);
+
+describe("IssueList component", () => {
+  it("renders some issues", () => {
+    const list = shallow(
+      IssueList({
+        issues: [
+          {
+            type: MDNCompatibility.ISSUE_TYPE.CSS_PROPERTY,
+            property: "border-block-color",
+            url:
+              "https://developer.mozilla.org/docs/Web/CSS/border-block-color",
+            deprecated: false,
+            experimental: true,
+            unsupportedBrowsers: [],
+          },
+          {
+            type: MDNCompatibility.ISSUE_TYPE.CSS_PROPERTY_ALIASES,
+            property: "user-modify",
+            url: "https://developer.mozilla.org/docs/Web/CSS/user-modify",
+            aliases: ["user-modify"],
+            deprecated: true,
+            experimental: false,
+            unsupportedBrowsers: [],
+          },
+        ],
+      })
+    );
+    expect(list).toMatchSnapshot();
+  });
+});

devtools/client/inspector/compatibility/test/components/jest.config.js

@@ -0,0 +1,16 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/* global __dirname */
+
+module.exports = {
+  verbose: true,
+  moduleNameMapper: {
+    // Map all require("devtools/...") to the real devtools root.
+    "^devtools\\/(.*)": `${__dirname}/../../../../../$1`,
+  },
+  setupFiles: ["<rootDir>setup.js"],
+  snapshotSerializers: ["enzyme-to-json/serializer"],
+};

devtools/client/inspector/compatibility/test/components/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "devtools-client-inspector-compatibility-test",
+  "license": "MPL-2.0",
+  "version": "0.0.1",
+  "engines": {
+    "node": ">=8.9.4"
+  },
+  "scripts": {
+    "test": "jest",
+    "test-ci": "jest --json"
+  },
+  "dependencies": {
+    "@babel/plugin-proposal-async-generator-functions": "^7.2.0",
+    "enzyme": "^3.9.0",
+    "enzyme-adapter-react-16": "^1.13.2",
+    "enzyme-to-json": "^3.3.5",
+    "jest": "^24.6.0",
+    "react": "16.4.1",
+    "react-dom": "16.4.1",
+    "react-test-renderer": "16.4.1"
+  }
+}

devtools/client/inspector/compatibility/test/components/setup.js

@@ -0,0 +1,10 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
+
+"use strict";
+
+// Configure enzyme with React 16 adapter.
+const Enzyme = require("enzyme");
+const Adapter = require("enzyme-adapter-react-16");
+Enzyme.configure({ adapter: new Adapter() });

taskcluster/ci/source-test/node.yml

@@ -82,6 +82,7 @@ devtools-tests:
             node devtools-node-test-runner.js --suite=aboutdebugging &&
             node devtools-node-test-runner.js --suite=accessibility &&
             node devtools-node-test-runner.js --suite=application &&
+            node devtools-node-test-runner.js --suite=compatibility &&
             node devtools-node-test-runner.js --suite=framework &&
             node devtools-node-test-runner.js --suite=netmonitor &&
             node devtools-node-test-runner.js --suite=webconsole