test: use standalone components where possible (#288)

# Tests
- Convert components in non-classic Angular tests to standalone
components

Author: LayZeeDK

.github/workflows/ci.yml

@@ -32,7 +32,7 @@ jobs:
     steps:
       - name: Check out source code
         uses: actions/checkout@v3
-      - name: Set up Node.js and install dependencies
+      - name: Set up Node.js and Yarn
         uses: ./.github/actions/setup-node
       - name: Install package dependencies
         run: yarn install --frozen-lockfile --no-interactive
@@ -46,7 +46,7 @@ jobs:
     steps:
       - name: Check out source code
         uses: actions/checkout@v3
-      - name: Set up Node.js and install dependencies
+      - name: Set up Node.js and Yarn
         uses: ./.github/actions/setup-node
       - name: Install package dependencies
         run: yarn install --frozen-lockfile --no-interactive
@@ -61,7 +61,7 @@ jobs:
     steps:
       - name: Check out source code
         uses: actions/checkout@v3
-      - name: Set up Node.js and install dependencies
+      - name: Set up Node.js and Yarn
         uses: ./.github/actions/setup-node
       - name: Install package dependencies
         run: yarn install --frozen-lockfile --no-interactive

packages/router-component-store/src/lib/global-router-store/global-router-store-selectors.spec.ts

@@ -1,18 +1,21 @@
 import { Component } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
-import { Router, Routes } from '@angular/router';
+import { Router, RouterOutlet, Routes } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
 import { firstValueFrom } from 'rxjs';
 import { RouterStore } from '../router-store';
 import { GlobalRouterStore } from './global-router-store';
 import { provideGlobalRouterStore } from './provide-global-router-store';
 
 @Component({
+  standalone: true,
+  imports: [RouterOutlet],
   template: '<router-outlet></router-outlet>',
 })
 class DummyAppComponent {}
 
 @Component({
+  standalone: true,
   template: '',
 })
 class DummyLoginComponent {}
@@ -33,7 +36,6 @@ describe(`${GlobalRouterStore.name} selectors`, () => {
     ];
 
     TestBed.configureTestingModule({
-      declarations: [DummyAppComponent, DummyLoginComponent],
       imports: [RouterTestingModule.withRoutes(routes)],
       providers: [provideGlobalRouterStore()],
     });

packages/router-component-store/src/lib/local-router-store/local-router-store-selectors.spec.ts

@@ -1,21 +1,24 @@
 import { Component, inject } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import { Router, Routes } from '@angular/router';
+import { Router, RouterOutlet, Routes } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
 import { firstValueFrom } from 'rxjs';
 import { RouterStore } from '../router-store';
 import { LocalRouterStore } from './local-router-store';
 import { provideLocalRouterStore } from './provide-local-router-store';
 
 @Component({
+  standalone: true,
+  imports: [RouterOutlet],
   template: '<router-outlet></router-outlet>',
 })
 class DummyAppComponent {}
 
 @Component({
-  template: '',
+  standalone: true,
   viewProviders: [provideLocalRouterStore()],
+  template: '',
 })
 class DummyLoginComponent {
   routerStore = inject(RouterStore);
@@ -43,7 +46,6 @@ describe(`${LocalRouterStore.name} selectors`, () => {
     ];
 
     TestBed.configureTestingModule({
-      declarations: [DummyAppComponent, DummyLoginComponent],
       imports: [RouterTestingModule.withRoutes(routes)],
     });
 

packages/router-component-store/src/lib/standalone-routed-component-test.spec.ts

@@ -1,8 +1,8 @@
-import { CommonModule } from '@angular/common';
+import { AsyncPipe } from '@angular/common';
 import { Component, inject } from '@angular/core';
 import { ComponentFixtureAutoDetect, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import { Router, RouterModule } from '@angular/router';
+import { Router, RouterOutlet } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
 import { Observable } from 'rxjs';
 import { provideGlobalRouterStore } from './global-router-store/provide-global-router-store';
@@ -78,9 +78,9 @@ async function setup({
 }
 
 @Component({
-  imports: [CommonModule],
-  selector: 'ngw-standalone-routed',
   standalone: true,
+  selector: 'ngw-standalone-routed',
+  imports: [AsyncPipe],
   template: `
     <p id="id-parameter">{{ id$ | async }}</p>
     <p id="url">{{ url$ | async }}</p>
@@ -95,16 +95,16 @@ class StandaloneRoutedComponent {
 }
 
 @Component({
-  selector: 'ngw-standalone-default',
   standalone: true,
+  selector: 'ngw-standalone-default',
   template: `<h1>Default route</h1>`,
 })
 class StandaloneDefaultComponent {}
 
 @Component({
-  imports: [RouterModule],
-  selector: 'ngw-standalone-app',
   standalone: true,
+  selector: 'ngw-standalone-app',
+  imports: [RouterOutlet],
   template: `<router-outlet></router-outlet>`,
 })
 class StandaloneAppComponent {}