From ac0b4d597442e6045d771be55a1437131b90b305 Mon Sep 17 00:00:00 2001 From: terronator Date: Tue, 2 Jul 2024 12:20:04 +0200 Subject: [PATCH] feat(deps): update to react 18 Co-authored-by: Nicola Alessandro Domingo Co-authored-by: sabato-galasso Co-authored-by: Andrea Stagi Co-authored-by: Lorezz --- CHANGELOG.md | 1 - jest.config.cjs | 378 ++++----- package.json | 23 +- src/Accordion/AccordionBody.tsx | 16 +- src/Badge/Badge.tsx | 4 +- src/Callout/CalloutMoreFooter.tsx | 4 +- src/Dropdown/DropdownToggle.tsx | 2 +- src/GoBack/GoBack.tsx | 4 +- src/Header/HeaderBrand.tsx | 4 +- src/Header/HeaderSocialsZone.tsx | 4 +- src/Input/Input.tsx | 6 +- src/Megamenu/MegamenuFooter.tsx | 4 +- src/NavScroll/useNavScroll.ts | 13 +- src/Notification/Notification.tsx | 6 +- src/Notification/NotificationContent.tsx | 6 +- src/Notification/NotificationManager.tsx | 4 +- src/Notification/core.tsx | 14 +- src/Section/Section.tsx | 4 +- stories/Components/Icon.stories.tsx | 28 +- stories/Components/Notification.stories.tsx | 856 ++++++++++---------- test/Accordion.test.tsx | 6 +- test/BottomNavItem.test.tsx | 11 +- test/Breadcrumb.test.tsx | 4 +- test/Collapse.test.tsx | 4 +- test/Dimmer.test.tsx | 4 +- test/DimmerButtons.test.tsx | 4 +- test/Header.test.tsx | 4 +- test/Hero.test.tsx | 4 +- test/Icon.test.tsx | 6 +- test/Input.test.tsx | 4 +- test/Megamenu.test.tsx | 6 +- test/NavScroll.test.tsx | 2 +- test/Notification.test.tsx | 8 +- test/Progress.test.tsx | 6 +- test/Rating.test.tsx | 12 +- test/Section.test.tsx | 4 +- test/StepperHeaderElement.test.tsx | 4 +- test/TextArea.test.tsx | 4 +- test/TimelinePin.test.tsx | 4 +- test/Toolbar.test.tsx | 6 +- test/ToolbarDividerItem.test.tsx | 4 +- test/ToolbarItem.test.tsx | 6 +- test/__snapshots__/Storybook.test.tsx.snap | 1 - yarn.lock | 325 ++------ 44 files changed, 802 insertions(+), 1022 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 80cca2c16..d73916a60 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -108,4 +108,3 @@ * numeric input component ([d4a299c](https://github.com/italia/design-react-kit/commit/d4a299cb43ad138352deab45d552bd33a3be3b19)) - diff --git a/jest.config.cjs b/jest.config.cjs index 1e7b130c4..3bcc0a050 100644 --- a/jest.config.cjs +++ b/jest.config.cjs @@ -5,192 +5,192 @@ /** @type {import('jest').Config} */ const config = { - // All imported modules in your tests should be mocked automatically - // automock: false, - - // Stop running tests after `n` failures - // bail: 0, - - // The directory where Jest should store its cached dependency information - // cacheDirectory: "/tmp/jest_rs", - - // Automatically clear mock calls, instances, contexts and results before every test - clearMocks: true, - - // Indicates whether the coverage information should be collected while executing the test - collectCoverage: true, - - // An array of glob patterns indicating a set of files for which coverage information should be collected - // collectCoverageFrom: undefined, - - // The directory where Jest should output its coverage files - coverageDirectory: 'coverage', - - // An array of regexp pattern strings used to skip coverage collection - // coveragePathIgnorePatterns: [ - // "/node_modules/" - // ], - - // Indicates which provider should be used to instrument code for coverage - coverageProvider: 'v8', - - // A list of reporter names that Jest uses when writing coverage reports - // coverageReporters: [ - // "json", - // "text", - // "lcov", - // "clover" - // ], - - // An object that configures minimum threshold enforcement for coverage results - // coverageThreshold: undefined, - - // A path to a custom dependency extractor - // dependencyExtractor: undefined, - - // Make calling deprecated APIs throw helpful error messages - // errorOnDeprecated: false, - - // The default configuration for fake timers - // fakeTimers: { - // "enableGlobally": false - // }, - - // Force coverage collection from ignored files using an array of glob patterns - // forceCoverageMatch: [], - - // A path to a module which exports an async function that is triggered once before all test suites - // globalSetup: undefined, - - // A path to a module which exports an async function that is triggered once after all test suites - // globalTeardown: undefined, - - // A set of global variables that need to be available in all test environments - // globals: {}, - - // The maximum amount of workers used to run your tests. Can be specified as % or a number. E.g. maxWorkers: 10% will use 10% of your CPU amount + 1 as the maximum worker number. maxWorkers: 2 will use a maximum of 2 workers. - // maxWorkers: "50%", - - // An array of directory names to be searched recursively up from the requiring module's location - // moduleDirectories: [ - // "node_modules" - // ], - - // An array of file extensions your modules use - moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node', 'mdx'], - - // A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module - moduleNameMapper: { - '^.+.(svg|png|jpg)$': 'jest-transform-stub', - '^.+\\.css$': 'identity-obj-proxy', - '^.+\\.mdx$': '@storybook/addon-docs/jest-transform-mdx' - }, - - // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader - // modulePathIgnorePatterns: [], - - // Activates notifications for test results - // notify: false, - - // An enum that specifies notification mode. Requires { notify: true } - // notifyMode: "failure-change", - - // A preset that is used as a base for Jest's configuration - // preset: undefined, - - // Run tests from one or more projects - // projects: undefined, - - // Use this configuration option to add custom reporters to Jest - // reporters: undefined, - - // Automatically reset mock state before every test - // resetMocks: false, - - // Reset the module registry before running each individual test - // resetModules: false, - - // A path to a custom resolver - // resolver: undefined, - - // Automatically restore mock state and implementation before every test - // restoreMocks: false, - - // The root directory that Jest should scan for tests and modules within - // rootDir: undefined, - - // A list of paths to directories that Jest should use to search for files in - // roots: [ - // "" - // ], - - // Allows you to use a custom runner instead of Jest's default test runner - // runner: "jest-runner", - - // The paths to modules that run some code to configure or set up the testing environment before each test - // setupFiles: [], - - // A list of paths to modules that run some code to configure or set up the testing framework before each test - // setupFilesAfterEnv: [], - - // The number of seconds after which a test is considered as slow and reported as such in the results. - // slowTestThreshold: 5, - - // A list of paths to snapshot serializer modules Jest should use for snapshot testing - // snapshotSerializers: [], - - // The test environment that will be used for testing - testEnvironment: 'jsdom', - - // Options that will be passed to the testEnvironment - // testEnvironmentOptions: {}, - - // Adds a location field to test results - // testLocationInResults: false, - - // The glob patterns Jest uses to detect test files - // testMatch: [ - // "**/__tests__/**/*.[jt]s?(x)", - // "**/?(*.)+(spec|test).[tj]s?(x)" - // ], - - // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped - // testPathIgnorePatterns: [ - // "/node_modules/" - // ], - - // The regexp pattern or array of patterns that Jest uses to detect test files - // testRegex: [], - - // This option allows the use of a custom results processor - // testResultsProcessor: undefined, - - // This option allows use of a custom test runner - // testRunner: "jest-circus/runner", - - // A map from regular expressions to paths to transformers - transform: { - '.(ts|tsx)$': 'ts-jest', - '.(js|jsx)$': 'babel-jest' - } - - // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation - // transformIgnorePatterns: [ - // "/node_modules/", - // "\\.pnp\\.[^\\/]+$" - // ], - - // An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them - // unmockedModulePathPatterns: undefined, - - // Indicates whether each individual test should be reported during the run - // verbose: undefined, - - // An array of regexp patterns that are matched against all source file paths before re-running tests in watch mode - // watchPathIgnorePatterns: [], - - // Whether to use watchman for file crawling - // watchman: true, -}; - -module.exports = config; + // All imported modules in your tests should be mocked automatically + // automock: false, + + // Stop running tests after `n` failures + // bail: 0, + + // The directory where Jest should store its cached dependency information + // cacheDirectory: "/tmp/jest_rs", + + // Automatically clear mock calls, instances, contexts and results before every test + clearMocks: true, + + // Indicates whether the coverage information should be collected while executing the test + collectCoverage: true, + + // An array of glob patterns indicating a set of files for which coverage information should be collected + // collectCoverageFrom: undefined, + + // The directory where Jest should output its coverage files + coverageDirectory: 'coverage', + + // An array of regexp pattern strings used to skip coverage collection + // coveragePathIgnorePatterns: [ + // "/node_modules/" + // ], + + // Indicates which provider should be used to instrument code for coverage + coverageProvider: 'v8', + + // A list of reporter names that Jest uses when writing coverage reports + // coverageReporters: [ + // "json", + // "text", + // "lcov", + // "clover" + // ], + + // An object that configures minimum threshold enforcement for coverage results + // coverageThreshold: undefined, + + // A path to a custom dependency extractor + // dependencyExtractor: undefined, + + // Make calling deprecated APIs throw helpful error messages + // errorOnDeprecated: false, + + // The default configuration for fake timers + // fakeTimers: { + // "enableGlobally": false + // }, + + // Force coverage collection from ignored files using an array of glob patterns + // forceCoverageMatch: [], + + // A path to a module which exports an async function that is triggered once before all test suites + // globalSetup: undefined, + + // A path to a module which exports an async function that is triggered once after all test suites + // globalTeardown: undefined, + + // A set of global variables that need to be available in all test environments + // globals: {}, + + // The maximum amount of workers used to run your tests. Can be specified as % or a number. E.g. maxWorkers: 10% will use 10% of your CPU amount + 1 as the maximum worker number. maxWorkers: 2 will use a maximum of 2 workers. + // maxWorkers: "50%", + + // An array of directory names to be searched recursively up from the requiring module's location + // moduleDirectories: [ + // "node_modules" + // ], + + // An array of file extensions your modules use + moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node', 'mdx'], + + // A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module + moduleNameMapper: { + '^.+.(svg|png|jpg)$': 'jest-transform-stub', + '^.+\\.css$': 'identity-obj-proxy', + '^.+\\.mdx$': '@storybook/addon-docs/jest-transform-mdx' + }, + + // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader + // modulePathIgnorePatterns: [], + + // Activates notifications for test results + // notify: false, + + // An enum that specifies notification mode. Requires { notify: true } + // notifyMode: "failure-change", + + // A preset that is used as a base for Jest's configuration + // preset: undefined, + + // Run tests from one or more projects + // projects: undefined, + + // Use this configuration option to add custom reporters to Jest + // reporters: undefined, + + // Automatically reset mock state before every test + // resetMocks: false, + + // Reset the module registry before running each individual test + // resetModules: false, + + // A path to a custom resolver + // resolver: undefined, + + // Automatically restore mock state and implementation before every test + // restoreMocks: false, + + // The root directory that Jest should scan for tests and modules within + // rootDir: undefined, + + // A list of paths to directories that Jest should use to search for files in + // roots: [ + // "" + // ], + + // Allows you to use a custom runner instead of Jest's default test runner + // runner: "jest-runner", + + // The paths to modules that run some code to configure or set up the testing environment before each test + // setupFiles: [], + + // A list of paths to modules that run some code to configure or set up the testing framework before each test + // setupFilesAfterEnv: [], + + // The number of seconds after which a test is considered as slow and reported as such in the results. + // slowTestThreshold: 5, + + // A list of paths to snapshot serializer modules Jest should use for snapshot testing + // snapshotSerializers: [], + + // The test environment that will be used for testing + testEnvironment: 'jsdom', + + // Options that will be passed to the testEnvironment + // testEnvironmentOptions: {}, + + // Adds a location field to test results + // testLocationInResults: false, + + // The glob patterns Jest uses to detect test files + // testMatch: [ + // "**/__tests__/**/*.[jt]s?(x)", + // "**/?(*.)+(spec|test).[tj]s?(x)" + // ], + + // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped + // testPathIgnorePatterns: [ + // "/node_modules/" + // ], + + // The regexp pattern or array of patterns that Jest uses to detect test files + // testRegex: [], + + // This option allows the use of a custom results processor + // testResultsProcessor: undefined, + + // This option allows use of a custom test runner + // testRunner: "jest-circus/runner", + + // A map from regular expressions to paths to transformers + transform: { + '.(ts|tsx)$': 'ts-jest', + '.(js|jsx)$': 'babel-jest' + } + + // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation + // transformIgnorePatterns: [ + // "/node_modules/", + // "\\.pnp\\.[^\\/]+$" + // ], + + // An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them + // unmockedModulePathPatterns: undefined, + + // Indicates whether each individual test should be reported during the run + // verbose: undefined, + + // An array of regexp patterns that are matched against all source file paths before re-running tests in watch mode + // watchPathIgnorePatterns: [], + + // Whether to use watchman for file crawling + // watchman: true, + }; + + module.exports = config; \ No newline at end of file diff --git a/package.json b/package.json index 7304a030b..f0d5e1ad6 100644 --- a/package.json +++ b/package.json @@ -67,7 +67,7 @@ }, "peerDependencies": { "bootstrap-italia": "2.8.8", - "react": ">=17.0.2" + "react": ">=18.2.0" }, "browserslist": [ "extends browserslist-config-design-italia" @@ -97,14 +97,13 @@ "@storybook/test": "^8.0.5", "@svgr/rollup": "^8.1.0", "@testing-library/jest-dom": "^6.4.2", - "@testing-library/react": "12.1.5", + "@testing-library/react": "^16", "@testing-library/react-hooks": "^8.0.1", "@types/is-number": "^7.0.3", "@types/jest": "^29.5.12", "@types/node": "^20.12.2", - "@types/react": "^17.0.2", - "@types/react-dom": "^17.0.2", - "@types/react-select": "^4.0.15", + "@types/react": "^18.2.75", + "@types/react-dom": "^18.2.24", "@types/react-transition-group": "^4.4.10", "babel-plugin-dynamic-import-node": "^2.3.3", "babel-plugin-polyfill-corejs3": "^0.10.4", @@ -120,8 +119,8 @@ "jest-environment-jsdom": "^29.7.0", "lint-staged": "^13.0.3", "prettier": "^3.2.5", - "react": "^17.0.2", - "react-dom": "^17.0.2", + "react": "^18.2.0", + "react-dom": "^18.2.0", "sass": "^1.75.0", "storybook": "^8.0.5", "ts-jest": "^29.1.2", @@ -135,7 +134,6 @@ "dependencies": { "classnames": "^2.3.1", "is-number": "^7.0.0", - "react-select": "^4.3.0", "react-stickup": "^1.12.1", "react-toastify": "^7.0.4", "react-transition-group": "^4.4.5", @@ -143,7 +141,12 @@ "webfontloader": "^1.6.28" }, "resolutions": { - "@types/react": "17.0.2", - "@types/react-dom": "17.0.2" + "@types/react": "18.2.75", + "@types/react-dom": "18.2.24" + }, + "overrides": { + "react-stickup": { + "react": "^18.2.0" + } } } diff --git a/src/Accordion/AccordionBody.tsx b/src/Accordion/AccordionBody.tsx index 2f45c362e..48308b1d2 100644 --- a/src/Accordion/AccordionBody.tsx +++ b/src/Accordion/AccordionBody.tsx @@ -1,11 +1,9 @@ -import React, { ElementType, useCallback, useState } from 'react'; -import classNames from 'classnames'; +import React, { ElementType, PropsWithChildren, useCallback, useState } from 'react'; +import type { TransitionProps } from 'react-transition-group/Transition'; import { Transition } from 'react-transition-group'; - +import classNames from 'classnames'; import { pick, omit } from '../utils'; import { TransitionTimeouts, TransitionsKeys } from '../transitions'; -import type { TransitionProps } from 'react-transition-group/Transition'; -import type { TransitionStates } from '../transitions'; export type AccordionBodyProps = Partial & { tag?: ElementType; @@ -16,14 +14,14 @@ export type AccordionBodyProps = Partial & { }; // hardcode these entries to avoid leaks -const transitionStatusToClassHash: Record = { +const transitionStatusToClassHash: Record = { entering: 'collapsing', entered: 'collapse show', exiting: 'collapsing', exited: 'collapse' }; -function getTransitionClass(status: TransitionStates) { +function getTransitionClass(status: string) { return transitionStatusToClassHash[status] || 'collapse'; } @@ -39,7 +37,7 @@ export const AccordionBody = ({ children, timeout = TransitionTimeouts.Collapse, ...attributes -}: AccordionBodyProps) => { +}: PropsWithChildren) => { const [height, setHeight] = useState(null); const onEntering = useCallback( @@ -97,7 +95,7 @@ export const AccordionBody = ({ onExiting={onExiting} onExited={onExited} > - {(status: TransitionStates) => { + {(status) => { const transitionClass = getTransitionClass(status); const classes = classNames(className, transitionClass); const listClasses = classNames(listClassName, 'accordion-body'); diff --git a/src/Badge/Badge.tsx b/src/Badge/Badge.tsx index 312cd83c5..9a480d435 100644 --- a/src/Badge/Badge.tsx +++ b/src/Badge/Badge.tsx @@ -1,4 +1,4 @@ -import React, { FC, HTMLAttributes, ElementType, Ref, ReactChild, AnchorHTMLAttributes } from 'react'; +import React, { FC, HTMLAttributes, ElementType, Ref, ReactNode, AnchorHTMLAttributes } from 'react'; import { Badge as BadgeReact } from 'reactstrap'; import { CSSModule } from 'reactstrap/types/lib/utils'; @@ -16,7 +16,7 @@ export type BadgeProps = { /** Da utilizzare per impostare un riferimento all'elemento DOM */ innerRef?: Ref; /** Il contenuto del badge */ - children: ReactChild; + children: ReactNode; testId?: string; } & (HTMLAttributes | AnchorHTMLAttributes); diff --git a/src/Callout/CalloutMoreFooter.tsx b/src/Callout/CalloutMoreFooter.tsx index 76fcbeb88..f766576c9 100644 --- a/src/Callout/CalloutMoreFooter.tsx +++ b/src/Callout/CalloutMoreFooter.tsx @@ -1,5 +1,5 @@ import classNames from 'classnames'; -import React, { ElementType, FC, useState } from 'react'; +import React, { ElementType, FC, PropsWithChildren, useState } from 'react'; import { Button } from '../Button/Button'; import { Icon } from '../Icon/Icon'; @@ -12,7 +12,7 @@ export interface CalloutMoreFooterProps { fileUrl?: string; } -export const CalloutMoreFooter: FC = ({ +export const CalloutMoreFooter: FC> = ({ id = 'cm-footer', tag = 'div', className, diff --git a/src/Dropdown/DropdownToggle.tsx b/src/Dropdown/DropdownToggle.tsx index c35d8f050..c3b21d74d 100644 --- a/src/Dropdown/DropdownToggle.tsx +++ b/src/Dropdown/DropdownToggle.tsx @@ -48,7 +48,7 @@ export const DropdownToggle: FC = ({ return ( { diff --git a/src/Header/HeaderBrand.tsx b/src/Header/HeaderBrand.tsx index 3b095dde3..0b0398aab 100644 --- a/src/Header/HeaderBrand.tsx +++ b/src/Header/HeaderBrand.tsx @@ -1,4 +1,4 @@ -import React, { AnchorHTMLAttributes, ElementType, ReactChild } from 'react'; +import React, { AnchorHTMLAttributes, ElementType, ReactNode } from 'react'; import classNames from 'classnames'; import { NavbarBrand } from 'reactstrap'; import { CSSModule } from 'reactstrap/types/lib/utils'; @@ -21,7 +21,7 @@ export interface HeaderBrandProps extends AnchorHTMLAttributes { @@ -7,7 +7,7 @@ export interface HeaderSocialsZoneProps extends HTMLAttributes { /** Etichetta utilizzata per presentare i social presenti. In caso di stringa vuota non verrà mostrata alcuna etichetta */ label?: string; /** Utilizzato per elencare i social da mostrare */ - children?: ReactChild; + children?: ReactNode; testId?: string; } diff --git a/src/Input/Input.tsx b/src/Input/Input.tsx index fff6350b7..18eb8e100 100644 --- a/src/Input/Input.tsx +++ b/src/Input/Input.tsx @@ -307,9 +307,9 @@ export const Input = ({ 'input-group': true, 'input-number': true, disabled: rest.disabled, - 'input-number-percentage': type == 'percentage', - 'input-number-currency': type == 'currency', - 'input-number-adaptive': type == 'adaptive' + 'input-number-percentage': type === 'percentage', + 'input-number-currency': type === 'currency', + 'input-number-adaptive': type === 'adaptive' })} style={{ width }} ref={divResizeRef} diff --git a/src/Megamenu/MegamenuFooter.tsx b/src/Megamenu/MegamenuFooter.tsx index 2c3ba9168..59892e639 100644 --- a/src/Megamenu/MegamenuFooter.tsx +++ b/src/Megamenu/MegamenuFooter.tsx @@ -1,4 +1,4 @@ -import React, { FC, HTMLAttributes } from 'react'; +import React, { FC, HTMLAttributes, PropsWithChildren } from 'react'; import classNames from 'classnames'; export interface MegamenuFooterProps extends HTMLAttributes { @@ -18,7 +18,7 @@ export const MegamenuFooter: FC & { ); }; -const Item: FC = ({ href, children }) => { +const Item: FC> = ({ href, children }) => { return ( {children} diff --git a/src/NavScroll/useNavScroll.ts b/src/NavScroll/useNavScroll.ts index e5394882c..21127689f 100644 --- a/src/NavScroll/useNavScroll.ts +++ b/src/NavScroll/useNavScroll.ts @@ -122,23 +122,24 @@ export function useNavScroll(args: useNavScrollArgs = {}): useNavScrollResult { forceRecompute ]); - const refresh = useCallback(() => { + const refresh = useCallback( debounce(() => { setCounter(counter + 1); - }, REGISTER_DELAY); - }, [counter]); + }, REGISTER_DELAY), + [counter] + ); const register = useCallback( - (id, options = {}) => { + (id: string, options = {}) => { if (!hasWindow) { return { id, ref: null }; } const alreadyRegistered = id in elsLookup; - const entry = alreadyRegistered ? els.current.find(({ id: existingId }) => existingId === id) : options; + const entry = (alreadyRegistered ? els.current.find(({ id: existingId }) => existingId === id) : options) as any; const ref = (entry && entry.ref) || createRef(); if (!alreadyRegistered) { - els.current = [...els.current, { id, ref, parent: options.parent }]; + els.current = [...els.current, { id, ref, parent: (options as any).parent }]; refresh(); } return { id, ref }; diff --git a/src/Notification/Notification.tsx b/src/Notification/Notification.tsx index 86bfad743..62c639de5 100644 --- a/src/Notification/Notification.tsx +++ b/src/Notification/Notification.tsx @@ -1,5 +1,5 @@ -import React, { CSSProperties, FC, useEffect } from 'react'; -import { ToastProps, cssTransition, useToast } from 'react-toastify'; +import React, { CSSProperties, FC, PropsWithChildren, useEffect } from 'react'; +import { ToastProps, useToast, cssTransition } from 'react-toastify'; import { NotificationToastProps } from './NotificationContent'; import { NotificationCommonProps } from './types'; @@ -7,7 +7,7 @@ export type NotificationProps = Omit & NotificationCom const dummyTransition = /* @__PURE__ */ cssTransition({ enter: '', exit: '' }); -export const Notification: FC = (props) => { +export const Notification: FC> = (props) => { const { toastRef, eventHandlers } = useToast({ ...props, transition: dummyTransition diff --git a/src/Notification/NotificationContent.tsx b/src/Notification/NotificationContent.tsx index 0601dc840..0a2a799ab 100644 --- a/src/Notification/NotificationContent.tsx +++ b/src/Notification/NotificationContent.tsx @@ -1,4 +1,4 @@ -import React, { CSSProperties, ReactChild } from 'react'; +import React, { CSSProperties, ReactNode } from 'react'; import { Button } from '../Button/Button'; import classNames from 'classnames'; import { Icon } from '../Icon/Icon'; @@ -18,7 +18,7 @@ type NotificationElementProps = { closeToast?: () => void; toastProps?: any; title: string; - body?: ReactChild; + body?: ReactNode; options: NotificationOptions; }; @@ -113,7 +113,7 @@ function NotificationElement({ closeToast, toastProps, title, body, options }: N */ export const createNotification = ( title: string, - body: ReactChild | undefined, + body: ReactNode | undefined, options: NotificationOptions, closeToast?: () => void, toastProps?: any diff --git a/src/Notification/NotificationManager.tsx b/src/Notification/NotificationManager.tsx index b787512ab..22a5f233d 100644 --- a/src/Notification/NotificationManager.tsx +++ b/src/Notification/NotificationManager.tsx @@ -1,4 +1,4 @@ -import React, { CSSProperties } from 'react'; +import React, { CSSProperties, ReactNode } from 'react'; import { cssTransition, useToastContainer } from 'react-toastify'; import { Notification } from './Notification'; import { getBorderStyleFix } from './NotificationContent'; @@ -52,7 +52,7 @@ export const NotificationManager = (props: NotificationManagerProps) => { isIn={isToastActive(toastProps.toastId)} key={`notification-${toastProps.key}`} > - {content} + {content as ReactNode} ); }); diff --git a/src/Notification/core.tsx b/src/Notification/core.tsx index dd01f73eb..9ce5195fa 100644 --- a/src/Notification/core.tsx +++ b/src/Notification/core.tsx @@ -1,4 +1,4 @@ -import { ReactChild } from 'react'; +import { ReactNode, isValidElement } from 'react'; import { toast } from 'react-toastify'; import { createNotification } from './NotificationContent'; import type { NotificationOptions } from './NotificationContent'; @@ -6,15 +6,15 @@ import { NotificationId } from './types'; export function notify(title: string, options?: NotificationOptions): NotificationId; -export function notify(title: string, body: ReactChild, options?: NotificationOptions): NotificationId; +export function notify(title: string, body: ReactNode, options?: NotificationOptions): NotificationId; export function notify( title: string, - bodyOrOptions?: ReactChild | NotificationOptions, + bodyOrOptions?: ReactNode | NotificationOptions, options?: NotificationOptions ): NotificationId { - let body: ReactChild | undefined = isReactChild(bodyOrOptions) ? bodyOrOptions : undefined; - const safeOptions = isReactChild(bodyOrOptions) ? { ...options } : bodyOrOptions || {}; + let body: ReactNode | undefined = isReactNode(bodyOrOptions) ? bodyOrOptions : undefined; + const safeOptions = isReactNode(bodyOrOptions) ? { ...options } : bodyOrOptions || {}; const NotificationContent = createNotification(title, body, safeOptions); const internalOptions = { ...safeOptions, @@ -23,8 +23,8 @@ export function notify( return toast(NotificationContent, internalOptions) as NotificationId; } -function isReactChild(el: ReactChild | NotificationOptions | undefined): el is ReactChild { - return el != null && (typeof el === 'string' || typeof el === 'number' || 'type' in el); +function isReactNode(el: ReactNode | NotificationOptions | undefined): el is ReactNode { + return el != null && (typeof el === 'string' || typeof el === 'number' || isValidElement(el)); } notify.dismiss = (id?: NotificationId) => toast.dismiss(id); diff --git a/src/Section/Section.tsx b/src/Section/Section.tsx index d97b7eb10..0df748182 100644 --- a/src/Section/Section.tsx +++ b/src/Section/Section.tsx @@ -1,4 +1,4 @@ -import React, { FC, HTMLAttributes, ReactChild } from 'react'; +import React, { FC, HTMLAttributes, ReactNode } from 'react'; import classNames from 'classnames'; import { notifyDeprecation } from '../utils'; @@ -21,7 +21,7 @@ export interface SectionProps extends HTMLAttributes { */ image?: string; /** Il contenuto della sezione */ - children?: ReactChild | ReactChild[]; + children?: ReactNode | ReactNode[]; /** Quando abilitato applica lo sfondo di tipo "neutral" al componente. * @deprecated. Utilizzare `color="neutral"` */ diff --git a/stories/Components/Icon.stories.tsx b/stories/Components/Icon.stories.tsx index 4ffc41822..d7c05cf4b 100644 --- a/stories/Components/Icon.stories.tsx +++ b/stories/Components/Icon.stories.tsx @@ -3,8 +3,8 @@ import React from 'react'; import { Col, Icon, Row, icons } from '../../src'; const meta: Meta = { - title: "Documentazione/Utilities/Icon", - component: Icon, + title: 'Documentazione/Utilities/Icon', + component: Icon }; export default meta; @@ -12,14 +12,9 @@ export default meta; type Story = StoryObj; export const EsempioInterattivo: Story = { - render: ({ - icon, - title, - size, - padding, - className, - color - }) => (), + render: ({ icon, title, size, padding, className, color }) => ( + + ), args: { icon: 'it-tool', title: 'Alt Text', @@ -78,7 +73,7 @@ export const EsempioPadding: Story = { color: '', className: 'bg-grey' } -} +}; export const EsempioColori: Story = { render: ({ icon }) => { @@ -96,7 +91,7 @@ export const EsempioColori: Story = { args: { icon: 'it-check-circle' } -} +}; export const EsempioAllineamento: Story = { render: () => { @@ -108,7 +103,7 @@ export const EsempioAllineamento: Story = { ); } -} +}; export const ListaIcone: Story = { render: () => { @@ -116,13 +111,14 @@ export const ListaIcone: Story = { {icons.map((icon) => ( -  {icon} + +  {icon} ))} ); } -} +}; export const EsempioLoghiEsterni = { render: () => { @@ -138,4 +134,4 @@ export const EsempioLoghiEsterni = { ); } -} +}; diff --git a/stories/Components/Notification.stories.tsx b/stories/Components/Notification.stories.tsx index af23d2456..1ebd99839 100644 --- a/stories/Components/Notification.stories.tsx +++ b/stories/Components/Notification.stories.tsx @@ -1,443 +1,413 @@ -import { Meta, StoryObj } from '@storybook/react'; -import React, { CSSProperties, ReactChild } from 'react'; -import { - Button, - NotificationManager, - NotificationProps, - createNotification, - notify -} from '../../src'; - -const NotificationStyle = { - right: 'auto', - bottom: 'auto', - top: 'auto', - left: 'auto' -}; - -const meta: Meta = { - title: "Documentazione/Componenti/Notification", - component: NotificationManager, -}; - -export default meta; - -type Story = StoryObj; - -interface NotificationDocProps { - id: string; - title: string; - state?: NotificationProps['state']; - fix?: NotificationProps['fix']; - dismissable?: boolean; - icon?: NotificationProps['icon']; - style?: CSSProperties | undefined; - children?: ReactChild; -} - -const NotificationDoc = ({ - title, - state, - fix, - dismissable, - icon, - style, - children -}: NotificationDocProps) => { - return createNotification( - title, - children, - { - state, - fix, - icon, - dismissable - }, - () => { }, - { autoClose: false, style } - ); -}; - -export const EsempioMinimo: Story = { - render: () => { - return ( -
- - -
- ); - } -}; - -export const EsempioMinimoComponente: Story = { - render: () => { - return ( -
- - -
- ); - } -}; - -export const _Example: Story = { - render: () => ( -
-
-
-

- Notifica standard -

- -
-
-

- Notifica con icona -

- -
-
-
- ) -}; - -export const _NotificationWithMessageStatic: Story = { - render: () => ( -
-
-
-

- Notifica standard -

- - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor… - -
-
-

- Notifica con icona -

- - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor… - -
-
-
- ) -}; - -export const Dismissable: Story = { - render: () => ( -
-
-
-

- Notifica standard -

- -
-
-

- Notifica con icona -

- - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor… - -
-
-
- ) -}; - -export const States: Story = { - render: () => { - return ( -
-
-
-

- Success -

- -
-
-

- Error -

- -
-
-
-
-

- Info -

- -
-
-

- Warning -

- -
-
-
- ); - } -}; - -export const _RoundingOfCorners: Story = { - render: () => { - return ( -
-
-
-

- Base (4 angoli arrotondati) -

- -
-
-

- top-fix -

-
- -
-

- bottom-fix -

-
- -
-

- left-fix -

-
- -
-

- right-fix -

-
- -
-
-
-
- ); - } -}; - -export const DefaultLocation: Story = { - render: () => { - return ( -
- - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor… - -
- ); - } -}; - -export const FixedPositions: Story = { - render: () => { - return ( -
-
- - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor… - -
-
- -
-
- -
-
- - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor… - -
-
- ); - } -}; - -export const NotificationOptionsComponent_Fake = ( -) => { - return null; -}; - -//Componenti non usati ma presenti nella precedente documentazione - -/* - -export const _NotificationWithMessage_story_hidden: Story = { - render: () => { - return ( -
- - - -
- ); - }, - parameters: { - // disables Chromatic's snapshotting on a story level - chromatic: { disableSnapshot: true } - } -}; - -export const EsempioInterattivo: Story = { - render: ({ - title, - message, - duration, - icon, - state, - fix, - dismissable, - closeOnClick - }) => { - return ( -
- - - -
- ); - }, - parameters : { controls: { expanded: true } } - args : { - title: 'Titolo', - message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…', - fix: undefined, - dismissable: false, - closeOnClick: false, - duration: 6000, - icon: undefined, - state: undefined - }, - argTypes : { - fix: { - control: { - type: 'select', - options: [undefined, 'top', 'bottom', 'right', 'left'] - } - }, - state: { - control: { - type: 'select', - options: [undefined, 'success', 'error', 'info', 'warning'] - } - }, - icon: { - control: { - type: 'select', - options: [undefined, 'it-tool', 'it-camera', 'it-check', 'it-calendar'] - } - } - }; -}; */ \ No newline at end of file +import { Meta, StoryObj } from '@storybook/react'; +import React, { CSSProperties, ReactNode } from 'react'; +import { Button, NotificationManager, NotificationProps, createNotification, notify } from '../../src'; + +const NotificationStyle = { + right: 'auto', + bottom: 'auto', + top: 'auto', + left: 'auto' +}; + +const meta: Meta = { + title: 'Documentazione/Componenti/Notification', + component: NotificationManager +}; + +export default meta; + +type Story = StoryObj; + +interface NotificationDocProps { + id: string; + title: string; + state?: NotificationProps['state']; + fix?: NotificationProps['fix']; + dismissable?: boolean; + icon?: NotificationProps['icon']; + style?: CSSProperties | undefined; + children?: ReactNode; +} + +const NotificationDoc = ({ title, state, fix, dismissable, icon, style, children }: NotificationDocProps) => { + return createNotification( + title, + children, + { + state, + fix, + icon, + dismissable + }, + () => {}, + { autoClose: false, style } + ); +}; + +export const EsempioMinimo: Story = { + render: () => { + return ( +
+ + +
+ ); + } +}; + +export const EsempioMinimoComponente: Story = { + render: () => { + return ( +
+ + +
+ ); + } +}; + +export const _Example: Story = { + render: () => ( +
+
+
+

+ Notifica standard +

+ +
+
+

+ Notifica con icona +

+ +
+
+
+ ) +}; + +export const _NotificationWithMessageStatic: Story = { + render: () => ( +
+
+
+

+ Notifica standard +

+ + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor… + +
+
+

+ Notifica con icona +

+ + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor… + +
+
+
+ ) +}; + +export const Dismissable: Story = { + render: () => ( +
+
+
+

+ Notifica standard +

+ +
+
+

+ Notifica con icona +

+ + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor… + +
+
+
+ ) +}; + +export const States: Story = { + render: () => { + return ( +
+
+
+

+ Success +

+ +
+
+

+ Error +

+ +
+
+
+
+

+ Info +

+ +
+
+

+ Warning +

+ +
+
+
+ ); + } +}; + +export const _RoundingOfCorners: Story = { + render: () => { + return ( +
+
+
+

+ Base (4 angoli arrotondati) +

+ +
+
+

+ top-fix +

+
+ +
+

+ bottom-fix +

+
+ +
+

+ left-fix +

+
+ +
+

+ right-fix +

+
+ +
+
+
+
+ ); + } +}; + +export const DefaultLocation: Story = { + render: () => { + return ( +
+ + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor… + +
+ ); + } +}; + +export const FixedPositions: Story = { + render: () => { + return ( +
+
+ + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor… + +
+
+ +
+
+ +
+
+ + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor… + +
+
+ ); + } +}; + +export const NotificationOptionsComponent_Fake = () => { + return null; +}; + +//Componenti non usati ma presenti nella precedente documentazione + +/* + +export const _NotificationWithMessage_story_hidden: Story = { + render: () => { + return ( +
+ + + +
+ ); + }, + parameters: { + // disables Chromatic's snapshotting on a story level + chromatic: { disableSnapshot: true } + } +}; + +export const EsempioInterattivo: Story = { + render: ({ + title, + message, + duration, + icon, + state, + fix, + dismissable, + closeOnClick + }) => { + return ( +
+ + + +
+ ); + }, + parameters : { controls: { expanded: true } } + args : { + title: 'Titolo', + message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…', + fix: undefined, + dismissable: false, + closeOnClick: false, + duration: 6000, + icon: undefined, + state: undefined + }, + argTypes : { + fix: { + control: { + type: 'select', + options: [undefined, 'top', 'bottom', 'right', 'left'] + } + }, + state: { + control: { + type: 'select', + options: [undefined, 'success', 'error', 'info', 'warning'] + } + }, + icon: { + control: { + type: 'select', + options: [undefined, 'it-tool', 'it-camera', 'it-check', 'it-calendar'] + } + } + }; +}; */ diff --git a/test/Accordion.test.tsx b/test/Accordion.test.tsx index d4c4e9331..c4a328e21 100644 --- a/test/Accordion.test.tsx +++ b/test/Accordion.test.tsx @@ -1,8 +1,8 @@ -import '@testing-library/jest-dom'; -import { render, screen } from '@testing-library/react'; import React from 'react'; -import { AccordionItem } from 'reactstrap'; +import { render, screen } from '@testing-library/react'; +import '@testing-library/jest-dom'; import { Accordion, AccordionHeader } from '../src'; +import { AccordionItem } from 'reactstrap'; describe('Accordion component', () => { it('should work as container for children elements', () => { diff --git a/test/BottomNavItem.test.tsx b/test/BottomNavItem.test.tsx index ef458ca75..24e058ea7 100644 --- a/test/BottomNavItem.test.tsx +++ b/test/BottomNavItem.test.tsx @@ -1,18 +1,19 @@ -import '@testing-library/jest-dom'; -import { render, screen } from '@testing-library/react'; import React from 'react'; +import { screen, render } from '@testing-library/react'; +import '@testing-library/jest-dom'; + import { BottomNavItem, preloadIcons } from '../src'; // Icons are now async, so preload them to make it behave in an sync way beforeAll(() => preloadIcons(['it-comment'])); // Test for breaking changes -test('Should support old url props as @deprecated', () => { - const { getByRole } = render(); +test('Should support old link props as @deprecated', () => { + const { getByRole } = render(); expect(getByRole('link')).toHaveAttribute('href', '/my-url'); }); test('should have a testId for resilient UI changes', () => { - render(); + render(); expect(screen.getByTestId('bottom-nav-test-id')).toBeTruthy(); }); diff --git a/test/Breadcrumb.test.tsx b/test/Breadcrumb.test.tsx index dddee2114..a6c6b83d1 100644 --- a/test/Breadcrumb.test.tsx +++ b/test/Breadcrumb.test.tsx @@ -1,6 +1,6 @@ -import "@testing-library/jest-dom"; -import { render, screen } from '@testing-library/react'; import React from 'react'; +import { render, screen } from '@testing-library/react'; +import '@testing-library/jest-dom'; import { Breadcrumb } from '../src'; describe('Breadcrumb component', () => { diff --git a/test/Collapse.test.tsx b/test/Collapse.test.tsx index 2f3e49381..4c0723bea 100644 --- a/test/Collapse.test.tsx +++ b/test/Collapse.test.tsx @@ -1,6 +1,6 @@ -import "@testing-library/jest-dom"; -import { render, screen } from '@testing-library/react'; import React from 'react'; +import { render, screen } from '@testing-library/react'; +import '@testing-library/jest-dom'; import { Collapse } from '../src'; describe('Collapse component', () => { diff --git a/test/Dimmer.test.tsx b/test/Dimmer.test.tsx index 6b8f7d027..4c6742f04 100644 --- a/test/Dimmer.test.tsx +++ b/test/Dimmer.test.tsx @@ -1,6 +1,6 @@ -import "@testing-library/jest-dom"; -import { render, screen } from '@testing-library/react'; import React from 'react'; +import { render, screen } from '@testing-library/react'; +import '@testing-library/jest-dom'; import { Dimmer } from '../src'; diff --git a/test/DimmerButtons.test.tsx b/test/DimmerButtons.test.tsx index 0c83cf3fb..4068959d1 100644 --- a/test/DimmerButtons.test.tsx +++ b/test/DimmerButtons.test.tsx @@ -1,6 +1,6 @@ -import "@testing-library/jest-dom"; -import { render, screen } from '@testing-library/react'; import React from 'react'; +import { render, screen } from '@testing-library/react'; +import '@testing-library/jest-dom'; import { DimmerButtons } from '../src'; diff --git a/test/Header.test.tsx b/test/Header.test.tsx index 87c8cc55c..9497d45ee 100644 --- a/test/Header.test.tsx +++ b/test/Header.test.tsx @@ -1,6 +1,6 @@ -import "@testing-library/jest-dom"; -import { render } from '@testing-library/react'; import React from 'react'; +import { render } from '@testing-library/react'; +import '@testing-library/jest-dom'; import { Header } from '../src'; diff --git a/test/Hero.test.tsx b/test/Hero.test.tsx index 6eb97ce2e..eb0ab535f 100644 --- a/test/Hero.test.tsx +++ b/test/Hero.test.tsx @@ -1,6 +1,6 @@ -import "@testing-library/jest-dom"; -import { render, screen } from '@testing-library/react'; import React from 'react'; +import { render, screen } from '@testing-library/react'; +import '@testing-library/jest-dom'; import { Hero, HeroBackground, HeroButton, HeroTitle } from '../src'; describe('Hero component', () => { diff --git a/test/Icon.test.tsx b/test/Icon.test.tsx index a33d29a9e..06654c3d0 100644 --- a/test/Icon.test.tsx +++ b/test/Icon.test.tsx @@ -1,10 +1,10 @@ -import "@testing-library/jest-dom"; -import { render, waitFor, within } from '@testing-library/react'; import React from 'react'; +import { render, waitFor, within } from '@testing-library/react'; +import '@testing-library/jest-dom'; +import { clearIconCache, Icon, preloadIcons, icons } from '../src'; import { readFile } from 'fs/promises'; import { join } from 'path'; -import { Icon, clearIconCache, icons, preloadIcons } from '../src'; async function getExceptionList() { const content = await readFile(join(__dirname, './', 'icons-with-no-title.txt'), 'utf8'); diff --git a/test/Input.test.tsx b/test/Input.test.tsx index 289f61fa8..380db7c55 100644 --- a/test/Input.test.tsx +++ b/test/Input.test.tsx @@ -1,6 +1,6 @@ -import "@testing-library/jest-dom"; -import { act, fireEvent, render, screen } from '@testing-library/react'; import React from 'react'; +import { act, fireEvent, render, screen } from '@testing-library/react'; +import '@testing-library/jest-dom'; import { Button, Icon, Input, preloadIcons } from '../src'; diff --git a/test/Megamenu.test.tsx b/test/Megamenu.test.tsx index 5c1bb9af5..72ebaf25e 100644 --- a/test/Megamenu.test.tsx +++ b/test/Megamenu.test.tsx @@ -1,7 +1,7 @@ -import "@testing-library/jest-dom"; -import { render, screen } from '@testing-library/react'; import React from 'react'; -import { MegamenuFooter, MegamenuHighlightColumn, MegamenuItem, preloadIcons } from '../src'; +import { render, screen } from '@testing-library/react'; +import '@testing-library/jest-dom'; +import { MegamenuItem, MegamenuFooter, MegamenuHighlightColumn, preloadIcons } from '../src'; // Icons are now async, so preload them to make it behave in an sync way beforeAll(() => preloadIcons(['it-list'])); diff --git a/test/NavScroll.test.tsx b/test/NavScroll.test.tsx index 1f9aacef0..997e7394e 100644 --- a/test/NavScroll.test.tsx +++ b/test/NavScroll.test.tsx @@ -1,4 +1,4 @@ -import { renderHook } from '@testing-library/react-hooks'; //react 18 -> https://github.com/testing-library/react-hooks-testing-library?tab=readme-ov-file#a-note-about-react-18-support +import { renderHook } from '@testing-library/react'; //react 18 -> https://github.com/testing-library/react-hooks-testing-library?tab=readme-ov-file#a-note-about-react-18-support import { useSizeDetector, useSizeDetectorArgs } from '../src/NavScroll/useSizeDetector'; function getDefaultProps(): useSizeDetectorArgs { diff --git a/test/Notification.test.tsx b/test/Notification.test.tsx index ef217cf47..b5931b528 100644 --- a/test/Notification.test.tsx +++ b/test/Notification.test.tsx @@ -1,6 +1,6 @@ -import "@testing-library/jest-dom"; -import { act, fireEvent, Matcher, render, screen, waitFor, waitForElementToBeRemoved } from '@testing-library/react'; import React from 'react'; +import { act, fireEvent, Matcher, render, screen, waitFor, waitForElementToBeRemoved } from '@testing-library/react'; +import '@testing-library/jest-dom'; import { NotificationId, NotificationManager, notify, preloadIcons } from '../src'; @@ -170,7 +170,7 @@ describe('Notifications', () => { expect(onClose).toHaveBeenCalled(); }); - describe('local overrides', () => { }); + describe('local overrides', () => {}); }); describe('Notification content', () => { @@ -219,6 +219,6 @@ describe('Notifications', () => { await expect(screen.findAllByRole('img')).rejects.toThrowError(); }); - it('should apply a state styling and relative icon when set', () => { }); + it('should apply a state styling and relative icon when set', () => {}); }); }); diff --git a/test/Progress.test.tsx b/test/Progress.test.tsx index 014702770..192eb8b15 100644 --- a/test/Progress.test.tsx +++ b/test/Progress.test.tsx @@ -1,9 +1,9 @@ -import "@testing-library/jest-dom"; -import { render, screen } from '@testing-library/react'; import React from 'react'; +import { render, screen } from '@testing-library/react'; +import '@testing-library/jest-dom'; -import { Progress } from '../src'; import { logError } from '../src/utils'; +import { Progress } from '../src'; jest.mock('../src/utils', () => ({ logError: jest.fn() diff --git a/test/Rating.test.tsx b/test/Rating.test.tsx index cffd6aea9..623fb8d2e 100644 --- a/test/Rating.test.tsx +++ b/test/Rating.test.tsx @@ -1,10 +1,10 @@ -import "@testing-library/jest-dom"; -import { fireEvent, render, screen } from '@testing-library/react'; import React from 'react'; +import { render, fireEvent, screen } from '@testing-library/react'; +import '@testing-library/jest-dom'; -import { Rating, preloadIcons } from '../src'; -import { isCustomLegendObject } from '../src/Rating/Rating'; import * as Utils from '../src/utils'; +import { isCustomLegendObject } from '../src/Rating/Rating'; +import { Rating, preloadIcons } from '../src'; jest.mock('./../src/utils', () => { const utilModule = jest.requireActual('./../src/utils'); @@ -124,13 +124,13 @@ describe('Rating', () => { describe('isCustomLegendObject', () => { it('Should return true', () => { - expect(isCustomLegendObject({ content: true })).toBeTruthy(); + expect(isCustomLegendObject({ content: true, srOnly: true })).toBeTruthy(); }); it('Should return false', () => { expect(isCustomLegendObject(null)).toBeFalsy(); expect(isCustomLegendObject('null')).toBeFalsy(); - expect(isCustomLegendObject({ notContent: true })).toBeFalsy(); + expect(isCustomLegendObject(<>)).toBeFalsy(); }); }); diff --git a/test/Section.test.tsx b/test/Section.test.tsx index 8686abe8b..d22572b03 100644 --- a/test/Section.test.tsx +++ b/test/Section.test.tsx @@ -1,6 +1,6 @@ -import "@testing-library/jest-dom"; -import { render, screen } from '@testing-library/react'; import React from 'react'; +import { render, screen } from '@testing-library/react'; +import '@testing-library/jest-dom'; import { Section } from '../src'; import { muteConsoleWithCheck } from './helper'; diff --git a/test/StepperHeaderElement.test.tsx b/test/StepperHeaderElement.test.tsx index 703b60128..41cd7b6b7 100644 --- a/test/StepperHeaderElement.test.tsx +++ b/test/StepperHeaderElement.test.tsx @@ -1,6 +1,6 @@ -import "@testing-library/jest-dom"; -import { render, screen } from '@testing-library/react'; import React from 'react'; +import { render, screen } from '@testing-library/react'; +import '@testing-library/jest-dom'; import { preloadIcons, StepperHeaderElement } from '../src'; diff --git a/test/TextArea.test.tsx b/test/TextArea.test.tsx index 7beca9d5d..b605dcb23 100644 --- a/test/TextArea.test.tsx +++ b/test/TextArea.test.tsx @@ -1,6 +1,6 @@ -import "@testing-library/jest-dom"; -import { render, screen } from '@testing-library/react'; import React from 'react'; +import { render, screen } from '@testing-library/react'; +import '@testing-library/jest-dom'; import { TextArea } from '../src'; diff --git a/test/TimelinePin.test.tsx b/test/TimelinePin.test.tsx index 3588a3737..0145d27d7 100644 --- a/test/TimelinePin.test.tsx +++ b/test/TimelinePin.test.tsx @@ -1,6 +1,6 @@ -import "@testing-library/jest-dom"; -import { render, screen } from '@testing-library/react'; import React from 'react'; +import { render, screen } from '@testing-library/react'; +import '@testing-library/jest-dom'; import { preloadIcons, TimelinePin } from '../src'; diff --git a/test/Toolbar.test.tsx b/test/Toolbar.test.tsx index 808d61ce5..8827a693f 100644 --- a/test/Toolbar.test.tsx +++ b/test/Toolbar.test.tsx @@ -1,7 +1,7 @@ -import "@testing-library/jest-dom"; -import { render, screen } from '@testing-library/react'; import React from 'react'; -import { Toolbar, ToolbarItem, preloadIcons } from '../src'; +import { render, screen } from '@testing-library/react'; +import '@testing-library/jest-dom'; +import { preloadIcons, Toolbar, ToolbarItem } from '../src'; describe('Toolbar component', () => { // Icons are now async, so preload them to make it behave in an sync way diff --git a/test/ToolbarDividerItem.test.tsx b/test/ToolbarDividerItem.test.tsx index dab275cbb..d0f18a363 100644 --- a/test/ToolbarDividerItem.test.tsx +++ b/test/ToolbarDividerItem.test.tsx @@ -1,6 +1,6 @@ -import "@testing-library/jest-dom"; -import { render } from '@testing-library/react'; import React from 'react'; +import { render } from '@testing-library/react'; +import '@testing-library/jest-dom'; import { ToolbarDividerItem } from '../src'; describe('ToolbarDividerItem component', () => { diff --git a/test/ToolbarItem.test.tsx b/test/ToolbarItem.test.tsx index 7bc4940e9..392d7b341 100644 --- a/test/ToolbarItem.test.tsx +++ b/test/ToolbarItem.test.tsx @@ -1,7 +1,7 @@ -import "@testing-library/jest-dom"; -import { fireEvent, render, screen } from '@testing-library/react'; import React, { ReactElement } from 'react'; -import { Toolbar, ToolbarItem, preloadIcons } from '../src'; +import { fireEvent, render, screen } from '@testing-library/react'; +import '@testing-library/jest-dom'; +import { ToolbarItem, preloadIcons, Toolbar } from '../src'; function renderWithSize(size: 'small' | 'medium' | 'large', ui: ReactElement) { return render({ui}); diff --git a/test/__snapshots__/Storybook.test.tsx.snap b/test/__snapshots__/Storybook.test.tsx.snap index bfac3be2e..ba3f099eb 100644 --- a/test/__snapshots__/Storybook.test.tsx.snap +++ b/test/__snapshots__/Storybook.test.tsx.snap @@ -22211,7 +22211,6 @@ exports[`Stories Snapshots Documentazione/Form/Input _InputAutocompleteConDatiAc role="status" /> -