chore: run jest tests using turbo (#4339)

* chore: run jest tests using turbo

* fix(ContextModal): fix spread prop errors

* test: fix tests

* chore(jest): fail on console error or warn

.changeset/hot-mirrors-float.md

@@ -0,0 +1,5 @@
+---
+"@kaizen/components": patch
+---
+
+Fix ContextModal spread prop console errors.

.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

jest.config.js → 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", "<rootDir>/setupTests.ts"],
+  setupFilesAfterEnv: ["jest-canvas-mock", "<rootDir>/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: ["<rootDir>/packages/components"],
 }
 
+export default jestConfig
+
 process.env.TZ = "UTC"

setupTests.ts → 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", () => ({

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

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: ["<rootDir>"],
-  modulePathIgnorePatterns: [],
   moduleNameMapper: {
     ...sharedConfig.moduleNameMapper,
     "~types/(.*)$": "<rootDir>/src/types/$1",
@@ -17,5 +14,3 @@ const jestConfig: JestConfigWithTsJest = {
 }
 
 export default jestConfig
-
-process.env.TZ = "UTC"

packages/components/jest.setup.ts

@@ -0,0 +1 @@
+import "../../jest.setup"

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

packages/components/src/DatePicker/DatePicker.spec.tsx

@@ -103,7 +103,7 @@ describe("<DatePicker />", () => {
       })
       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(<DatePickerWrapper disabledDates={[new Date("2022-05-01")]} />)

packages/components/src/Modal/ContextModal/ContextModal.spec.tsx

@@ -13,10 +13,10 @@ const ContextModalWrapper = ({
   <ContextModal
     isOpen={true}
     title="Example modal title"
-    onConfirm={(): void => undefined}
-    onDismiss={(): void => undefined}
+    onConfirm={() => undefined}
+    onDismiss={() => undefined}
     secondaryLabel="Example secondary"
-    onSecondaryAction={(): void => undefined}
+    onSecondaryAction={() => undefined}
     {...props}
   >
     {children}

packages/components/src/Modal/ContextModal/ContextModal.tsx

@@ -18,6 +18,7 @@ export type ContextModalSecondaryActionProps =
     }
   | {
       secondaryLabel?: undefined
+      onSecondaryAction?: never
     }
 
 export type ContextModalProps = Readonly<
@@ -56,16 +57,19 @@ export const ContextModal = ({
   layout = "portrait",
   title,
   onConfirm,
+  onDismiss: propsOnDismiss,
   onAfterLeave,
   confirmLabel = "Confirm",
   confirmWorking,
   renderBackground,
   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 && (
                 <div
                   className={
-                    props.secondaryLabel
+                    secondaryLabel
                       ? styles.footerWithSecondaryAction
                       : styles.footer
                   }

packages/components/src/RichTextEditor/utils/commands/addMark.spec.ts

@@ -1,4 +1,3 @@
-import { describe, expect, it, jest } from "@jest/globals"
 import { findByText, waitFor } from "@testing-library/dom"
 import { createRichTextEditor } from "../core"
 import { addMark } from "./addMark"

packages/components/src/Tooltip/Tooltip.spec.tsx

@@ -48,6 +48,8 @@ describe("<Tooltip />", () => {
     // 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(
         <Tooltip
           text="Tooltip popup description for div"
@@ -62,6 +64,9 @@ describe("<Tooltip />", () => {
         expect(screen.getByText("Non semantic element")).not.toHaveAttribute(
           "aria-describedby"
         )
+        expect(warn).toHaveBeenCalledWith(
+          "<Tooltip /> 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("<Tooltip />", () => {
         isInitiallyVisible
         position="below"
       >
-        <div role="textbox" contentEditable="true" aria-multiline="true"></div>
+        <div role="textbox" contentEditable="true" aria-multiline="true" />
       </Tooltip>
     )
     await waitFor(() => {

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": {

packages/components/types.d.ts

@@ -1,15 +1,11 @@
-declare module "*.module.css" {
-  const classes: { [key: string]: string }
+declare module "*.css" {
+  const classes: Record<string, string>
   export default classes
 }
-declare module "*.module.scss" {
-  const styles: { [className: string]: string }
-  export default styles
-}
 
 declare module "*.scss" {
-  const content: Record<string, string>
-  export default content
+  const classes: Record<string, string>
+  export default classes
 }
 
 declare module "*.icon.svg" {

packages/design-tokens/jest.config.ts

@@ -0,0 +1,2 @@
+import sharedConfig from "../../jest.config"
+export default sharedConfig

packages/design-tokens/jest.setup.ts

@@ -0,0 +1 @@
+import "../../jest.setup"

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

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"]
 }

turbo.json

@@ -9,6 +9,8 @@
       "inputs": ["packages/**"],
       "outputs": ["dist/**"]
     },
+    "test": {},
+    "test:ci": {},
     "test:treeshake": {
       "dependsOn": ["^build"],
       "inputs": ["dist/**"]