From 38f1a85b1fb448c59a62c92ea43c4edda4e3ec62 Mon Sep 17 00:00:00 2001
From: Sam Van Campenhout <sam.van.campenhout@gmail.com>
Date: Wed, 6 Mar 2024 18:43:50 +0100
Subject: [PATCH] Add Glint support to the `AuMainHeader` component

---
 ...{au-main-header.gjs => au-main-header.gts} | 27 +++--
 addon/template-registry.ts                    |  2 +
 .../components/au-main-header-test.gts        | 98 +++++++++++++++++++
 .../components/au-main-header-test.js         | 26 -----
 .../integration/components/loose-mode-test.ts |  7 ++
 5 files changed, 128 insertions(+), 32 deletions(-)
 rename addon/components/{au-main-header.gjs => au-main-header.gts} (73%)
 create mode 100644 tests/integration/components/au-main-header-test.gts
 delete mode 100644 tests/integration/components/au-main-header-test.js

diff --git a/addon/components/au-main-header.gjs b/addon/components/au-main-header.gts
similarity index 73%
rename from addon/components/au-main-header.gjs
rename to addon/components/au-main-header.gts
index 85ef9b99b..4bf598122 100644
--- a/addon/components/au-main-header.gjs
+++ b/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;
diff --git a/addon/template-registry.ts b/addon/template-registry.ts
index d26a73e9c..ee73e22e8 100644
--- a/addon/template-registry.ts
+++ b/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
diff --git a/tests/integration/components/au-main-header-test.gts b/tests/integration/components/au-main-header-test.gts
new file mode 100644
index 000000000..7cc172002
--- /dev/null
+++ b/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);
+  });
+});
diff --git a/tests/integration/components/au-main-header-test.js b/tests/integration/components/au-main-header-test.js
deleted file mode 100644
index 830faceef..000000000
--- a/tests/integration/components/au-main-header-test.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import { module, test } from 'qunit';
-import { setupRenderingTest } from 'ember-qunit';
-import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
-
-module('Integration | Component | au-main-header', function (hooks) {
-  setupRenderingTest(hooks);
-
-  test('it renders', async function (assert) {
-    // Set any properties with this.set('myProperty', 'value');
-    // Handle any actions with this.set('myAction', function(val) { ... });
-
-    await render(hbs`<AuMainHeader />`);
-
-    assert.dom(this.element).containsText('Naar de hoofdinhoud');
-
-    // Template block usage:
-    await render(hbs`
-      <AuMainHeader>
-        template block text
-      </AuMainHeader>
-    `);
-
-    assert.dom(this.element).containsText('template block text');
-  });
-});
diff --git a/tests/integration/components/loose-mode-test.ts b/tests/integration/components/loose-mode-test.ts
index 343536806..bcd2904f7 100644
--- a/tests/integration/components/loose-mode-test.ts
+++ b/tests/integration/components/loose-mode-test.ts
@@ -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>