chore(components): upgrade to vitest (VIV-2301) (#2117)

* Remove vitest

* Add vitest 2.x

* Tests converted to vitest - need to fix some errors

* Fixed small things

* chore: fixed select unit test

* chore: fixes some tests on popup

* Fix calendar test

* Fix video-player-test

* Fix date-range-picker test

* Fix icon test

* a11y tab test

* Revert "chore: fixes some tests on popup"

This reverts commit 37666d8.

* Fix popup test

* chore: fix data-grid-row a11y test

* fixed radio tests

* Fix date picker test

* Fix date picker base test

* Fix time picker test

* Update snapshots

* Linting

* Revert other libs to jest

* Conform to component tag

* Improve performance

* linting

* chore: updates tab a11y test

* Set lcov reporter for CI

* Fix coverage report

* Linting

* Linting 2

* Revert package-lock formatting

* Restore check for adoptedStyleSheets

* Cleanup the DOM before window.close

Prevents issues with popup

---------

Co-authored-by: Yonatan Kra <[email protected]>
Co-authored-by: TaylorJ76 <[email protected]>
Co-authored-by: Richard Helm <[email protected]>
Co-authored-by: RTannenbaum <[email protected]>
Co-authored-by: James Taylor <[email protected]>
Co-authored-by: Richard Helm <[email protected]>

libs/components/project.json

@@ -59,10 +59,9 @@
 			}
 		},
 		"test": {
-			"executor": "@nrwl/jest:jest",
+			"executor": "@nx/vite:test",
 			"outputs": ["{workspaceRoot}/coverage/libs/components"],
 			"options": {
-				"jestConfig": "libs/components/jest.config.cjs",
 				"passWithNoTests": true
 			}
 		},

libs/components/src/lib/alert/alert.spec.ts

