feat(components/layout): add back to top harness

apps/code-examples/src/app/code-examples/layout/back-to-top/infinite-scroll/demo.component.spec.ts

@@ -0,0 +1,40 @@
+import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
+import { TestBed } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { SkyAppTestUtility } from '@skyux-sdk/testing';
+import { SkyBackToTopHarness } from '@skyux/layout/testing';
+import { SkyInfiniteScrollHarness } from '@skyux/lists/testing';
+
+import { DemoComponent } from './demo.component';
+
+describe('Back to top repeater with infinite scroll', () => {
+  it('should set up the component', async () => {
+    await TestBed.configureTestingModule({
+      imports: [DemoComponent, NoopAnimationsModule],
+    }).compileComponents();
+
+    const fixture = TestBed.createComponent(DemoComponent);
+    const loader = TestbedHarnessEnvironment.documentRootLoader(fixture);
+
+    await expectAsync(loader.getHarness(SkyBackToTopHarness)).toBeRejected();
+
+    const infiniteScrollHarness = await loader.getHarness(
+      SkyInfiniteScrollHarness,
+    );
+
+    await infiniteScrollHarness.loadMore();
+
+    fixture.detectChanges();
+    await fixture.whenStable();
+
+    window.scrollTo(0, document.body.scrollHeight);
+    SkyAppTestUtility.fireDomEvent(window, 'scroll');
+    fixture.detectChanges();
+    await fixture.whenStable();
+
+    const backToTopHarness: SkyBackToTopHarness =
+      await loader.getHarness(SkyBackToTopHarness);
+
+    await backToTopHarness.clickBackToTop();
+  });
+});

apps/code-examples/src/app/code-examples/layout/back-to-top/infinite-scroll/demo.component.ts

@@ -123,11 +123,11 @@ export class DemoComponent implements OnInit {
   ];
 
   public ngOnInit(): void {
-    void this.#addData(0, 5);
+    void this.#addData(0, 10);
   }
 
   public onScrollEnd(): void {
-    void this.#addData(this.personList.length, 5);
+    void this.#addData(this.personList.length, 10);
   }
 
   async #addData(start: number, rowSize: number): Promise<void> {
@@ -159,7 +159,7 @@ export class DemoComponent implements OnInit {
           data,
           hasMore: this.personList.length < this.personDataSet.length,
         });
-      }, 1000);
+      }, 100);
     });
   }
 }

apps/code-examples/src/app/code-examples/layout/back-to-top/repeater/demo.component.spec.ts

@@ -0,0 +1,30 @@
+import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
+import { TestBed } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { SkyAppTestUtility } from '@skyux-sdk/testing';
+import { SkyBackToTopHarness } from '@skyux/layout/testing';
+
+import { DemoComponent } from './demo.component';
+
+describe('Back to top repeater', () => {
+  it('should set up the component', async () => {
+    await TestBed.configureTestingModule({
+      imports: [DemoComponent, NoopAnimationsModule],
+    }).compileComponents();
+
+    const fixture = TestBed.createComponent(DemoComponent);
+    const loader = TestbedHarnessEnvironment.documentRootLoader(fixture);
+
+    await expectAsync(loader.getHarness(SkyBackToTopHarness)).toBeRejected();
+
+    window.scrollTo(0, document.body.scrollHeight);
+    SkyAppTestUtility.fireDomEvent(window, 'scroll');
+    fixture.detectChanges();
+    await fixture.whenStable();
+
+    const backToTopHarness: SkyBackToTopHarness =
+      await loader.getHarness(SkyBackToTopHarness);
+
+    await backToTopHarness.clickBackToTop();
+  });
+});

libs/components/layout/testing/src/modules/back-to-top/back-to-top-harness.spec.ts

@@ -0,0 +1,30 @@
+import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
+import { TestBed } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { SkyAppTestUtility } from '@skyux-sdk/testing';
+
+import { SkyBackToTopHarness } from './back-to-top-harness';
+import { BackToTopHarnessTestComponent } from './fixtures/back-to-top-harness-test.component';
+
+describe('BackToTop test harness', () => {
+  it('should get the back to top component and click it', async () => {
+    await TestBed.configureTestingModule({
+      imports: [BackToTopHarnessTestComponent, NoopAnimationsModule],
+    }).compileComponents();
+
+    const fixture = TestBed.createComponent(BackToTopHarnessTestComponent);
+    const loader = TestbedHarnessEnvironment.documentRootLoader(fixture);
+
+    await expectAsync(loader.getHarness(SkyBackToTopHarness)).toBeRejected();
+
+    window.scrollTo(0, document.body.scrollHeight);
+    SkyAppTestUtility.fireDomEvent(window, 'scroll');
+    fixture.detectChanges();
+    await fixture.whenStable();
+
+    const backToTopHarness: SkyBackToTopHarness =
+      await loader.getHarness(SkyBackToTopHarness);
+
+    await backToTopHarness.clickBackToTop();
+  });
+});

libs/components/layout/testing/src/modules/back-to-top/back-to-top-harness.ts

