test(web-components): add vitest local coverage reports (#6726)

* test(web-component): setup local vitest coverage reports

* chore: cleanup

* test: add wc coverage script to root package.json

* chore: reorder scripts

* chore: update lock file

package.json

@@ -67,7 +67,8 @@
     "upgrade:dependencies:examples": "npm-check-updates -u --dep dev,peer,prod --color --target minor --packageFile 'scripts/example-gallery-builder/update-example/**/package.json'",
     "upgrade:automatic": "run-s -s 'upgrade:dependencies:*'",
     "upgrade:carbon": "npm-check-updates -u --dep dev,peer,prod --packageFile '{package.json,{config/**,packages/**}/package.json}' --filter '/carbon/' --target minor",
-    "visual-snapshot": "cd packages/core && yarn percy storybook storybook-static"
+    "visual-snapshot": "cd packages/core && yarn percy storybook storybook-static",
+    "wc-coverage": "cd packages/ibm-products-web-components && yarn coverage"
   },
   "devDependencies": {
     "@babel/core": "^7.23.9",

packages/ibm-products-web-components/package.json

@@ -45,8 +45,8 @@
     "preview": "vite preview",
     "storybook": "storybook dev -p 3000",
     "test": "vitest run",
-    "test:ui": "vitest --ui",
-    "wca": "web-component-analyzer analyze src --outFile custom-elements.json"
+    "wca": "web-component-analyzer analyze src --outFile custom-elements.json",
+    "coverage": "vitest run --coverage"
   },
   "dependencies": {
     "@carbon/ibm-products-styles": "^2.54.0",
@@ -73,9 +73,10 @@
     "@storybook/web-components": "^8.4.5",
     "@storybook/web-components-vite": "^8.4.5",
     "@types/jest": "^29.5.13",
-    "@vitest/browser": "latest",
-    "@vitest/ui": "latest",
+    "@vitest/browser": "^3.0.1",
+    "@vitest/coverage-v8": "^3.0.1",
     "autoprefixer": "^10.4.20",
+    "c8": "^10.1.3",
     "cssnano": "^7.0.6",
     "eslint": "^8.56.0",
     "eslint-config-carbon": "3.18.0",
@@ -92,7 +93,7 @@
     "tslib": "^2.8.1",
     "typescript": "^5.5.3",
     "vite": "^6.0.3",
-    "vitest": "^2.1.2",
+    "vitest": "^3.0.1",
     "web-component-analyzer": "2.0.0"
   }
 }

packages/ibm-products-web-components/src/components/side-panel/side-panel.test.ts

@@ -8,6 +8,7 @@
 vi.mock('@carbon/icons/lib/close/20', () => vi.fn().mockReturnValue({}));
 import { describe, expect, it, vi } from 'vitest';
 import { render, html } from 'lit';
+import { SIDE_PANEL_PLACEMENT, SIDE_PANEL_SIZE } from './defs';
 
 const defaultProps = {
   animateTitle: true,
@@ -16,10 +17,10 @@ const defaultProps = {
   selectorInitialFocus: '',
   label: '',
   open: true,
-  placement: 'right',
+  placement: SIDE_PANEL_PLACEMENT.RIGHT,
   preventCloseOnClickOutside: false,
   selectorPageContent: '',
-  size: 'md',
+  size: SIDE_PANEL_SIZE.MEDIUM,
   title: 'Side panel title',
 };
 

packages/ibm-products-web-components/vite.config.ts

@@ -12,7 +12,7 @@ export default defineConfig({
   plugins: [litStyleLoader(), litTemplateLoader()],
   test: {
     environment: 'happy-dom',
-    include: ['./src/**/*.{test,spec}.{js,ts}'],
+    include: ['src/**/*.test.ts'],
     exclude: [...configDefaults.exclude],
     // Lit recommends using browser environment for testing
     // https://lit.dev/docs/tools/testing/#testing-in-the-browser
@@ -22,5 +22,11 @@ export default defineConfig({
       headless: true,
       name: 'chromium',
     },
+    coverage: {
+      provider: 'v8',
+      include: ['src/**/*'],
+      exclude: ['src/**/*.stories.{js,ts}'],
+      reporter: ['text', 'html'],
+    },
   },
 });