Merge pull request #159 from msqd/mkui_tests

[READY] Mkui tests

.pre-commit-config.yaml

@@ -4,6 +4,7 @@ repos:
     rev: v3.2.0
     hooks:
       - id: trailing-whitespace
+        exclude: '\.tsx\.snap$'
       - id: end-of-file-fixer
       - id: check-yaml
         exclude: misc

Makefile

@@ -104,10 +104,10 @@ test-ui-build: install-ui
 	cd vendors/mkui; pnpm build
 
 test-ui: test-ui-build
-	cd vendors/mkui; pnpm test:prod
+	cd vendors/mkui; pnpm test
 
 test-ui-update: test-ui-build
-	cd vendors/mkui; pnpm test:update
+	cd vendors/mkui; pnpm test:visual:update
 
 ########################################################################################################################
 # Benchmarks

vendors/mkui/.gitignore

@@ -1 +1,2 @@
 test-results
+coverage

vendors/mkui/README.md

@@ -1,9 +1,3 @@
-# Visual Snapshots with Playwright
-
-This package demonstrates how you can quickly automate visual snapshots with Ladle and Playwright to cover all your stories.
-
-Read the [post](https://ladle.dev/blog/visual-snapshots) for more information. (The actual source code here a slightly different since it has a double purpose as an e2e test.)
-
 ## Run it
 
 Clone this repo, navigate to this folder and run:
@@ -12,5 +6,25 @@ Clone this repo, navigate to this folder and run:
 pnpm install
 pnpm build #build ladle
 pnpm test #run tests
-pnpm test:update #update snapshots if there are changes
+pnpm test:visual:update #update snapshots if there are changes
 ```
+
+## Testing
+
+This project incorporates several types of testing to ensure the quality and functionality of the components:
+
+- **Unit Tests**: Each component is accompanied by unit tests. To execute these tests, use the command `pnpm test:unit`.
+
+- **Storybook**: Storybook stories are provided for every component, serving as a visual catalog for manual testing and showcasing different component states.
+
+- **Visual Regression Tests**: Visual changes in components are tracked using Playwright for visual regression testing. This involves capturing screenshots of each Storybook story and comparing them with previous versions. Run these tests with `pnpm run test:visual`.
+
+To run all tests, use the command `pnpm test`.
+
+For unit tests, coverage reports can be generated using the command `pnpm test:unit --coverage`. This will display coverage information in the console and also create an HTML report in the `./coverage` directory.
+
+### Visual Snapshots with Playwright
+
+This package demonstrates how you can quickly automate visual snapshots with Ladle and Playwright to cover all your stories.
+
+Read the [post](https://ladle.dev/blog/visual-snapshots) for more information. (The actual source code here a slightly different since it has a double purpose as an e2e test.)

vendors/mkui/jest.config.js

@@ -0,0 +1,45 @@
+const babelConfigEmotion = {
+  presets: [
+    [
+      "@babel/preset-env",
+      {
+        targets: { node: "current" },
+      },
+    ],
+    [
+      "@babel/preset-react",
+      {
+        runtime: "automatic",
+        importSource: "@emotion/react",
+      },
+    ],
+    "@babel/preset-typescript",
+  ],
+  plugins: ["babel-plugin-macros", "@emotion/babel-plugin"],
+}
+
+/** @type {import('ts-jest').JestConfigWithTsJest} */
+const customJestConfig = {
+  setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
+  testEnvironment: "jest-environment-jsdom",
+  moduleNameMapper: {
+    "^@/components/(.*)$": "<rootDir>/src/components/$1",
+    "^@/pages/(.*)$": "<rootDir>/src/pages/$1",
+  },
+  transform: {
+    "^.+\\.(js|jsx|ts|tsx|mjs)$": ["babel-jest", babelConfigEmotion],
+    "^.+\\.svg$": "<rootDir>/svgTransform.js",
+  },
+
+  collectCoverageFrom: [
+    "src/**/*.{js,jsx,tsx}",
+    "!<rootDir>/node_modules/",
+    "!<rootDir>/**/*.stories.{js,jsx,ts,tsx}",
+    "!<rootDir>/**/Styles/**/*.{js,jsx,ts,tsx}",
+  ],
+  coverageDirectory: "<rootDir>/coverage",
+  testPathIgnorePatterns: ["<rootDir>/tests/"],
+  coverageReporters: ["html", "text"],
+}
+
+module.exports = customJestConfig

vendors/mkui/jest.setup.js

@@ -0,0 +1 @@
+import "@testing-library/jest-dom"

vendors/mkui/package.json

@@ -22,25 +22,34 @@
   },
   "devDependencies": {
     "@babel/plugin-transform-react-jsx": "^7.23.4",
+    "@babel/preset-env": "^7.23.9",
+    "@babel/preset-react": "^7.23.3",
+    "@babel/preset-typescript": "^7.23.3",
     "@emotion/babel-plugin-jsx-pragmatic": "^0.2.1",
     "@ladle/react": "^4.0.2",
     "@playwright/test": "^1.41.1",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^14.2.1",
     "@types/bramus__pagination-sequence": "^1.2.2",
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.2.19",
     "@types/sync-fetch": "^0.4.3",
     "@vitejs/plugin-react": "^4.2.1",
+    "@vitest/coverage-v8": "^1.2.2",
     "autoprefixer": "^10.4.17",
     "cross-env": "^7.0.3",
-    "postcss": "^8.4.35",
+    "jest-environment-jsdom": "^29.7.0",
+    "jsdom": "^24.0.0",
+    "postcss": "^8.4.34",
     "prettier": "^3.2.5",
     "start-server-and-test": "^2.0.3",
     "sync-fetch": "^0.5.2",
     "sync-request": "^6.1.0",
     "tailwindcss": "^3.4.1",
     "twin.macro": "^3.4.1",
     "typescript": "~5.2.2",
-    "vite": "^5.0.12"
+    "vite": "^5.0.12",
+    "vitest": "^1.2.2"
   },
   "main": "./src/index.ts",
   "exports": {
@@ -56,10 +65,11 @@
     "serve": "pnpm serve:dev",
     "serve:dev": "ladle serve -p 61110",
     "serve:prod": "ladle preview -p 61110",
-    "test": "pnpm test:dev",
-    "test:all": "pnpm test:dev && pnpm test:prod",
-    "test:dev": "cross-env TYPE=dev pnpm exec playwright test",
-    "test:prod": "cross-env TYPE=prod pnpm exec playwright test",
-    "test:update": "cross-env TYPE=update pnpm exec playwright test -u"
+    "test:unit": "vitest run",
+    "test:visual": "pnpm test:visual:dev",
+    "test:visual:dev": "cross-env TYPE=dev pnpm exec playwright test",
+    "test:visual:prod": "cross-env TYPE=prod pnpm exec playwright test",
+    "test:visual:update": "cross-env TYPE=update pnpm exec playwright test -u",
+    "test": "pnpm test:unit && pnpm test:visual"
   }
 }

vendors/mkui/playwright.config.ts

@@ -4,10 +4,12 @@ export default {
   use: {
     baseURL: baseUrl,
   },
+  reporter: [["list"]],
   webServer: {
     command: process.env.TYPE === "dev" ? "pnpm serve:dev" : "pnpm build-preview > /dev/null",
     url: baseUrl,
     reuseExistingServer: true,
   },
   retries: 0,
+  testMatch: "**/tests/**/*.spec.ts",
 }