Add footer and nav tests

hashicorp-forge · Aug 1, 2023 · a117ddc · a117ddc
1 parent a9e8451
commit a117ddc
Show file tree

Hide file tree

Showing 6 changed files with 98 additions and 23 deletions.
diff --git a/web/app/components/footer.hbs b/web/app/components/footer.hbs
@@ -3,19 +3,27 @@
     <div class="x-container">
       <div class="footer-inner">
         <div class="flex items-center">
-          <div>
+          <div data-test-footer-copyright>
             ©
             {{this.currentYear}}
             HashiCorp
           </div>
         </div>
 
         <div class="flex items-center space-x-4">
-          <ExternalLink @iconIsShown={{true}} href={{this.gitHubRepoURL}}>
+          <ExternalLink
+            data-test-footer-github-link
+            @iconIsShown={{true}}
+            href={{this.gitHubRepoURL}}
+          >
             GitHub
           </ExternalLink>
-          {{#if this.supportDocsURL}}
-            <ExternalLink @iconIsShown={{true}} href={{this.supportDocsURL}}>
+          {{#if this.supportURL}}
+            <ExternalLink
+              data-test-footer-support-link
+              @iconIsShown={{true}}
+              href={{this.supportURL}}
+            >
               Support
             </ExternalLink>
           {{/if}}

diff --git a/web/app/components/footer.ts b/web/app/components/footer.ts
@@ -24,7 +24,7 @@ export default class FooterComponent extends Component<FooterComponentSignature>
     return HERMES_GITHUB_REPO_URL;
   }
 
-  protected get supportDocsURL() {
+  protected get supportURL() {
     return this.config.config.support_link_url;
   }
 }

diff --git a/web/app/components/header/nav.hbs b/web/app/components/header/nav.hbs
@@ -76,6 +76,7 @@
           />
           <dd.Separator class="mt-2" />
           <dd.Interactive
+            data-test-user-menu-github
             @href={{this.gitHubRepoURL}}
             @isHrefExternal={{true}}
             @text="GitHub"
@@ -84,6 +85,7 @@
           />
           {{#if this.supportDocsURL}}
             <dd.Interactive
+              data-test-user-menu-support
               @href={{this.supportDocsURL}}
               @isHrefExternal={{true}}
               @text="Support"

diff --git a/web/app/routes/application.ts b/web/app/routes/application.ts
@@ -70,18 +70,17 @@ export default class ApplicationRoute extends Route {
 
     this.flags.initialize();
 
-    // Set config from the backend in production
-    if (config.environment === "production") {
-      await this.fetchSvc
-        .fetch("/api/v1/web/config")
-        .then((response) => response?.json())
-        .then((json) => {
-          this.config.setConfig(json);
-        })
-        .catch((err) => {
-          console.log("Error fetching and setting web config: " + err);
-        });
-    }
+    console.log('did it work');
+
+    await this.fetchSvc
+      .fetch("/api/v1/web/config")
+      .then((response) => response?.json())
+      .then((json) => {
+        this.config.setConfig(json);
+      })
+      .catch((err) => {
+        console.log("Error fetching and setting web config: " + err);
+      });
 
     // Initialize the metrics service
     this.metrics;

diff --git a/web/tests/integration/components/footer-test.ts b/web/tests/integration/components/footer-test.ts
@@ -0,0 +1,43 @@
+import { render } from "@ember/test-helpers";
+import { hbs } from "ember-cli-htmlbars";
+import { setupMirage } from "ember-cli-mirage/test-support";
+import { setupRenderingTest } from "ember-qunit";
+import { module, test } from "qunit";
+import MockDate from "mockdate";
+import { HERMES_GITHUB_REPO_URL } from "hermes/utils/hermes-urls";
+import ConfigService from "hermes/services/config";
+import RouterService from "@ember/routing/router-service";
+
+const SUPPORT_URL = "https://example.com/support";
+
+module("Integration | Component | footer", function (hooks) {
+  setupRenderingTest(hooks);
+  setupMirage(hooks);
+
+  test("it renders as expected (default setup)", async function (assert) {
+    MockDate.set("2000-01-01T06:00:00.000-07:00");
+
+    await render(hbs`<Footer />`);
+
+    assert
+      .dom("[data-test-footer-copyright]")
+      .containsText("2000", "The current year is shown");
+
+    assert
+      .dom("[data-test-footer-github-link]")
+      .hasAttribute("href", HERMES_GITHUB_REPO_URL);
+
+    MockDate.reset();
+  });
+
+  test("it renders as expected (with optional links)", async function (assert) {
+    let mockConfigSvc = this.owner.lookup("service:config") as ConfigService;
+    mockConfigSvc.config.support_link_url = SUPPORT_URL;
+
+    await render(hbs`<Footer />`);
+
+    assert
+      .dom("[data-test-footer-support-link]")
+      .hasAttribute("href", SUPPORT_URL);
+  });
+});
diff --git a/web/tests/integration/components/header/nav-test.ts b/web/tests/integration/components/header/nav-test.ts
@@ -6,6 +6,11 @@ import { setupWindowMock } from "ember-window-mock/test-support";
 import AuthenticatedUserService from "hermes/services/authenticated-user";
 import { setupMirage } from "ember-cli-mirage/test-support";
 import window from "ember-window-mock";
+import { HERMES_GITHUB_REPO_URL } from "hermes/utils/hermes-urls";
+import ConfigService from "hermes/services/config";
+
+const SUPPORT_URL = "https://example.com/support";
+const USER_MENU_TOGGLE_SELECTOR = "[data-test-user-menu-toggle]";
 
 module("Integration | Component | header/nav", function (hooks) {
   setupRenderingTest(hooks);
@@ -28,7 +33,6 @@ module("Integration | Component | header/nav", function (hooks) {
 
   test("it renders correctly", async function (assert) {
     await render(hbs`
-      {{! @glint-nocheck: not typesafe yet }}
       <Header::Nav />
     `);
 
@@ -39,10 +43,14 @@ module("Integration | Component | header/nav", function (hooks) {
 
     assert.dom(".global-search").exists();
 
-    await click("[data-test-user-menu-toggle]");
+    await click(USER_MENU_TOGGLE_SELECTOR);
 
     assert.dom("[data-test-user-menu-title]").hasText("Foo Bar");
     assert.dom("[data-test-user-menu-email]").hasText("[email protected]");
+    assert
+      .dom("[data-test-user-menu-github]")
+      .hasText("GitHub")
+      .hasAttribute("href", HERMES_GITHUB_REPO_URL);
 
     assert
       .dom('[data-test-user-menu-item="email-notifications"]')
@@ -53,7 +61,6 @@ module("Integration | Component | header/nav", function (hooks) {
 
   test("it shows an icon when the user menu has something to highlight", async function (assert) {
     await render(hbs`
-      {{! @glint-nocheck: not typesafe yet }}
       <Header::Nav />
     `);
 
@@ -64,7 +71,7 @@ module("Integration | Component | header/nav", function (hooks) {
 
     assert.dom("[data-test-user-menu-highlight]").exists("highlight is shown");
 
-    await click("[data-test-user-menu-toggle]");
+    await click(USER_MENU_TOGGLE_SELECTOR);
 
     assert
       .dom("[data-test-user-menu-highlight]")
@@ -79,11 +86,27 @@ module("Integration | Component | header/nav", function (hooks) {
       );
 
     // close and reopen the menu
-    await click("[data-test-user-menu-toggle]");
-    await click("[data-test-user-menu-toggle]");
+    await click(USER_MENU_TOGGLE_SELECTOR);
+    await click(USER_MENU_TOGGLE_SELECTOR);
 
     assert
       .dom(".highlighted-new")
       .doesNotExist("highlight is hidden after the menu is closed");
   });
+
+  test("it renders a support link if it is configured", async function (assert) {
+    let mockConfigSvc = this.owner.lookup("service:config") as ConfigService;
+    mockConfigSvc.config.support_link_url = SUPPORT_URL;
+
+    await render(hbs`
+      <Header::Nav />
+    `);
+
+    await click(USER_MENU_TOGGLE_SELECTOR);
+
+    assert
+      .dom("[data-test-user-menu-support]")
+      .hasText("Support")
+      .hasAttribute("href", SUPPORT_URL);
+  });
 });