feat(components/core): add SkyMediaQueryController to interact with breakpoints in tests

[Blackbaud-SteveBrush]

AB#2195494

Overview of API

Testing

Consumers can add the following to their tests to interact with breakpoints:

import { provideSkyMediaQueryTesting } from '@skyux/core/testing';

TestBed.configureTestingModule({
  providers: [provideSkyMediaQueryTesting()]
});

const mediaQueryController = TestBed.inject(SkyMediaQueryTestingController);

mediaQueryController.setBreakpoint('xs');
await mediaQueryController.expectBreakpoint('xs');

Creating responsive hosts

Consumers can apply a container breakpoint observer to an element in their template like this:

<div #responsiveHost="skyResponsiveHost" skyResponsiveHost>
  <p>Breakpoint within container: {{ responsiveHost.breakpointChange | async }}</p>
</div>

Or on their component's host element:

@Component({
  hostDirectives: [SkyResponsiveHostDirective],
  standalone: true,
  styles: `
    :host {
      display: block;
    }
  `,
  template: ` <p>Breakpoint within container: {{ breakpoint() }}</p> `,
})
export class DemoComponent {
  protected breakpoint = toSignal(
    inject(SkyMediaQueryService).breakpointChange,
  );
}

For embedded views, the responsive host can pass its injector:

<div #responsiveHost="skyResponsiveHost" skyResponsiveHost>
  <ng-container
    [ngTemplateOutlet]="myTemplate"
    [ngTemplateOutletInjector]="responsiveHost.injector"
</div>

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 30d040a. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

---

✅ Successfully ran 2 targets

• nx affected --target lint test posttest --configuration ci --parallel 1 --exclude tag:npm
• nx affected --target build lint test posttest --configuration ci --parallel 1 --exclude *,!tag:npm

---

Sent with 💌 from NxCloud.

[blackbaud-sky-build-user]

Storybook preview

Component Storybooks:

• a11y-storybook
• action-bars-storybook
• ag-grid-storybook
• angular-tree-component-storybook
• avatar-storybook
• colorpicker-storybook
• core-storybook
• data-manager-storybook
• datetime-storybook
• errors-storybook
• flyout-storybook
• forms-storybook
• help-inline-storybook
• indicators-storybook
• inline-form-storybook
• layout-storybook
• lists-storybook
• lookup-storybook
• modals-storybook
• navbar-storybook
• pages-storybook
• phone-field-storybook
• popovers-storybook
• progress-indicator-storybook
• split-view-storybook
• tabs-storybook
• text-editor-storybook
• theme-storybook
• tiles-storybook
• toast-storybook

Apps:

• code-examples
• integration
• playground