diff --git a/.changeset/hot-mirrors-float.md b/.changeset/hot-mirrors-float.md new file mode 100644 index 00000000000..7d36efa5733 --- /dev/null +++ b/.changeset/hot-mirrors-float.md @@ -0,0 +1,5 @@ +--- +"@kaizen/components": patch +--- + +Fix ContextModal spread prop console errors. diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 687bcaeab57..8583d3e48b4 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -55,12 +55,10 @@ jobs: - run: yarn lint:styles jest: - name: jest if: github.head_ref != 'changeset-release/main' runs-on: ubuntu-latest timeout-minutes: 10 steps: - uses: actions/checkout@v3 - uses: ./.github/actions/setup - - run: yarn pkg:aio test:ci - run: yarn test:ci diff --git a/jest.config.js b/jest.config.ts similarity index 76% rename from jest.config.js rename to jest.config.ts index 47730158671..ca0ec3ece5d 100644 --- a/jest.config.js +++ b/jest.config.ts @@ -1,9 +1,10 @@ -/* eslint-disable no-console */ -module.exports = { +import { JestConfigWithTsJest } from "ts-jest" + +const jestConfig: JestConfigWithTsJest = { preset: "ts-jest", testEnvironment: "jsdom", testMatch: ["**/*.spec.ts?(x)"], - setupFilesAfterEnv: ["jest-canvas-mock", "/setupTests.ts"], + setupFilesAfterEnv: ["jest-canvas-mock", "/jest.setup.ts"], moduleNameMapper: { "\\.(jpe?g|png|webm|mp4)$": "jest-static-stubs/$1", "\\.s?css$": "identity-obj-proxy", @@ -12,7 +13,8 @@ module.exports = { uuid: require.resolve("uuid"), }, transformIgnorePatterns: ["[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"], - modulePathIgnorePatterns: ["/packages/components"], } +export default jestConfig + process.env.TZ = "UTC" diff --git a/setupTests.ts b/jest.setup.ts similarity index 50% rename from setupTests.ts rename to jest.setup.ts index 93e80e8b3a1..b2ec75dc413 100644 --- a/setupTests.ts +++ b/jest.setup.ts @@ -3,6 +3,19 @@ import "@testing-library/jest-dom" /** @ts-ignore */ global.IS_REACT_ACT_ENVIRONMENT = true +const CONSOLE_FAIL_TYPES = ["error", "warn"] as const + +// Throw errors when a `console.error` or `console.warn` happens +// by overriding the functions +CONSOLE_FAIL_TYPES.forEach(type => { + // eslint-disable-next-line no-console + console[type] = message => { + throw new Error( + `Failing due to console.${type} while running test!\n\n${message}` + ) + } +}) + // This avoids errors related to our jest environment not having an Intl // object present in the app's context jest.mock("@cultureamp/i18n-react-intl", () => ({ diff --git a/package.json b/package.json index a92e9584869..21a1243795e 100644 --- a/package.json +++ b/package.json @@ -10,9 +10,8 @@ "scripts": { "build": "yarn turbo build", "clean": "yarn turbo clean && yarn storybook:clean && rimraf node_modules", - "test": "jest && yarn test:pkg:aio", - "test:pkg:aio": "yarn pkg:aio test && yarn pkg:aio build", - "test:ci": "jest --ci", + "test": "yarn turbo test", + "test:ci": "yarn turbo test:ci", "test:treeshake": "yarn turbo test:treeshake", "compile": "tsc && yarn pkg:aio compile", "storybook": "storybook dev -p 6006 -c storybook", diff --git a/packages/components/jest.config.ts b/packages/components/jest.config.ts index 8fd28a38c7c..716fda991ad 100644 --- a/packages/components/jest.config.ts +++ b/packages/components/jest.config.ts @@ -1,12 +1,9 @@ -/* eslint-disable no-console */ import { JestConfigWithTsJest } from "ts-jest" -// @ts-ignore -import sharedConfig from "../../jest.config.js" +import sharedConfig from "../../jest.config" const jestConfig: JestConfigWithTsJest = { ...sharedConfig, roots: [""], - modulePathIgnorePatterns: [], moduleNameMapper: { ...sharedConfig.moduleNameMapper, "~types/(.*)$": "/src/types/$1", @@ -17,5 +14,3 @@ const jestConfig: JestConfigWithTsJest = { } export default jestConfig - -process.env.TZ = "UTC" diff --git a/packages/components/jest.setup.ts b/packages/components/jest.setup.ts new file mode 100644 index 00000000000..017691afb46 --- /dev/null +++ b/packages/components/jest.setup.ts @@ -0,0 +1 @@ +import "../../jest.setup" diff --git a/packages/components/package.json b/packages/components/package.json index 1df62b26cf6..32f9725f2e0 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -28,7 +28,7 @@ "scripts": { "prepublishOnly": "yarn build:components && yarn build:styles && yarn postBuild && yarn dist:clean", "build": "yarn clean && yarn prepublishOnly", - "test": "jest", + "test": "FORCE_COLOR=1 jest", "test:ci": "yarn test --ci", "test:treeshake": "agadoo ./dist/esm/index.mjs", "clean": "rimraf dist node_modules", diff --git a/packages/components/setupTests.ts b/packages/components/setupTests.ts deleted file mode 100644 index f313c5484b0..00000000000 --- a/packages/components/setupTests.ts +++ /dev/null @@ -1 +0,0 @@ -require("../../setupTests.ts") diff --git a/packages/components/src/DatePicker/DatePicker.spec.tsx b/packages/components/src/DatePicker/DatePicker.spec.tsx index a4a629e4468..43553e9b104 100644 --- a/packages/components/src/DatePicker/DatePicker.spec.tsx +++ b/packages/components/src/DatePicker/DatePicker.spec.tsx @@ -103,7 +103,7 @@ describe("", () => { }) expect(arrowButton).toHaveFocus() }) - }) + }, 6000) it("should validate and close the calendar when the user presses the Enter key while focus is in the input", async () => { render() diff --git a/packages/components/src/Modal/ContextModal/ContextModal.spec.tsx b/packages/components/src/Modal/ContextModal/ContextModal.spec.tsx index 6da09a30e99..ce5fcf2d2d6 100644 --- a/packages/components/src/Modal/ContextModal/ContextModal.spec.tsx +++ b/packages/components/src/Modal/ContextModal/ContextModal.spec.tsx @@ -13,10 +13,10 @@ const ContextModalWrapper = ({ undefined} - onDismiss={(): void => undefined} + onConfirm={() => undefined} + onDismiss={() => undefined} secondaryLabel="Example secondary" - onSecondaryAction={(): void => undefined} + onSecondaryAction={() => undefined} {...props} > {children} diff --git a/packages/components/src/Modal/ContextModal/ContextModal.tsx b/packages/components/src/Modal/ContextModal/ContextModal.tsx index 3c9d29fa4ac..01592115664 100644 --- a/packages/components/src/Modal/ContextModal/ContextModal.tsx +++ b/packages/components/src/Modal/ContextModal/ContextModal.tsx @@ -18,6 +18,7 @@ export type ContextModalSecondaryActionProps = } | { secondaryLabel?: undefined + onSecondaryAction?: never } export type ContextModalProps = Readonly< @@ -56,6 +57,7 @@ export const ContextModal = ({ layout = "portrait", title, onConfirm, + onDismiss: propsOnDismiss, onAfterLeave, confirmLabel = "Confirm", confirmWorking, @@ -63,9 +65,11 @@ export const ContextModal = ({ children, contentHeader, image, + secondaryLabel, + onSecondaryAction, ...props }: ContextModalProps): JSX.Element => { - const onDismiss = confirmWorking ? undefined : props.onDismiss + const onDismiss = confirmWorking ? undefined : propsOnDismiss const footerActions: ButtonProps[] = [] @@ -82,10 +86,10 @@ export const ContextModal = ({ footerActions.push({ ...confirmAction, ...workingProps }) } - if (props.secondaryLabel) { + if (secondaryLabel) { footerActions.push({ - label: props.secondaryLabel, - onClick: props.onSecondaryAction, + label: secondaryLabel, + onClick: onSecondaryAction, disabled: !!confirmWorking, }) } @@ -126,7 +130,7 @@ export const ContextModal = ({ {onConfirm != null && (
", () => { // Non-semantic elements without roles should not have aria-description on them. // They won't read to all screen readers as expected and may be reported in Storybook's accessibility tab (which uses Axe under the hood) it("doesn't add an accessible description when wrapping a non-semantic element", async () => { + const warn = jest.spyOn(console, "warn").mockImplementation() + render( ", () => { expect(screen.getByText("Non semantic element")).not.toHaveAttribute( "aria-describedby" ) + expect(warn).toHaveBeenCalledWith( + " is not directly wrapping a semantic element, screen reader users will not be able to access the tooltip info. To ensure accessibility, Tooltip should be wrapping a semantic and focusable element directly." + ) }) }) }) @@ -74,7 +79,7 @@ describe("", () => { isInitiallyVisible position="below" > -
+
) await waitFor(() => { diff --git a/packages/components/tsconfig.json b/packages/components/tsconfig.json index 732ecf44488..93a13d807bb 100644 --- a/packages/components/tsconfig.json +++ b/packages/components/tsconfig.json @@ -1,23 +1,15 @@ { + "extends": "../../tsconfig.json", "compilerOptions": { "baseUrl": ".", - "lib": ["es2019", "dom"], "module": "esnext", - "jsx": "react", - "esModuleInterop": true, "moduleResolution": "node", - "skipLibCheck": true, - "noImplicitAny": true, - "strict": true, - "allowJs": false, "declaration": true, - "resolveJsonModule": true, - "noEmit": true, "paths": { "~storybook/*": ["../../storybook/*"], - "~types/*": ["src/types/*"], - "~utils/*": ["src/utils/*"], - "~components/*": ["src/*"] + "~types/*": ["./src/types/*"], + "~utils/*": ["./src/utils/*"], + "~components/*": ["./src/*"] }, // Note: To transform paths for both the output .js and .d.ts files, you need both of the below entries "plugins": [ @@ -28,7 +20,7 @@ ] }, "files": ["types.d.ts"], - "include": ["src/**/*", "icons/**/*"], + "include": ["src/**/*"], "exclude": ["node_modules"], "ts-node": { "moduleTypes": { diff --git a/packages/components/types.d.ts b/packages/components/types.d.ts index dc1cee8ef9a..7645d260f12 100644 --- a/packages/components/types.d.ts +++ b/packages/components/types.d.ts @@ -1,15 +1,11 @@ -declare module "*.module.css" { - const classes: { [key: string]: string } +declare module "*.css" { + const classes: Record export default classes } -declare module "*.module.scss" { - const styles: { [className: string]: string } - export default styles -} declare module "*.scss" { - const content: Record - export default content + const classes: Record + export default classes } declare module "*.icon.svg" { diff --git a/packages/design-tokens/jest.config.ts b/packages/design-tokens/jest.config.ts new file mode 100644 index 00000000000..afb26946077 --- /dev/null +++ b/packages/design-tokens/jest.config.ts @@ -0,0 +1,2 @@ +import sharedConfig from "../../jest.config" +export default sharedConfig diff --git a/packages/design-tokens/jest.setup.ts b/packages/design-tokens/jest.setup.ts new file mode 100644 index 00000000000..017691afb46 --- /dev/null +++ b/packages/design-tokens/jest.setup.ts @@ -0,0 +1 @@ +import "../../jest.setup" diff --git a/packages/design-tokens/package.json b/packages/design-tokens/package.json index ce2fe8431d7..1d72d0f01c1 100644 --- a/packages/design-tokens/package.json +++ b/packages/design-tokens/package.json @@ -22,7 +22,8 @@ "license": "MIT", "sideEffects": false, "scripts": { - "test": "cd ../../ && yarn jest ./packages/design-tokens", + "test": "FORCE_COLOR=1 jest", + "test:ci": "yarn test --ci", "build": "yarn clean && yarn prepublishOnly", "build:json": "yarn ts-node --files ./bin/buildCssVarTokens.ts", "build:ts": "tsc --project tsconfig.dist.json", diff --git a/tsconfig.json b/tsconfig.json index a0151bc5144..2c838b64d98 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -21,11 +21,6 @@ } }, "files": ["./types.d.ts"], - "include": [ - "packages/**/*", - "draft-packages/**/*", - "storybook/**/*", - "docs/**/*.tsx" - ], - "exclude": ["**/node_modules", "packages/components/**/*"] + "include": ["packages/**/*", "storybook/**/*", "docs/**/*.tsx"], + "exclude": ["**/node_modules"] } diff --git a/turbo.json b/turbo.json index 7c946ae7f34..0fc5c3383ca 100644 --- a/turbo.json +++ b/turbo.json @@ -9,6 +9,8 @@ "inputs": ["packages/**"], "outputs": ["dist/**"] }, + "test": {}, + "test:ci": {}, "test:treeshake": { "dependsOn": ["^build"], "inputs": ["dist/**"]