feature: add 401 error tests

fix: some for directive bugs

npm/ng-packs/packages/core/src/lib/directives/for.directive.ts

@@ -113,8 +113,10 @@ export class ForDirective implements OnChanges {
 
   private projectItems(items: any[]): void {
     if (!items.length && this.emptyRef) {
+      this.vcRef.clear();
       this.vcRef.createEmbeddedView(this.emptyRef).rootNodes;
       this.isShowEmptyRef = true;
+      this.differ = null;
 
       return;
     }

npm/ng-packs/packages/theme-shared/src/lib/abstracts/toaster.ts

@@ -2,7 +2,7 @@ import { MessageService } from 'primeng/components/common/messageservice';
 import { Observable, Subject } from 'rxjs';
 import { Toaster } from '../models/toaster';
 
-export class AbstractToaster<T = Toaster.Options> {
+export abstract class AbstractToaster<T = Toaster.Options> {
   status$: Subject<Toaster.Status>;
 
   key: string = 'abpToast';

npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.ts

@@ -23,11 +23,18 @@ import { Toaster } from '../../models/toaster';
         </div>
 
         <div class="abp-confirm-footer justify-content-center">
-          <button *ngIf="!message.hideCancelBtn" type="button" class="btn btn-sm btn-primary" (click)="close(reject)">
+          <button
+            *ngIf="!message.hideCancelBtn"
+            id="cancel"
+            type="button"
+            class="btn btn-sm btn-primary"
+            (click)="close(reject)"
+          >
             {{ message.cancelCopy || 'AbpIdentity::Cancel' | abpLocalization }}
           </button>
           <button
             *ngIf="!message.hideYesBtn"
+            id="confirm"
             type="button"
             class="btn btn-sm btn-primary"
             (click)="close(confirm)"

npm/ng-packs/packages/theme-shared/src/lib/tests/error.handler.spec.ts

@@ -1,11 +1,14 @@
-import { createHostFactory, SpectatorHost } from '@ngneat/spectator';
+import { CoreModule, RestOccurError, RouterOutletComponent } from '@abp/ng.core';
+import { Location } from '@angular/common';
+import { HttpErrorResponse, HttpHeaders } from '@angular/common/http';
 import { Component } from '@angular/core';
-import { ErrorHandler, DEFAULT_ERROR_MESSAGES } from '../handlers';
-import { CoreModule, RestOccurError } from '@abp/ng.core';
-import { ThemeSharedModule } from '../theme-shared.module';
-import { NgxsModule, Store } from '@ngxs/store';
 import { RouterModule } from '@angular/router';
-import { HttpErrorResponse } from '@angular/common/http';
+import { createHostFactory, SpectatorHost } from '@ngneat/spectator';
+import { RouterState } from '@ngxs/router-plugin';
+import { NgxsModule, Store } from '@ngxs/store';
+import { NgxsResetPluginModule, StateOverwrite } from 'ngxs-reset-plugin';
+import { DEFAULT_ERROR_MESSAGES, ErrorHandler } from '../handlers';
+import { ThemeSharedModule } from '../theme-shared.module';
 
 @Component({ selector: 'dummy', template: 'dummy works! <abp-confirmation></abp-confirmation>' })
 class DummyComponent {
@@ -16,7 +19,13 @@ describe('With Custom Host Component', function() {
   let host: SpectatorHost<DummyComponent>;
   const createHost = createHostFactory({
     component: DummyComponent,
-    imports: [CoreModule, ThemeSharedModule.forRoot(), NgxsModule.forRoot([]), RouterModule.forRoot([])],
+    imports: [
+      CoreModule,
+      ThemeSharedModule.forRoot(),
+      NgxsModule.forRoot([]),
+      NgxsResetPluginModule.forRoot(),
+      RouterModule.forRoot([{ path: 'account/login', component: RouterOutletComponent }]),
+    ],
   });
 
   beforeEach(() => {
@@ -61,4 +70,44 @@ describe('With Custom Host Component', function() {
     expect(host.query('.abp-confirm-summary')).toHaveText(DEFAULT_ERROR_MESSAGES.defaultError.title);
     expect(host.query('.abp-confirm-body')).toHaveText(DEFAULT_ERROR_MESSAGES.defaultError.details);
   });
+
+  it('should display the confirmation when authenticated error occurs', async () => {
+    host.component.store.dispatch(new RestOccurError(new HttpErrorResponse({ status: 401 })));
+    host.detectChanges();
+    host.component.store.dispatch(new StateOverwrite([RouterState, { state: { url: '/' } }]));
+    host.click('#confirm');
+    await host.fixture.whenStable();
+    expect(host.get(Location).path()).toBe('/account/login');
+  });
+
+  it('should display the confirmation when authenticated error occurs with _AbpErrorFormat header', async () => {
+    let headers: HttpHeaders = new HttpHeaders();
+    headers = headers.append('_AbpErrorFormat', '_AbpErrorFormat');
+
+    host.component.store.dispatch(new RestOccurError(new HttpErrorResponse({ status: 401, headers })));
+    host.detectChanges();
+    host.component.store.dispatch(new StateOverwrite([RouterState, { state: { url: '/' } }]));
+    host.click('#confirm');
+    await host.fixture.whenStable();
+    expect(host.get(Location).path()).toBe('/account/login');
+  });
+
+  it('should display the confirmation when error occurs with _AbpErrorFormat header', () => {
+    let headers: HttpHeaders = new HttpHeaders();
+    headers = headers.append('_AbpErrorFormat', '_AbpErrorFormat');
+
+    host.component.store.dispatch(
+      new RestOccurError(
+        new HttpErrorResponse({
+          error: { error: { message: 'test message', details: 'test detail' } },
+          status: 412,
+          headers,
+        }),
+      ),
+    );
+    host.detectChanges();
+
+    expect(host.query('.abp-confirm-summary')).toHaveText('test message');
+    expect(host.query('.abp-confirm-body')).toHaveText('test detail');
+  });
 });