Add tests for custom local templates

fboeller · Mar 7, 2021 · 442e11d · 442e11d
1 parent d785053
commit 442e11d
Showing 1 changed file with 64 additions and 1 deletion.
diff --git a/projects/ngx-loadable/src/lib/angular/loadable/loadable.component.spec.ts b/projects/ngx-loadable/src/lib/angular/loadable/loadable.component.spec.ts
@@ -1,4 +1,4 @@
-import { Component, NgModule } from '@angular/core';
+import { Component } from '@angular/core';
 import { fakeAsync, TestBed, tick } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { errored, idle, loaded, loading } from '../../loadable.constructors';
@@ -179,3 +179,66 @@ it('renders the custom global error state if errored', fakeAsync(() => {
   ).toEqual('Error error');
   expect(fixture.debugElement.query(By.css('p'))).toBeFalsy();
 }));
+
+@Component({
+  selector: 'ld-test-custom-loading',
+  template: `
+    <ld-loadable [loadable]="loadable" [templates]="{ loading: loading }">
+      <p>{{ loadable | loadedValue }}</p>
+    </ld-loadable>
+    <ng-template #loading>
+      <span>It's loading.</span>
+    </ng-template>
+  `,
+})
+class TestCustomLoadingComponent {
+  loadable = loading;
+}
+
+it('renders the custom local loading state if loading', fakeAsync(() => {
+  TestBed.configureTestingModule({
+    declarations: [TestCustomLoadingComponent],
+    imports: [LoadableModule],
+  });
+  const fixture = TestBed.createComponent(TestCustomLoadingComponent);
+  fixture.detectChanges();
+  tick(1);
+  expect(fixture.debugElement.query(By.css('ld-loadable-loading'))).toBeFalsy();
+  expect(fixture.debugElement.query(By.css('span'))).toBeTruthy();
+  expect(
+    fixture.debugElement.query(By.css('span')).nativeElement.textContent
+  ).toEqual(`It's loading.`);
+  expect(fixture.debugElement.query(By.css('p'))).toBeFalsy();
+}));
+
+@Component({
+  selector: 'ld-test-custom-error',
+  template: `
+    <ld-loadable [loadable]="loadable" [templates]="{ error: error }">
+      <p>{{ loadable | loadedValue }}</p>
+    </ld-loadable>
+    <ng-template #error let-error="error">
+      <span>There is an '{{ error }}'.</span>
+    </ng-template>
+  `,
+})
+class TestCustomErrorComponent {
+  loadable = errored('error');
+}
+
+it('renders the custom local error state if loading', fakeAsync(() => {
+  TestBed.configureTestingModule({
+    declarations: [TestCustomErrorComponent],
+    imports: [LoadableModule],
+  });
+  const fixture = TestBed.createComponent(TestCustomErrorComponent);
+  fixture.detectChanges();
+  tick(1);
+  fixture.detectChanges();
+  expect(fixture.debugElement.query(By.css('ld-loadable-error'))).toBeFalsy();
+  expect(fixture.debugElement.query(By.css('span'))).toBeTruthy();
+  expect(
+    fixture.debugElement.query(By.css('span')).nativeElement.textContent
+  ).toEqual(`There is an 'error'.`);
+  expect(fixture.debugElement.query(By.css('p'))).toBeFalsy();
+}));