chore(components): set up testing, tsconfig, custom components module resolving, some other housekeeping

packages/fxa-admin-panel/.rescriptsrc.js

@@ -1,38 +1,6 @@
-const { resolve } = require('path');
+const {
+  permitAdditionalJSImports,
+  setupAliasedPaths,
+} = require('../fxa-components/rescripts');
 
-const additionalJSImportPaths = [resolve('../fxa-components')];
-
-const permitAdditionalJSImports = config => {
-  // Update ModuleScopePlugin's appSrcs to allow our new directory
-  config.resolve.plugins.forEach(plugin => {
-    if (plugin.constructor && plugin.constructor.name === 'ModuleScopePlugin') {
-      plugin.appSrcs.push(...additionalJSImportPaths);
-    }
-  });
-
-  // We need to target a loader that handles compiling the JS/TS/JSX/TSX files, which exists
-  // as a nameless object at a very arbitrary location. Without this we would still be able
-  // to import the file but it wouldn't get transpiled. However, CRA is a very stable project
-  // so I don't expect this object's location or position in the array of loaders to change
-  // too frequently.
-  if (
-    config.module.rules[2] &&
-    config.module.rules[2].hasOwnProperty('oneOf') &&
-    config.module.rules[2].oneOf[1].test.toString() ===
-      '/\\.(js|mjs|jsx|ts|tsx)$/'
-  ) {
-    config.module.rules[2].oneOf[1].include = [
-      config.module.rules[2].oneOf[1].include,
-      ...additionalJSImportPaths,
-    ];
-  } else {
-    throw new Error(
-      `Could not find the Webpack loader to include additional JS import paths.
-       This script may need updating if CRA has changed its base config.`
-    );
-  }
-
-  return config;
-};
-
-module.exports = [permitAdditionalJSImports];
+module.exports = [permitAdditionalJSImports, setupAliasedPaths];

packages/fxa-admin-panel/README.md

@@ -12,8 +12,8 @@ This is an internal resource for FxA Admins to access a set of convenience tools
 You can import React components into this project. This is currently restricted to `fxa-components`:
 
 ```javascript
-// e.g. from within a file in ./src, assuming the HelloWorld exists
-import HelloWorld from '../../fxa-components/HelloWorld';
+// e.g. assuming the component HelloWorld exists
+import HelloWorld from '@fxa-components/HelloWorld';
 ```
 
 ## License

packages/fxa-admin-panel/jest.config.js

