Add Glint support to the AuMainHeader component

Author: Windvis

addon/components/au-main-header.gjs addon/components/au-main-header.gts

@@ -1,18 +1,33 @@
-import { AuBrand, AuLink } from '@appuniversum/ember-appuniversum';
 import { on } from '@ember/modifier';
 import { action } from '@ember/object';
 import { LinkTo } from '@ember/routing';
-import { inject as service } from '@ember/service';
+import type RouterService from '@ember/routing/router-service';
+import { service } from '@ember/service';
 import Component from '@glimmer/component';
+import AuBrand from './au-brand';
+import AuLink from './au-link';
 
-export default class AuMainHeader extends Component {
+export interface AuMainHeaderSignature {
+  Args: {
+    appTitle: string;
+    brandLink?: string;
+    contactRoute?: string;
+    homeRoute?: string;
+  };
+  Blocks: {
+    default: [];
+  };
+  Element: HTMLElement;
+}
+
+export default class AuMainHeader extends Component<AuMainHeaderSignature> {
   @action
   headerLinkFocus() {
-    document.querySelector('#main')?.focus();
+    (document.querySelector('#main') as HTMLElement | null)?.focus();
   }
 
   <template>
-    <header class="au-c-main-header">
+    <header class="au-c-main-header" ...attributes>
       <div class="au-c-main-header__title-group">
         <NavigationNarrator />
         <AuBrand @link="{{@brandLink}}" />
@@ -56,7 +71,7 @@ export default class AuMainHeader extends Component {
 }
 
 class NavigationNarrator extends Component {
-  @service router;
+  @service declare router: RouterService;
 
   get activeRoute() {
     return 'Nieuwe pagina: ' + this.router.currentRouteName;

addon/template-registry.ts

@@ -27,6 +27,7 @@ import type AuList from '@appuniversum/ember-appuniversum/components/au-list';
 import type AuLoader from '@appuniversum/ember-appuniversum/components/au-loader';
 import type AuMainContainer from '@appuniversum/ember-appuniversum/components/au-main-container';
 import type AuMainFooter from '@appuniversum/ember-appuniversum/components/au-main-footer';
+import type AuMainHeader from '@appuniversum/ember-appuniversum/components/au-main-header';
 import type AuToolbar from '@appuniversum/ember-appuniversum/components/au-toolbar';
 
 // Modifiers
@@ -62,6 +63,7 @@ export default interface AppuniversumRegistry {
   AuLoader: typeof AuLoader;
   AuMainContainer: typeof AuMainContainer;
   AuMainFooter: typeof AuMainFooter;
+  AuMainHeader: typeof AuMainHeader;
   AuToolbar: typeof AuToolbar;
 
   // Modifiers

tests/integration/components/au-main-header-test.gts

@@ -0,0 +1,98 @@
+import AuMainHeader from '@appuniversum/ember-appuniversum/components/au-main-header';
+import { getRootElement } from '@ember/test-helpers';
+import { click } from '@ember/test-helpers';
+import { render } from '@ember/test-helpers';
+import { queryByText } from '@testing-library/dom';
+import { setupRenderingTest } from 'ember-qunit';
+import { module, test } from 'qunit';
+
+module('Integration | Component | au-main-header', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it requires an `@appTitle`', async function (assert) {
+    await render(
+      <template>
+        {{! @glint-expect-error: @appTitle is required }}
+        <AuMainHeader />
+      </template>,
+    );
+
+    await render(
+      <template><AuMainHeader @appTitle="Appuniversum" /></template>,
+    );
+
+    const testContainer = getRootElement() as HTMLElement;
+    const title = queryByText(testContainer, 'Appuniversum');
+    assert.dom(title).exists();
+  });
+
+  test('it can display the title as a link by setting the `@homeRoute` argument', async function (assert) {
+    await render(
+      <template>
+        <AuMainHeader @appTitle="Appuniversum" @homeRoute="application" />
+      </template>,
+    );
+
+    const testContainer = getRootElement() as HTMLElement;
+    const title = queryByText(testContainer, 'Appuniversum');
+    assert
+      .dom(title)
+      .hasTagName('a', 'The title element is a link if `@homeRoute` is set');
+  });
+
+  test('it focuses the #main element after clicking the title link', async function (assert) {
+    await render(
+      <template>
+        <AuMainHeader @appTitle="Appuniversum" @homeRoute="application" />
+        <main id="main" tabindex="-1">Main content</main>
+      </template>,
+    );
+
+    const testContainer = getRootElement() as HTMLElement;
+    const title = queryByText(testContainer, 'Appuniversum') as HTMLElement;
+
+    assert.dom('#main').isNotFocused();
+    await click(title);
+    assert.dom('#main').isFocused();
+  });
+
+  test('it supports showing a link to the contact route', async function (assert) {
+    await render(
+      <template><AuMainHeader @appTitle="Appuniversum" /></template>,
+    );
+
+    const testContainer = getRootElement() as HTMLElement;
+    let contactLink = queryByText(testContainer, 'Contacteer ons');
+    assert.notOk(
+      contactLink,
+      "The contact link isn't displayed without the `@contactRoute` argument",
+    );
+
+    await render(
+      <template>
+        <AuMainHeader @appTitle="Appuniversum" @contactRoute="application" />
+      </template>,
+    );
+
+    contactLink = queryByText(testContainer, 'Contacteer ons');
+
+    assert.dom(contactLink).hasTagName('a');
+  });
+
+  test('it accepts extra block contents', async function (assert) {
+    await render(
+      <template>
+        <AuMainHeader @appTitle="Appuniversum" data-test-main-header>
+          extra header content
+        </AuMainHeader>
+      </template>,
+    );
+
+    const testContainer = getRootElement() as HTMLElement;
+    const extraHeaderContent = queryByText(
+      testContainer,
+      'extra header content',
+    );
+    assert.ok(extraHeaderContent);
+  });
+});

tests/integration/components/au-main-header-test.js

@@ -200,6 +200,13 @@ module('Integration | Component | Loose mode', function (hooks) {
     assert.dom('[data-test-main-footer]').exists();
   });
 
+  test('`<AuMainHeader>` resolves in loose mode', async function (assert) {
+    await render(hbs`
+      <AuMainHeader @appTitle="Appuniversum" data-test-main-header />
+    `);
+    assert.dom('[data-test-main-header]').exists();
+  });
+
   test('`<AuToolbar>` resolves in loose mode', async function (assert) {
     await render(hbs`
       <AuToolbar data-test-toolbar></AuToolbar>