Angular 21: standalone components, Vitest and angular19 CI

.github/workflows/dotnet-core-master.yml

@@ -46,6 +46,32 @@ jobs:
         with:
           name: items-planning-container
           path: items-planning-container.tar
+  angular-unit-test:
+    runs-on: ubuntu-latest
+    timeout-minutes: 30
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          path: eform-angular-items-planning-plugin
+      - name: 'Preparing Frontend checkout'
+        uses: actions/checkout@v3
+        with:
+          repository: microting/eform-angular-frontend
+          ref: ${{ github.ref_name }}
+          path: eform-angular-frontend
+      - name: Copy dependencies
+        run: |
+          cp -av eform-angular-items-planning-plugin/eform-client/src/app/plugins/modules/items-planning-pn eform-angular-frontend/eform-client/src/app/plugins/modules/items-planning-pn
+          cd eform-angular-frontend/eform-client && ../../eform-angular-items-planning-plugin/testinginstallpn.sh
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+      - name: Enable Corepack
+        run: corepack enable
+      - name: yarn install
+        run: cd eform-angular-frontend/eform-client && yarn install
+      - name: Unit tests
+        run: cd eform-angular-frontend/eform-client && npx ng test --watch=false --include='src/app/plugins/modules/items-planning-pn/**/*.spec.ts'
   test-dotnet:
     runs-on: ubuntu-latest
     steps:
@@ -119,6 +145,8 @@ jobs:
         cp -av main/eform-client/cypress/e2e/plugins/items-planning-pn eform-angular-frontend/eform-client/cypress/e2e/plugins/items-planning-pn
         cp -av main/eform-client/e2e/Assets eform-angular-frontend/eform-client/e2e/
         cd eform-angular-frontend/eform-client && ../../main/testinginstallpn.sh
+    - name: Enable Corepack
+      run: corepack enable
     - name: yarn install
       run: cd eform-angular-frontend/eform-client && yarn install
     - name: Install Playwright browsers

.github/workflows/dotnet-core-pr.yml

@@ -18,7 +18,7 @@ jobs:
         uses: actions/checkout@v3
         with:
           repository: microting/eform-angular-frontend
-          ref: stable
+          ref: ${{ github.base_ref }}
           path: eform-angular-frontend
       - name: Copy dependencies
         run: |
@@ -43,6 +43,32 @@ jobs:
         with:
           name: items-planning-container
           path: items-planning-container.tar
+  angular-unit-test:
+    runs-on: ubuntu-latest
+    timeout-minutes: 30
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          path: eform-angular-items-planning-plugin
+      - name: 'Preparing Frontend checkout'
+        uses: actions/checkout@v3
+        with:
+          repository: microting/eform-angular-frontend
+          ref: ${{ github.base_ref }}
+          path: eform-angular-frontend
+      - name: Copy dependencies
+        run: |
+          cp -av eform-angular-items-planning-plugin/eform-client/src/app/plugins/modules/items-planning-pn eform-angular-frontend/eform-client/src/app/plugins/modules/items-planning-pn
+          cd eform-angular-frontend/eform-client && ../../eform-angular-items-planning-plugin/testinginstallpn.sh
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+      - name: Enable Corepack
+        run: corepack enable
+      - name: yarn install
+        run: cd eform-angular-frontend/eform-client && yarn install
+      - name: Unit tests
+        run: cd eform-angular-frontend/eform-client && npx ng test --watch=false --include='src/app/plugins/modules/items-planning-pn/**/*.spec.ts'
   test-dotnet:
     runs-on: ubuntu-latest
     steps:
@@ -101,7 +127,7 @@ jobs:
       uses: actions/checkout@v3
       with:
         repository: microting/eform-angular-frontend
-        ref: stable
+        ref: ${{ github.base_ref }}
         path: eform-angular-frontend
     - name: Copy dependencies
       run: |
@@ -113,6 +139,8 @@ jobs:
         cp -av main/eform-client/cypress/e2e/plugins/items-planning-pn eform-angular-frontend/eform-client/cypress/e2e/plugins/items-planning-pn
         cp -av main/eform-client/e2e/Assets eform-angular-frontend/eform-client/e2e/
         cd eform-angular-frontend/eform-client && ../../main/testinginstallpn.sh
+    - name: Enable Corepack
+      run: corepack enable
     - name: yarn install
       run: cd eform-angular-frontend/eform-client && yarn install
     - name: Install Playwright browsers

Dockerfile

