Admin UI vitest

package.json

@@ -54,7 +54,8 @@
     "ts-node": "^10.9.2",
     "typescript": "5.3.3",
     "unplugin-swc": "^1.4.4",
-    "vitest": "^1.3.1"
+    "vitest": "^1.3.1",
+    "vite-tsconfig-paths": "^4.3.1"
   },
   "//": "Fix for https://github.com/npm/cli/issues/4828",
   "optionalDependencies": {

packages/admin-ui/angular.json

@@ -114,29 +114,7 @@
             "buildTarget": "vendure-admin:build"
           }
         },
-        "test": {
-          "builder": "@angular-devkit/build-angular:karma",
-          "options": {
-            "main": "src/test.ts",
-            "polyfills": "src/lib/static/polyfills.ts",
-            "tsConfig": "src/tsconfig.spec.json",
-            "karmaConfig": "src/karma.conf.js",
-            "styles": [
-              "src/lib/static/styles/styles.scss"
-            ],
-            "scripts": [],
-            "assets": [
-              "src/lib/static/favicon.ico",
-              "src/lib/static/assets"
-            ],
-            "stylePreprocessorOptions": {
-              "includePaths": [
-                "./src/lib/static/styles",
-                "./src/lib/static/fonts"
-              ]
-            }
-          }
-        },
+
         "lint": {
           "builder": "@angular-eslint/builder:lint",
           "options": {

packages/admin-ui/package.json

@@ -8,7 +8,7 @@
         "build:app": "ng build vendure-admin --configuration production",
         "build": "node scripts/copy-package-json.js && node scripts/set-version.js && node scripts/build-public-api.js && ng build vendure-admin-lib --configuration production && node scripts/compile-styles.js",
         "watch": "ng build --watch=true",
-        "test": "ng test --watch=false --browsers=ChromeHeadlessCI --progress=false",
+        "test": "npx vitest",
         "lint": "ng lint --fix",
         "extract-translations": "node scripts/extract-translations.js",
         "ngcc": "ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points"
@@ -79,6 +79,7 @@
         "zone.js": "~0.14.4"
     },
     "devDependencies": {
+        "@analogjs/vite-plugin-angular": "^1.1.2",
         "@angular-devkit/build-angular": "^17.2.3",
         "@angular-eslint/builder": "^17.2.1",
         "@angular-eslint/eslint-plugin": "^17.2.1",
@@ -88,8 +89,6 @@
         "@angular/cli": "^17.2.3",
         "@angular/compiler": "^17.2.4",
         "@angular/compiler-cli": "^17.2.4",
-        "@types/jasmine": "~4.3.5",
-        "@types/jasminewd2": "~2.0.10",
         "@types/node": "^18.17.9",
         "@types/react": "^18.2.21",
         "@typescript-eslint/eslint-plugin": "^5.59.2",
@@ -101,17 +100,9 @@
         "eslint-plugin-jsdoc": "^45.0.0",
         "eslint-plugin-prefer-arrow": "^1.2.3",
         "fs-extra": "^11.2.0",
-        "jasmine-core": "~3.99.1",
-        "jasmine-spec-reporter": "~7.0.0",
-        "karma": "~6.3.4",
-        "karma-chrome-launcher": "~3.1.0",
-        "karma-coverage-istanbul-reporter": "~3.0.2",
-        "karma-jasmine": "~4.0.0",
-        "karma-jasmine-html-reporter": "^1.7.0",
-        "karma-mocha-reporter": "^2.2.5",
+        "jsdom": "^24.0.0",
         "ng-packagr": "17.2.1",
-        "puppeteer": "^19.8.3",
         "rimraf": "^5.0.5",
         "typescript": "5.3.3"
     }
-}
+}

packages/admin-ui/src/lib/catalog/src/components/collection-tree/array-to-tree.spec.ts

