add layout method

blackbaud · Jan 27, 2025 · 415e8c4 · 415e8c4
1 parent 6d8d3bc
commit 415e8c4
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 4 deletions.
diff --git a/apps/code-examples/src/app/code-examples/tiles/tiles/basic/demo.component.spec.ts b/apps/code-examples/src/app/code-examples/tiles/tiles/basic/demo.component.spec.ts
@@ -2,6 +2,10 @@ import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import {
+  SkyMediaQueryTestingController,
+  provideSkyMediaQueryTesting,
+} from '@skyux/core/testing';
 import { SkyTileDashboardHarness } from '@skyux/tiles/testing';
 
 import { DemoComponent } from './demo.component';
@@ -13,12 +17,16 @@ describe('Tile dashboard demo', () => {
     } = {},
   ): Promise<{
     tileDashboardHarness: SkyTileDashboardHarness;
+    mediaQueryController: SkyMediaQueryTestingController;
     fixture: ComponentFixture<DemoComponent>;
   }> {
     await TestBed.configureTestingModule({
       imports: [DemoComponent, NoopAnimationsModule],
+      providers: [provideSkyMediaQueryTesting()],
     }).compileComponents();
 
+    const mediaQueryController = TestBed.inject(SkyMediaQueryTestingController);
+
     const fixture = TestBed.createComponent(DemoComponent);
     const loader = TestbedHarnessEnvironment.documentRootLoader(fixture);
 
@@ -30,11 +38,18 @@ describe('Tile dashboard demo', () => {
         )
       : await loader.getHarness(SkyTileDashboardHarness);
 
-    return { tileDashboardHarness, fixture };
+    return { tileDashboardHarness, mediaQueryController, fixture };
   }
 
   it('should set up the tile dashboard', async () => {
-    const { tileDashboardHarness, fixture } = await setupTest();
+    const { tileDashboardHarness, mediaQueryController, fixture } =
+      await setupTest();
+
+    mediaQueryController.setBreakpoint('lg');
+
+    await expectAsync(tileDashboardHarness.isMultiColumn()).toBeResolvedTo(
+      true,
+    );
 
     const tileHarness = await tileDashboardHarness.getTile({
       dataSkyId: 'tile-1',

diff --git a/libs/components/tiles/testing/src/modules/tiles/tile-dashboard-harness.spec.ts b/libs/components/tiles/testing/src/modules/tiles/tile-dashboard-harness.spec.ts
@@ -1,6 +1,10 @@
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { TestBed } from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import {
+  SkyMediaQueryTestingController,
+  provideSkyMediaQueryTesting,
+} from '@skyux/core/testing';
 
 import { TileDashboardHarnessTestComponent } from './fixtures/tile-dashboard-harness-test.component';
 import { SkyTileDashboardHarness } from './tile-dashboard-harness';
@@ -12,11 +16,15 @@ describe('Tile dashboard test harness', () => {
     } = {},
   ): Promise<{
     tileDashboardHarness: SkyTileDashboardHarness;
+    mediaQueryController: SkyMediaQueryTestingController;
   }> {
     await TestBed.configureTestingModule({
       imports: [TileDashboardHarnessTestComponent, NoopAnimationsModule],
+      providers: [provideSkyMediaQueryTesting()],
     }).compileComponents();
 
+    const mediaQueryController = TestBed.inject(SkyMediaQueryTestingController);
+
     const fixture = TestBed.createComponent(TileDashboardHarnessTestComponent);
     const loader = TestbedHarnessEnvironment.documentRootLoader(fixture);
 
@@ -28,10 +36,26 @@ describe('Tile dashboard test harness', () => {
         )
       : await loader.getHarness(SkyTileDashboardHarness);
 
-    return { tileDashboardHarness };
+    return { tileDashboardHarness, mediaQueryController };
   }
 
-  it('should get the tile dashboard and a tile by data-sky-id', async () => {
+  it('should get the tile dashboard by data-sky-id', async () => {
+    const { tileDashboardHarness, mediaQueryController } = await setupTest({
+      dataSkyId: 'basic-dashboard',
+    });
+
+    mediaQueryController.setBreakpoint('xs');
+    await expectAsync(tileDashboardHarness.isMultiColumn()).toBeResolvedTo(
+      false,
+    );
+
+    mediaQueryController.setBreakpoint('lg');
+    await expectAsync(tileDashboardHarness.isMultiColumn()).toBeResolvedTo(
+      true,
+    );
+  });
+
+  it('should get a tile based on criteria', async () => {
     const { tileDashboardHarness } = await setupTest({
       dataSkyId: 'basic-dashboard',
     });

diff --git a/libs/components/tiles/testing/src/modules/tiles/tile-dashboard-harness.ts b/libs/components/tiles/testing/src/modules/tiles/tile-dashboard-harness.ts
@@ -51,4 +51,13 @@ export class SkyTileDashboardHarness extends SkyQueryableComponentHarness {
     }
     return tiles;
   }
+
+  /**
+   * Whether or not the dashboard is in multi-column mode.
+   */
+  public async isMultiColumn(): Promise<boolean> {
+    const host = await this.host();
+
+    return await host.hasClass('sky-tile-dashboard-multi-column');
+  }
 }