Adding static icon names to test env file (#16078)

* Storing the icon name env var as a string and parsing to use with components * Moving icon env vars to jest specific env.js file * Updating snapshots
2024-12-22 17:33:23 +01:00 · 2022-11-18 08:58:38 -08:00 · 2022-11-18 08:58:38 -08:00 · 3af83f8f98
commit 3af83f8f98
parent a5b81d8562
10 changed files with 38 additions and 46 deletions
--- a/app/images/icons/icon-minus-outline.svg
+++ b/app/images/icons/icon-minus-outline.svg
--- a/app/images/icons/icon-user-cirlce-add-filled.svg
+++ b/app/images/icons/icon-user-cirlce-add-filled.svg
@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" id="icon-user-cirlce-add-filled" viewBox="0 0 512 512">
-  <path d="m448 70c-14-17-36-27-60-27-23 0-43 9-58 24-9 9-15 20-19 31-3 8-4 17-4 26 0 15 4 30 12 42 4 7 9 13 15 18 14 13 33 21 54 21 9 0 18-1 25-4 19-6 35-19 45-35 4-7 7-15 9-23 2-6 2-13 2-19 0-21-8-40-21-54z m-30 69l-15 0 0 16c0 8-7 15-15 15-8 0-15-7-15-15l0-16-15 0c-9 0-15-7-15-15 0-9 6-16 15-16l15 0 0-14c0-8 7-15 15-15 8 0 15 7 15 15l0 14 15 0c9 0 16 7 16 16 0 8-7 15-16 15z m31 127c0-26-5-52-15-75-6 4-13 8-21 10-2 1-4 1-6 2 7 19 12 41 12 63 0 47-20 90-50 121-6-7-14-14-23-20-55-37-145-37-201 0-8 6-16 13-22 20-31-31-50-74-50-121 0-95 78-173 173-173 22 0 43 5 63 12 0-2 1-4 2-7 2-7 6-14 10-20-23-10-49-15-75-15-112 0-203 91-203 203 0 59 25 112 65 149 0 0 0 0 0 1 2 2 5 3 7 5 1 1 2 2 3 3 4 3 8 6 12 9 1 1 2 2 4 3 4 2 8 5 12 7 1 1 3 2 4 3 4 2 9 4 13 6 2 0 3 1 5 2 4 2 9 3 13 5 2 0 4 1 5 1 5 2 10 3 15 4 1 1 3 1 4 1 6 1 12 2 18 3 0 0 1 0 2 0 7 1 14 1 21 1 7 0 14 0 20-1 1 0 2 0 3 0 6-1 11-2 17-3 1 0 3-1 5-1 4-1 9-2 14-4 2 0 3-1 5-1 5-2 9-3 13-5 2-1 4-2 5-2 5-2 9-4 13-6 2-1 3-2 5-3 4-3 8-5 12-7 1-1 2-2 4-3 4-3 8-6 11-9 2-1 3-2 4-3 2-2 4-3 6-5 0-1 0-1 0-1 41-37 66-90 66-149z m-203-103c-42 0-76 34-76 76 0 42 32 75 75 76 0 0 1 0 2 0 0 0 1 0 1 0 0 0 0 0 0 0 42-1 74-34 74-76 0-42-34-76-76-76z"/>
-</svg>
--- a/development/generate-icon-names.js
+++ b/development/generate-icon-names.js
@ -22,12 +22,12 @@ const getIconNameInSnakeCase = (fileName) =>
    .replace(/-/gu, '_')
    .toUpperCase();

-const generateIconNames = async () => {
+const generateIconNames = () => {
  const iconNames = {};

  const svgIconsFolderPath = path.join(__dirname, `../${SVG_ICONS_FOLDER}`);

-  const fileList = await fs.promises.readdir(svgIconsFolderPath);
+  const fileList = fs.readdirSync(svgIconsFolderPath);

  const svgIconsFileList = fileList.filter(
    (fileName) => path.extname(fileName) === ASSET_EXT,
@ -39,7 +39,9 @@ const generateIconNames = async () => {
        getIconNameKebabCase(fileName)),
  );

-  return iconNames;
+  const iconNamesStringified = JSON.stringify(iconNames);
+
+  return iconNamesStringified;
 };

 module.exports = { generateIconNames };
--- a/jest.config.js
+++ b/jest.config.js
@ -41,7 +41,11 @@ module.exports = {
  // TODO: enable resetMocks
  // resetMocks: true,
  restoreMocks: true,
-  setupFiles: ['<rootDir>/test/setup.js', '<rootDir>/test/env.js'],
+  setupFiles: [
+    '<rootDir>/test/setup.js',
+    '<rootDir>/test/env.js',
+    '<rootDir>/test/jest/env.js', // jest specific env vars that break mocha tests
+  ],
  setupFilesAfterEnv: ['<rootDir>/test/jest/setup.js'],
  testMatch: [
    '<rootDir>/ui/**/*.test.js',
--- a/test/env.js
+++ b/test/env.js
@ -1,10 +1 @@
 process.env.METAMASK_ENV = 'test';
-
-/**
- * Used for testing components that use the Icon component
- * 'ui/components/component-library/icon/icon.js'
- */
-process.env.ICON_NAMES = {
-  LOADING_FILLED: 'loading-filled',
-  CLOSE_OUTLINE: 'close-outline',
-};
--- a/test/jest/env.js
+++ b/test/jest/env.js
@ -0,0 +1,9 @@
+// jest specific env vars that break mocha tests
+import { generateIconNames } from '../../development/generate-icon-names';
+
+/**
+ * Used for testing components that use the Icon component
+ * 'ui/components/component-library/icon/icon.js'
+ */
+
+process.env.ICON_NAMES = generateIconNames();
--- a/ui/components/component-library/icon/icon.constants.js
+++ b/ui/components/component-library/icon/icon.constants.js
@ -8,4 +8,4 @@
 */

 /* eslint-disable prefer-destructuring*/ // process.env is not a standard JavaScript object, so we are not able to use object destructuring
-export const ICON_NAMES = process.env.ICON_NAMES;
+export const ICON_NAMES = JSON.parse(process.env.ICON_NAMES);
--- a/ui/components/component-library/icon/icon.test.js
+++ b/ui/components/component-library/icon/icon.test.js
@ -2,21 +2,13 @@
 import { render } from '@testing-library/react';
 import React from 'react';
 import { SIZES, COLORS } from '../../../helpers/constants/design-system';
+import { ICON_NAMES } from './icon.constants';
 import { Icon } from './icon';

-// Icon names are stored in the ICON_NAMES environment variable
-// mocking the environment variable here
-const MOCK_ICON_NAMES = {
-  ADD_SQUARE_FILLED: 'add-square-filled',
-  BANK_FILLED: 'bank-filled',
-  BOOKMARK_FILLED: 'bookmark-filled',
-  CALCULATOR_FILLED: 'calculator-filled',
-};
-
 describe('Icon', () => {
  it('should render correctly', () => {
    const { getByTestId, container } = render(
-      <Icon name={MOCK_ICON_NAMES.ADD_SQUARE_FILLED} data-testid="icon" />,
+      <Icon name={ICON_NAMES.ADD_SQUARE_FILLED} data-testid="icon" />,
    );
    expect(getByTestId('icon')).toBeDefined();
    expect(container.querySelector('svg')).toBeDefined();
@ -25,19 +17,16 @@ describe('Icon', () => {
    const { getByTestId } = render(
      <>
        <Icon
-          name={MOCK_ICON_NAMES.ADD_SQUARE_FILLED}
+          name={ICON_NAMES.ADD_SQUARE_FILLED}
          data-testid="icon-add-square-filled"
        />
+        <Icon name={ICON_NAMES.BANK_FILLED} data-testid="icon-bank-filled" />
        <Icon
-          name={MOCK_ICON_NAMES.BANK_FILLED}
-          data-testid="icon-bank-filled"
-        />
-        <Icon
-          name={MOCK_ICON_NAMES.BOOKMARK_FILLED}
+          name={ICON_NAMES.BOOKMARK_FILLED}
          data-testid="icon-bookmark-filled"
        />
        <Icon
-          name={MOCK_ICON_NAMES.CALCULATOR_FILLED}
+          name={ICON_NAMES.CALCULATOR_FILLED}
          data-testid="icon-calculator-filled"
        />
      </>,
@ -59,37 +48,37 @@ describe('Icon', () => {
    const { getByTestId } = render(
      <>
        <Icon
-          name={MOCK_ICON_NAMES.ADD_SQUARE_FILLED}
+          name={ICON_NAMES.ADD_SQUARE_FILLED}
          size={SIZES.XXS}
          data-testid="icon-xxs"
        />
        <Icon
-          name={MOCK_ICON_NAMES.ADD_SQUARE_FILLED}
+          name={ICON_NAMES.ADD_SQUARE_FILLED}
          size={SIZES.XS}
          data-testid="icon-xs"
        />
        <Icon
-          name={MOCK_ICON_NAMES.ADD_SQUARE_FILLED}
+          name={ICON_NAMES.ADD_SQUARE_FILLED}
          size={SIZES.SM}
          data-testid="icon-sm"
        />
        <Icon
-          name={MOCK_ICON_NAMES.ADD_SQUARE_FILLED}
+          name={ICON_NAMES.ADD_SQUARE_FILLED}
          size={SIZES.MD}
          data-testid="icon-md"
        />
        <Icon
-          name={MOCK_ICON_NAMES.ADD_SQUARE_FILLED}
+          name={ICON_NAMES.ADD_SQUARE_FILLED}
          size={SIZES.LG}
          data-testid="icon-lg"
        />
        <Icon
-          name={MOCK_ICON_NAMES.ADD_SQUARE_FILLED}
+          name={ICON_NAMES.ADD_SQUARE_FILLED}
          size={SIZES.XL}
          data-testid="icon-xl"
        />
        <Icon
-          name={MOCK_ICON_NAMES.ADD_SQUARE_FILLED}
+          name={ICON_NAMES.ADD_SQUARE_FILLED}
          size={SIZES.AUTO}
          data-testid="icon-auto"
        />
@ -107,17 +96,17 @@ describe('Icon', () => {
    const { getByTestId } = render(
      <>
        <Icon
-          name={MOCK_ICON_NAMES.ADD_SQUARE_FILLED}
+          name={ICON_NAMES.ADD_SQUARE_FILLED}
          color={COLORS.ICON_DEFAULT}
          data-testid="icon-color-default"
        />
        <Icon
-          name={MOCK_ICON_NAMES.ADD_SQUARE_FILLED}
+          name={ICON_NAMES.ADD_SQUARE_FILLED}
          color={COLORS.ICON_ALTERNATIVE}
          data-testid="icon-color-alternative"
        />
        <Icon
-          name={MOCK_ICON_NAMES.ADD_SQUARE_FILLED}
+          name={ICON_NAMES.ADD_SQUARE_FILLED}
          color={COLORS.ICON_MUTED}
          data-testid="icon-color-muted"
        />
--- a/ui/components/component-library/picker-network/snapshots/picker-network.test.js.snap
+++ b/ui/components/component-library/picker-network/snapshots/picker-network.test.js.snap
@ -18,7 +18,7 @@ exports[`PickerNetwork should render the label inside the PickerNetwork 1`] = `
    </p>
    <div
      class="box mm-picker-network__arrow-down-icon icon icon--size-xs box--flex-direction-row box--color-icon-default"
-      style="mask-image: url('./images/icons/icon-undefined.svg;"
+      style="mask-image: url('./images/icons/icon-arrow-down.svg;"
    />
  </button>
 </div>
--- a/ui/components/component-library/tag-url/snapshots/tag-url.test.js.snap
+++ b/ui/components/component-library/tag-url/snapshots/tag-url.test.js.snap
@ -12,7 +12,7 @@ exports[`TagUrl should render the label inside the TagUrl 1`] = `
      <div
        aria-label="avatar-favicon"
        class="box icon icon--size-md box--flex-direction-row box--color-icon-default"
-        style="mask-image: url('./images/icons/icon-undefined.svg;"
+        style="mask-image: url('./images/icons/icon-global-filled.svg;"
      />
    </div>
    <p