From 3af83f8f986eae201261b5ab3f9b6f4522fb46df Mon Sep 17 00:00:00 2001 From: George Marshall Date: Fri, 18 Nov 2022 08:58:38 -0800 Subject: [PATCH] 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 --- ...inus-outine.svg => icon-minus-outline.svg} | 0 .../icons/icon-user-cirlce-add-filled.svg | 3 -- development/generate-icon-names.js | 8 ++-- jest.config.js | 6 ++- test/env.js | 9 ---- test/jest/env.js | 9 ++++ .../component-library/icon/icon.constants.js | 2 +- .../component-library/icon/icon.test.js | 43 +++++++------------ .../__snapshots__/picker-network.test.js.snap | 2 +- .../__snapshots__/tag-url.test.js.snap | 2 +- 10 files changed, 38 insertions(+), 46 deletions(-) rename app/images/icons/{icon-minus-outine.svg => icon-minus-outline.svg} (100%) delete mode 100644 app/images/icons/icon-user-cirlce-add-filled.svg create mode 100644 test/jest/env.js diff --git a/app/images/icons/icon-minus-outine.svg b/app/images/icons/icon-minus-outline.svg similarity index 100% rename from app/images/icons/icon-minus-outine.svg rename to app/images/icons/icon-minus-outline.svg diff --git a/app/images/icons/icon-user-cirlce-add-filled.svg b/app/images/icons/icon-user-cirlce-add-filled.svg deleted file mode 100644 index 01ffc6c9c..000000000 --- a/app/images/icons/icon-user-cirlce-add-filled.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/development/generate-icon-names.js b/development/generate-icon-names.js index a89887de7..f004edbef 100644 --- 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 }; diff --git a/jest.config.js b/jest.config.js index bfaddcfa8..98da7bca5 100644 --- a/jest.config.js +++ b/jest.config.js @@ -41,7 +41,11 @@ module.exports = { // TODO: enable resetMocks // resetMocks: true, restoreMocks: true, - setupFiles: ['/test/setup.js', '/test/env.js'], + setupFiles: [ + '/test/setup.js', + '/test/env.js', + '/test/jest/env.js', // jest specific env vars that break mocha tests + ], setupFilesAfterEnv: ['/test/jest/setup.js'], testMatch: [ '/ui/**/*.test.js', diff --git a/test/env.js b/test/env.js index b932b2a42..38e4a6fed 100644 --- 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', -}; diff --git a/test/jest/env.js b/test/jest/env.js new file mode 100644 index 000000000..c272b9839 --- /dev/null +++ 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(); diff --git a/ui/components/component-library/icon/icon.constants.js b/ui/components/component-library/icon/icon.constants.js index 3ea0780c8..ca47099bc 100644 --- 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); diff --git a/ui/components/component-library/icon/icon.test.js b/ui/components/component-library/icon/icon.test.js index 45fefa8c1..510a1c87c 100644 --- 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( - , + , ); expect(getByTestId('icon')).toBeDefined(); expect(container.querySelector('svg')).toBeDefined(); @@ -25,19 +17,16 @@ describe('Icon', () => { const { getByTestId } = render( <> + - , @@ -59,37 +48,37 @@ describe('Icon', () => { const { getByTestId } = render( <> @@ -107,17 +96,17 @@ describe('Icon', () => { const { getByTestId } = render( <> diff --git 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 index 5991eb25e..b4008bfce 100644 --- 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`] = `

diff --git 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 index dd412f62e..8c8865383 100644 --- 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`] = `