test: update tests of InputSurface and clampValue

Signed-off-by: Rong Sen Ng (motss) <[email protected]>

package.json

@@ -199,9 +199,8 @@
  "happy-dom": "^12.10.3",
  "playwright": "^1.40.1",
  "typescript": "^5.3.3",
- "vite": "^5.0.10",
  "vite-tsconfig-paths": "^4.2.2",
- "vitest": "^1.1.0"
+ "vitest": "^1.1.3"
  },
  "engines": {
  "node": ">= 16.x",

src/__tests__/date-picker-input-surface/app-date-picker-input-surface.test.ts

@@ -1,6 +1,7 @@
 import '../../date-picker-input-surface/app-date-picker-input-surface';
 
-import { expect, fixture, html } from '@open-wc/testing';
+import { fixture, html } from '@open-wc/testing-helpers';
+import { describe, expect, it } from 'vitest';
 
 import type { DialogClosedEventDetail } from '../../date-picker-dialog/typings';
 import type {AppDatePickerInputSurface } from '../../date-picker-input-surface/app-date-picker-input-surface';
@@ -21,12 +22,12 @@ describe(appDatePickerInputSurfaceName, () => {
  </app-date-picker-input-surface>`
  );
 
- globalThis.setTimeout(() => resolve(element), promiseTimeout);
+ window.setTimeout(() => resolve(element), promiseTimeout);
  });
 
  const mdcMenuSurface = el.query(elementSelectors.mdcMenuSurface);
 
- expect(mdcMenuSurface).exist;
+ expect(mdcMenuSurface).toBeInTheDocument();
  });
 
  it('closes when clicking outside of surface', async () => {
@@ -37,12 +38,12 @@ describe(appDatePickerInputSurfaceName, () => {
  </app-date-picker-input-surface>`
  );
 
- globalThis.setTimeout(() => resolve(element), promiseTimeout);
+ window.setTimeout(() => resolve(element), promiseTimeout);
  });
 
  const mdcMenuSurface = el.query(elementSelectors.mdcMenuSurface);
 
- expect(mdcMenuSurface).exist;
+ expect(mdcMenuSurface).toBeInTheDocument();
 
  const closedTask = eventOnce<
  typeof el,
@@ -55,7 +56,8 @@ describe(appDatePickerInputSurfaceName, () => {
  const closed = await closedTask;
 
  expect(closed?.detail).not.undefined;
+ // fixme: use @material/web
  expect(el.open).false;
- expect(mdcMenuSurface).exist;
+ expect(mdcMenuSurface).toBeInTheDocument();
  });
 });

src/__tests__/helpers/clamp-value.test.ts

@@ -1,31 +1,46 @@
-import { expect } from '@open-wc/testing';
+import { describe, expect, it } from 'vitest';
 
 import { clampValue } from '../../helpers/clamp-value';
-import { messageFormatter } from '../test-utils/message-formatter';
 
 describe(clampValue.name, () => {
- type CaseClampValue = [
- min: number,
- max: number,
- value: number,
- expected: number
- ];
- const casesClampValue: CaseClampValue[] = [
- [100, 300, 100, 100],
- [100, 300, 200, 200],
- [100, 300, 301, 300],
- [100, 300, 99, 100],
- ];
- casesClampValue.forEach((a) => {
- const [testMin, testMax, testValue, expected] = a;
+ it.each<{
+ $_value: number;
+ max: number;
+ min: number;
+ value: number;
+ }>([
+ {
+ $_value: 100,
+ max: 300,
+ min: 100,
+ value: 100,
+ },
+ {
+ $_value: 200,
+ max: 300,
+ min: 100,
+ value: 200,
+ },
+ {
+ $_value: 300,
+ max: 300,
+ min: 100,
+ value: 301,
+ },
+ {
+ $_value: 100,
+ max: 300,
+ min: 100,
+ value: 99,
+ },
+ ])('clamps value (min=$min, max=$max, value=$value)', ({
+ $_value,
+ max,
+ min,
+ value,
+ }) => {
+ const result = clampValue(min, max, value);
 
- it(
- messageFormatter('clamps value (min=%s, max=%s, value=%s', a),
- () => {
- const result = clampValue(testMin, testMax, testValue);
-
- expect(result).equal(expected);
- }
- );
+ expect(result).equal($_value);
  });
 });

vite.config.ts

@@ -1,6 +1,4 @@
-/// <reference types="vitest" />
-
-import { defineConfig } from 'vite';
+import { defineConfig } from 'vitest/config';
 import tsconfigPaths from 'vite-tsconfig-paths';
 
 const { CI } = process.env;
@@ -11,11 +9,6 @@ export default defineConfig({
  plugins: [
  tsconfigPaths(),
  ],
- preview: {
- headers: {
- 'Cache-Control': 'public, max-age=600',
- },
- },
  test: {
  browser: {
  provider: 'playwright',
@@ -32,6 +25,9 @@ export default defineConfig({
  include: [
  '**/*test*/date-picker/**.test.ts',
  '**/*test*/date-picker-dialog/**.test.ts',
+ '**/*test*/date-picker-input-surface/**.test.ts',
+ '**/*test*/helpers/clamp-value.test.ts',
+ // '**/*test*/date-picker-input/**.test.ts',
  ],
  clearMocks: true,
  coverage: {