Merge pull request #96 from utopia-os/setup-unit-tests

feat(source): setup unit tests

package.json

@@ -6,10 +6,13 @@
   "homepage:": "https://utopia-os.org/",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
+  "type": "module",
   "scripts": {
     "build": "rollup -c",
     "start": "rollup -c -w",
     "test:lint:eslint": "eslint --ext .ts,.tsx,.js,.jsx,.cjs,.mjs,.json,.yml,.yaml --max-warnings 0 .",
+    "test:unit": "npm run test:unit:dev -- run --coverage",
+    "test:unit:dev": "vitest",
     "docs:generate": "typedoc src/index.tsx",
     "update": "npx npm-check-updates"
   },
@@ -21,6 +24,8 @@
   "license": "GPL-3.0-only",
   "devDependencies": {
     "@eslint-community/eslint-plugin-eslint-comments": "^4.4.1",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.2.0",
     "@types/geojson": "^7946.0.14",
     "@types/leaflet": "^1.7.11",
     "@types/leaflet.markercluster": "^1.5.5",
@@ -28,6 +33,8 @@
     "@types/react-dom": "^18.0.5",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "@vitest/coverage-v8": "^3.0.5",
     "autoprefixer": "^10.4.14",
     "daisyui": "^4.6.1",
     "eslint": "^8.24.0",
@@ -43,16 +50,20 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-security": "^3.0.1",
     "eslint-plugin-yml": "^1.14.0",
+    "globals": "^15.14.0",
+    "happy-dom": "^16.8.1",
     "postcss": "^8.4.21",
     "prettier": "^3.3.3",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "rollup": "^2.75.7",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-typescript2": "^0.32.1",
     "tailwindcss": "^3.3.1",
     "typedoc": "^0.27.6",
-    "typescript": "^5.7.3"
+    "typescript": "^5.7.3",
+    "vite": "^6.0.11",
+    "vitest": "^3.0.5"
   },
   "peerDependencies": {
     "react": "^18.2.0",

setupTest.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/no-unassigned-import
+import '@testing-library/jest-dom'

src/Components/Input/TextInput.spec.tsx

@@ -0,0 +1,32 @@
+import { render, screen, fireEvent } from '@testing-library/react'
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+
+import { TextInput } from './TextInput'
+
+describe('<TextInput />', () => {
+  let wrapper = render(<TextInput />)
+
+  beforeEach(() => {
+    wrapper = render(<TextInput />)
+  })
+
+  it('renders properly', () => {
+    expect(wrapper.container.firstChild).toMatchSnapshot()
+  })
+
+  describe('handleChange', () => {
+    it('calls updateFormValue with new value', () => {
+      const updateFormValue = vi.fn()
+      wrapper.rerender(<TextInput updateFormValue={updateFormValue} />)
+      fireEvent.change(screen.getByRole('textbox'), { target: { value: 'test' } })
+      expect(updateFormValue).toBeCalledWith('test')
+    })
+  })
+
+  describe('labelTitle', () => {
+    it('sets label', () => {
+      wrapper.rerender(<TextInput labelTitle='My Title' />)
+      expect(wrapper.container.firstChild).toMatchSnapshot()
+    })
+  })
+})

src/Components/Input/__snapshots__/TextInput.spec.tsx.snap

@@ -0,0 +1,38 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`<TextInput /> > labelTitle > sets label 1`] = `
+<div
+  class="tw-form-control undefined"
+>
+  <label
+    class="tw-label"
+  >
+    <span
+      class="tw-label-text tw-text-base-content undefined"
+    >
+      My Title
+    </span>
+  </label>
+  <input
+    class="tw-input tw-input-bordered tw-w-full "
+    placeholder=""
+    required=""
+    type="text"
+    value=""
+  />
+</div>
+`;
+
+exports[`<TextInput /> > renders properly 1`] = `
+<div
+  class="tw-form-control undefined"
+>
+  <input
+    class="tw-input tw-input-bordered tw-w-full "
+    placeholder=""
+    required=""
+    type="text"
+    value=""
+  />
+</div>
+`;

tsconfig.json

@@ -17,6 +17,7 @@
       "noUnusedLocals": false,
       "noUnusedParameters": true,
       "allowSyntheticDefaultImports": true,
+      "skipLibCheck": true,
       "paths": {
         "#components/*": ["./src/Components/*"],
         "#utils/*": ["./src/Utils/*"],
@@ -25,10 +26,10 @@
         "#root/*": ["./*"]
       }
     },
-    "include": ["src"],
+  "include": ["src", "vite.config.ts", "setupTest.ts"],
   "exclude": ["node_modules", "dist", "example", "rollup.config.mjss"],
   "typeRoots": [
     "./types",
     "./node_modules/@types/"
   ]
-  }
+}

vite.config.ts

@@ -0,0 +1,23 @@
+import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite'
+import { configDefaults } from 'vitest/config'
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    globals: true,
+    environment: 'happy-dom',
+    setupFiles: ['setupTest.ts'],
+    coverage: {
+      all: true,
+      include: ['src/**/*.{js,jsx,ts,tsx}'],
+      exclude: [...configDefaults.exclude],
+      thresholds: {
+        lines: 0,
+        functions: 67,
+        branches: 67,
+        statements: 0,
+      },
+    },
+  },
+})