chore(shared): Migrate tests to vitest

Author: nikosdouvlis

packages/shared/customJSDOMEnvironment.ts

@@ -148,10 +148,9 @@
     "lint:attw": "attw --pack . --profile node16",
     "lint:publint": "publint",
     "publish:local": "pnpm yalc push --replace  --sig",
-    "test": "jest && vitest",
-    "test:cache:clear": "jest --clearCache --useStderr",
-    "test:ci": "jest --maxWorkers=70%",
-    "test:coverage": "jest --collectCoverage && open coverage/lcov-report/index.html"
+    "test": "vitest",
+    "test:ci": "vitest --maxWorkers=70%",
+    "test:coverage": "vitest --collectCoverage && open coverage/lcov-report/index.html"
   },
   "dependencies": {
     "@clerk/types": "workspace:^",

packages/shared/jest.config.js

@@ -1,3 +1,5 @@
+import { describe, expect, test } from 'vitest';
+
 import { apiUrlFromPublishableKey } from '../apiUrlFromPublishableKey';
 
 describe('apiUrlFromPublishableKey', () => {

packages/shared/jest.setup.ts

@@ -1,15 +1,17 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
 import { inBrowser, isValidBrowser, isValidBrowserOnline, userAgentIsRobot } from '../browser';
 
 describe('inBrowser()', () => {
   afterEach(() => {
-    jest.restoreAllMocks();
+    vi.restoreAllMocks();
   });
 
   it('returns true if window is defined', () => {
     expect(inBrowser()).toBe(true);
   });
   it('returns false if window is undefined', () => {
-    const windowSpy = jest.spyOn(global, 'window', 'get');
+    const windowSpy = vi.spyOn(global, 'window', 'get');
     // @ts-ignore - Test
     windowSpy.mockReturnValue(undefined);
     expect(inBrowser()).toBe(false);
@@ -21,16 +23,23 @@ describe('isValidBrowser', () => {
   let webdriverGetter: any;
 
   beforeEach(() => {
-    userAgentGetter = jest.spyOn(window.navigator, 'userAgent', 'get');
-    webdriverGetter = jest.spyOn(window.navigator, 'webdriver', 'get');
+    userAgentGetter = vi.spyOn(window.navigator, 'userAgent', 'get');
+    // Define webdriver property if it doesn't exist
+    if (!('webdriver' in window.navigator)) {
+      Object.defineProperty(window.navigator, 'webdriver', {
+        configurable: true,
+        get: () => false,
+      });
+    }
+    webdriverGetter = vi.spyOn(window.navigator, 'webdriver', 'get');
   });
 
   afterEach(() => {
-    jest.restoreAllMocks();
+    vi.restoreAllMocks();
   });
 
   it('returns false if not in browser', () => {
-    const windowSpy = jest.spyOn(global, 'window', 'get');
+    const windowSpy = vi.spyOn(global, 'window', 'get');
     // @ts-ignore - Test
     windowSpy.mockReturnValue(undefined);
 
@@ -99,11 +108,27 @@ describe('isValidBrowserOnline', () => {
   let connectionGetter: any;
 
   beforeEach(() => {
-    userAgentGetter = jest.spyOn(window.navigator, 'userAgent', 'get');
-    webdriverGetter = jest.spyOn(window.navigator, 'webdriver', 'get');
-    onLineGetter = jest.spyOn(window.navigator, 'onLine', 'get');
+    userAgentGetter = vi.spyOn(window.navigator, 'userAgent', 'get');
+    // Define webdriver property if it doesn't exist
+    if (!('webdriver' in window.navigator)) {
+      Object.defineProperty(window.navigator, 'webdriver', {
+        configurable: true,
+        get: () => false,
+      });
+    }
+    webdriverGetter = vi.spyOn(window.navigator, 'webdriver', 'get');
+    onLineGetter = vi.spyOn(window.navigator, 'onLine', 'get');
+    // Define connection property if it doesn't exist
+    // @ts-ignore
+    if (!('connection' in window.navigator)) {
+      // @ts-ignore
+      Object.defineProperty(window.navigator, 'connection', {
+        configurable: true,
+        get: () => ({ downlink: 10, rtt: 100 }),
+      });
+    }
     // @ts-ignore
-    connectionGetter = jest.spyOn(window.navigator, 'connection', 'get');
+    connectionGetter = vi.spyOn(window.navigator, 'connection', 'get');
   });
 
   it('returns TRUE if connection is online, navigator is online, has disabled webdriver, and not a bot', () => {

packages/shared/package.json

@@ -1,3 +1,5 @@
+import { expect, test } from 'vitest';
+
 import { buildAccountsBaseUrl } from '../buildAccountsBaseUrl';
 
 test.each([

…tests__/apiUrlFromPublishableKey.test.ts …tests__/apiUrlFromPublishableKey.spec.tspackages/shared/src/__tests__/apiUrlFromPublishableKey.test.ts renamed to packages/shared/src/__tests__/apiUrlFromPublishableKey.spec.ts packages/shared/src/__tests__/apiUrlFromPublishableKey.test.ts renamed to packages/shared/src/__tests__/apiUrlFromPublishableKey.spec.ts

@@ -0,0 +1,73 @@
+import { describe, expect, it } from 'vitest';
+
+import type { Color } from '@clerk/types';
+
+import { colorToSameTypeString, hexStringToRgbaColor, stringToHslaColor, stringToSameTypeColor } from '../color';
+
+describe('stringToHslaColor(color)', function () {
+  const hsla = { h: 195, s: 1, l: 0.5 };
+  const cases: Array<[string, Color | null]> = [
+    ['', null],
+    ['transparent', { h: 0, s: 0, l: 0, a: 0 }],
+    ['#00bfff', hsla],
+    ['00bfff', hsla],
+    ['rgb(0, 191, 255)', hsla],
+    ['rgba(0, 191, 255, 0.3)', { ...hsla, a: 0.3 }],
+  ];
+
+  it.each(cases)('.stringToHslaColor(%s) => %s', (a, expected) => {
+    expect(stringToHslaColor(a)).toEqual(expected);
+  });
+});
+
+describe('hexStringToRgbaColor(color)', function () {
+  const cases: Array<[string, Color | null]> = [
+    ['#00bfff', { r: 0, g: 191, b: 255 }],
+    ['00bfff', { r: 0, g: 191, b: 255 }],
+  ];
+
+  it.each(cases)('.hexStringToRgbaColor(%s) => %s', (a, expected) => {
+    expect(hexStringToRgbaColor(a)).toEqual(expected);
+  });
+});
+
+describe('stringToSameTypeColor(color)', function () {
+  const cases: Array<[string, Color | null]> = [
+    ['', ''],
+    ['invalid', ''],
+    ['12ff12', '#12ff12'],
+    ['#12ff12', '#12ff12'],
+    ['1ff', '#1ff'],
+    ['transparent', 'transparent'],
+    ['rgb(100,100,100)', { r: 100, g: 100, b: 100, a: undefined }],
+    ['rgba(100,100,100,0.5)', { r: 100, g: 100, b: 100, a: 0.5 }],
+    ['rgb(100,100,100)', { r: 100, g: 100, b: 100, a: undefined }],
+    ['rgba(100,100,100,0.5)', { r: 100, g: 100, b: 100, a: 0.5 }],
+    ['hsl(244,66%,33%)', { h: 244, s: 0.66, l: 0.33, a: undefined }],
+    ['hsla(244,66%,33%,0.5)', { h: 244, s: 0.66, l: 0.33, a: 0.5 }],
+    ['hsl(244,66%,33)', ''],
+    ['hsla(244,66%,33,0.5)', ''],
+  ];
+
+  it.each(cases)('.stringToSameTypeColor(%s) => %s', (a, expected) => {
+    expect(stringToSameTypeColor(a)).toEqual(expected);
+  });
+});
+
+describe('colorToSameTypeString(color)', function () {
+  const cases: Array<[Color, string]> = [
+    ['', ''],
+    ['invalid', ''],
+    ['#12ff12', '#12ff12'],
+    ['#12ff12', '#12ff12'],
+    ['#1ff', '#1ff'],
+    [{ r: 100, g: 100, b: 100, a: undefined }, 'rgb(100,100,100)'],
+    [{ r: 100, g: 100, b: 100, a: 0.5 }, 'rgba(100,100,100,0.5)'],
+    [{ h: 100, s: 0.55, l: 0.33, a: undefined }, 'hsl(100,55%,33%)'],
+    [{ h: 100, s: 1, l: 1, a: 0.5 }, 'hsla(100,100%,100%,0.5)'],
+  ];
+
+  it.each(cases)('.colorToSameTypeString(%s) => %s', (a, expected) => {
+    expect(colorToSameTypeString(a)).toEqual(expected);
+  });
+});

…ges/shared/src/__tests__/browser.test.ts …ges/shared/src/__tests__/browser.spec.tspackages/shared/src/__tests__/browser.test.ts renamed to packages/shared/src/__tests__/browser.spec.ts packages/shared/src/__tests__/browser.test.ts renamed to packages/shared/src/__tests__/browser.spec.ts

@@ -1,3 +1,5 @@
+import { describe, expect, it } from 'vitest';
+
 import type { RelativeDateCase } from '../date';
 import { addYears, dateTo12HourTime, differenceInCalendarDays, formatRelative } from '../date';