@duetds/components 7.1.0 → 7.1.2

package/lib/collection/components/duet-header/duet-header.e2e.js

@@ -0,0 +1,468 @@
+/*!
+ * Built with Duet Design System
+ */
+import { createPage } from "../../utils/test-utils";
+describe("duet-header", () => {
+  it("should render a header", async () => {
+    const page = await createPage(`<duet-header></duet-header>`);
+    const component = await page.find("duet-header");
+    expect(component).not.toBeNull();
+    expect(component).toHaveClass("hydrated");
+  });
+  it("should shouldn’t render mobile dropdown if no items are passed", async () => {
+    const page = await createPage(`<duet-header language="fi"></duet-header>`);
+    const element = await page.find("duet-header >>> .duet-header-toggle");
+    expect(element).toBeNull();
+  });
+  it("should should render mobile dropdown if items are passed", async () => {
+    const page = await createPage(`<duet-header></duet-header>`);
+    await page.$eval("duet-header", (el) => {
+      el.contact = "demo";
+      el.contactItems = [
+        { label: "Viestit", href: "/viestit/" },
+        { label: "Avaa chat", href: "/chat/" },
+        { label: "Yhteystiedot", href: "/yhteystiedot/" },
+      ];
+    });
+    await page.waitForChanges();
+    const element = await page.find("duet-header >>> .duet-header-toggle");
+    expect(element).not.toBeNull();
+  });
+  it("should shouldn’t render contact menu when prop isn’t passed", async () => {
+    const page = await createPage(`<duet-header language="fi"></duet-header>`);
+    const element = await page.find("duet-header >>> .duet-header-contact");
+    expect(element).toBeNull();
+  });
+  it("shouldn’t render language menu when prop isn’t passed", async () => {
+    const page = await createPage(`<duet-header language="fi"></duet-header>`);
+    const element = await page.find("duet-header >>> .duet-header-language");
+    expect(element).toBeNull();
+  });
+  it("shouldn’t render region when prop isn’t passed", async () => {
+    const page = await createPage(`<duet-header language="fi"></duet-header>`);
+    const element = await page.find("duet-header >>> .duet-header-region");
+    expect(element).toBeNull();
+  });
+  it("shouldn’t render user when prop isn’t passed", async () => {
+    const page = await createPage(`<duet-header language="fi"></duet-header>`);
+    const element = await page.find("duet-header >>> .duet-header-user");
+    expect(element).toBeNull();
+  });
+  it("should provide a property that sets language", async () => {
+    const page = await createPage(`<duet-header language="en"></duet-header>`);
+    const element = await page.find("duet-header >>> duet-logo");
+    expect(element.getAttribute("language")).toEqual("en");
+  });
+  it("should provide a property that sets language items", async () => {
+    const page = await createPage(`<duet-header></duet-header>`);
+    await page.$eval("duet-header", (el) => {
+      el.language = "en";
+      el.languageItems = [
+        { label: "Suomeksi", country: "fi", href: "/?lang=fi" },
+        { label: "På Svenska", country: "sv", href: "/?lang=sv" },
+        { label: "In English", country: "en", href: "/?lang=en" },
+      ];
+    });
+    await page.waitForChanges();
+    const element = await page.find("duet-header >>> .duet-header-language-items a:first-child");
+    expect(element.getAttribute("href")).toEqual("/?lang=fi");
+  });
+  it("should provide a property that switches the theme", async () => {
+    const page = await createPage(`<duet-header theme="turva"></duet-header>`);
+    const element = await page.find("duet-header >>> .duet-header");
+    expect(element).toHaveClass("duet-theme-turva");
+  });
+  it("should provide a property that gives accessible label to nav toggle", async () => {
+    const page = await createPage(`<duet-header></duet-header>`);
+    await page.$eval("duet-header", (el) => {
+      el.accessibleLabel = "demo";
+      el.items = [
+        { label: "Etusivu", href: "/" },
+        { label: "Vakuutukset", href: "/vakuutukset/", id: "test" },
+      ];
+      el.user = { label: "Test", href: "/" };
+    });
+    await page.waitForChanges();
+    const element = await page.find("duet-header >>> .duet-header-toggle duet-visually-hidden");
+    expect(element.textContent).toEqual("demo");
+  });
+  it("should provide a property that changes logo’s href", async () => {
+    const page = await createPage(`<duet-header logo-href="demo"></duet-header>`);
+    const element = await page.find("duet-header >>> duet-logo");
+    expect(element.getAttribute("href")).toEqual("demo");
+  });
+  it("should provide a property that highlights the currently active href", async () => {
+    const page = await createPage(`<duet-header></duet-header>`);
+    await page.$eval("duet-header", (el) => {
+      el.currentHref = "/vakuutukset/";
+      el.items = [
+        { label: "Etusivu", href: "/" },
+        { label: "Vakuutukset", href: "/vakuutukset/", id: "test" },
+      ];
+    });
+    await page.waitForChanges();
+    const element = await page.find("duet-header >>> .duet-header-items #test");
+    expect(element).toHaveClass("active");
+  });
+  it("should provide a property that renders main navigation", async () => {
+    const page = await createPage(`<duet-header></duet-header>`);
+    await page.$eval("duet-header", (el) => {
+      el.items = [
+        { label: "Etusivu", href: "/" },
+        { label: "Vakuutukset", href: "/vakuutukset/" },
+      ];
+    });
+    await page.waitForChanges();
+    const element = await page.find("duet-header >>> .duet-header-items a:first-child");
+    expect(element).not.toBeNull();
+  });
+  it("should provide a property that sets the current region", async () => {
+    const page = await createPage(`
+      <meta charset="UTF-8">
+      <duet-header region="Pääkaupunkiseutu"></duet-header>
+    `);
+    const element = await page.find("duet-header >>> .duet-header-region");
+    expect(element.textContent).toEqual("Pääkaupunkiseutu");
+  });
+  it("should provide a property that renders contact menu label", async () => {
+    const page = await createPage(`<duet-header></duet-header>`);
+    await page.$eval("duet-header", (el) => {
+      el.contact = "demo";
+      el.contactItems = [
+        { label: "Viestit", href: "/viestit/" },
+        { label: "Avaa chat", href: "/chat/" },
+        { label: "Yhteystiedot", href: "/yhteystiedot/" },
+      ];
+    });
+    await page.waitForChanges();
+    const element = await page.find("duet-header >>> .duet-header-contact");
+    expect(element).not.toBeNull();
+  });
+  it("should provide a property that renders contact menu items", async () => {
+    const page = await createPage(`<duet-header></duet-header>`);
+    await page.$eval("duet-header", (el) => {
+      el.contact = "demo";
+      el.contactItems = [
+        { label: "Viestit", href: "/viestit/" },
+        { label: "Avaa chat", href: "/chat/" },
+        { label: "Yhteystiedot", href: "/yhteystiedot/" },
+      ];
+    });
+    await page.waitForChanges();
+    const element = await page.find("duet-header >>> .duet-header-contact-items a:first-child");
+    expect(element.textContent).toEqual("Viestit");
+  });
+  it("should provide a property that renders user menu link", async () => {
+    const page = await createPage(`<duet-header></duet-header>`);
+    await page.$eval("duet-header", (el) => {
+      el.user = { label: "Foo bar", href: "/demo/", id: "test" };
+    });
+    await page.waitForChanges();
+    const element = await page.find("duet-header >>> #test");
+    expect(element.textContent).toEqual("Foo bar");
+  });
+  it("should provide a property that renders session menu link", async () => {
+    const page = await createPage(`<duet-header></duet-header>`);
+    await page.$eval("duet-header", (el) => {
+      el.session = { label: "Log out", href: "/?logout=true", id: "test", type: "logout" };
+    });
+    await page.waitForChanges();
+    const element = await page.find("duet-header >>> #test");
+    expect(element.textContent).toEqual("Log out");
+  });
+  it("should be possible to render login link as well", async () => {
+    const page = await createPage(`<duet-header></duet-header>`);
+    await page.$eval("duet-header", (el) => {
+      el.session = { label: "Log in", href: "/?login", id: "test", type: "login" };
+    });
+    await page.waitForChanges();
+    const element = await page.find("duet-header >>> #test");
+    expect(element.textContent).toEqual("Log in");
+  });
+  it("should provide a property that renders back link", async () => {
+    const page = await createPage(`<duet-header></duet-header>`);
+    await page.$eval("duet-header", (el) => {
+      el.back = { label: "Takaisin", href: "/", id: "test" };
+    });
+    await page.waitForChanges();
+    const element = await page.find("duet-header >>> #test");
+    expect(element.textContent).toEqual("Takaisin");
+  });
+  it("shouldn’t render skip to content link if no ID is passed", async () => {
+    const page = await createPage(`<duet-header language="fi"></duet-header>`);
+    const element = await page.find("duet-header >>> .duet-header-skip");
+    expect(element).toBeNull();
+  });
+  it("should render skip to content link", async () => {
+    const page = await createPage(`<duet-header skip-to-id="#content"></duet-header>`);
+    const element = await page.find("duet-header >>> .duet-header-skip");
+    expect(element.textContent).toEqual("Siirry pääsisältöön");
+  });
+  it("should automatically refresh itself when content changes", async () => {
+    const page = await createPage(`<duet-header></duet-header>`);
+    await page.$eval("duet-header", (el) => {
+      el.items = [
+        { label: "Etusivu", href: "/" },
+        { label: "Vakuutukset", href: "#" },
+        { label: "Vahinkoasiat", href: "#" },
+        { label: "Säästöt ja sijoitukset", href: "#" },
+        { label: "Laskut", href: "#", badge: true },
+        { label: "Viestit", href: "#" },
+      ];
+    });
+    const element = await page.find("duet-header");
+    // should be updated when setting the *attribute*
+    element.setAttribute("items", '[{ "label": "test", "href": "#" }]');
+    await page.waitForChanges();
+    const test = await page.find("duet-header >>> .duet-header-items a:first-child");
+    expect(test).toEqualText("test");
+    // should also be updated when setting the label *property*
+    element.setProperty("items", [{ label: "test 2", href: "#" }]);
+    await page.waitForChanges();
+    expect(test).toEqualText("test 2");
+  });
+  it("should not error when unmounting", async () => {
+    const back = { label: "back", href: "#" };
+    const page = await createPage(`<duet-header back="${JSON.stringify(back)}"></duet-header>`);
+    let error = null;
+    page.on("console", err => {
+      if (err.type() === "error") {
+        error = err.text();
+      }
+    });
+    await page.$eval("duet-header", header => header.remove());
+    expect(error).toBeNull();
+  });
+  describe("events", () => {
+    let page;
+    let header;
+    const props = {
+      items: [
+        { id: "item-1", label: "Etusivu", href: "/" },
+        { id: "item-2", label: "Vakuutukset", href: "#" },
+        { id: "item-3", label: "Vahinkoasiat", href: "#" },
+        { id: "item-4", label: "Säästöt ja sijoitukset", href: "#" },
+        { id: "item-5", label: "Laskut", href: "#", badge: true },
+        { id: "item-6", label: "Viestit", href: "#" },
+      ],
+      contactItems: [
+        { id: "contact-1", label: "Lähetä viesti", href: "/viestit/laheta" },
+        { id: "contact-2", label: "Avaa chat", href: "/chat/" },
+        { id: "contact-3", label: "Yhteystiedot", href: "/yhteystiedot/" },
+      ],
+      languageItems: [
+        { id: "language-1", label: "Suomeksi", country: "fi", href: "/?lang=fi" },
+        { id: "language-2", label: "På Svenska", country: "sv", href: "/?lang=sv" },
+        { id: "language-3", label: "In English", country: "en", href: "/?lang=en" },
+      ],
+      session: {
+        label: "Kirjaudu ulos",
+        href: "/?logout",
+        type: "logout",
+        id: "session",
+      },
+      user: {
+        label: "Elina",
+        href: "/?userId=elina",
+        id: "user",
+      },
+      logoHref: "/logo",
+      skipToId: "#content",
+    };
+    async function openMenu(page) {
+      const menuToggle = await page.find("duet-header >>> .duet-header-toggle");
+      await menuToggle.click();
+      await page.waitForChanges();
+    }
+    beforeEach(async () => {
+      page = await createPage(`
+        <meta charset="utf-8" />
+        <duet-header
+          language="fi"
+          region="Pääkaupunkiseutu"
+          contact="Ota yhteyttä"
+          current-href="/"
+        >
+        </duet-header>
+      `);
+      header = await page.find("duet-header");
+      await page.$eval("duet-header", (header, props) => Object.assign(header, props), props);
+      await page.waitForChanges();
+    });
+    it("raises events when logo is clicked", async () => {
+      const logo = await page.find("duet-header >>> duet-logo");
+      const changeSpy = await header.spyOnEvent("duetChange");
+      const logoSpy = await header.spyOnEvent("duetLogoClick");
+      await logo.click();
+      const expected = {
+        component: "duet-header",
+        data: { href: props.logoHref, label: "logo" },
+        originalEvent: expect.anything(),
+      };
+      expect(changeSpy.firstEvent.detail).toEqual(expected);
+      expect(logoSpy.firstEvent.detail).toEqual(expected);
+    });
+    it("raises events when a menu item is clicked", async () => {
+      const menuItem = await page.find("duet-header >>> #item-1");
+      const changeSpy = await header.spyOnEvent("duetChange");
+      const itemSpy = await header.spyOnEvent("duetItemClick");
+      await openMenu(page);
+      await page.waitForChanges();
+      await menuItem.click();
+      const expected = {
+        component: "duet-header",
+        data: props.items[0],
+        originalEvent: expect.anything(),
+      };
+      expect(changeSpy.firstEvent.detail).toEqual(expected);
+      expect(itemSpy.firstEvent.detail).toEqual(expected);
+    });
+    it("raises events when a language is selected", async () => {
+      const languageSelect = await page.find("duet-header >>> #duet-header-language-button");
+      const language = await page.find("duet-header >>> #language-3");
+      const changeSpy = await header.spyOnEvent("duetChange");
+      const languageSpy = await header.spyOnEvent("duetLanguageSelect");
+      await openMenu(page);
+      await languageSelect.click();
+      await page.waitForChanges();
+      await language.click();
+      const expected = {
+        component: "duet-header",
+        data: props.languageItems[2],
+        originalEvent: expect.anything(),
+      };
+      expect(changeSpy.firstEvent.detail).toEqual(expected);
+      expect(languageSpy.firstEvent.detail).toEqual(expected);
+    });
+    it("raises events when contact item is clicked", async () => {
+      const contactDropdown = await page.find("duet-header >>> #duet-header-contact-button");
+      const contact = await page.find("duet-header >>> #contact-3");
+      const changeSpy = await header.spyOnEvent("duetChange");
+      const contactSpy = await header.spyOnEvent("duetContactClick");
+      await openMenu(page);
+      await contactDropdown.click();
+      await page.waitForChanges();
+      await contact.click();
+      const expected = {
+        component: "duet-header",
+        data: props.contactItems[2],
+        originalEvent: expect.anything(),
+      };
+      expect(changeSpy.firstEvent.detail).toEqual(expected);
+      expect(contactSpy.firstEvent.detail).toEqual(expected);
+    });
+    it("raises events when session is clicked", async () => {
+      const session = await page.find("duet-header >>> #session");
+      const changeSpy = await header.spyOnEvent("duetChange");
+      const sessionSpy = await header.spyOnEvent("duetSessionClick");
+      await openMenu(page);
+      await page.waitForChanges();
+      await session.click();
+      const expected = {
+        component: "duet-header",
+        data: props.session,
+        originalEvent: expect.anything(),
+      };
+      expect(changeSpy.firstEvent.detail).toEqual(expected);
+      expect(sessionSpy.firstEvent.detail).toEqual(expected);
+    });
+    it("raises events when user is clicked", async () => {
+      const user = await page.find("duet-header >>> #user");
+      const changeSpy = await header.spyOnEvent("duetChange");
+      const userSpy = await header.spyOnEvent("duetUserClick");
+      await openMenu(page);
+      await page.waitForChanges();
+      await user.click();
+      const expected = {
+        component: "duet-header",
+        data: props.user,
+        originalEvent: expect.anything(),
+      };
+      expect(changeSpy.firstEvent.detail).toEqual(expected);
+      expect(userSpy.firstEvent.detail).toEqual(expected);
+    });
+    it("raises events when skip link is clicked", async () => {
+      await page.keyboard.press("Tab");
+      await page.waitForChanges();
+      const changeSpy = await header.spyOnEvent("duetChange");
+      const skipSpy = await header.spyOnEvent("duetSkipClick");
+      await page.keyboard.press("Enter");
+      const expected = {
+        component: "duet-header",
+        data: { href: props.skipToId, label: expect.any(String) },
+        originalEvent: expect.anything(),
+      };
+      expect(changeSpy.firstEvent.detail).toEqual(expected);
+      expect(skipSpy.firstEvent.detail).toEqual(expected);
+    });
+    it("raises events when back button is clicked", async () => {
+      const backData = { id: "back-btn", href: "#", label: "back" };
+      await page.$eval("duet-header", (header, back) => {
+        header.back = back;
+      }, backData);
+      await page.waitForChanges();
+      const back = await page.find(`duet-header >>> #${backData.id}`);
+      const changeSpy = await header.spyOnEvent("duetChange");
+      const backSpy = await header.spyOnEvent("duetBackClick");
+      await back.click();
+      const expected = {
+        component: "duet-header",
+        data: backData,
+        originalEvent: expect.anything(),
+      };
+      expect(changeSpy.firstEvent.detail).toEqual(expected);
+      expect(backSpy.firstEvent.detail).toEqual(expected);
+    });
+  });
+  describe("analytics", () => {
+    let page;
+    const openMenu = async () => {
+      const menuToggle = await page.find("duet-header >>> .duet-header-toggle");
+      await menuToggle.click();
+    };
+    beforeEach(async () => {
+      page = await createPage(`
+        <duet-header
+          items='[
+            { "label": "item 1", "id": "item-1", "analyticsId": "item analytics" } ,
+            { "label": "item 2", "id": "item-2" }
+          ]'
+        ></duet-header>
+      `);
+    });
+    it("allows analytics to be set for header items", async () => {
+      await openMenu();
+      const analyticsSpy = await page.spyOnEvent("duetAnalytics");
+      const item1 = await page.find("duet-header >>> #item-1");
+      await item1.click();
+      expect(analyticsSpy).toHaveReceivedEventDetail({
+        analyticsId: "item analytics",
+        component: "duet-header",
+      });
+    });
+    it("does nothing when items without analytics are clicked", async () => {
+      await openMenu();
+      const analyticsSpy = await page.spyOnEvent("duetAnalytics");
+      const item2 = await page.find("duet-header >>> #item-2");
+      await item2.click();
+      expect(analyticsSpy).toHaveReceivedEventTimes(0);
+    });
+    it("allows analytics to be set for user item", async () => {
+      await page.$eval("duet-header", (header) => {
+        header.user = {
+          label: "Nick",
+          href: "#",
+          analyticsId: "user analytics",
+        };
+      });
+      await openMenu();
+      const analyticsSpy = await page.spyOnEvent("duetAnalytics");
+      const userButton = await page.find("duet-header >>> .duet-header-user");
+      await userButton.click();
+      expect(analyticsSpy).toHaveReceivedEventDetail({
+        analyticsId: "user analytics",
+        component: "duet-header",
+      });
+    });
+  });
+});