@@ -1,5 +1,8 @@
 module.exports = {
   roots: ['<rootDir>/src'],
+  moduleNameMapper: {
+    '^@fxa-components/(.*)$': '<rootDir>/../fxa-components/$1',
+  },
   transform: {
     '^.+\\.tsx?$': 'ts-jest',
   },

packages/fxa-admin-panel/scripts/test-ci.sh

@@ -2,7 +2,10 @@
 
 DIR=$(dirname "$0")
 
-cd $DIR/..
+cd $DIR/../../fxa-components
+npm ci
+
+cd ../fxa-admin-panel
 npm ci
 
 PUBLIC_URL=/ INLINE_RUNTIME_CHUNK=false CI=false npm run build

packages/fxa-admin-panel/src/components/Footer/index.tsx

@@ -3,7 +3,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import React from 'react';
-import LinkExternal from '../../../../fxa-components/LinkExternal';
+import LinkExternal from '@fxa-components/LinkExternal';
 import './index.scss';
 
 export const Footer = () => (

packages/fxa-admin-panel/src/components/LinkAbout/index.tsx

@@ -3,7 +3,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import React from 'react';
-import LinkExternal from '../../../../fxa-components/LinkExternal';
+import LinkExternal from '@fxa-components/LinkExternal';
 import './index.scss';
 
 export const LinkAbout = () => (

packages/fxa-admin-panel/tsconfig.json

@@ -2,9 +2,16 @@
   "compilerOptions": {
     "target": "es5",
     "module": "esnext",
-    "types": ["jest", "node"],
+    "types": [
+      "jest",
+      "node"
+    ],
     "sourceMap": true,
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -16,7 +23,13 @@
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "preserve",
-    "typeRoots": ["./types", "node_modules/@types"],
+    "typeRoots": [
+      "./types",
+      "node_modules/@types"
+    ]
   },
-  "include": ["src"]
+  "include": [
+    "src"
+  ],
+  "extends": "../fxa-components/tsconfig.common.json"
 }

packages/fxa-components/.eslintrc

@@ -0,0 +1,19 @@
+{
+  "extends": [
+    "plugin:fxa/server",
+    "plugin:jest/recommended"
+  ],
+  "plugins": [
+    "fxa"
+  ],
+  "parser": "babel-eslint",
+  "parserOptions": {
+    "sourceType": "module"
+  },
+  "rules": {
+    "camelcase": "off",
+    "strict": "off",
+    "no-useless-escape": "off",
+    "handle-callback-err": "off"
+  }
+}

packages/fxa-components/LinkExternal/index.test.tsx

@@ -0,0 +1,27 @@
+/* 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/. */
+
+import React from "react";
+import { render } from "@testing-library/react";
+import "@testing-library/jest-dom/extend-expect";
+import LinkExternal from "./index";
+
+it("renders without imploding", () => {
+  const className = "mozilla-link";
+  const href = "https://mozilla.org/";
+  const textContent = "Keep the internet open and accessible to all.";
+
+  const renderResult = render(
+    <LinkExternal {...{ className }} {...{ href }}>
+      {textContent}
+    </LinkExternal>
+  );
+
+  const link = renderResult.getByTestId("link-external");
+
+  expect(link).toBeInTheDocument();
+  expect(link).toHaveClass(className);
+  expect(link).toHaveProperty("href", href);
+  expect(link).toHaveTextContent(textContent);
+});

packages/fxa-components/LinkExternal/index.tsx

@@ -15,7 +15,13 @@ export const LinkExternal = ({
   href,
   children
 }: LinkExternalProps) => (
-  <a target="_blank" rel="noopener noreferrer" {...{ className }} {...{ href }}>
+  <a
+    data-testid="link-external"
+    target="_blank"
+    rel="noopener noreferrer"
+    {...{ className }}
+    {...{ href }}
+  >
     {children}
   </a>
 );

packages/fxa-components/README.md

@@ -0,0 +1,12 @@
+# Shared components for FxA React Apps
+
+## Testing
+
+- `npm test` to test all components
+- `npm test -- --watch` to keep tests running while you develop
+- `npm test -- -t "description"` to test by description
+- `npm test -- ComponentName` to test by component name
+
+## License
+
+MPL-2.0

packages/fxa-components/jest.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  roots: ["<rootDir>"],
+  transform: {
+    "^.+\\.tsx?$": "ts-jest"
+  }
+};

packages/fxa-components/package.json

@@ -1,7 +1,7 @@
 {
   "name": "fxa-components",
   "version": "1.0.0",
-  "description": "Shared React components for FxA repositories",
+  "description": "Shared components for FxA React Apps",
   "repository": {
     "type": "git",
     "url": "https://github.com/mozilla/fxa.git"
@@ -17,10 +17,24 @@
   "engines": {
     "node": ">=12"
   },
+  "scripts": {
+    "test": "jest"
+  },
   "dependencies": {
-    "react": "^16.13.1"
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1"
   },
   "devDependencies": {
-    "@types/react": "^16.9.34"
+    "@testing-library/jest-dom": "^5.5.0",
+    "@testing-library/react": "^10.0.2",
+    "@testing-library/user-event": "^10.0.2",
+    "@types/jest": "^25.2.1",
+    "@types/node": "^13.13.0",
+    "@types/react": "^16.9.34",
+    "@types/react-dom": "^16.9.6",
+    "babel-eslint": "^10.1.0",
+    "jest": "^25.3.0",
+    "ts-jest": "^25.4.0",
+    "typescript": "^3.8.3"
   }
 }

packages/fxa-components/rescripts.js

@@ -0,0 +1,80 @@
+const { resolve } = require("path");
+
+const additionalJSImports = {
+  "@fxa-components": resolve("../fxa-components")
+};
+
+const permitAdditionalJSImports = config => {
+  const importPaths = Object.values(additionalJSImports);
+
+  // Update ModuleScopePlugin's appSrcs to allow our new directory
+  config.resolve.plugins.forEach(plugin => {
+    if (plugin.constructor && plugin.constructor.name === "ModuleScopePlugin") {
+      plugin.appSrcs.push(...importPaths);
+    }
+  });
+
+  // We need to target a loader that handles compiling the JS/TS/JSX/TSX files, which exists
+  // as a nameless object at a very arbitrary location. Without this we would still be able
+  // to import the file but it wouldn't get transpiled. However, CRA is a very stable project
+  // so I don't expect this object's location or position in the array of loaders to change
+  // too frequently. Here's what it looks like:
+  //
+  // {
+  //   module: {
+  //     strictExportPresence: true,
+  //     rules: [
+  //       { ... }, // unrelated item
+  //       { ... }, // unrelated item
+  //       {
+  //         oneOf: [
+  //           { ... }, // unrelated item
+  //           {
+  //             test: /\.(js|mjs|jsx|ts|tsx)$/,
+  //             include: '/base/path/fxa/packages/fxa-settings/src', // <- This is the property we want to modify
+  //             loader: '/base/path/fxa/packages/fxa-settings/node_modules/babel-loader/lib/index.js',
+  //             options: [Object]
+  //           },
+  //         ]
+  //       }
+  //     ]
+  //   }
+  // }
+  if (
+    config.module.rules[2] &&
+    config.module.rules[2].oneOf &&
+    config.module.rules[2].oneOf[1].test.toString() ===
+      "/\\.(js|mjs|jsx|ts|tsx)$/"
+  ) {
+    config.module.rules[2].oneOf[1].include = [
+      config.module.rules[2].oneOf[1].include,
+      ...importPaths
+    ];
+  } else {
+    throw new Error(
+      `Could not find the Webpack loader to include additional JS import paths.
+       This script may need updating if CRA has changed its base config.`
+    );
+  }
+
+  return config;
+};
+
+const setupAliasedPaths = config => {
+  // Add the list of additional imports to Webpack's alias resolver
+  config.resolve.alias = Object.assign(
+    config.resolve.alias,
+    additionalJSImports
+  );
+
+  // IMPORTANT - While this will work, in order for Typescript to also resolve
+  // these custom aliases we need to set them in TSConfig's "paths". Please refer
+  // to tsconfig.json and tsconfig.paths.json for details around that setup.
+
+  return config;
+};
+
+module.exports = {
+  permitAdditionalJSImports,
+  setupAliasedPaths
+};

packages/fxa-components/tsconfig.common.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    // react-scripts commands will still warn that
+    // "compilerOptions.paths must not be set", but
+    // this will still work.
+    "paths": {
+      "@fxa-components/*": ["../fxa-components/*"]
+    }
+  }
+}