@@ -97,7 +97,7 @@ describe('vwc-alert', () => {
 
 	describe('focus', () => {
 		it('should focus when opened', async () => {
-			const spy = jest.fn();
+			const spy = vi.fn();
 			const alertText: HTMLElement = element.shadowRoot?.querySelector(
 				'.alert-text'
 			) as HTMLElement;
@@ -145,17 +145,17 @@ describe('vwc-alert', () => {
 
 	describe('timeoutms', function () {
 		it('should fire close event after timeoutms milliseconds', async function () {
-			jest.useFakeTimers();
-			const spy = jest.fn();
+			vi.useFakeTimers();
+			const spy = vi.fn();
 
 			element.timeoutms = 100;
 			element.open = true;
 			element.addEventListener('close', spy);
 
-			jest.advanceTimersByTime(100);
+			vi.advanceTimersByTime(100);
 
 			expect(spy).toHaveBeenCalled();
-			jest.useRealTimers();
+			vi.useRealTimers();
 		});
 	});
 
@@ -312,7 +312,7 @@ describe('vwc-alert', () => {
 			beforeEach(() => (element.open = true));
 
 			it('should remove the alert when esc and removable is true', async function () {
-				const spy = jest.fn();
+				const spy = vi.fn();
 				element.removable = true;
 				element.addEventListener('close', spy);
 
@@ -324,7 +324,7 @@ describe('vwc-alert', () => {
 			});
 
 			it('should remove the alert only on escape key', async function () {
-				const spy = jest.fn();
+				const spy = vi.fn();
 				element.removable = true;
 				element.addEventListener('close', spy);
 
@@ -336,7 +336,7 @@ describe('vwc-alert', () => {
 			});
 
 			it('should remove keydown listener after disconnection', async function () {
-				const spy = jest.fn();
+				const spy = vi.fn();
 				element.removable = true;
 				element.addEventListener('close', spy);
 
@@ -348,7 +348,7 @@ describe('vwc-alert', () => {
 			});
 
 			it('should not fire close event when removable is false', async function () {
-				const spy = jest.fn();
+				const spy = vi.fn();
 				element.removable = false;
 				element.addEventListener('close', spy);
 
@@ -359,7 +359,7 @@ describe('vwc-alert', () => {
 			});
 
 			it('should stop propgation on escape key', async () => {
-				const spy = jest.fn();
+				const spy = vi.fn();
 				element.parentElement!.addEventListener('keydown', spy);
 				getBaseElement(element).dispatchEvent(
 					new KeyboardEvent('keydown', { key: 'Escape' })
@@ -370,15 +370,15 @@ describe('vwc-alert', () => {
 
 			it('should enable default if Escape was pressed', async () => {
 				const event = new KeyboardEvent('keydown', { key: 'Escape' });
-				jest.spyOn(event, 'preventDefault');
+				vi.spyOn(event, 'preventDefault');
 				getBaseElement(element).dispatchEvent(event);
 				await elementUpdated(element);
 				expect(event.preventDefault).toBeCalledTimes(0);
 			});
 
 			it('should enable default if key is not Escape', async () => {
 				const event = new KeyboardEvent('keydown', { key: ' ' });
-				jest.spyOn(event, 'preventDefault');
+				vi.spyOn(event, 'preventDefault');
 				getBaseElement(element).dispatchEvent(event);
 				await elementUpdated(element);
 				expect(event.preventDefault).toBeCalledTimes(0);

libs/components/src/lib/audio-player/audio-player.spec.ts

@@ -27,7 +27,7 @@ describe('vwc-audio-player', () => {
 	}
 
 	function setAudioElementDuration(duration: number) {
-		jest.spyOn(nativeAudioElement, 'duration', 'get').mockReturnValue(duration);
+		vi.spyOn(nativeAudioElement, 'duration', 'get').mockReturnValue(duration);
 	}
 
 	function setAudioElementCurrentTime(time: number) {
@@ -101,14 +101,14 @@ describe('vwc-audio-player', () => {
 			`<${COMPONENT_TAG} timestamp src="${SOURCE}"></${COMPONENT_TAG}>`
 		)) as AudioPlayer;
 
-		jest.spyOn(nativeAudioElement, 'play').mockImplementation(() => {
+		vi.spyOn(nativeAudioElement, 'play').mockImplementation(() => {
 			return new Promise((res) => {
-				jest.spyOn(nativeAudioElement, 'paused', 'get').mockReturnValue(false);
+				vi.spyOn(nativeAudioElement, 'paused', 'get').mockReturnValue(false);
 				res();
 			});
 		});
-		jest.spyOn(nativeAudioElement, 'pause').mockImplementation(async () => {
-			jest.spyOn(nativeAudioElement, 'paused', 'get').mockReturnValue(true);
+		vi.spyOn(nativeAudioElement, 'pause').mockImplementation(async () => {
+			vi.spyOn(nativeAudioElement, 'paused', 'get').mockReturnValue(true);
 		});
 
 		pauseButton = getPauseButtonElement();
@@ -365,7 +365,7 @@ describe('vwc-audio-player', () => {
 			dragSliderTo(25);
 			await elementUpdated(element);
 
-			const playSpy = jest.spyOn(element, 'play');
+			const playSpy = vi.spyOn(element, 'play');
 			stopSliderDrag();
 			getSliderElement().value = '20';
 			await elementUpdated(element);
@@ -410,7 +410,7 @@ describe('vwc-audio-player', () => {
 			setCurrentTimeAndDuration(10, duration);
 			await elementUpdated(element);
 
-			const pauseSpy = jest.spyOn(element, 'pause');
+			const pauseSpy = vi.spyOn(element, 'pause');
 			dragSliderTo(20);
 			await elementUpdated(element);
 

libs/components/src/lib/banner/banner.spec.ts

@@ -93,14 +93,14 @@ describe('vwc-banner', () => {
 
 	describe('remove', function () {
 		it('should fire removing event', async function () {
-			const spy = jest.fn();
+			const spy = vi.fn();
 			element.addEventListener('removing', spy);
 			element.remove();
 			expect(spy).toHaveBeenCalled();
 		});
 
 		it('should fire removed after animation end', async function () {
-			const spy = jest.fn();
+			const spy = vi.fn();
 			element.addEventListener('removed', spy);
 			element.remove();
 
@@ -111,7 +111,7 @@ describe('vwc-banner', () => {
 		});
 
 		it('should disable removed and removing events after disconnected callback', async function () {
-			const spy = jest.fn();
+			const spy = vi.fn();
 			element.addEventListener('removed', spy);
 			element.addEventListener('removing', spy);
 			element.disconnectedCallback();
@@ -280,15 +280,15 @@ describe('vwc-banner', () => {
 		it('should remove the button on escape key', async function () {
 			element.removable = true;
 			element.focus();
-			jest.spyOn(element, 'remove');
+			vi.spyOn(element, 'remove');
 			element.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
 			expect(element.remove).toHaveBeenCalled();
 		});
 
 		it('should remove the banner only on escape key', async function () {
 			element.removable = true;
 			element.focus();
-			const spy = jest.spyOn(element, 'remove');
+			const spy = vi.spyOn(element, 'remove');
 			element.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
 			expect((spy as any).mock.calls.length).toEqual(0);
 		});
@@ -297,15 +297,15 @@ describe('vwc-banner', () => {
 			element.removable = true;
 			element.focus();
 			element.disconnectedCallback();
-			const spy = jest.spyOn(element, 'remove');
+			const spy = vi.spyOn(element, 'remove');
 			element.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
 			expect((spy as any).mock.calls.length).toEqual(0);
 		});
 
 		it('should remove the banner only if "removable" is true', async function () {
 			element.removable = false;
 			element.focus();
-			const spy = jest.spyOn(element, 'remove');
+			const spy = vi.spyOn(element, 'remove');
 			element.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
 			expect((spy as any).mock.calls.length).toEqual(0);
 		});

libs/components/src/lib/calendar/calendar.spec.ts

@@ -121,8 +121,8 @@ describe('vwc-calendar', () => {
 
 		it('should return correct day and hour from mouse clicking inside one of the columns cells', async () => {
 			const e = new MouseEvent('click', { composed: true, clientY: 54 });
-			e.composedPath = jest.fn().mockReturnValue([gridCell]);
-			gridCell.getBoundingClientRect = jest
+			e.composedPath = vi.fn().mockReturnValue([gridCell]);
+			gridCell.getBoundingClientRect = vi
 				.fn()
 				.mockReturnValue({ height: 1175, y: 28 });
 
@@ -136,7 +136,7 @@ describe('vwc-calendar', () => {
 			const rowHeader = element.shadowRoot?.querySelector(
 				'[role="rowheader"]:nth-child(3)'
 			) as HTMLElement;
-			rowHeader.getBoundingClientRect = jest
+			rowHeader.getBoundingClientRect = vi
 				.fn()
 				.mockReturnValue({ height: 49, y: 85 });
 
@@ -149,7 +149,7 @@ describe('vwc-calendar', () => {
 				clientX: 25,
 				clientY: 174,
 			});
-			e.composedPath = jest.fn().mockReturnValue([rowHeaderTimeElement]);
+			e.composedPath = vi.fn().mockReturnValue([rowHeaderTimeElement]);
 
 			context = element.getEventContext(e);
 
@@ -167,7 +167,7 @@ describe('vwc-calendar', () => {
 				clientX: 0,
 				clientY: 0,
 			});
-			e.composedPath = jest.fn().mockReturnValue([grid]);
+			e.composedPath = vi.fn().mockReturnValue([grid]);
 
 			context = element.getEventContext(e);
 
@@ -176,7 +176,7 @@ describe('vwc-calendar', () => {
 
 		it('should throw if unsupported event passed', async () => {
 			const e = new FocusEvent('focus');
-			e.composedPath = jest.fn().mockReturnValue([gridCell]);
+			e.composedPath = vi.fn().mockReturnValue([gridCell]);
 
 			const getEventContext = () => element.getEventContext(e as MouseEvent);
 
@@ -187,7 +187,7 @@ describe('vwc-calendar', () => {
 
 		it('should throw if event is missing a target', async () => {
 			const e = new MouseEvent('click', { composed: true, clientY: 54 });
-			gridCell.getBoundingClientRect = jest
+			gridCell.getBoundingClientRect = vi
 				.fn()
 				.mockReturnValue({ height: 1175, y: 28 });
 
@@ -364,7 +364,7 @@ describe('vwc-calendar', () => {
 
 	/* skipped because "Certain ARIA roles must contain particular children (aria-required-children)" */
 	describe('a11y', () => {
-		xit('should pass html a11y test', async () => {
+		it.skip('should pass html a11y test', async () => {
 			expect(await axe(element)).toHaveNoViolations();
 		});
 	});

libs/components/src/lib/checkbox/checkbox.spec.ts

@@ -287,7 +287,7 @@ describe('vwc-checkbox', () => {
 
 	describe.each(['input', 'change'])('%s event', (eventName) => {
 		it('should be fired when a user toggles the checkbox', async () => {
-			const spy = jest.fn();
+			const spy = vi.fn();
 			element.addEventListener(eventName, spy);
 
 			getBaseElement(element).click();

libs/components/src/lib/combobox/combobox.spec.ts

@@ -44,7 +44,7 @@ describe('vwc-combobox', () => {
 	};
 
 	beforeAll(() => {
-		HTMLElement.prototype.scrollIntoView = jest.fn();
+		HTMLElement.prototype.scrollIntoView = vi.fn();
 	});
 
 	beforeEach(async () => {
@@ -146,7 +146,7 @@ describe('vwc-combobox', () => {
 		});
 
 		it('should allow propgation on escape key if not open', async () => {
-			const spy = jest.fn();
+			const spy = vi.fn();
 			element.parentElement!.addEventListener('keydown', spy);
 
 			element.dispatchEvent(
@@ -162,7 +162,7 @@ describe('vwc-combobox', () => {
 
 		it('should stop propgation on escape key if open', async () => {
 			element.open = true;
-			const spy = jest.fn();
+			const spy = vi.fn();
 			element.parentElement!.addEventListener('keydown', spy);
 
 			element.dispatchEvent(
@@ -547,7 +547,7 @@ describe('vwc-combobox', () => {
 				it('should close and select the first matching option when pressing Enter when autocomplete is %s', async () => {
 					element.open = true;
 					await elementUpdated(element);
-					const spy = jest.fn();
+					const spy = vi.fn();
 					element.addEventListener('change', spy);
 
 					typeInput('ana');
@@ -628,15 +628,15 @@ describe('vwc-combobox', () => {
 	});
 
 	describe('when an option is selected', () => {
-		let changeSpy: jest.Mock;
+		let changeSpy: vi.Mock;
 
 		beforeEach(async () => {
 			element.innerHTML = `
 				<vwc-option value="1" text="Apple"></vwc-option>
 			`;
 			element.open = true;
 			await elementUpdated(element);
-			changeSpy = jest.fn();
+			changeSpy = vi.fn();
 			element.addEventListener('change', changeSpy);
 			getOption('Apple').click();
 		});

libs/components/src/lib/data-grid/data-grid-cell.spec.ts

@@ -175,7 +175,7 @@ describe('vwc-data-grid-cell', () => {
 			});
 
 			it('should fire "cell-focused" event', async () => {
-				const spy = jest.fn();
+				const spy = vi.fn();
 				element.addEventListener('cell-focused', spy);
 				element.focus();
 				expect(spy).toHaveBeenCalledTimes(1);
@@ -191,7 +191,7 @@ describe('vwc-data-grid-cell', () => {
 			});
 
 			it('should ignore additional focusin events', async () => {
-				const spy = jest.fn();
+				const spy = vi.fn();
 				element.addEventListener('cell-focused', spy);
 
 				element.dispatchEvent(new Event('focusin'));
@@ -369,12 +369,12 @@ describe('vwc-data-grid-cell', () => {
 	});
 
 	describe('sort event', () => {
-		let onSortSpy: jest.Mock;
+		let onSortSpy: vi.Mock;
 		beforeEach(async () => {
 			element.cellType = 'columnheader';
 			element.innerHTML = 'Name';
 			await elementUpdated(element);
-			onSortSpy = jest.fn();
+			onSortSpy = vi.fn();
 			element.addEventListener('sort', onSortSpy);
 		});
 
@@ -445,13 +445,13 @@ describe('vwc-data-grid-cell', () => {
 	});
 
 	describe('cell-click event', () => {
-		let onCellClickSpy: jest.Mock;
+		let onCellClickSpy: vi.Mock;
 		let expectedDetail: object;
 		beforeEach(async () => {
 			element.cellType = 'default';
 			element.innerHTML = 'Name';
 			await elementUpdated(element);
-			onCellClickSpy = jest.fn();
+			onCellClickSpy = vi.fn();
 			element.addEventListener('cell-click', onCellClickSpy);
 			expectedDetail = {
 				cell: element,