@@ -1,3 +1,4 @@
+import { describe, expect, it, vi } from 'vitest';
 import { arrayToTree, HasParent, RootNode, TreeNode } from './array-to-tree';
 
 describe('arrayToTree()', () => {

packages/admin-ui/src/lib/core/src/common/utilities/configurable-operation-utils.spec.ts

@@ -1,8 +1,6 @@
-import {
-    ConfigurableOperation,
-    getDefaultConfigArgValue,
-    toConfigurableOperationInput,
-} from '@vendure/admin-ui/core';
+import { describe, expect, it } from 'vitest';
+import { ConfigurableOperation } from '../../common/generated-types';
+import { getDefaultConfigArgValue, toConfigurableOperationInput } from './configurable-operation-utils';
 
 describe('getDefaultConfigArgValue()', () => {
     it('returns a default string value', () => {

packages/admin-ui/src/lib/core/src/components/breadcrumb/breadcrumb.component.spec.ts

@@ -3,6 +3,7 @@ import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testin
 import { By } from '@angular/platform-browser';
 import { Router, Routes } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
+import { ClarityModule } from '@clr/angular';
 import { notNullOrUndefined } from '@vendure/common/lib/shared-utils';
 import { BehaviorSubject, Observable, of as observableOf } from 'rxjs';
 
@@ -227,7 +228,7 @@ describe('BeadcrumbsComponent', () => {
         ];
 
         TestBed.configureTestingModule({
-            imports: [RouterTestingModule.withRoutes(baseRouteConfig)],
+            imports: [RouterTestingModule.withRoutes(baseRouteConfig), ClarityModule],
             declarations: [BreadcrumbComponent, TestParentComponent, TestChildComponent, MockTranslatePipe],
             providers: [FooResolver, { provide: DataService, useClass: class {} }],
         }).compileComponents();
@@ -428,7 +429,7 @@ function getBreadcrumbListItems(fixture: ComponentFixture<TestComponent>): HTMLL
 }
 
 function getBreadcrumbLabels(fixture: ComponentFixture<TestComponent>): string[] {
-    const labels = getBreadcrumbListItems(fixture).map(item => item.innerText.trim());
+    const labels = getBreadcrumbListItems(fixture).map(item => item.textContent!.trim());
     return labels;
 }
 
@@ -453,7 +454,9 @@ class TestParentComponent {}
 @Component({
     // eslint-disable-next-line @angular-eslint/component-selector
     selector: 'test-child-component',
-    template: ` <vdr-breadcrumb></vdr-breadcrumb> `,
+    template: `
+        <vdr-breadcrumb></vdr-breadcrumb>
+    `,
 })
 class TestChildComponent {}
 

packages/admin-ui/src/lib/core/src/data/utils/add-custom-fields.spec.ts

@@ -1,4 +1,5 @@
 import { DocumentNode, FieldNode, FragmentDefinitionNode, Kind, OperationTypeNode } from 'graphql';
+import { beforeEach, describe, it } from 'vitest';
 
 import { CustomFieldConfig, CustomFields } from '../../common/generated-types';
 

packages/admin-ui/src/lib/core/src/providers/localization/localization.service.spec.ts

@@ -1,6 +1,7 @@
 import { TestBed } from '@angular/core/testing';
 
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { beforeEach, describe, expect, it } from 'vitest';
 import { TestingCommonModule } from '../../../../../testing/testing-common.module';
 import { MockI18nService } from '../i18n/i18n.service.mock';
 import { DataService } from '../../data/providers/data.service';

packages/admin-ui/src/lib/core/src/providers/nav-builder/nav-builder.service.spec.ts

@@ -1,6 +1,8 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion, no-console */
 import { TestBed } from '@angular/core/testing';
+import { firstValueFrom } from 'rxjs';
 import { take } from 'rxjs/operators';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { NavMenuSection } from './nav-builder-types';
 import { NavBuilderService } from './nav-builder.service';
@@ -13,31 +15,27 @@ describe('NavBuilderService', () => {
         service = TestBed.inject(NavBuilderService);
     });
 
-    it('defineNavMenuSections', done => {
+    it('defineNavMenuSections', async () => {
         service.defineNavMenuSections(getBaseNav());
 
-        service.menuConfig$.pipe(take(1)).subscribe(result => {
-            expect(result).toEqual(getBaseNav());
-            done();
-        });
+        const result = await firstValueFrom(service.menuConfig$);
+        expect(result).toEqual(getBaseNav());
     });
 
     describe('addNavMenuSection', () => {
-        it('adding new section to end', done => {
+        it('adding new section to end', async () => {
             service.defineNavMenuSections(getBaseNav());
             service.addNavMenuSection({
                 id: 'reports',
                 label: 'Reports',
                 items: [],
             });
 
-            service.menuConfig$.pipe(take(1)).subscribe(result => {
-                expect(result.map(section => section.id)).toEqual(['catalog', 'sales', 'reports']);
-                done();
-            });
+            const result = await firstValueFrom(service.menuConfig$);
+            expect(result.map(section => section.id)).toEqual(['catalog', 'sales', 'reports']);
         });
 
-        it('adding new section before', done => {
+        it('adding new section before', async () => {
             service.defineNavMenuSections(getBaseNav());
             service.addNavMenuSection(
                 {
@@ -48,28 +46,24 @@ describe('NavBuilderService', () => {
                 'sales',
             );
 
-            service.menuConfig$.pipe(take(1)).subscribe(result => {
-                expect(result.map(section => section.id)).toEqual(['catalog', 'reports', 'sales']);
-                done();
-            });
+            const result = await firstValueFrom(service.menuConfig$);
+            expect(result.map(section => section.id)).toEqual(['catalog', 'reports', 'sales']);
         });
 
-        it('replacing an existing section', done => {
+        it('replacing an existing section', async () => {
             service.defineNavMenuSections(getBaseNav());
             service.addNavMenuSection({
                 id: 'sales',
                 label: 'Custom Sales',
                 items: [],
             });
 
-            service.menuConfig$.pipe(take(1)).subscribe(result => {
-                expect(result.map(section => section.id)).toEqual(['catalog', 'sales']);
-                expect(result[1].label).toBe('Custom Sales');
-                done();
-            });
+            const result = await firstValueFrom(service.menuConfig$);
+            expect(result.map(section => section.id)).toEqual(['catalog', 'sales']);
+            expect(result[1].label).toBe('Custom Sales');
         });
 
-        it('replacing and moving', done => {
+        it('replacing and moving', async () => {
             service.defineNavMenuSections(getBaseNav());
             service.addNavMenuSection(
                 {
@@ -80,17 +74,15 @@ describe('NavBuilderService', () => {
                 'catalog',
             );
 
-            service.menuConfig$.pipe(take(1)).subscribe(result => {
-                expect(result.map(section => section.id)).toEqual(['sales', 'catalog']);
-                expect(result[0].label).toBe('Custom Sales');
-                done();
-            });
+            const result = await firstValueFrom(service.menuConfig$);
+            expect(result.map(section => section.id)).toEqual(['sales', 'catalog']);
+            expect(result[0].label).toBe('Custom Sales');
         });
     });
 
     describe('addNavMenuItem()', () => {
-        it('adding to non-existent section', done => {
-            spyOn(console, 'error');
+        it('adding to non-existent section', async () => {
+            vi.spyOn(console, 'error');
             service.defineNavMenuSections(getBaseNav());
             service.addNavMenuItem(
                 {
@@ -101,15 +93,13 @@ describe('NavBuilderService', () => {
                 'farm-tools',
             );
 
-            service.menuConfig$.pipe(take(1)).subscribe(result => {
-                expect(console.error).toHaveBeenCalledWith(
-                    'Could not add menu item "fulfillments", section "farm-tools" does not exist',
-                );
-                done();
-            });
+            await firstValueFrom(service.menuConfig$);
+            expect(console.error).toHaveBeenCalledWith(
+                'Could not add menu item "fulfillments", section "farm-tools" does not exist',
+            );
         });
 
-        it('adding to end of section', done => {
+        it('adding to end of section', async () => {
             service.defineNavMenuSections(getBaseNav());
             service.addNavMenuItem(
                 {
@@ -120,15 +110,13 @@ describe('NavBuilderService', () => {
                 'sales',
             );
 
-            service.menuConfig$.pipe(take(1)).subscribe(result => {
-                const salesSection = result.find(r => r.id === 'sales')!;
+            const result = await firstValueFrom(service.menuConfig$);
+            const salesSection = result.find(r => r.id === 'sales')!;
 
-                expect(salesSection.items.map(item => item.id)).toEqual(['orders', 'fulfillments']);
-                done();
-            });
+            expect(salesSection.items.map(item => item.id)).toEqual(['orders', 'fulfillments']);
         });
 
-        it('adding before existing item', done => {
+        it('adding before existing item', async () => {
             service.defineNavMenuSections(getBaseNav());
             service.addNavMenuItem(
                 {
@@ -140,15 +128,13 @@ describe('NavBuilderService', () => {
                 'orders',
             );
 
-            service.menuConfig$.pipe(take(1)).subscribe(result => {
-                const salesSection = result.find(r => r.id === 'sales')!;
+            const result = await firstValueFrom(service.menuConfig$);
+            const salesSection = result.find(r => r.id === 'sales')!;
 
-                expect(salesSection.items.map(item => item.id)).toEqual(['fulfillments', 'orders']);
-                done();
-            });
+            expect(salesSection.items.map(item => item.id)).toEqual(['fulfillments', 'orders']);
         });
 
-        it('replacing existing item', done => {
+        it('replacing existing item', async () => {
             service.defineNavMenuSections(getBaseNav());
             service.addNavMenuItem(
                 {
@@ -159,16 +145,14 @@ describe('NavBuilderService', () => {
                 'catalog',
             );
 
-            service.menuConfig$.pipe(take(1)).subscribe(result => {
-                const catalogSection = result.find(r => r.id === 'catalog')!;
+            const result = await firstValueFrom(service.menuConfig$);
+            const catalogSection = result.find(r => r.id === 'catalog')!;
 
-                expect(catalogSection.items.map(item => item.id)).toEqual(['products', 'facets']);
-                expect(catalogSection.items[1].label).toBe('Custom Facets');
-                done();
-            });
+            expect(catalogSection.items.map(item => item.id)).toEqual(['products', 'facets']);
+            expect(catalogSection.items[1].label).toBe('Custom Facets');
         });
 
-        it('replacing existing item and moving', done => {
+        it('replacing existing item and moving', async () => {
             service.defineNavMenuSections(getBaseNav());
             service.addNavMenuItem(
                 {
@@ -180,13 +164,11 @@ describe('NavBuilderService', () => {
                 'products',
             );
 
-            service.menuConfig$.pipe(take(1)).subscribe(result => {
-                const catalogSection = result.find(r => r.id === 'catalog')!;
+            const result = await firstValueFrom(service.menuConfig$);
+            const catalogSection = result.find(r => r.id === 'catalog')!;
 
-                expect(catalogSection.items.map(item => item.id)).toEqual(['facets', 'products']);
-                expect(catalogSection.items[0].label).toBe('Custom Facets');
-                done();
-            });
+            expect(catalogSection.items.map(item => item.id)).toEqual(['facets', 'products']);
+            expect(catalogSection.items[0].label).toBe('Custom Facets');
         });
     });
 

packages/admin-ui/src/lib/core/src/providers/notification/notification.service.spec.ts

@@ -82,7 +82,9 @@ describe('NotificationService:', () => {
 });
 
 @Component({
-    template: ` <vdr-overlay-host></vdr-overlay-host> `,
+    template: `
+        <vdr-overlay-host></vdr-overlay-host>
+    `,
 })
 class TestComponent {
     constructor(public notificationService: NotificationService) {}

packages/admin-ui/src/lib/core/src/providers/overlay-host/overlay-host.service.ts

@@ -1,7 +1,7 @@
 import { Injectable, ViewContainerRef } from '@angular/core';
 
 /**
- * The OverlayHostService is used to get a reference to the ViewConainerRef of the
+ * The OverlayHostService is used to get a reference to the ViewContainerRef of the
  * OverlayHost component, so that other components may insert components & elements
  * into the DOM at that point.
  */

packages/admin-ui/src/lib/core/src/shared/components/data-table-2/data-table-search.component.ts

@@ -3,7 +3,7 @@ import { FormControl } from '@angular/forms';
 
 @Component({
     selector: 'vdr-dt2-search',
-    templateUrl: `./data-table-search.component.html`,
+    templateUrl: './data-table-search.component.html',
     styleUrls: ['./data-table-search.component.scss'],
 })
 export class DataTable2SearchComponent {