@@ -2,8 +2,9 @@ FROM node:22-bookworm-slim as node-env
 WORKDIR /app
 ENV PATH /app/node_modules/.bin:$PATH
 COPY eform-angular-frontend/eform-client ./
+RUN corepack enable
 RUN yarn install
-RUN npm run build
+RUN yarn build
 
 FROM mcr.microsoft.com/dotnet/sdk:10.0-noble AS build-env
 WORKDIR /app

eform-client/e2e/Page objects/ItemsPlanning/ItemsPlanningPairingPage.ts

@@ -23,7 +23,7 @@ export class ItemsPlanningPairingPage extends PageWithNavbarPage {
 
   public async countPlanningRow(): Promise<number> {
     await browser.pause(500);
-    return (await $$('#planningName')).length;
+    return (await $$('[id^="planningName"]')).length;
   }
 
   public async savePairingGridBtn(): Promise<WebdriverIO.Element> {
@@ -122,7 +122,7 @@ export class PairingRowObject {
   async getRow(rowNum: number): Promise<PairingRowObject> {
     this.row = (await $$('tbody tr'))[rowNum - 1];
     if (this.row) {
-      this.planningName = await (await this.row.$('#planningName')).getText();
+      this.planningName = await (await this.row.$('[id^="planningName"]')).getText();
       this.pairRow = await this.row.$(`#planningRowCheckbox${rowNum - 1}`);
       this.pairRowForClick = await this.pairRow.$('label');
       this.pairCheckboxes = [];

eform-client/playwright/e2e/plugins/items-planning-pn/ItemsPlanningPairingPage.ts

@@ -22,7 +22,7 @@ export class ItemsPlanningPairingPage extends PageWithNavbarPage {
 
   public async countPlanningRow(): Promise<number> {
     await this.page.waitForTimeout(500);
-    return await this.page.locator('#planningName').count();
+    return await this.page.locator('[id^="planningName"]').count();
   }
 
   public get savePairingGridBtn(): Locator {
@@ -117,7 +117,7 @@ export class PairingRowObject {
   async getRow(rowNum: number): Promise<PairingRowObject | null> {
     this.row = this.page.locator('tbody tr').nth(rowNum - 1);
     if ((await this.page.locator('tbody tr').count()) >= rowNum) {
-      this.planningName = (await this.row.locator('#planningName').textContent()) || '';
+      this.planningName = (await this.row.locator('[id^="planningName"]').textContent()) || '';
       this.pairRow = this.page.locator(`#planningRowCheckbox${rowNum - 1}`);
       this.pairRowForClick = this.pairRow;
       this.pairCheckboxes = [];

eform-client/src/app/plugins/modules/items-planning-pn/items-planning-pn.module.ts

@@ -1,11 +1,6 @@
 import {NgModule} from '@angular/core';
-import {CommonModule} from '@angular/common';
-import {TranslateModule} from '@ngx-translate/core';
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {NgSelectModule} from '@ng-select/ng-select';
-import {EformCasesModule} from 'src/app/common/modules/eform-cases/eform-cases.module';
+import {MatDialogModule} from '@angular/material/dialog';
 import {ItemsPlanningPnLayoutComponent} from './layouts';
-import {RouterModule} from '@angular/router';
 import {ItemsPlanningPnRouting} from './items-planning-pn.routing';
 import {
   ItemsPlanningPnPairingService,
@@ -14,9 +9,6 @@ import {
   ItemsPlanningPnTagsService,
   ItemsPlanningPnUploadedDataService,
 } from './services';
-import {FileUploadModule} from 'ng2-file-upload';
-import {EformSharedModule} from 'src/app/common/modules/eform-shared/eform-shared.module';
-import {EformSharedTagsModule} from 'src/app/common/modules/eform-shared-tags/eform-shared-tags.module';
 import {StoreModule} from '@ngrx/store';
 import {
   pairingReducer,
@@ -26,25 +18,14 @@ import {
 
 @NgModule({
   imports: [
-    CommonModule,
-    TranslateModule,
-    FormsModule,
-    NgSelectModule,
-    EformSharedModule,
-    RouterModule,
+    MatDialogModule,
+    ItemsPlanningPnLayoutComponent,
     ItemsPlanningPnRouting,
-    ReactiveFormsModule,
-    FileUploadModule,
-    EformCasesModule,
-    EformSharedTagsModule,
     StoreModule.forFeature('itemsPlanningPn', {
       pairingsState: pairingReducer,
       planningsState: planningsReducer,
     })
   ],
-  declarations: [
-    ItemsPlanningPnLayoutComponent,
-  ],
   providers: [
     ItemsPlanningPnSettingsService,
     ItemsPlanningPnPlanningsService,

eform-client/src/app/plugins/modules/items-planning-pn/layouts/items-planning-pn-layout.component.ts

@@ -1,4 +1,5 @@
 import {AfterContentInit, Component, OnInit, inject} from '@angular/core';
+import {RouterOutlet} from '@angular/router';
 import {TranslateService} from '@ngx-translate/core';
 import {translates} from './../i18n/translates';
 import {Store} from '@ngrx/store';
@@ -9,7 +10,7 @@ import {take} from 'rxjs';
     selector: 'app-items-planning-pn-layout',
     template: `
     <router-outlet></router-outlet>`,
-    standalone: false
+    imports: [RouterOutlet]
 })
 export class ItemsPlanningPnLayoutComponent implements AfterContentInit, OnInit {
   private translateService = inject(TranslateService);

eform-client/src/app/plugins/modules/items-planning-pn/modules/pairing/components/pairing-grid-page/pairing-grid-page.component.spec.ts

@@ -1,22 +1,48 @@
-import {async, ComponentFixture, TestBed} from '@angular/core/testing';
-
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {describe, it, expect, beforeEach, vi} from 'vitest';
+import {of} from 'rxjs';
+import {provideNoopAnimations} from '@angular/platform-browser/animations';
+import {provideHttpClient} from '@angular/common/http';
+import {provideHttpClientTesting} from '@angular/common/http/testing';
+import {provideRouter} from '@angular/router';
+import {MatDialog} from '@angular/material/dialog';
+import {Overlay} from '@angular/cdk/overlay';
+import {Store} from '@ngrx/store';
+import {TranslateModule} from '@ngx-translate/core';
 import {PairingGridPageComponent} from './pairing-grid-page.component';
+import {PairingStateService} from '../store';
+import {AppMenuStateService, AuthStateService} from 'src/app/common/store';
+import {SitesService, TitleService} from 'src/app/common/services';
+import {ItemsPlanningPnTagsService} from '../../../../services';
+import {ItemsPlanningPnPairingService} from '../../../../services';
 
 describe('PairingGridPageComponent', () => {
   let component: PairingGridPageComponent;
   let fixture: ComponentFixture<PairingGridPageComponent>;
 
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ PairingGridPageComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [PairingGridPageComponent, TranslateModule.forRoot()],
+      providers: [
+        provideNoopAnimations(),
+        provideHttpClient(),
+        provideHttpClientTesting(),
+        provideRouter([]),
+        // the page embeds the subheader and the grid table; stub what they inject
+        {provide: AppMenuStateService, useValue: {}},
+        {provide: AuthStateService, useValue: {}},
+        {provide: SitesService, useValue: {}},
+        {provide: ItemsPlanningPnTagsService, useValue: {getPlanningsTags: vi.fn(() => of(null))}},
+        {provide: TitleService, useValue: {setTitle: vi.fn()}},
+        {provide: Store, useValue: {select: vi.fn(() => of(null)), dispatch: vi.fn()}},
+        {provide: ItemsPlanningPnPairingService, useValue: {updatePairings: vi.fn()}},
+        {provide: PairingStateService, useValue: {getAllPairings: vi.fn(() => of(null))}},
+        {provide: MatDialog, useValue: {open: vi.fn()}},
+        {provide: Overlay, useValue: {}},
+      ],
+    }).compileComponents();
     fixture = TestBed.createComponent(PairingGridPageComponent);
     component = fixture.componentInstance;
-    fixture.detectChanges();
   });
 
   it('should create', () => {

eform-client/src/app/plugins/modules/items-planning-pn/modules/pairing/components/pairing-grid-page/pairing-grid-page.component.ts

@@ -1,4 +1,8 @@
 import {Component, OnDestroy, OnInit, inject} from '@angular/core';
+import {EformNewSubheaderComponent} from 'src/app/common/modules/eform-shared/components';
+import {PairingGridTableComponent} from '../pairing-grid-table/pairing-grid-table.component';
+import {MatTooltip} from '@angular/material/tooltip';
+import {TranslatePipe} from '@ngx-translate/core';
 import {
   ItemsPlanningPnPairingService,
 } from '../../../../services';
@@ -18,7 +22,7 @@ import {dialogConfigHelper} from 'src/app/common/helpers';
     selector: 'app-pairing-grid-page',
     templateUrl: './pairing-grid-page.component.html',
     styleUrls: ['./pairing-grid-page.component.scss'],
-    standalone: false
+    imports: [EformNewSubheaderComponent, PairingGridTableComponent, MatTooltip, TranslatePipe]
 })
 export class PairingGridPageComponent implements OnInit, OnDestroy {
   private pairingService = inject(ItemsPlanningPnPairingService);

eform-client/src/app/plugins/modules/items-planning-pn/modules/pairing/components/pairing-grid-table/pairing-grid-table.component.html

@@ -59,7 +59,7 @@
 </ng-template>
 
 <ng-template #firstCellTpl let-row let-index="index" let-col="colDef">
-  <div id="planningName">
+  <div id="planningName{{ index }}">
     <mat-checkbox
       [ngModel]="getIsSelectedRowCheckboxByIndex(row.planningId)"
       (ngModelChange)="selectPlanningRow($event, row.planningId)"

eform-client/src/app/plugins/modules/items-planning-pn/modules/pairing/components/pairing-grid-table/pairing-grid-table.component.spec.ts

@@ -1,21 +1,35 @@
-import {async, ComponentFixture, TestBed} from '@angular/core/testing';
-
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {describe, it, expect, beforeEach, vi} from 'vitest';
+import {of} from 'rxjs';
+import {provideNoopAnimations} from '@angular/platform-browser/animations';
+import {Store} from '@ngrx/store';
+import {TranslateModule} from '@ngx-translate/core';
 import {PairingGridTableComponent} from './pairing-grid-table.component';
+import {PairingStateService} from '../store';
+import {ItemsPlanningPnTagsService} from '../../../../services';
+import {AuthStateService} from 'src/app/common/store';
+import {SitesService} from 'src/app/common/services';
+import {PairingsModel} from '../../../../models';
 
 describe('PairingGridTableComponent', () => {
   let component: PairingGridTableComponent;
   let fixture: ComponentFixture<PairingGridTableComponent>;
 
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ PairingGridTableComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [PairingGridTableComponent, TranslateModule.forRoot()],
+      providers: [
+        provideNoopAnimations(),
+        {provide: Store, useValue: {select: vi.fn(() => of(null)), dispatch: vi.fn()}},
+        {provide: AuthStateService, useValue: {}},
+        {provide: PairingStateService, useValue: {}},
+        {provide: SitesService, useValue: {getAllSitesForPairing: vi.fn(() => of(null))}},
+        {provide: ItemsPlanningPnTagsService, useValue: {getPlanningsTags: vi.fn(() => of(null))}},
+      ],
+    }).compileComponents();
     fixture = TestBed.createComponent(PairingGridTableComponent);
     component = fixture.componentInstance;
+    component.pairingsModel = new PairingsModel();
     fixture.detectChanges();
   });
 

eform-client/src/app/plugins/modules/items-planning-pn/modules/pairing/components/pairing-grid-table/pairing-grid-table.component.ts

@@ -11,6 +11,14 @@ import {
   ViewChild,
   inject
 } from '@angular/core';
+import {MtxGrid} from '@ng-matero/extensions/grid';
+import {MtxSelect} from '@ng-matero/extensions/select';
+import {MatFormField, MatLabel} from '@angular/material/form-field';
+import {FormsModule} from '@angular/forms';
+import {MatCheckbox} from '@angular/material/checkbox';
+import {NgIf, NgClass, AsyncPipe} from '@angular/common';
+import {TranslatePipe} from '@ngx-translate/core';
+import {StatusBarCompactComponent} from 'src/app/common/modules/eform-shared/components';
 import {PairingModel, PairingsModel, PairingUpdateModel} from '../../../../models';
 import {AuthStateService} from 'src/app/common/store';
 import {CommonDictionaryModel, SiteNameDto} from 'src/app/common/models';
@@ -32,7 +40,7 @@ import {
     selector: 'app-pairing-grid-table',
     templateUrl: './pairing-grid-table.component.html',
     styleUrls: ['./pairing-grid-table.component.scss'],
-    standalone: false
+    imports: [MtxGrid, MtxSelect, MatFormField, MatLabel, FormsModule, MatCheckbox, NgIf, NgClass, AsyncPipe, TranslatePipe, StatusBarCompactComponent]
 })
 export class PairingGridTableComponent implements OnInit, OnDestroy, OnChanges {
   private store = inject(Store);