From b4a4e2c2397ee292414d0335b9597e0fb22bd28b Mon Sep 17 00:00:00 2001 From: JanSzewczyk Date: Mon, 27 May 2024 23:00:42 +0200 Subject: [PATCH] test(vitest): update configuration and add ci script --- .github/workflows/pr-check.yml | 2 +- package-lock.json | 12 ++++---- package.json | 3 +- src/components/avatar/avatar.styles.ts | 2 +- src/components/button/Button.styles.ts | 28 +++++++++---------- .../dialog/content/dialog-content.styles.ts | 2 +- .../helper-text/helper-text.styles.ts | 4 +-- src/components/input/input.styles.tsx | 4 +-- src/components/select/Select.styles.tsx | 6 ++-- .../sheet/content/sheet-content.styles.ts | 2 +- src/components/textarea/Textarea.styles.tsx | 4 +-- vitest.config.ts | 4 ++- 12 files changed, 38 insertions(+), 35 deletions(-) diff --git a/.github/workflows/pr-check.yml b/.github/workflows/pr-check.yml index 481037b..3225233 100644 --- a/.github/workflows/pr-check.yml +++ b/.github/workflows/pr-check.yml @@ -82,7 +82,7 @@ jobs: - name: Install packages ⚙️ run: npm ci - name: Check Tests 🧪 - run: npm run test + run: npm run test:ci # lint: # name: Eslint ⬣ diff --git a/package-lock.json b/package-lock.json index 89c71c4..1708be9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@szum-tech/design-system", - "version": "1.18.2", + "version": "1.18.3", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@szum-tech/design-system", - "version": "1.18.2", + "version": "1.18.3", "license": "MIT", "dependencies": { "@radix-ui/react-alert-dialog": "^1.0.5", @@ -33,7 +33,7 @@ "@storybook/react": "^8.0.10", "@storybook/react-vite": "^8.0.10", "@storybook/theming": "^8.0.10", - "@szum-tech/prettier-config": "^1.3.2", + "@szum-tech/prettier-config": "^1.3.4", "@szum-tech/semantic-release-preset": "^1.5.6", "@testing-library/dom": "^10.1.0", "@testing-library/jest-dom": "^6.4.5", @@ -5731,9 +5731,9 @@ } }, "node_modules/@szum-tech/prettier-config": { - "version": "1.3.2", - "resolved": "https://registry.npmjs.org/@szum-tech/prettier-config/-/prettier-config-1.3.2.tgz", - "integrity": "sha512-1lySWIFq1Itxp4eRm7bAun7hMUEaT23Sb1nDmUttWO4ECXAuGLFj5GSg6tXZLmdUOeulhPfrvusILGfcQdFuGQ==", + "version": "1.3.4", + "resolved": "https://registry.npmjs.org/@szum-tech/prettier-config/-/prettier-config-1.3.4.tgz", + "integrity": "sha512-Sjjez868yI/lh8Acog2QVGzYHh7ILkOaA9cupWQy4tT9jZpcRRy96WUMXiggm8oBLbfgsBFC7qYQzW3TpuV98Q==", "dev": true, "dependencies": { "prettier-plugin-packagejson": "^2.5.0", diff --git a/package.json b/package.json index d6b8250..a520657 100644 --- a/package.json +++ b/package.json @@ -46,6 +46,7 @@ "storybook:dev": "storybook dev -p 6006", "storybook:serve": "serve storybook-static", "test": "vitest", + "test:ci": "env CI=true vitest", "test:coverage": "vitest --coverage", "test:ui": "vitest --ui", "test:watch": "vitest --watch", @@ -76,7 +77,7 @@ "@storybook/react": "^8.0.10", "@storybook/react-vite": "^8.0.10", "@storybook/theming": "^8.0.10", - "@szum-tech/prettier-config": "^1.3.2", + "@szum-tech/prettier-config": "^1.3.4", "@szum-tech/semantic-release-preset": "^1.5.6", "@testing-library/dom": "^10.1.0", "@testing-library/jest-dom": "^6.4.5", diff --git a/src/components/avatar/avatar.styles.ts b/src/components/avatar/avatar.styles.ts index 52f5d87..98722d6 100644 --- a/src/components/avatar/avatar.styles.ts +++ b/src/components/avatar/avatar.styles.ts @@ -3,7 +3,7 @@ import { cva } from "class-variance-authority"; export const avatarCva = cva("relative flex shrink-0 overflow-hidden rounded", { variants: { size: { - sm: "h-6 w-6 text-lg", + sm: "text-lg h-6 w-6", md: "h-10 w-10 text-xl", lg: "h-14 w-14 text-2xl" } diff --git a/src/components/button/Button.styles.ts b/src/components/button/Button.styles.ts index 1aa40f1..7ab16fb 100644 --- a/src/components/button/Button.styles.ts +++ b/src/components/button/Button.styles.ts @@ -2,9 +2,9 @@ import { cva } from "class-variance-authority"; export const buttonCva = cva( [ - "inline-flex items-center justify-center align-middle no-underline transition-colors ease-in-out duration-300", - "font-sans appearance-none select-none rounded-sm border font-medium tracking-[.02857em]", - "aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed" + "inline-flex items-center justify-center align-middle no-underline transition-colors duration-300 ease-in-out", + "font-sans select-none appearance-none rounded-sm border font-medium tracking-[.02857em]", + "aria-disabled:pointer-events-none aria-disabled:cursor-not-allowed aria-disabled:opacity-50" ], { variants: { @@ -81,42 +81,42 @@ export const buttonCva = cva( { variant: "outlined", color: "neutral", - class: ["text-gray-100 border-gray-350", "hover:bg-gray-350", "active:bg-gray-400"] + class: ["border-gray-350 text-gray-100", "hover:bg-gray-350", "active:bg-gray-400"] }, { variant: "outlined", color: "primary", class: [ - "text-primary-500 border-primary-500", + "border-primary-500 text-primary-500", "hover:bg-primary-500 hover:text-white", - "active:text-white active:bg-primary-600" + "active:bg-primary-600 active:text-white" ] }, { variant: "outlined", color: "success", class: [ - "text-success-500 border-success-500", + "border-success-500 text-success-500", "hover:bg-success-500 hover:text-white", - "active:text-white active:bg-success-600" + "active:bg-success-600 active:text-white" ] }, { variant: "outlined", color: "warning", class: [ - "text-warning-500 border-warning-500", + "border-warning-500 text-warning-500", "hover:bg-warning-500 hover:text-white", - "active:text-white active:bg-warning-600" + "active:bg-warning-600 active:text-white" ] }, { variant: "outlined", color: "error", class: [ - "text-error-500 border-error-500", + "border-error-500 text-error-500", "hover:bg-error-500 hover:text-white", - "active:text-white active:bg-error-600" + "active:bg-error-600 active:text-white" ] }, @@ -125,7 +125,7 @@ export const buttonCva = cva( variant: "contained", color: "neutral", class: [ - "text-gray-100 border-gray-350 bg-gray-350", + "border-gray-350 bg-gray-350 text-gray-100", "hover:border-gray-300 hover:bg-gray-300", "active:border-gray-400 active:bg-gray-400" ] @@ -232,7 +232,7 @@ export const iconContainerCva = cva("", { export const iconCva = cva("", { variants: { loading: { - true: "motion-reduce:hidden animate-spin" + true: "animate-spin motion-reduce:hidden" }, size: { sm: "h-4.5 w-4.5", diff --git a/src/components/dialog/content/dialog-content.styles.ts b/src/components/dialog/content/dialog-content.styles.ts index a923ceb..e7168b6 100644 --- a/src/components/dialog/content/dialog-content.styles.ts +++ b/src/components/dialog/content/dialog-content.styles.ts @@ -2,7 +2,7 @@ import { cva } from "class-variance-authority"; export const dialogContentStyles = cva( [ - "fixed left-1/2 top-1/2 border-gray-400 z-50 flex flex-col w-full -translate-x-1/2 -translate-y-1/2 border bg-foreground p-4 shadow-lg w-full rounded", + "fixed left-1/2 top-1/2 z-50 flex w-full w-full -translate-x-1/2 -translate-y-1/2 flex-col rounded border border-gray-400 bg-foreground p-4 shadow-lg", "duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]" ], { diff --git a/src/components/helper-text/helper-text.styles.ts b/src/components/helper-text/helper-text.styles.ts index 9dad2ee..b024def 100644 --- a/src/components/helper-text/helper-text.styles.ts +++ b/src/components/helper-text/helper-text.styles.ts @@ -3,8 +3,8 @@ import { cva } from "class-variance-authority"; export const helperTextCva = cva("", { variants: { type: { - description: "typography-body-2 text-gray-200", - error: "typography-caption text-error-500" + description: "text-gray-200 typography-body-2", + error: "text-error-500 typography-caption" } }, defaultVariants: { diff --git a/src/components/input/input.styles.tsx b/src/components/input/input.styles.tsx index b5f8468..a0c41f1 100644 --- a/src/components/input/input.styles.tsx +++ b/src/components/input/input.styles.tsx @@ -10,8 +10,8 @@ export const inputCva = cva( { variants: { invalid: { - true: ["text-error-500 border-error-500 hover:border-error-400 focus:text-gray-100"], - false: ["text-gray-100 border-gray-350 hover:border-primary-500"] + true: ["border-error-500 text-error-500 hover:border-error-400 focus:text-gray-100"], + false: ["border-gray-350 text-gray-100 hover:border-primary-500"] }, withStartIcon: { true: "pl-11", diff --git a/src/components/select/Select.styles.tsx b/src/components/select/Select.styles.tsx index 3491f5d..266973a 100644 --- a/src/components/select/Select.styles.tsx +++ b/src/components/select/Select.styles.tsx @@ -2,7 +2,7 @@ import { cva } from "class-variance-authority"; export const selectCva = cva( [ - "h-10 px-3 w-full appearance-none border bg-app-primary py-2 font-poppins outline-0 inline-flex items-center justify-between text-gray-100 typography-body-2 gap-2 transition-colors duration-300 ease-in-out", + "inline-flex h-10 w-full appearance-none items-center justify-between gap-2 border bg-app-primary px-3 py-2 font-poppins text-gray-100 outline-0 transition-colors duration-300 ease-in-out typography-body-2", "placeholder:select-none placeholder:text-gray-200", "invalid:border-error-500 focus:border-primary-400 active:border-primary-400", "disabled:border-gray-400 disabled:text-gray-200 disabled:placeholder:text-gray-300" @@ -10,8 +10,8 @@ export const selectCva = cva( { variants: { invalid: { - true: ["text-error-500 border-error-500 hover:border-error-400 focus:text-gray-100"], - false: ["text-gray-100 border-gray-350 hover:border-primary-500"] + true: ["border-error-500 text-error-500 hover:border-error-400 focus:text-gray-100"], + false: ["border-gray-350 text-gray-100 hover:border-primary-500"] } }, defaultVariants: { diff --git a/src/components/sheet/content/sheet-content.styles.ts b/src/components/sheet/content/sheet-content.styles.ts index 5615cce..963e78e 100644 --- a/src/components/sheet/content/sheet-content.styles.ts +++ b/src/components/sheet/content/sheet-content.styles.ts @@ -1,7 +1,7 @@ import { cva } from "class-variance-authority"; export const sheetContentStyles = cva( - "fixed z-50 flex flex-col border-gray-400 bg-foreground p-4 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500", + "fixed z-50 flex flex-col border-gray-400 bg-foreground p-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out", { variants: { side: { diff --git a/src/components/textarea/Textarea.styles.tsx b/src/components/textarea/Textarea.styles.tsx index 23bde84..56ba3f9 100644 --- a/src/components/textarea/Textarea.styles.tsx +++ b/src/components/textarea/Textarea.styles.tsx @@ -10,8 +10,8 @@ export const textareaCva = cva( { variants: { invalid: { - true: ["text-error-500 border-error-500", "hover:border-error-400", "focus:text-gray-100"], - false: ["text-gray-100 border-gray-350", "hover:border-primary-500"] + true: ["border-error-500 text-error-500", "hover:border-error-400", "focus:text-gray-100"], + false: ["border-gray-350 text-gray-100", "hover:border-primary-500"] } }, defaultVariants: { diff --git a/vitest.config.ts b/vitest.config.ts index ae533de..2eb0912 100644 --- a/vitest.config.ts +++ b/vitest.config.ts @@ -1,12 +1,14 @@ import { defineConfig } from "vitest/config"; +const reporters = process.env.CI ? ["dot", "github-actions"] : ["dot"]; + export default defineConfig({ test: { globals: true, environment: "happy-dom", setupFiles: ["./src/test/setup-test-env.ts"], + reporters, coverage: { - include: ["src/components/**/*.{ts,tsx}"], provider: "v8" } }