diff --git a/configuration/tests-helpers.ts b/configuration/tests-helpers.ts index 88f27add..c921e4d9 100644 --- a/configuration/tests-helpers.ts +++ b/configuration/tests-helpers.ts @@ -2,19 +2,26 @@ * This function checks if the provided HTMLElement has * all the classes specified in the `classes` array. * - * It is designed to be used in Jest tests ONLY. + * It is designed to be used in Jest/Vitest tests ONLY. * * @param {HTMLElement} element - The element to check. * @param {string[]} classes - An array of class names that the element is expected to have. **/ export const expectToHaveClasses = ( - element: HTMLElement | Element, - classes: string[], + element?: HTMLElement | Element, + classes?: string[], ) => { - const elementClasses = new Set(element.className.split(" ")); - classes.sort().forEach((expectedClass) => { - expect(Array.from(elementClasses)).toContain(expectedClass); - }); + if (!element || !classes) { + throw new Error( + "No element or no classes provided to check classes against", + ); + } else { + const elementClasses = new Set(element.className.split(" ")); + classes.sort().forEach((expectedClass) => { + // biome-ignore lint: expect is global + expect(Array.from(elementClasses)).toContain(expectedClass); + }); + } }; export const expectToHaveStyles = ( @@ -23,6 +30,7 @@ export const expectToHaveStyles = ( ) => { const elementStyles = getComputedStyle(element); Object.entries(styles).forEach(([property, value]) => { + // biome-ignore lint: expect is global expect(elementStyles.getPropertyValue(property)).toBe(value); }); }; diff --git a/configuration/tsconfig.common.json b/configuration/tsconfig.common.json index d13b1e39..e6d13ff1 100644 --- a/configuration/tsconfig.common.json +++ b/configuration/tsconfig.common.json @@ -1,24 +1,48 @@ +/** + * allowImportingTsExtensions: Allow importing TypeScript files without specifying the extension. + * isolatedModules: Ensure that each file is treated as a separate module. + * jsx: Specify the JSX factory function. + * lib: Specify the library files to be included in the compilation. + * module: Specify the module code generation. + * moduleDetection: Specify the module type for the project. + * moduleResolution: Specify how TypeScript should resolve module imports. + * noEmit: Disable emitting files during the compilation. + * noFallthroughCasesInSwitch: Enable error reporting for fallthrough cases in switch statements. + * noImplicitOverride: Ensure overriding members in derived classes are marked with an + * override modifier. + * noUncheckedIndexedAccess: Enable error reporting for indexed access expressions that can be + * undefined. + * noUnusedLocals: Enable error reporting for unused local variables. + * noUnusedParameters: Enable error reporting for unused parameters. + * resolveJsonModule: Enable importing JSON files as modules. + * skipLibCheck: Skip type checking of declaration files. + * strict: Enable all strict type checking options. + * target: Specify the ECMAScript target version. + * types: Specify the types to include in the compilation. + * useDefineForClassFields: Emit ECMAScript standard class fields. + * verbatimModuleSyntax: Preserve the import statements in the output. + */ { "compilerOptions": { - "target": "ES2020", - "useDefineForClassFields": true, - "lib": ["ES2020", "DOM", "DOM.Iterable"], - "module": "ESNext", - "skipLibCheck": true, - "types": ["vitest/globals", "@testing-library/jest-dom"], - - /* Bundler mode */ - "moduleResolution": "bundler", "allowImportingTsExtensions": true, - "resolveJsonModule": true, "isolatedModules": true, - "noEmit": true, "jsx": "react-jsx", - - /* Linting */ - "strict": true, + "lib": ["ES2020", "DOM", "DOM.Iterable"], + "module": "Preserve", + "moduleDetection": "force", + "moduleResolution": "bundler", + "noEmit": true, + "noFallthroughCasesInSwitch": true, + "noImplicitOverride": true, + "noUncheckedIndexedAccess": true, "noUnusedLocals": true, "noUnusedParameters": true, - "noFallthroughCasesInSwitch": true + "resolveJsonModule": true, + "skipLibCheck": true, + "strict": true, + "target": "ES2020", + "types": ["vitest/globals", "@testing-library/jest-dom"], + "useDefineForClassFields": true, + "verbatimModuleSyntax": true } } diff --git a/packages/ui-bubble/src/components/Bubble/Bubble.tsx b/packages/ui-bubble/src/components/Bubble/Bubble.tsx index 5efd547c..f6faf653 100644 --- a/packages/ui-bubble/src/components/Bubble/Bubble.tsx +++ b/packages/ui-bubble/src/components/Bubble/Bubble.tsx @@ -2,7 +2,7 @@ import { ButtonIcon } from "@versini/ui-button"; import { IconCopied, IconCopy } from "@versini/ui-icons"; import { useEffect, useState } from "react"; -import { BubbleProps } from "./BubbleTypes"; +import type { BubbleProps } from "./BubbleTypes"; import { getBubbleClasses } from "./utilities"; export const Bubble = ({ diff --git a/packages/ui-header/src/components/Header/Header.tsx b/packages/ui-header/src/components/Header/Header.tsx index 54e0d106..96fb6e34 100644 --- a/packages/ui-header/src/components/Header/Header.tsx +++ b/packages/ui-header/src/components/Header/Header.tsx @@ -2,7 +2,7 @@ import { getSpacing } from "@versini/ui-private/dist/utilities"; import clsx from "clsx"; import { HEADER_CLASSNAME } from "../../common/constants"; -import { HeaderProps } from "./HeaderTypes"; +import type { HeaderProps } from "./HeaderTypes"; export const Header = ({ children, diff --git a/packages/ui-menu/src/components/Menu/__tests__/utilities.test.tsx b/packages/ui-menu/src/components/Menu/__tests__/utilities.test.tsx index 42ff28e3..b988712f 100644 --- a/packages/ui-menu/src/components/Menu/__tests__/utilities.test.tsx +++ b/packages/ui-menu/src/components/Menu/__tests__/utilities.test.tsx @@ -1,4 +1,3 @@ -import { Component } from "react"; import { getDisplayName } from "../utilities"; describe("getDisplayName", () => { @@ -20,27 +19,15 @@ describe("getDisplayName", () => { }); it("returns display name for component", () => { - class Simple extends Component { - render() { - return
; - } - } - expect(getDisplayName(Simple)).toBe("Simple"); - }); - - it("returns display name for component when displayName is set from static initializer", () => { - class Simple extends Component { - static displayName = "Simple"; - render() { - return
; - } - } + const Simple = () => { + return
; + }; + Simple.displayName = "Simple"; expect(getDisplayName(Simple)).toBe("Simple"); }); it("returns display name for a stateless component", () => { const Simple = () =>
; - expect(getDisplayName(Simple)).toBe("Simple"); }); diff --git a/packages/ui-textarea/src/components/TextArea/__tests__/TextArea.test.tsx b/packages/ui-textarea/src/components/TextArea/__tests__/TextArea.test.tsx index dc17054b..abc64709 100644 --- a/packages/ui-textarea/src/components/TextArea/__tests__/TextArea.test.tsx +++ b/packages/ui-textarea/src/components/TextArea/__tests__/TextArea.test.tsx @@ -20,7 +20,7 @@ describe("TextArea modifiers", () => { const label = await screen.findAllByText("hello world"); const input = await screen.findByRole("textbox"); - expect(label[0].className).toContain("sr-only"); + expect(label[0]?.className).toContain("sr-only"); expectToHaveClasses(label[1], [ "absolute", "cursor-text", @@ -59,7 +59,7 @@ describe("TextArea modifiers", () => { const label = await screen.findAllByText("hello world"); const input = await screen.findByRole("textbox"); - expect(label[0].className).toContain("sr-only"); + expect(label[0]?.className).toContain("sr-only"); expectToHaveClasses(label[1], [ "absolute", "cursor-text", @@ -93,7 +93,7 @@ describe("TextArea modifiers", () => { const label = await screen.findAllByText("hello world"); const input = await screen.findByRole("textbox"); - expect(label[0].className).toContain("sr-only"); + expect(label[0]?.className).toContain("sr-only"); expectToHaveClasses(label[1], [ "absolute", "cursor-text", @@ -242,7 +242,7 @@ describe("TextArea modifiers", () => { render(