@@ -0,0 +1,20 @@
+import { ComponentHarness } from '@angular/cdk/testing';
+
+/**
+ * Harness for interacting with a back to top component in tests.
+ */
+export class SkyBackToTopHarness extends ComponentHarness {
+  /**
+   * @internal
+   */
+  public static hostSelector = 'sky-back-to-top';
+
+  #getBackToTop = this.locatorFor('.sky-back-to-top button');
+
+  /**
+   * Clicks the back to top button.
+   */
+  public async clickBackToTop(): Promise<void> {
+    return await (await this.#getBackToTop()).click();
+  }
+}

libs/components/layout/testing/src/modules/back-to-top/fixtures/back-to-top-harness-test.component.html

@@ -0,0 +1,12 @@
+<sky-repeater skyBackToTop>
+  @for (person of personList; track person) {
+    <sky-repeater-item>
+      <sky-repeater-item-title>
+        {{ person.name }}
+      </sky-repeater-item-title>
+      <sky-repeater-item-content>
+        {{ person.address }}
+      </sky-repeater-item-content>
+    </sky-repeater-item>
+  }
+</sky-repeater>

libs/components/layout/testing/src/modules/back-to-top/fixtures/back-to-top-harness-test.component.ts

@@ -0,0 +1,118 @@
+import { Component } from '@angular/core';
+import { SkyBackToTopModule } from '@skyux/layout';
+import { SkyRepeaterModule } from '@skyux/lists';
+
+@Component({
+  standalone: true,
+  selector: 'sky-back-to-top-fixture',
+  templateUrl: './back-to-top-harness-test.component.html',
+  imports: [SkyBackToTopModule, SkyRepeaterModule],
+})
+export class BackToTopHarnessTestComponent {
+  public personList = [
+    {
+      name: 'Barbara Durr',
+      address: '7436 Fieldstone Court',
+    },
+    {
+      name: 'Colton Chamberlain',
+      address: '342 Foster Court',
+    },
+    {
+      name: 'Alva Clifford',
+      address: '657 West Rockville Street',
+    },
+    {
+      name: 'Tonja Sanderson',
+      address: '7004 Third Street',
+    },
+    {
+      name: 'Paulene Baum',
+      address: '9309 Mammoth Street',
+    },
+    {
+      name: 'Jessy Witherspoon',
+      address: '43 Canal Street',
+    },
+    {
+      name: 'Solomon Hurley',
+      address: '667 Wakehurst Circle',
+    },
+    {
+      name: 'Calandra Geer',
+      address: '164 Applegate Drive',
+    },
+    {
+      name: 'Latrice Ashmore',
+      address: '7965 Lake Road',
+    },
+    {
+      name: 'Rod Tomlinson',
+      address: '9664 Newport Drive',
+    },
+    {
+      name: 'Cristen Sizemore',
+      address: '17 Edgefield Street',
+    },
+    {
+      name: 'Kristeen Lunsford',
+      address: '245 Green Lake Street',
+    },
+    {
+      name: 'Jack Lovett',
+      address: '73 Academy Street',
+    },
+    {
+      name: 'Elwood Farris',
+      address: '90 Smoky Hollow Court',
+    },
+    {
+      name: 'Ilene Woo',
+      address: '71 Pumpkin Hill Street',
+    },
+    {
+      name: 'Kanesha Hutto',
+      address: '107 East Cooper Street',
+    },
+    {
+      name: 'Nick Bourne',
+      address: '62 Evergreen Street',
+    },
+    {
+      name: 'Ed Sipes',
+      address: '8824 Hill Street',
+    },
+    {
+      name: 'Wonda Lumpkin',
+      address: '134 North Warren Street',
+    },
+    {
+      name: 'Cheyenne Lightfoot',
+      address: '184 Pierce Avenue',
+    },
+    {
+      name: 'Darcel Lenz',
+      address: '9408 Beechwood Street',
+    },
+    {
+      name: 'Martine Rocha',
+      address: '871 Shadow Brook Street',
+    },
+    {
+      name: 'Cherelle Connell',
+      address: '649 Glenwood Street',
+    },
+    {
+      name: 'Molly Seymour',
+      address: '386 E. George Street',
+    },
+    {
+      name: 'Clarice Overton',
+      address: '16 Manchester Street',
+    },
+    {
+      name: 'Eliza Vanhorn',
+      address: '8232 S. Augusta Street',
+    },
+  ];
+}

libs/components/layout/testing/src/modules/box/box-harness.ts

@@ -6,6 +6,9 @@ import { SkyBoxHeadingLevel, SkyBoxHeadingStyle } from '@skyux/layout';
 
 import { SkyBoxHarnessFilters } from './box-harness.filters';
 
+/**
+ * Harness for interacting with a box component in tests.
+ */
 export class SkyBoxHarness extends SkyComponentHarness {
   /**
    * @internal

libs/components/layout/testing/src/public-api.ts

@@ -2,6 +2,8 @@ export { SkyActionButtonFixture } from './legacy/action-button-fixture';
 export { SkyCardFixture } from './legacy/card-fixture';
 export { SkyPageSummaryFixture } from './legacy/page-summary-fixture';
 
+export { SkyBackToTopHarness } from './modules/back-to-top/back-to-top-harness';
+
 export { SkyBoxHarness } from './modules/box/box-harness';
 export { SkyBoxHarnessFilters } from './modules/box/box-harness.filters';