Bug 1521752 - Create jest test for aboutdebugging-new Message component;r=ladybenko

Depends on D24146
Example of a try run with tests running:
https://treeherder.mozilla.org/#/jobs?repo=try&revision=cca3978c6e3eb042c59e62b25b1946219cf3d74a&selectedJob=235873038

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

--HG--
rename : devtools/client/framework/test/jest/.eslintrc.js => devtools/client/aboutdebugging-new/test/jest/.eslintrc.js
rename : devtools/client/framework/test/jest/README.md => devtools/client/aboutdebugging-new/test/jest/README.md
rename : devtools/client/framework/test/jest/jest.config.js => devtools/client/aboutdebugging-new/test/jest/jest.config.js
rename : devtools/client/framework/test/jest/package.json => devtools/client/aboutdebugging-new/test/jest/package.json
extra : moz-landing-system : lando

devtools/client/aboutdebugging-new/test/jest/.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/aboutdebugging-new/test/jest/README.md

@@ -0,0 +1,22 @@
+# Jest Tests for devtools/client/aboutdebugging-new
+
+## About
+
+DevTools React components can be tested using [jest](https://jestjs.io/). Jest allows to test our UI components in isolation and complement our end to end mochitests.
+
+## Run locally
+
+We use yarn for dependency management. To run the tests locally:
+```
+  cd devtools/client/shared/aboutdebugging-new/test/jest
+  yarn && yarn test
+```
+
+## Run on try
+
+The tests run on try on linux64 platforms. The complete name of try job is `devtools-tests`. In treeherder, they will show up as `node(devtools)`.
+
+Adding the tests to a try push depends on the try selector you are using.
+- try fuzzy: look for the job named `source-test-node-devtools-tests`
+
+The configuration file for try can be found at `taskcluster/ci/source-test/node.yml`

devtools/client/aboutdebugging-new/test/jest/components/__snapshots__/shared-message.test.js.snap

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Message component renders the expected snapshot for INFO level 1`] = `
+<aside
+  className="message message--level-info js-message some-classname"
+>
+  <img
+    className="message__icon"
+    src="chrome://devtools/skin/images/aboutdebugging-information.svg"
+  />
+  <div
+    className="message__body"
+  >
+    <div>
+      Message content
+    </div>
+  </div>
+</aside>
+`;

devtools/client/aboutdebugging-new/test/jest/components/shared-message.test.js

@@ -0,0 +1,27 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Unit tests for the shared/Message component.
+ */
+
+const renderer = require("react-test-renderer");
+const React = require("devtools/client/shared/vendor/react");
+const dom = require("devtools/client/shared/vendor/react-dom-factories");
+
+const { MESSAGE_LEVEL } = require("devtools/client/aboutdebugging-new/src/constants");
+
+const Message = React.createFactory(require("devtools/client/aboutdebugging-new/src/components/shared/Message"));
+
+describe("Message component", () => {
+  it("renders the expected snapshot for INFO level", () => {
+    const message = renderer.create(Message({
+      children: dom.div({}, "Message content"),
+      className: "some-classname",
+      level: MESSAGE_LEVEL.INFO,
+    }));
+    expect(message.toJSON()).toMatchSnapshot();
+  });
+});

devtools/client/aboutdebugging-new/test/jest/jest.config.js

@@ -0,0 +1,14 @@
+/* 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`,
+  },
+};

devtools/client/aboutdebugging-new/test/jest/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "devtools-client-framework-tests",
+  "license": "MPL-2.0",
+  "version": "0.0.1",
+  "engines": {
+    "node": ">=8.9.4"
+  },
+  "scripts": {
+    "test": "jest"
+  },
+  "dependencies": {
+    "jest": "^23.0.0",
+    "react-test-renderer": "16.4.1",
+    "react": "16.4.1",
+    "react-dom": "16.4.1"
+  }
+}

taskcluster/ci/source-test/node.yml

@@ -41,11 +41,15 @@ devtools-tests:
         command: >
             cd /builds/worker/checkouts/gecko/ &&
             npm install &&
+            cd /builds/worker/checkouts/gecko/devtools/client/aboutdebugging-new/test/jest &&
+            yarn &&
+            yarn test &&
             cd /builds/worker/checkouts/gecko/devtools/client/framework/test/jest &&
             yarn &&
             yarn test
     when:
         files-changed:
+            - 'devtools/client/aboutdebugging-new/src/components/**'
             - 'devtools/client/framework/components/**'
 
 eslint-plugin-mozilla: