Refactoring

packages/sitecore-jss-angular/src/components/placeholder.component.spec.ts

@@ -1,17 +1,19 @@
-import { Component, DebugElement, EventEmitter, Input, Output } from '@angular/core';
+import { Component, DebugElement, EventEmitter, Injectable, Input, Output } from '@angular/core';
+import { Router } from '@angular/router';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { Location } from '@angular/common';
 import { By } from '@angular/platform-browser';
 import { RouterTestingModule } from '@angular/router/testing';
 import { ComponentRendering } from '@sitecore-jss/sitecore-jss/layout';
-
 import { JssModule } from '../lib.module';
-
 import { convertedData as eeData } from '../test-data/ee-data';
 import {
   convertedDevData as nonEeDevData,
   convertedLayoutServiceData as nonEeLsData,
 } from '../test-data/non-ee-data';
-import { LazyComponent } from '../test-data/lazy-component.component';
+import { LazyComponent } from '../test-data/lazy-loading/lazy-component.component';
+import { JssCanActivate, JssCanActivateFn, JssResolve } from '../services/placeholder.token';
+import * as lazyLoadingData from '../test-data/lazy-loading/data';
 
 @Component({
   selector: 'test-placeholder',
@@ -80,8 +82,8 @@ describe('<sc-placeholder />', () => {
               {
                 path: 'LazyComponent',
                 loadChildren: () =>
-                  import('../test-data/lazy-loading.module').then(
-                    (m) => m.AngularLazyLoadingModule
+                  import('../test-data/lazy-loading/lazy-loading.module').then(
+                    (m) => m.TestLazyLoadingModule
                   ),
               },
             ]
@@ -478,3 +480,198 @@ describe('<sc-placeholder /> with input/output binding', () => {
     })
   );
 });
+
+@Component({
+  selector: 'test-lazy-placeholder',
+  template: `
+    <sc-placeholder
+      name="main"
+      [rendering]="rendering"
+      (loaded)="loaded = $event"
+      (failed)="failed = $event"
+    >
+      <img *scPlaceholderLoading src="loading.gif"
+    /></sc-placeholder>
+  `,
+})
+class TestLazyPlaceholderComponent {
+  @Input() rendering: ComponentRendering;
+  loaded: string | undefined;
+  failed: Error | undefined;
+}
+
+@Injectable()
+class MockUrlTreeGuard implements JssCanActivate {
+  constructor(private readonly router: Router) {}
+
+  canActivate() {
+    return this.router.parseUrl('/404');
+  }
+}
+
+@Component({
+  selector: 'not-found',
+  template: `
+    404
+  `,
+})
+class NotFoundComponent {}
+
+@Injectable()
+class MockUnexpectedErrorGuard implements JssCanActivate {
+  canActivate(): string {
+    throw Error('something broke');
+  }
+}
+
+@Component({
+  selector: 'test-jumbotron',
+  template: '<h1>Our best offer to date</h1>',
+})
+export class TestLazyJumbotronComponent {}
+
+describe('<sc-placeholder /> with lazy loaded modules', () => {
+  let fixture: ComponentFixture<TestLazyPlaceholderComponent>;
+  let de: DebugElement;
+  let comp: TestLazyPlaceholderComponent;
+
+  const loadChildrenFunc = () =>
+    import('../test-data/lazy-loading/lazy-loading.module').then(
+      (module) => module.TestLazyLoadingModule
+    );
+
+  const createFunctionGuard = (canActivate: ReturnType<JssCanActivateFn>): JssCanActivateFn => () =>
+    canActivate;
+
+  const mockSyncResolver: JssResolve<string> = {
+    resolve() {
+      return 'Sync';
+    },
+  };
+
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        declarations: [TestLazyPlaceholderComponent, NotFoundComponent],
+        imports: [
+          RouterTestingModule.withRoutes([{ path: '404', component: NotFoundComponent }]),
+          JssModule.withComponents(
+            [],
+            [
+              {
+                path: 'Jumbotron',
+                loadChildren: loadChildrenFunc,
+              },
+              {
+                path: 'JumbotronResolve',
+                loadChildren: loadChildrenFunc,
+                resolve: { sync: mockSyncResolver },
+              },
+              {
+                path: 'JumbotronCanActivate',
+                loadChildren: loadChildrenFunc,
+                canActivate: [createFunctionGuard(true)],
+              },
+              {
+                path: 'JumbotronCanActivateUrlTree',
+                loadChildren: loadChildrenFunc,
+                canActivate: [MockUrlTreeGuard],
+              },
+              {
+                path: 'JumbotronCanActivateUrlString',
+                loadChildren: loadChildrenFunc,
+                canActivate: [createFunctionGuard('/404')],
+              },
+              {
+                path: 'JumbotronCanActivateUnknown',
+                loadChildren: loadChildrenFunc,
+                canActivate: [MockUnexpectedErrorGuard],
+              },
+            ]
+          ),
+        ],
+        providers: [MockUrlTreeGuard, MockUnexpectedErrorGuard],
+      }).compileComponents();
+    })
+  );
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TestLazyPlaceholderComponent);
+    de = fixture.debugElement;
+
+    comp = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(comp).toBeDefined();
+  });
+
+  it('should show a loader while no rendering is defined yet', () => {
+    const img = de.nativeElement.getElementsByTagName('img')[0];
+    expect(img).toBeDefined();
+    expect(img.getAttribute('src')).toBe('loading.gif');
+  });
+
+  lazyLoadingData.testDataSuccess.forEach((dataSet) => {
+    describe(dataSet.label, () => {
+      it(
+        'should render a Jumbotron in placeholder',
+        waitForAsync(async () => {
+          comp.rendering = dataSet.data;
+
+          await fixture.whenStable();
+          fixture.detectChanges();
+
+          await fixture.whenStable();
+          fixture.detectChanges();
+
+          const jumbotron = de.query(By.directive(LazyComponent));
+          expect(jumbotron).not.toBeNull();
+          expect(jumbotron.nativeElement.innerHTML).toContain('Hello world');
+
+          const img = de.nativeElement.getElementsByTagName('img')[0];
+          expect(img).not.toBeDefined();
+        })
+      );
+    });
+  });
+
+  lazyLoadingData.testDataNavigation.forEach((dataSet) => {
+    describe(dataSet.label, () => {
+      it(
+        'should navigate to url',
+        waitForAsync(async () => {
+          comp.rendering = dataSet.data;
+
+          await fixture.whenStable();
+          fixture.detectChanges();
+
+          await fixture.whenStable();
+          fixture.detectChanges();
+
+          const location = TestBed.inject(Location);
+          expect(location.path()).toBe('/404');
+        })
+      );
+    });
+  });
+  lazyLoadingData.testDataError.forEach((dataSet) => {
+    describe(dataSet.label, () => {
+      it(
+        'should emit failure',
+        waitForAsync(async () => {
+          comp.rendering = dataSet.data;
+
+          await fixture.whenStable();
+          fixture.detectChanges();
+
+          await fixture.whenStable();
+          fixture.detectChanges();
+
+          expect(comp.failed).toEqual(new Error('something broke'));
+        })
+      );
+    });
+  });
+});