From 18e91ecc5299eba9393e21a668198a1d795604e4 Mon Sep 17 00:00:00 2001 From: Siarhei Yelin Date: Thu, 30 Nov 2023 15:25:39 +0300 Subject: [PATCH 1/3] Add possibility to import 3rd party mocks globally instead on importing it to each test individually, { mockCommon3rdPartyDeps: true }) --- .../content/unitTestingGuide-3-tools.json | 45 +++- test-utils/src/internal/testRunnerUtils.js | 28 +++ test-utils/src/jsdom/setupJsDom.js | 109 ++++++++-- .../src/rendering/setupComponentUtils.tsx | 16 +- uui-build/jest/setupJsDom.js | 4 +- .../datePickers/__tests__/DatePicker.test.tsx | 14 -- .../__tests__/RangeDatePicker.test.tsx | 14 -- .../__tests__/presetsPanel.test.tsx | 14 -- .../filters/__tests__/filtersPanel.test.tsx | 23 -- .../DropdownContainer.test.tsx.snap | 73 ++----- .../__snapshots__/DropdownMenu.test.tsx.snap | 177 ++++++---------- .../__snapshots__/Modals.test.tsx.snap | 198 ++++++------------ .../pickers/__tests__/PickerInput.test.tsx | 22 -- .../pickers/__tests__/PickerList.test.tsx | 22 -- .../pickers/__tests__/PickerModal.test.tsx | 21 -- .../ColumnHeaderDropdown.test.tsx.snap | 198 +++++++----------- 16 files changed, 390 insertions(+), 588 deletions(-) create mode 100644 test-utils/src/internal/testRunnerUtils.js diff --git a/public/docs/content/unitTestingGuide-3-tools.json b/public/docs/content/unitTestingGuide-3-tools.json index a19c725c1c..4fd8ed613d 100644 --- a/public/docs/content/unitTestingGuide-3-tools.json +++ b/public/docs/content/unitTestingGuide-3-tools.json @@ -1044,7 +1044,50 @@ "type": "paragraph", "children": [ { - "text": "" + "text": "It's possible to pass extra options to this method in order to add global mocks for 3rd party dependencies. E.g.:" + } + ] + }, + { + "data": {}, + "type": "note-quote", + "children": [ + { + "text": "setupJsDom", + "uui-richTextEditor-italic": true, + "color": "rgb(0, 0, 0)" + }, + { + "text": "(", + "color": "rgb(0, 0, 0)" + }, + { + "text": "global", + "uui-richTextEditor-italic": true, + "uui-richTextEditor-bold": true, + "color": "rgb(102, 14, 122)" + }, + { + "text": ", { ", + "color": "rgb(0, 0, 0)" + }, + { + "text": "mockCommon3rdPartyDeps", + "uui-richTextEditor-bold": true, + "color": "rgb(102, 14, 122)" + }, + { + "text": ": ", + "color": "rgb(0, 0, 0)" + }, + { + "text": "true ", + "uui-richTextEditor-bold": true, + "color": "rgb(0, 0, 128)" + }, + { + "text": "});", + "color": "rgb(0, 0, 0)" } ] } diff --git a/test-utils/src/internal/testRunnerUtils.js b/test-utils/src/internal/testRunnerUtils.js new file mode 100644 index 0000000000..ec8003fab4 --- /dev/null +++ b/test-utils/src/internal/testRunnerUtils.js @@ -0,0 +1,28 @@ +/** + * Underlying test runner + * @type {{mock: (function(string, function(): *=): void), isMockFunction: (function(function(): *): boolean), requireActual: (function(string): *)}|undefined} + */ +export const testRunner = getTestRunner(); + +/** + * + * @returns {{ + * mock: (moduleName: string, factory?: () => unknown) => void + * isMockFunction: (fn: () => unknown) => boolean + * requireActual: (moduleName: string) => any + * } | undefined} + */ +function getTestRunner() { + // @ts-ignore + if (typeof jest !== 'undefined') { + return jest; + } else { // @ts-ignore + if (typeof vi !== 'undefined') { + // @ts-ignore + // eslint-disable-next-line no-undef + return vi; + } + } + // Neither "jest" nor "vi" was found in global scope. + // Only Jest and Vitest are currently supported. +} diff --git a/test-utils/src/jsdom/setupJsDom.js b/test-utils/src/jsdom/setupJsDom.js index b032470fb1..c9258d9dc5 100644 --- a/test-utils/src/jsdom/setupJsDom.js +++ b/test-utils/src/jsdom/setupJsDom.js @@ -3,34 +3,97 @@ * Note: this file is reused in our jest setup located here: uui-build/jest/setupJsDom.js * This is why it's pure *.js module and not a typescript. */ +import React from 'react'; +import { testRunner } from '../internal/testRunnerUtils'; + /** * Adds UUI-specific mocks to the jsdom - * @param {any} [global] - global jsdom object. + * @param {any} global - global jsdom object. + * @param {object} [options] - extra options. + * @param {boolean} [options.mockCommon3rdPartyDeps] - enables some common deps mocks by default. */ -export function setupJsDom(global) { - global.ResizeObserver = class ResizeObserver { - observe() {} - disconnect() {} +export function setupJsDom(global, options = {}) { + const { mockCommon3rdPartyDeps } = options; + const globalMock = { + ResizeObserver: class ResizeObserverMock { + observe() {} + disconnect() {} + }, }; - - global.navigator.clipboard = { - writeText: () => {}, + const navigatorMock = { + clipboard: { + writeText: () => {}, + }, }; - - Object.assign(global.Element.prototype, { + const elementPrototypeMock = { scrollTo: () => {}, - }); - - const consoleErrorPrev = global.console.error; - global.console.error = (/** @type {[any]} */ ...args) => { - const [first] = args; - const ignorePatterns = ['Warning: validateDOMNesting(...):']; - if (typeof first === 'string') { - const shouldIgnore = ignorePatterns.some((p) => first.indexOf(p) !== -1); - if (shouldIgnore) { - return; - } - } - consoleErrorPrev.apply(global, args); }; + const consoleMock = (() => { + const consoleErrorPrev = global.console.error; + const error = (/** @type {[any]} */ ...args) => { + const [first] = args; + const ignorePatterns = ['Warning: validateDOMNesting(...):']; + if (typeof first === 'string') { + const shouldIgnore = ignorePatterns.some((p) => first.indexOf(p) !== -1); + if (shouldIgnore) { + return; + } + } + consoleErrorPrev.apply(global, args); + }; + return { + error, + }; + })(); + + Object.assign(global, globalMock); + Object.assign(global.navigator, navigatorMock); + Object.assign(global.Element.prototype, elementPrototypeMock); + Object.assign(global.console, consoleMock); + + if (mockCommon3rdPartyDeps) { + enableMockForCommon3rdPartyDeps(); + } +} + +function enableMockForCommon3rdPartyDeps() { + if (!testRunner) { + throw new Error('Only Jest & Vitest are currently supported. If another test runner is used, ' + + 'then please dont enable mockCommon3rdPartyDeps option and do all mocks using capabilities of your test runner.'); + } + testRunner.mock('react-popper', () => ({ + ...testRunner.requireActual('react-popper'), + /** + * @param {object} props - Component's props + * @param {function} props.children - Component's children prop + * @returns {JSX.Element} + */ + Popper: function PopperMock({ children }) { + return children({ + ref: jest.fn, + update: jest.fn(), + style: {}, + arrowProps: { ref: jest.fn }, + placement: 'bottom-start', + isReferenceHidden: false, + }); + }, + })); + + testRunner.mock('react-focus-lock', () => ({ + ...testRunner.requireActual('react-focus-lock'), + __esModule: true, + /** + * @param {object} props - Component's props + * @param {any} props.children - Component's children prop + * @returns {JSX.Element} + */ + default: ({ children }) => React.createElement(React.Fragment, {}, children), + /** + * @param {object} props - Component's props + * @param {any} props.children - Component's children prop + * @returns {JSX.Element} + */ + FreeFocusInside: ({ children }) => React.createElement(React.Fragment, {}, children), + })); } diff --git a/test-utils/src/rendering/setupComponentUtils.tsx b/test-utils/src/rendering/setupComponentUtils.tsx index b0fc8b0478..af65826a7b 100644 --- a/test-utils/src/rendering/setupComponentUtils.tsx +++ b/test-utils/src/rendering/setupComponentUtils.tsx @@ -2,21 +2,13 @@ import * as React from 'react'; import { useImperativeHandle, useState } from 'react'; import { renderWithContextAsync, type CustomWrapperType } from './renderingWithContextUtils'; import { act } from '@testing-library/react'; +import { testRunner } from '../internal/testRunnerUtils'; function isMockFunctionGeneric(fn: () => void) { - // @ts-ignore - if (typeof jest !== 'undefined' && typeof jest.isMockFunction === 'function') { - // This is for Jest - // @ts-ignore - return jest.isMockFunction(fn); + if (testRunner) { + return testRunner.isMockFunction(fn); } - // @ts-ignore - if (typeof vi !== 'undefined' && typeof vi.isMockFunction === 'function') { - // This is for Vitest - // @ts-ignore - return vi.isMockFunction(fn); - } - throw new Error('Neither jest.isMockFunction nor vi.isMockFunction was found in global scope. If another test runner is used, ' + throw new Error('Only Jest & Vitest are currently supported. If another test runner is used, ' + 'then please pass your custom "isMockFunction" to the setupComponentForTest ' + 'e.g.: setupComponentForTest(propsInitializer, componentRenderer, { isMockFunction: vi.isMockFunction })'); } diff --git a/uui-build/jest/setupJsDom.js b/uui-build/jest/setupJsDom.js index 32fd2a7df5..646be76c43 100644 --- a/uui-build/jest/setupJsDom.js +++ b/uui-build/jest/setupJsDom.js @@ -1,7 +1,7 @@ import '@testing-library/jest-dom'; -import { setupJsDom } from './../../test-utils/src/jsdom/setupJsDom.js'; +import { setupJsDom } from './../../test-utils/src/jsdom/setupJsDom'; window.__DEV__ = true; window.__PACKAGE_VERSION__ = ''; -setupJsDom(global); +setupJsDom(global, { mockCommon3rdPartyDeps: true }); diff --git a/uui/components/datePickers/__tests__/DatePicker.test.tsx b/uui/components/datePickers/__tests__/DatePicker.test.tsx index 530f67a17f..cf433fd73a 100644 --- a/uui/components/datePickers/__tests__/DatePicker.test.tsx +++ b/uui/components/datePickers/__tests__/DatePicker.test.tsx @@ -4,20 +4,6 @@ import { } from '@epam/uui-test-utils'; import { DatePicker, DatePickerProps } from '../DatePicker'; -jest.mock('react-popper', () => ({ - ...jest.requireActual('react-popper'), - Popper: function PopperMock({ children }: any) { - return children({ - ref: jest.fn, - update: jest.fn(), - style: {}, - arrowProps: { ref: jest.fn }, - placement: 'bottom-start', - isReferenceHidden: false, - }); - }, -})); - async function setupDatePicker(params: Partial) { const { format, value } = params; diff --git a/uui/components/datePickers/__tests__/RangeDatePicker.test.tsx b/uui/components/datePickers/__tests__/RangeDatePicker.test.tsx index 64e910cf8f..0a883d251c 100644 --- a/uui/components/datePickers/__tests__/RangeDatePicker.test.tsx +++ b/uui/components/datePickers/__tests__/RangeDatePicker.test.tsx @@ -4,20 +4,6 @@ import { renderSnapshotWithContextAsync, setupComponentForTest, fireEvent, screen, within, } from '@epam/uui-test-utils'; -jest.mock('react-popper', () => ({ - ...jest.requireActual('react-popper'), - Popper: function PopperMock({ children }: any) { - return children({ - ref: jest.fn, - update: jest.fn(), - style: {}, - arrowProps: { ref: jest.fn }, - placement: 'bottom-start', - isReferenceHidden: false, - }); - }, -})); - async function setupRangeDatePicker(params: { value: { from: string; to: string } | null; format?: string }) { const { value, format } = params; diff --git a/uui/components/filters/PresetPanel/__tests__/presetsPanel.test.tsx b/uui/components/filters/PresetPanel/__tests__/presetsPanel.test.tsx index 3f9de5ba38..8b3ab98391 100644 --- a/uui/components/filters/PresetPanel/__tests__/presetsPanel.test.tsx +++ b/uui/components/filters/PresetPanel/__tests__/presetsPanel.test.tsx @@ -13,20 +13,6 @@ import { ColumnsConfig, DataTableState, FiltersConfig, ITablePreset, } from '@epam/uui-core'; -jest.mock('react-popper', () => ({ - ...jest.requireActual('react-popper'), - Popper: function PopperMock({ children }: any) { - return children({ - ref: jest.fn, - update: jest.fn(), - style: {}, - arrowProps: { ref: jest.fn }, - placement: 'bottom-start', - isReferenceHidden: false, - }); - }, -})); - async function openTabMenuAndClickOption(tab: HTMLElement, optionToClick: string) { const btn = within(tab).getByRole('button'); fireEvent.click(btn); diff --git a/uui/components/filters/__tests__/filtersPanel.test.tsx b/uui/components/filters/__tests__/filtersPanel.test.tsx index 6ff2374236..b17d696bdd 100644 --- a/uui/components/filters/__tests__/filtersPanel.test.tsx +++ b/uui/components/filters/__tests__/filtersPanel.test.tsx @@ -21,29 +21,6 @@ type TestItemType = { exitDate: number; }; -jest.mock('react-popper', () => ({ - ...jest.requireActual('react-popper'), - Popper: function PopperMock({ children }: any) { - return children({ - ref: jest.fn, - update: jest.fn(), - style: {}, - arrowProps: { ref: jest.fn }, - placement: 'bottom-start', - isReferenceHidden: false, - }); - }, -})); - -jest.mock('react-focus-lock', () => ({ - ...jest.requireActual('react-focus-lock'), - __esModule: true, - // eslint-disable-next-line react/jsx-no-useless-fragment - default: ({ children }) => (<>{ children }), - // eslint-disable-next-line react/jsx-no-useless-fragment - FreeFocusInside: ({ children }) => (<>{ children }), -})); - const filtersConfigWithoutPredicatesAll: TableFiltersConfig[] = [ { field: 'status', diff --git a/uui/components/overlays/__tests__/__snapshots__/DropdownContainer.test.tsx.snap b/uui/components/overlays/__tests__/__snapshots__/DropdownContainer.test.tsx.snap index edea4375a9..02213785c0 100644 --- a/uui/components/overlays/__tests__/__snapshots__/DropdownContainer.test.tsx.snap +++ b/uui/components/overlays/__tests__/__snapshots__/DropdownContainer.test.tsx.snap @@ -1,63 +1,24 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`DropdownContainer should be rendered correctly 1`] = ` -Array [ -
, -
-
-
-
, -
, -] + } + tabIndex={-1} +> +
`; exports[`DropdownContainer should be rendered correctly 2`] = ` diff --git a/uui/components/overlays/__tests__/__snapshots__/DropdownMenu.test.tsx.snap b/uui/components/overlays/__tests__/__snapshots__/DropdownMenu.test.tsx.snap index b34c27ff61..f731cd0d9d 100644 --- a/uui/components/overlays/__tests__/__snapshots__/DropdownMenu.test.tsx.snap +++ b/uui/components/overlays/__tests__/__snapshots__/DropdownMenu.test.tsx.snap @@ -1,128 +1,89 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`DropdownMenu should be rendered DropdownMenuBody correctly 1`] = ` -Array [ +
, -
-
-
- Menu Item in Submenu -
-
-
-
-
-
- - An example of DropdownMenuHeader - -
-
-
- One More SubMenu -
-
- -
+ Menu Item in Submenu
-
, +
+
+
+
+ + An example of DropdownMenuHeader + +
+
, -] + > +
+ One More SubMenu +
+
+ +
+
`; diff --git a/uui/components/overlays/__tests__/__snapshots__/Modals.test.tsx.snap b/uui/components/overlays/__tests__/__snapshots__/Modals.test.tsx.snap index ba7167b80e..2742c5b1d7 100644 --- a/uui/components/overlays/__tests__/__snapshots__/Modals.test.tsx.snap +++ b/uui/components/overlays/__tests__/__snapshots__/Modals.test.tsx.snap @@ -15,71 +15,35 @@ exports[`Modals should be rendered correctly 1`] = ` onClick={[Function]} />
-
-
-
+
-
-
-
+ /> +
`; @@ -98,109 +62,73 @@ exports[`Modals should be rendered correctly 2`] = ` onClick={[Function]} />
-
+ Test header +
+
+
-
- Test header -
-
-
- -
+ +
+
-
-
-
+ /> +
`; diff --git a/uui/components/pickers/__tests__/PickerInput.test.tsx b/uui/components/pickers/__tests__/PickerInput.test.tsx index 3fef662e87..99ceffb8c5 100644 --- a/uui/components/pickers/__tests__/PickerInput.test.tsx +++ b/uui/components/pickers/__tests__/PickerInput.test.tsx @@ -9,28 +9,6 @@ import { PickerInput, PickerInputProps } from '../PickerInput'; import { IHasEditMode } from '../../types'; import { TestItemType, mockDataSource, mockDataSourceAsync, mockSmallDataSourceAsync, mockTreeLikeDataSourceAsync } from './mocks'; -jest.mock('react-popper', () => ({ - ...jest.requireActual('react-popper'), - Popper: function PopperMock({ children }: any) { - return children({ - ref: jest.fn, - update: jest.fn(), - style: {}, - arrowProps: { ref: jest.fn }, - placement: 'bottom-start', - isReferenceHidden: false, - }); - }, -})); -jest.mock('react-focus-lock', () => ({ - ...jest.requireActual('react-focus-lock'), - __esModule: true, - // eslint-disable-next-line react/jsx-no-useless-fragment - default: ({ children }) => (<>{ children }), - // eslint-disable-next-line react/jsx-no-useless-fragment - FreeFocusInside: ({ children }) => (<>{ children }), -})); - type PickerInputComponentProps = PickerInputBaseProps & PickerInputProps; async function setupPickerInputForTest(params: Partial>) { diff --git a/uui/components/pickers/__tests__/PickerList.test.tsx b/uui/components/pickers/__tests__/PickerList.test.tsx index ab706ca2bb..b3102f269c 100644 --- a/uui/components/pickers/__tests__/PickerList.test.tsx +++ b/uui/components/pickers/__tests__/PickerList.test.tsx @@ -6,28 +6,6 @@ import { Modals } from '@epam/uui-components'; import { PickerList, PickerListProps } from '../PickerList'; import { TestItemType, mockDataSource, mockDataSourceAsync, mockEmptyDataSource } from './mocks'; -jest.mock('react-popper', () => ({ - ...jest.requireActual('react-popper'), - Popper: function PopperMock({ children }: any) { - return children({ - ref: jest.fn, - update: jest.fn(), - style: {}, - arrowProps: { ref: jest.fn }, - placement: 'bottom-start', - isReferenceHidden: false, - }); - }, -})); -jest.mock('react-focus-lock', () => ({ - ...jest.requireActual('react-focus-lock'), - __esModule: true, - // eslint-disable-next-line react/jsx-no-useless-fragment - default: ({ children }) => (<>{ children }), - // eslint-disable-next-line react/jsx-no-useless-fragment - FreeFocusInside: ({ children }) => (<>{ children }), -})); - async function setupPickerListForTest(params: Partial>) { const { result, mocks, setProps } = await setupComponentForTest>( (context): PickerListProps => { diff --git a/uui/components/pickers/__tests__/PickerModal.test.tsx b/uui/components/pickers/__tests__/PickerModal.test.tsx index 6791ac5368..8978e5fd39 100644 --- a/uui/components/pickers/__tests__/PickerModal.test.tsx +++ b/uui/components/pickers/__tests__/PickerModal.test.tsx @@ -6,27 +6,6 @@ import { Button, Modals } from '@epam/uui-components'; import { CascadeSelection, UuiContext } from '@epam/uui-core'; import { act } from 'react-dom/test-utils'; -jest.mock('react-popper', () => ({ - ...jest.requireActual('react-popper'), - Popper: function PopperMock({ children }: any) { - return children({ - ref: jest.fn, - update: jest.fn(), - style: {}, - arrowProps: { ref: jest.fn }, - placement: 'bottom-start', - isReferenceHidden: false, - }); - }, -})); -jest.mock('react-focus-lock', () => ({ - ...jest.requireActual('react-focus-lock'), - __esModule: true, - // eslint-disable-next-line react/jsx-no-useless-fragment - default: ({ children }) => (<>{ children }), - // eslint-disable-next-line react/jsx-no-useless-fragment - FreeFocusInside: ({ children }) => (<>{ children }), -})); const onValueChangeMock = jest.fn(); async function setupPickerModalForTest(params: Partial>) { diff --git a/uui/components/tables/__tests__/__snapshots__/ColumnHeaderDropdown.test.tsx.snap b/uui/components/tables/__tests__/__snapshots__/ColumnHeaderDropdown.test.tsx.snap index 493850f365..a756c27812 100644 --- a/uui/components/tables/__tests__/__snapshots__/ColumnHeaderDropdown.test.tsx.snap +++ b/uui/components/tables/__tests__/__snapshots__/ColumnHeaderDropdown.test.tsx.snap @@ -25,156 +25,112 @@ Array [
,
-
-
- -
- Sort Ascending -
+
+ +
+ Sort Ascending +
+
+
+ -
- Sort Descending -
+
-
-
- Picker + +
+ Sort Descending
-
+
+ Picker +
, ] From 97f0ab432690be45e38aea2d87c0d839430aa64c Mon Sep 17 00:00:00 2001 From: Siarhei Yelin Date: Thu, 30 Nov 2023 15:50:01 +0300 Subject: [PATCH 2/3] fix conflicts --- .../ConfirmationModal.test.tsx.snap | 524 +++---- .../ColumnsConfigurationModal.test.tsx.snap | 1298 ++++++++--------- 2 files changed, 839 insertions(+), 983 deletions(-) diff --git a/uui/components/overlays/__tests__/__snapshots__/ConfirmationModal.test.tsx.snap b/uui/components/overlays/__tests__/__snapshots__/ConfirmationModal.test.tsx.snap index 2ec40510e3..9313fc5f29 100644 --- a/uui/components/overlays/__tests__/__snapshots__/ConfirmationModal.test.tsx.snap +++ b/uui/components/overlays/__tests__/__snapshots__/ConfirmationModal.test.tsx.snap @@ -15,195 +15,159 @@ exports[`ConfirmationModal should be rendered correctly 1`] = ` onClick={[Function]} />
-
+ Test +
+
+
-
- Test -
-
-
- -
+ +
+
+
+
+
-
-
-
-
-
-
-
+
+
+ - + -
+ Save +
+
-
`; @@ -222,202 +186,166 @@ exports[`ConfirmationModal should be rendered correctly 2`] = ` onClick={[Function]} />
-
+ Test +
+
+
-
- Test -
-
-
- -
+ +
+
+
+
-
-
- Test content -
+
+ Test content
-
+
-
-
+ } + >
-
-
+ className="uui-thumb-horizontal" + />
-
+
+
+ - + -
+ Save +
+
-
`; diff --git a/uui/components/tables/columnsConfigurationModal/__tests__/__snapshots__/ColumnsConfigurationModal.test.tsx.snap b/uui/components/tables/columnsConfigurationModal/__tests__/__snapshots__/ColumnsConfigurationModal.test.tsx.snap index 16410291f1..bfb8644b1f 100644 --- a/uui/components/tables/columnsConfigurationModal/__tests__/__snapshots__/ColumnsConfigurationModal.test.tsx.snap +++ b/uui/components/tables/columnsConfigurationModal/__tests__/__snapshots__/ColumnsConfigurationModal.test.tsx.snap @@ -15,123 +15,49 @@ exports[`ColumnsConfigurationModal should be rendered correctly 1`] = ` onClick={[Function]} />
-
-
- Configure columns -
-
-
- -
+ Configure columns
+
-
-
- -
- -
+
+
+
+
+ +
+ +
+ +
+
+ Displayed in table +
+ -
+ +
+
+ +
-
-
+
+
+
+
+
-
- -
- - - -
+ +
-
+
-
-
+ } + >
+
+
-
-
+ } + > +
-
+
+ + +
- - +
+ -
+ Cancel +
+ +
-
`; @@ -498,123 +462,49 @@ exports[`ColumnsConfigurationModal should disable Apply button if all columns ar onClick={[Function]} />
-
-
- Configure columns -
-
-
- -
+ Configure columns
+
-
-
- -
- -
+
+
+
+
+ +
+ +
+ +
+
+ Hidden in table +
+ +
+
+
- Hidden in table -
- +
+ ID +
+ +
+ + + +
+
+
-
- -
- - - -
+ +
+ +
-
+
-
-
+ } + >
+
+
-
-
+ } + > +
-
+
+ + +
- - +
+ -
+ Cancel +
+ +
-
`; From 1a45392ecddd87e6867747c550bec2418fe53065 Mon Sep 17 00:00:00 2001 From: Siarhei_Dzeraviannik Date: Fri, 1 Dec 2023 12:14:21 +0300 Subject: [PATCH 3/3] [Site]: updated query string for theme, removed prefix 'uui-theme' --- app/src/common/AppHeader.tsx | 34 ++++++++++--------- app/src/common/docs/BaseDocsBlock.tsx | 15 ++++---- .../docs/componentEditor/ComponentEditor.tsx | 4 +-- app/src/common/docs/componentEditor/utils.ts | 12 +++---- app/src/documents/DocumentsPage.tsx | 4 +-- app/src/helpers/getCurrentTheme.ts | 7 ++++ app/src/helpers/index.ts | 1 + app/src/helpers/useTheme.tsx | 11 +++--- 8 files changed, 47 insertions(+), 41 deletions(-) create mode 100644 app/src/helpers/getCurrentTheme.ts diff --git a/app/src/common/AppHeader.tsx b/app/src/common/AppHeader.tsx index d361c323e2..a48378f469 100644 --- a/app/src/common/AppHeader.tsx +++ b/app/src/common/AppHeader.tsx @@ -1,23 +1,25 @@ import React from 'react'; -import { BurgerButton, MainMenu, FlexSpacer, GlobalMenu, MainMenuButton, Text, IconContainer, Burger, DropdownMenuBody, Dropdown, DropdownMenuButton, Button } from '@epam/uui'; +import { + Burger, BurgerButton, Button, Dropdown, DropdownMenuBody, DropdownMenuButton, FlexSpacer, GlobalMenu, IconContainer, + MainMenu, MainMenuButton, Text, +} from '@epam/uui'; import { Anchor, MainMenuCustomElement } from '@epam/uui-components'; import { svc } from '../services'; import { analyticsEvents } from '../analyticsEvents'; import { useTheme } from '../helpers/useTheme'; -import { TMode } from './docs'; +import { TMode, TTheme } from './docs'; import { ReactComponent as GitIcon } from '../icons/git-branch-18.svg'; import { ReactComponent as LogoIcon } from '../icons/logo.svg'; import { ReactComponent as DoneIcon } from '@epam/assets/icons/common/notification-done-18.svg'; import css from './AppHeader.module.scss'; -export type Theme = 'uui-theme-promo' | 'uui-theme-loveship' | 'uui-theme-loveship_dark' | 'uui-theme-electric' | 'uui-theme-vanilla_thunder'; -const themeName: Record = { - 'uui-theme-promo': 'Promo', - 'uui-theme-loveship': 'Loveship Light', - 'uui-theme-loveship_dark': 'Loveship Dark', - 'uui-theme-electric': 'Electric', - 'uui-theme-vanilla_thunder': 'Vanilla Thunder', -} as const; +const themeName: Record = { + [TTheme.promo]: 'Promo', + [TTheme.loveship]: 'Loveship Light', + [TTheme.loveship_dark]: 'Loveship Dark', + [TTheme.electric]: 'Electric', + [TTheme.vanilla_thunder]: 'Vanilla Thunder', +}; const GIT_LINK = 'https://github.com/epam/UUI'; @@ -67,15 +69,15 @@ export function AppHeader() { ( - toggleTheme('uui-theme-promo') } /> - toggleTheme('uui-theme-loveship') } /> - toggleTheme('uui-theme-loveship_dark') } /> - toggleTheme('uui-theme-electric') } /> - toggleTheme('uui-theme-vanilla_thunder') } /> + toggleTheme(TTheme.promo) } /> + toggleTheme(TTheme.loveship) } /> + toggleTheme(TTheme.loveship_dark) } /> + toggleTheme(TTheme.electric) } /> + toggleTheme(TTheme.vanilla_thunder) } /> ) } renderTarget={ (props) => ( -