Skip to content

test(element-ng): migrate t to vitest #1708

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
spike-rabbit merged 1 commit into from
Mar 23, 2026
Merged

test(element-ng): migrate t to vitest #1708

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions angular.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -170,7 +170,7 @@
"buildTarget": "element-ng:test-target",
"browsers": ["chromium"],
"browserViewport": "1280x720",
"exclude": ["[n-v]*/**", "schematics/**"],
"exclude": ["[n-s]*/**", "schematics/**"],
"runnerConfig": true
}
},
Expand All @@ -179,7 +179,7 @@
"options": {
"tsConfig": "projects/element-ng/tsconfig.spec.json",
"karmaConfig": "projects/element-ng/karma.conf.cjs",
"exclude": ["**/[a-mw-z]*/**", "schematics/**", "**/*.vitest.spec.ts"],
"exclude": ["**/[a-ms-z]*/**", "schematics/**", "**/*.vitest.spec.ts"],
"assets": [
{
"glob": "**/*",
Expand Down
47 changes: 23 additions & 24 deletions projects/element-ng/tabs-legacy/si-tabset/si-tabset-legacy.component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,12 +97,11 @@ describe('SiTabset', () => {
});

beforeEach(async () => {
jasmine.clock().install();
jasmine.clock().mockDate();
vi.useFakeTimers();
});

afterEach(() => {
jasmine.clock().uninstall();
vi.useRealTimers();
});

it('should be possible to create a tabComponent instance', async () => {
Expand All @@ -112,7 +111,7 @@ describe('SiTabset', () => {
fixture.changeDetectorRef.markForCheck();
fixture.detectChanges();

jasmine.clock().tick(1000);
vi.advanceTimersByTime(1000);
await fixture.whenStable();

expect(getLength()).toEqual(1);
Expand All @@ -125,7 +124,7 @@ describe('SiTabset', () => {
fixture.changeDetectorRef.markForCheck();
fixture.detectChanges();

jasmine.clock().tick(1000);
vi.advanceTimersByTime(1000);
await fixture.whenStable();

expect(getActive(0)).toBe(true);
Expand Down Expand Up @@ -163,7 +162,7 @@ describe('SiTabset', () => {
fixture.changeDetectorRef.markForCheck();
fixture.detectChanges();

jasmine.clock().tick(1000);
vi.advanceTimersByTime(1000);
await fixture.whenStable();

expect(getActive(0)).toEqual(true);
Expand All @@ -177,13 +176,13 @@ describe('SiTabset', () => {
});

it('should should emit selectedTabIndexChange event', async () => {
spyOn(component.selectedTabIndexChange, 'emit');
vi.spyOn(component.selectedTabIndexChange, 'emit');
testComponent.tabs = ['1', '2', '3'];
fixture.changeDetectorRef.markForCheck();
fixture.detectChanges();

component.selectedTabIndex = 2;
jasmine.clock().tick(1000);
vi.advanceTimersByTime(1000);
await fixture.whenStable();
expect(component.selectedTabIndexChange.emit).toHaveBeenCalledTimes(2); // the first call is caused by adding the tabs
});
Expand All @@ -192,7 +191,7 @@ describe('SiTabset', () => {
testComponent.tabs = ['Tab 1 name extender', 'Tab 1 name extender', 'Tab 1 name extender'];
fixture.changeDetectorRef.markForCheck();
fixture.detectChanges();
const preventDefault = jasmine.createSpy('preventDefault');
const preventDefault = vi.fn();

fixture.debugElement
.query(By.css('.tab-container-buttonbar'))
Expand Down Expand Up @@ -239,14 +238,14 @@ describe('SiTabset', () => {
await fixture.whenStable();
if (document.hasFocus()) {
getElement(0).nativeElement.focus();
jasmine.clock().tick(500);
vi.advanceTimersByTime(500);
await fixture.whenStable();
focusNext();
jasmine.clock().tick(500);
vi.advanceTimersByTime(500);
await fixture.whenStable();
expect(document.activeElement).toBe(getElement(1).nativeElement);
(document.activeElement! as HTMLElement).blur();
jasmine.clock().tick(500);
vi.advanceTimersByTime(500);
Comment thread
timowolf marked this conversation as resolved.
await fixture.whenStable();

expect(getElement(0).attributes.tabindex).toBe('0');
Expand Down Expand Up @@ -283,22 +282,22 @@ describe('SiTabset', () => {
testComponent.tabs = ['1', '2', { heading: '3', closable: true }, '4'];
fixture.changeDetectorRef.markForCheck();
fixture.detectChanges();
jasmine.clock().tick(500);
vi.advanceTimersByTime(500);
await fixture.whenStable();
const closeSpy = spyOn(testComponent, 'closeTriggered').and.callThrough();
const closeSpy = vi.spyOn(testComponent, 'closeTriggered');
getElement(3).nativeElement.click();
jasmine.clock().tick(500);
vi.advanceTimersByTime(500);
await fixture.whenStable();

getElement(2).query(By.css('si-icon[data-icon="elementCancel"]')).nativeElement.click();
jasmine.clock().tick(500);
vi.advanceTimersByTime(500);
await fixture.whenStable();

expect(closeSpy).toHaveBeenCalledWith(jasmine.objectContaining({ heading: '3' }));
expect(closeSpy).toHaveBeenCalledWith(expect.objectContaining({ heading: '3' }));
expect(getElement(2).nativeElement).toBe(document.activeElement);

focusPrevious();
jasmine.clock().tick(500);
vi.advanceTimersByTime(500);
await fixture.whenStable();
expect(getElement(1).nativeElement).toBe(document.activeElement);
});
Expand All @@ -307,19 +306,19 @@ describe('SiTabset', () => {
testComponent.tabs = ['1', '2', { heading: '3', closable: true }, '4'];
fixture.changeDetectorRef.markForCheck();
fixture.detectChanges();
jasmine.clock().tick(500);
vi.advanceTimersByTime(500);
await fixture.whenStable();
const closeSpy = spyOn(testComponent, 'closeTriggered').and.callThrough();
const closeSpy = vi.spyOn(testComponent, 'closeTriggered');
getElement(2).nativeElement.click();
jasmine.clock().tick(500);
vi.advanceTimersByTime(500);
await fixture.whenStable();
getElement(2).query(By.css('si-icon[data-icon="elementCancel"]')).nativeElement.click();
jasmine.clock().tick(500);
vi.advanceTimersByTime(500);
await fixture.whenStable();
expect(closeSpy).toHaveBeenCalledWith(jasmine.objectContaining({ heading: '3' }));
expect(closeSpy).toHaveBeenCalledWith(expect.objectContaining({ heading: '3' }));
expect(getElement(2).nativeElement).toBe(document.activeElement);
focusPrevious();
jasmine.clock().tick(500);
vi.advanceTimersByTime(500);
await fixture.whenStable();
expect(getElement(1).nativeElement).toBe(document.activeElement);
});
Expand Down
42 changes: 18 additions & 24 deletions projects/element-ng/tabs/si-tabset.component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import {
MockResizeObserver,
mockResizeObserver,
restoreResizeObserver
} from '../resize-observer/mock-resize-observer.spec';
} from '../resize-observer/mock-resize-observer.vitest.spec';
import { SiTabLinkComponent } from './si-tab-link.component';
import { SiTabPortalComponent } from './si-tab-portal.component';
import { SiTabComponent } from './si-tab.component';
Expand Down Expand Up @@ -135,24 +135,22 @@ describe('SiTabset', () => {
const detectSizeChange = (): void => {
fixture.detectChanges();
MockResizeObserver.triggerResize({});
jasmine.clock().tick(200);
vi.advanceTimersByTime(200);
fixture.detectChanges();
};

beforeEach(async () => {
vi.useFakeTimers();
mockResizeObserver();
fixture = TestBed.createComponent(TestComponent);
testComponent = fixture.componentInstance;
loader = TestbedHarnessEnvironment.loader(fixture);
tabsetHarness = await loader.getHarness(SiTabsetHarness);
jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000000;
});

beforeEach(() => jasmine.clock().install());

afterEach(() => {
restoreResizeObserver();
jasmine.clock().uninstall();
vi.useRealTimers();
});

it('should be possible to create a tabComponent instance', async () => {
Expand Down Expand Up @@ -201,14 +199,14 @@ describe('SiTabset', () => {
testComponent.tabs = [{ heading: '1', active: true }, '2', '3'];
testComponent.wrapperWidth.set(300);
detectSizeChange();
jasmine.clock().tick(10);
vi.advanceTimersByTime(10);
fixture.detectChanges();
const button = await tabsetHarness.getTabItemButtonAt(0);
await button.focus();
jasmine.clock().tick(10);
vi.advanceTimersByTime(10);
fixture.detectChanges();
await tabsetHarness.focusNext();
jasmine.clock().tick(10);
vi.advanceTimersByTime(10);
fixture.detectChanges();

expect(await (await tabsetHarness.getTabItemButtonAt(1)).isFocused()).toBe(true);
Expand Down Expand Up @@ -253,7 +251,7 @@ describe('SiTabset', () => {
testComponent.wrapperWidth.set(500);
detectSizeChange();
fixture.detectChanges();
jasmine.clock().tick(10);
vi.advanceTimersByTime(10);
expect(await tabsetHarness.getOptionsMenuButton()).toBeNull();
expect(await tabsetHarness.isTabVisible(3)).toBe(true);
});
Expand All @@ -270,11 +268,11 @@ describe('SiTabset', () => {
{ heading: 'Tab 7', active: true }
];
testComponent.tabs = tabs;
jasmine.clock().tick(100);
vi.advanceTimersByTime(100);
fixture.changeDetectorRef.markForCheck();
fixture.detectChanges();
detectSizeChange();
testComponent.wrapperWidth.set(300);
jasmine.clock().tick(100);
detectSizeChange();

fixture.detectChanges();
expect(await tabsetHarness.getOptionsMenuButton()).toBeDefined();
Expand All @@ -285,10 +283,10 @@ describe('SiTabset', () => {
tabs[6].active = false;
fixture.changeDetectorRef.markForCheck();
// need to tick twice to allow for scrollIntoView to complete
jasmine.clock().tick(0);
fixture.detectChanges();
vi.advanceTimersByTime(0);
detectSizeChange();

jasmine.clock().tick(0);
vi.advanceTimersByTime(0);
fixture.detectChanges();
expect(await tabsetHarness.isTabVisible(0)).toBe(true);
expect(await tabsetHarness.isTabVisible(6)).toBe(false);
Expand All @@ -297,10 +295,10 @@ describe('SiTabset', () => {
it('should emit tab close event for closable tab and preserve active tab', async () => {
testComponent.tabs = ['1', '2', { heading: '3', closable: true }, '4'];
fixture.detectChanges();
const closeSpy = spyOn(testComponent, 'closeTriggered').and.callThrough();
const closeSpy = vi.spyOn(testComponent, 'closeTriggered');
await (await tabsetHarness.getTabItemButtonAt(3)).click();
await (await tabsetHarness.getCloseButtonForTabAt(0)).click();
expect(closeSpy).toHaveBeenCalledWith(jasmine.objectContaining({ heading: '3' }));
expect(closeSpy).toHaveBeenCalledWith(expect.objectContaining({ heading: '3' }));
expect(await (await tabsetHarness.getTabItemButtonAt(2)).getAttribute('tabindex')).toBe('0');
await (await tabsetHarness.getTabItemButtonAt(2)).focus();
await tabsetHarness.pressArrowLeft();
Expand All @@ -320,7 +318,7 @@ describe('SiTabset', () => {
expect(await (await tabsetHarness.getTabItemButtonAt(4)).getAttribute('aria-selected')).toBe(
'true'
);
jasmine.clock().tick(0);
vi.advanceTimersByTime(0);
fixture.detectChanges();
expect(await tabsetHarness.isTabVisible(0)).toBe(false);
});
Expand Down Expand Up @@ -420,10 +418,6 @@ describe('SiTabset Routing', () => {
tabsetHarness = await loader.getHarness(SiTabsetHarness);
});

beforeEach(() => jasmine.clock().install());

afterEach(() => jasmine.clock().uninstall());

it('should render router link tab', async () => {
testComponent.tabs = [
'1',
Expand All @@ -434,7 +428,7 @@ describe('SiTabset Routing', () => {
];
fixture.detectChanges();
(await tabsetHarness.getTabItemButtonAt(1)).click();
jasmine.clock().tick(100);
await fixture.whenStable();
fixture.detectChanges();
expect(await (await tabsetHarness.getTabContent()).text()).toBe('Content by routing');
});
Expand Down
Loading
Loading