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 5529153. 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

[Blackbaud-PaulCrowder]

Use nativeElement instead of debugElement here per Angular's guidance.

When you're filtering by CSS selector and only testing properties of a browser's native element, the By.css approach might be overkill.

It's often more straightforward and clear to filter with a standard HTMLElement method such as querySelector() or querySelectorAll().

const containerWithHostDirective = (fixture.nativeElement as HTMLElement).querySelector('[data-sky-id="container-w-host-directive"]');

[Blackbaud-SteveBrush]

Interesting; that's new to me.

[Blackbaud-PaulCrowder]

This function is called as a result of an event handler, so in theory markForCheck() should not be needed. Can you make slideDirection a signal?

[Blackbaud-SteveBrush]

Yes, definitely.

[Blackbaud-PaulCrowder]

These don't change between calls to toSkyMediaBreakpoints(). Move to the top of this file so it can be reused.

[Blackbaud-PaulCrowder]

These don't change between calls to toSkyBreakpoint(). Move to the top of this file so it can be reused.

[Blackbaud-PaulCrowder]

Do you need the : boolean return type, or can it be inferred from the Map declaration (or array declaration after the suggested refactor above)? Also, I'd make the parameter names match by using width instead of w for readability.

[Blackbaud-PaulCrowder]

Setting properties in an effect() seems like an anti-pattern to me. Can inputAnimate and mobileSearchShown be computed signals instead?

[Blackbaud-PaulCrowder]

templateUrl and styleUrls are missing the ./ prefix. Didn't we hit issues a while back with this? I'm kind of surprised it works. Other split view files also have this problem.

[Blackbaud-SteveBrush]

Yeah, strange. I updated all the paths.

[Blackbaud-PaulCrowder]

Why does this use untracked()? it doesn't reference any signals.

[Blackbaud-SteveBrush]

I misunderstood the use-case; I thought it marked code that doesn't include any signals. Reverted.

[Blackbaud-PaulCrowder]

Same issue with untracked() as above.

[Blackbaud-PaulCrowder]

Another instance of setting a property in an effect. See if this can be a computed signal instead.