Differenzansicht 14-directives
im Vergleich zu 13-pipes

← Zurück zur Übersicht | Demo | Quelltext auf GitHub

src/app/admin/book-create/book-create.component.spec.ts CHANGED Viewed

@@ -1,4 +1,3 @@
-import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { BookCreateComponent } from './book-create.component';
@@ -9,8 +8,7 @@ describe('BookCreateComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [HttpClientTestingModule],
-      declarations: [BookCreateComponent]
     })
     .compileComponents();

 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { BookCreateComponent } from './book-create.component';
   beforeEach(async () => {
     await TestBed.configureTestingModule({
+      declarations: [ BookCreateComponent ]
     })
     .compileComponents();

src/app/admin/book-edit/book-edit.component.spec.ts CHANGED Viewed

@@ -1,6 +1,4 @@
-import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { RouterTestingModule } from '@angular/router/testing';
 import { BookEditComponent } from './book-edit.component';
@@ -10,8 +8,7 @@ describe('BookEditComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [HttpClientTestingModule, RouterTestingModule],
-      declarations: [BookEditComponent]
     })
     .compileComponents();

 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { BookEditComponent } from './book-edit.component';
   beforeEach(async () => {
     await TestBed.configureTestingModule({
+      declarations: [ BookEditComponent ]
     })
     .compileComponents();

src/app/admin/book-form/book-form.component.spec.ts CHANGED Viewed

@@ -1,6 +1,4 @@
-import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { ReactiveFormsModule } from '@angular/forms';
 import { BookFormComponent } from './book-form.component';
@@ -10,8 +8,7 @@ describe('BookFormComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [HttpClientTestingModule, ReactiveFormsModule],
-      declarations: [BookFormComponent]
     })
     .compileComponents();

 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { BookFormComponent } from './book-form.component';
   beforeEach(async () => {
     await TestBed.configureTestingModule({
+      declarations: [ BookFormComponent ]
     })
     .compileComponents();

src/app/admin/form-errors/form-errors.component.spec.ts CHANGED Viewed

@@ -1,5 +1,4 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { FormGroupDirective, ReactiveFormsModule } from '@angular/forms';
 import { FormErrorsComponent } from './form-errors.component';
@@ -9,9 +8,7 @@ describe('FormErrorsComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [ReactiveFormsModule],
-      declarations: [FormErrorsComponent],
-      providers: [FormGroupDirective]
     })
     .compileComponents();

 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormErrorsComponent } from './form-errors.component';
   beforeEach(async () => {
     await TestBed.configureTestingModule({
+      declarations: [ FormErrorsComponent ]
     })
     .compileComponents();

src/app/admin/shared/async-validators.service.spec.ts CHANGED Viewed

@@ -1,4 +1,3 @@
-import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { TestBed } from '@angular/core/testing';
 import { AsyncValidatorsService } from './async-validators.service';
@@ -7,9 +6,7 @@ describe('AsyncValidatorsService', () => {
   let service: AsyncValidatorsService;
   beforeEach(() => {
-    TestBed.configureTestingModule({
-      imports: [HttpClientTestingModule],
-    });
     service = TestBed.inject(AsyncValidatorsService);
   });

 import { TestBed } from '@angular/core/testing';
 import { AsyncValidatorsService } from './async-validators.service';
   let service: AsyncValidatorsService;
   beforeEach(() => {
+    TestBed.configureTestingModule({});
     service = TestBed.inject(AsyncValidatorsService);
   });

src/app/books/book-details/book-details.component.html CHANGED Viewed

@@ -23,11 +23,13 @@
     [src]="book.thumbnailUrl"
     alt="Cover">
   <a class="button arrow-left" routerLink="..">Back to list</a>
-  <button class="red" (click)="removeBook(book.isbn)">
-    Remove book
-  </button>
-  <a class="button"
-    [routerLink]="['/admin/edit', book.isbn]">
-    Edit book
-  </a>
 </div>

     [src]="book.thumbnailUrl"
     alt="Cover">
   <a class="button arrow-left" routerLink="..">Back to list</a>
+  <ng-container *bmLoggedinOnly>
+    <button class="red" bmConfirm="Remove book?" (confirm)="removeBook(book.isbn)">
+      Remove book
+    </button>
+    <a class="button"
+      [routerLink]="['/admin/edit', book.isbn]">
+      Edit book
+    </a>
+  </ng-container>
 </div>

src/app/books/book-details/book-details.component.spec.ts CHANGED Viewed

@@ -1,6 +1,4 @@
-import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { RouterTestingModule } from '@angular/router/testing';
 import { BookDetailsComponent } from './book-details.component';
@@ -10,8 +8,7 @@ describe('BookDetailsComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [HttpClientTestingModule, RouterTestingModule],
-      declarations: [BookDetailsComponent]
     })
     .compileComponents();

 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { BookDetailsComponent } from './book-details.component';
   beforeEach(async () => {
     await TestBed.configureTestingModule({
+      declarations: [ BookDetailsComponent ]
     })
     .compileComponents();

src/app/books/book-details/book-details.component.ts CHANGED Viewed

@@ -23,10 +23,8 @@ export class BookDetailsComponent {
   }
   removeBook(isbn: string) {
-    if (window.confirm('Remove book?')) {
-      this.service.remove(isbn).subscribe(() => {
-        this.router.navigateByUrl('/books');
-      });
-    }
   }
 }

   }
   removeBook(isbn: string) {
+    this.service.remove(isbn).subscribe(() => {
+      this.router.navigateByUrl('/books');
+    });
   }
 }

src/app/books/book-list/book-list.component.spec.ts CHANGED Viewed

@@ -1,4 +1,3 @@
-import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { BookListComponent } from './book-list.component';
@@ -9,8 +8,7 @@ describe('BookListComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [HttpClientTestingModule],
-      declarations: [BookListComponent]
     })
     .compileComponents();

 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { BookListComponent } from './book-list.component';
   beforeEach(async () => {
     await TestBed.configureTestingModule({
+      declarations: [ BookListComponent ]
     })
     .compileComponents();

src/app/books/books.module.ts CHANGED Viewed

@@ -6,13 +6,17 @@ import { BookListComponent } from './book-list/book-list.component';
 import { BookListItemComponent } from './book-list-item/book-list-item.component';
 import { BookDetailsComponent } from './book-details/book-details.component';
 import { IsbnPipe } from './shared/isbn.pipe';
 @NgModule({
   declarations: [
     BookListComponent,
     BookListItemComponent,
     BookDetailsComponent,
-    IsbnPipe
   ],
   imports: [
     CommonModule,

 import { BookListItemComponent } from './book-list-item/book-list-item.component';
 import { BookDetailsComponent } from './book-details/book-details.component';
 import { IsbnPipe } from './shared/isbn.pipe';
+import { ConfirmDirective } from './shared/confirm.directive';
+import { LoggedinOnlyDirective } from './shared/loggedin-only.directive';
 @NgModule({
   declarations: [
     BookListComponent,
     BookListItemComponent,
     BookDetailsComponent,
+    IsbnPipe,
+    ConfirmDirective,
+    LoggedinOnlyDirective
   ],
   imports: [
     CommonModule,

src/app/books/shared/confirm.directive.spec.ts ADDED Viewed

	@@ -0,0 +1,8 @@

+import { ConfirmDirective } from './confirm.directive';
+describe('ConfirmDirective', () => {
+  it('should create an instance', () => {
+    const directive = new ConfirmDirective();
+    expect(directive).toBeTruthy();
+  });
+});

src/app/books/shared/confirm.directive.ts ADDED Viewed

	@@ -0,0 +1,15 @@

+import { Directive, EventEmitter, HostListener, Input, Output } from '@angular/core';
+@Directive({
+  selector: '[bmConfirm]'
+})
+export class ConfirmDirective {
+  @Input('bmConfirm') confirmText?: string;
+  @Output() confirm = new EventEmitter<void>();
+  @HostListener('click') onClick() {
+    if (window.confirm(this.confirmText)) {
+      this.confirm.emit();
+    }
+  }
+}

src/app/books/shared/isbn.pipe.spec.ts CHANGED Viewed

@@ -1,19 +1,8 @@
 import { IsbnPipe } from './isbn.pipe';
 describe('IsbnPipe', () => {
-  let pipe: IsbnPipe;
-  beforeEach(() => {
-    pipe = new IsbnPipe();
-  });
-  it('should format an ISBN with a dash', () => {
-    expect(pipe.transform('9783864909467'))
-      .toBe('978-3864909467');
-  });
-  it('should ignore empty values', () => {
-    expect(pipe.transform('')).toBe('');
   });
 });

 import { IsbnPipe } from './isbn.pipe';
 describe('IsbnPipe', () => {
+  it('create an instance', () => {
+    const pipe = new IsbnPipe();
+    expect(pipe).toBeTruthy();
   });
 });

src/app/books/shared/loggedin-only.directive.spec.ts ADDED Viewed

	@@ -0,0 +1,8 @@

+import { LoggedinOnlyDirective } from './loggedin-only.directive';
+describe('LoggedinOnlyDirective', () => {
+  it('should create an instance', () => {
+    const directive = new LoggedinOnlyDirective();
+    expect(directive).toBeTruthy();
+  });
+});

src/app/books/shared/loggedin-only.directive.ts ADDED Viewed

	@@ -0,0 +1,31 @@

+import { Directive, OnDestroy, TemplateRef, ViewContainerRef } from '@angular/core';
+import { Subject, takeUntil } from 'rxjs';
+import { AuthService } from '../../shared/auth.service';
+@Directive({
+  selector: '[bmLoggedinOnly]'
+})
+export class LoggedinOnlyDirective implements OnDestroy {
+  private destroy$ = new Subject<void>();
+  constructor(
+    private template: TemplateRef<unknown>,
+    private viewContainer: ViewContainerRef,
+    private authService: AuthService
+  ) {
+    this.authService.isAuthenticated$.pipe(
+      takeUntil(this.destroy$)
+    ).subscribe(isAuthenticated => {
+      if (isAuthenticated) {
+        this.viewContainer.createEmbeddedView(this.template);
+      } else {
+        this.viewContainer.clear();
+      }
+    });
+  }
+  ngOnDestroy(): void {
+    this.destroy$.next();
+  }
+}

src/app/search/search.component.spec.ts CHANGED Viewed

@@ -1,4 +1,3 @@
-import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { SearchComponent } from './search.component';
@@ -9,7 +8,6 @@ describe('SearchComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [HttpClientTestingModule],
       declarations: [ SearchComponent ]
     })
     .compileComponents();

 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { SearchComponent } from './search.component';
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [ SearchComponent ]
     })
     .compileComponents();

src/app/shared/book-store.service.spec.ts CHANGED Viewed

@@ -1,5 +1,4 @@
 import { TestBed } from '@angular/core/testing';
-import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { BookStoreService } from './book-store.service';
@@ -7,9 +6,7 @@ describe('BookStoreService', () => {
   let service: BookStoreService;
   beforeEach(() => {
-    TestBed.configureTestingModule({
-      imports: [HttpClientTestingModule],
-    });
     service = TestBed.inject(BookStoreService);
   });

 import { TestBed } from '@angular/core/testing';
 import { BookStoreService } from './book-store.service';
   let service: BookStoreService;
   beforeEach(() => {
+    TestBed.configureTestingModule({});
     service = TestBed.inject(BookStoreService);
   });

Differenzansicht 14-directivesim Vergleich zu 13-pipes

Differenzansicht 14-directives
im Vergleich zu 13-pipes