packages/fxa-components/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react"
+  },
+  "include": [
+    "."
+  ]
+}

packages/fxa-settings/.rescriptsrc.js

@@ -1,59 +1,6 @@
-const { resolve } = require("path");
+const {
+  permitAdditionalJSImports,
+  setupAliasedPaths
+} = require("../fxa-components/rescripts");
 
-const additionalJSImportPaths = [resolve("../fxa-components")];
-
-const permitAdditionalJSImports = config => {
-  // Update ModuleScopePlugin's appSrcs to allow our new directory
-  config.resolve.plugins.forEach(plugin => {
-    if (plugin.constructor && plugin.constructor.name === "ModuleScopePlugin") {
-      plugin.appSrcs.push(...additionalJSImportPaths);
-    }
-  });
-
-  // We need to target a loader that handles compiling the JS/TS/JSX/TSX files, which exists
-  // as a nameless object at a very arbitrary location. Without this we would still be able
-  // to import the file but it wouldn't get transpiled. However, CRA is a very stable project
-  // so I don't expect this object's location or position in the array of loaders to change
-  // too frequently. Here's what it looks like:
-  //
-  // {
-  //   module: {
-  //     strictExportPresence: true,
-  //     rules: [
-  //       { ... }, // unrelated item
-  //       { ... }, // unrelated item
-  //       {
-  //         oneOf: [
-  //           { ... }, // unrelated item
-  //           {
-  //             test: /\.(js|mjs|jsx|ts|tsx)$/,
-  //             include: '/base/path/fxa/packages/fxa-settings/src', // <- This is the property we want to modify
-  //             loader: '/base/path/fxa/packages/fxa-settings/node_modules/babel-loader/lib/index.js',
-  //             options: [Object]
-  //           },
-  //         ]
-  //       }
-  //     ]
-  //   }
-  // }
-  if (
-    config.module.rules[2] &&
-    config.module.rules[2].hasOwnProperty("oneOf") &&
-    config.module.rules[2].oneOf[1].test.toString() ===
-      "/\\.(js|mjs|jsx|ts|tsx)$/"
-  ) {
-    config.module.rules[2].oneOf[1].include = [
-      config.module.rules[2].oneOf[1].include,
-      ...additionalJSImportPaths
-    ];
-  } else {
-    throw new Error(
-      `Could not find the Webpack loader to include additional JS import paths.
-       This script may need updating if CRA has changed its base config.`
-    );
-  }
-
-  return config;
-};
-
-module.exports = [permitAdditionalJSImports];
+module.exports = [permitAdditionalJSImports, setupAliasedPaths];

packages/fxa-settings/README.md

@@ -10,8 +10,8 @@
 You can import React components into this project. This is currently restricted to `fxa-components`:
 
 ```javascript
-// e.g. from within a file in ./src, assuming the HelloWorld exists
-import HelloWorld from "../../fxa-components/HelloWorld";
+// e.g. assuming the component HelloWorld exists
+import HelloWorld from "@fxa-components/HelloWorld";
 ```
 
 ## License

packages/fxa-settings/jest.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+  roots: ["<rootDir>/src"],
+  moduleNameMapper: {
+    "^@fxa-components/(.*)$": "<rootDir>/../fxa-components/$1"
+  },
+  transform: {
+    "^.+\\.tsx?$": "ts-jest"
+  }
+};

packages/fxa-settings/scripts/test-ci.sh

@@ -0,0 +1,12 @@
+#!/bin/bash -ex
+
+DIR=$(dirname "$0")
+
+cd $DIR/../../fxa-components
+npm ci
+
+cd ../fxa-settings
+npm ci
+
+PUBLIC_URL=/ INLINE_RUNTIME_CHUNK=false CI=false npm run build
+CI=yes npm test

packages/fxa-settings/tsconfig.json

@@ -1,11 +1,7 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -19,7 +15,6 @@
     "noEmit": true,
     "jsx": "react"
   },
-  "include": [
-    "src"
-  ]
+  "include": ["src"],
+  "extends": "../fxa-components/tsconfig.common.json"
 }