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

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>

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 };

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',

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',
-};

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();

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);

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}
+          name={ICON_NAMES.BOOKMARK_FILLED}
-          data-testid="icon-bank-filled"
-        />
-        <Icon
-          name={MOCK_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"
         />

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>

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