@watermarkinsights/ripple 5.7.0-8 → 5.7.0

package/dist/collection/components/wm-navigation/wm-navigation.spec.js

@@ -0,0 +1,91 @@
+import { newSpecPage } from "@stencil/core/testing";
+//jest.mock("../../global/functions");
+import { Navigation } from "./wm-navigation";
+import { NavigationItem } from "./wm-navigation-item";
+describe("Navigation unit tests", () => {
+    it("isCollapsible", async () => {
+        const nav = new Navigation();
+        window.innerWidth = 1023;
+        expect(nav.isCollapsible).toBe(true);
+        window.innerWidth = 1024;
+        expect(nav.isCollapsible).toBe(false);
+    });
+    it("ariaExpanded", async () => {
+        const nav = new Navigation();
+        window.innerWidth = 1024;
+        expect(nav.ariaExpanded).toBeUndefined;
+        window.innerWidth = 1023;
+        expect(nav.ariaExpanded).toBe("false");
+        nav.open = true;
+        expect(nav.ariaExpanded).toBe("true");
+    });
+});
+describe("navigation", () => {
+    let page;
+    let navigation;
+    let items;
+    beforeEach(async () => {
+        page = await newSpecPage({
+            components: [Navigation, NavigationItem],
+            html: `<wm-navigation id="mynav">
+          <wm-navigation-item href="/home" text="Home" active>Home</wm-navigation-item>
+          <wm-navigation-item href="/things" text="Things">Things</wm-navigation-item>
+        </wm-navigation>`,
+        });
+        navigation = page.root;
+        items = Array.from(page.root.querySelectorAll("wm-navigation-item"));
+    });
+    // integration tests
+    // this test includes UX functionality, the related a11y (aria-expanded)
+    // as well as the switch between persistent and collapsible modes
+    it("expands and collapses", async () => {
+        // aria-expanded
+        const expanded = navigation.getAttribute("aria-expanded");
+        //  Persistent: no aria-expanded
+        window.innerWidth = 1024;
+        expect(expanded).toBeNull;
+        //  Collapsible
+        window.innerWidth = 1023;
+        //  aria-expanded true when open
+        navigation.open = true;
+        expect(expanded).not.toBeNull;
+        //  aria-expanded false when closed
+        navigation.open = false;
+        expect(expanded).toBeNull;
+    });
+    it("closes when toggle button is activated", async () => {
+        window.innerWidth = 1023;
+        navigation.open = true;
+        let toggleBtn = page.root.shadowRoot.querySelector(".toggle");
+        toggleBtn.click();
+        expect(navigation.open).toBeFalsy();
+    });
+    /*
+     * Close button is present in collapsible mode, not otherwise
+     * can't test with current implementation because button is
+     * simply hidden via CSS
+    it("hides the button in persistent mode", async () => {
+      // in persistent mode, there's no button at all
+      window.innerWidth = 1024;
+      navigation.open = true;
+  
+      let toggleBtn = page.root!.shadowRoot!.querySelector(".toggle-wrapper");
+      expect(toggleBtn.width).toBeNull();
+    });
+    */
+    // a11y
+    it("Has a role of navigation and has a label", async () => {
+        // navigation role requires a label only when there are several on the page. Since we don't know if there will be others, we can set a label in all cases.
+        let role = navigation.getAttribute("role");
+        let label = navigation.getAttribute("aria-label");
+        expect(role).toBe("navigation");
+        expect(label).toBe("Main");
+    });
+    it("items have proper role and attrs", async () => {
+        const firstItem = items[0];
+        const role = firstItem.getAttribute("role");
+        expect(role).toBe("listitem");
+        const href = firstItem.shadowRoot.querySelector("a").getAttribute("href");
+        expect(href).toBe("/home");
+    });
+});

package/dist/collection/components/wm-navigator/priv-navigator-button/priv-navigator-button.e2e.js

@@ -0,0 +1,50 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe("priv-navigator-button", () => {
+    let page, 
+    //navigator: any,
+    //navigatorList: any,
+    navigatorButton, button;
+    beforeEach(async () => {
+        page = await newE2EPage();
+        await page.setContent(`
+    <html lang='en'>
+        <head>
+            <title>Page</title>
+        </head>
+        <body>
+            <main>
+                <h1>Title</h1>
+                <wm-navigator id="nav" selected-product="planning" user-name="Adrienne Johnson" email="ajohnson@watermarkinsights.com"></wm-navigator>
+                <script>window.onload = function getModules() {
+                  const navigator = document.getElementById("nav");
+                  const userModules = [{ "id": "aqua", "link_url": "", "saml_link_url": "" }, { "id": "dm", "link_url": "", "saml_link_url": "" }, { "id": "planning", "link_url": "", "saml_link_url": "" }, { "id": "livetext", "link_url": "", "saml_link_url": "" }];
+                  const stringifyModules = JSON.stringify(userModules);
+                  navigator.products = stringifyModules;
+                };</script>
+            </main>
+        </body>
+    </html>`);
+        // navigator = await page.find("wm-navigator");
+        // navigatorList = await page.find("wm-navigator >>> ul");
+        navigatorButton = await page.find("wm-navigator >>> priv-navigator-button");
+        button = await navigatorButton.shadowRoot.querySelector("button");
+    });
+    // RENDER
+    it("renders a button", async () => {
+        expect(button).not.toBeNull();
+    });
+    it("it has an aria-expanded attribute whose value updates when the menu opens and closes", async () => {
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        navigatorButton = await page.find("wm-navigator >>> priv-navigator-button");
+        button = await navigatorButton.shadowRoot.querySelector("button");
+        expect(button.getAttribute("aria-expanded")).toEqual("true");
+        await page.keyboard.press("Escape");
+        await page.waitForChanges();
+        navigatorButton = await page.find("wm-navigator >>> priv-navigator-button");
+        button = await navigatorButton.shadowRoot.querySelector("button");
+        expect(button.getAttribute("aria-expanded")).toEqual("false");
+    });
+});

package/dist/collection/components/wm-navigator/priv-navigator-button/priv-navigator-button.js

@@ -9,7 +9,7 @@ export class PrivNavigatorButton {
     }
     render() {
         const { handleClick, altText } = this;
-        return (h("button", { key: '3ca7d2b0ff21d4b914876030af5cd167535b746e', "aria-expanded": this.expanded.toString(), class: "navigator", onClick: handleClick.bind(this), "aria-label": altText }));
+        return (h("button", { "aria-expanded": this.expanded.toString(), class: "navigator", onClick: handleClick.bind(this), "aria-label": altText }));
     }
     static get is() { return "priv-navigator-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/wm-navigator/priv-navigator-item/priv-navigator-item.js

@@ -16,7 +16,7 @@ export class PrivNavigatorItem {
     render() {
         const selectedClass = this.selected ? "selected" : "";
         const focusedClass = this.focused ? "focused" : "";
-        return (h("div", { key: '42153239d733a5f9fdf0e968cdff02f77fe5d1a1', class: `navoption ${selectedClass} ${focusedClass}` }, h("slot", { key: '2e924f14d849e7ba04e18f66637463f3d4d2b44c' })));
+        return (h("div", { class: `navoption ${selectedClass} ${focusedClass}` }, h("slot", null)));
     }
     static get is() { return "priv-navigator-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/wm-navigator/wm-navigator.e2e.js

@@ -0,0 +1,209 @@
+import { newE2EPage } from "@stencil/core/testing";
+import { AxePuppeteer } from "@axe-core/puppeteer";
+describe("wm-navigator", () => {
+    let page, navigator, navigatorList, navigatorButton;
+    beforeEach(async () => {
+        page = await newE2EPage();
+        await page.setContent(`
+    <html lang='en' mode='planning'>
+        <head>
+            <title>Page</title>
+        </head>
+        <body>
+            <main>
+                <h1>Title</h1>
+                <wm-navigator id="nav" base-logout-uri="https://www.dummy.wm/logout" user-name="Adrienne Johnson" email="ajohnson@watermarkinsights.wm" auth-type="2"></wm-navigator>
+                <script>window.onload = function getModules() {
+                  const navigator = document.getElementById("nav");
+                  const userModules = [{ "id": "aqua", "linkUrl": "https://www.dummy.wm/aqua", "samlLinkUrl": "https://www.dummy.wm/saml/aqua", "iconUrl": "/aqualogo.svg", "name": "Aqua" }, { "id": "dm", "linkUrl": "/dm", "samlLinkUrl": "/saml/dm", "iconUrl": "/dmlogo.svg", "name": "Digital Measures" }, { "id": "planning", "linkUrl": "/planning", "samlLinkUrl": "/saml/planning", "iconUrl": "/planlogo.svg", "name": "Planning & Self-Study" }];
+                  const stringifyModules = JSON.stringify(userModules);
+                  navigator.products = stringifyModules;
+                };</script>
+            </main>
+        </body>
+    </html>`);
+        navigator = await page.find("wm-navigator");
+        navigatorList = await page.find("wm-navigator >>> ul");
+        navigatorButton = await page.find("wm-navigator >>> priv-navigator-button");
+        const url = "https://dummy.wm";
+        Object.defineProperty(window, "location", {
+            value: {
+                href: url,
+            },
+            writable: true,
+        });
+    });
+    it("passes Axe checks", async () => {
+        const results = await new AxePuppeteer(page).analyze();
+        expect(results.violations.length).toBe(0);
+    });
+    // RENDER
+    it("renders", async () => {
+        expect(navigator).toHaveClass("hydrated");
+    });
+    // VIEW
+    it("opens the menu when clicked", async () => {
+        await navigatorButton.click();
+        await page.waitForChanges();
+        const wrapper = await page.find("wm-navigator >>> .wrapper");
+        expect(wrapper).not.toHaveClass("hide");
+    });
+    it("renders the products in the list if there is more than one, along with a logout option", async () => {
+        navigatorList = await page.find("wm-navigator >>> ul");
+        const listItems = await navigatorList.querySelectorAll("priv-navigator-item");
+        expect(listItems.length).toEqual(4);
+        expect(listItems[3].textContent).toEqual("Log Out");
+    });
+    it("renders just the logout option if there is one product in the list", async () => {
+        const newProducts = JSON.stringify([{ id: "planning", linkUrl: "", samlLinkUrl: "" }]);
+        navigator.setProperty("products", newProducts);
+        await page.waitForChanges();
+        const listItems = await page.findAll("wm-navigator >>> priv-navigator-item");
+        expect(listItems.length).toEqual(1);
+        expect(listItems[0].textContent).toEqual("Log Out");
+    });
+    it("sets the alt text on the button", async () => {
+        const label = await navigatorButton.shadowRoot.querySelector("button").getAttribute("aria-label");
+        const expectedText = "User information and product navigator";
+        expect(label).toEqual(expectedText);
+        const newProducts = JSON.stringify(["planning"]);
+        navigator.setProperty("products", newProducts);
+        await page.waitForChanges();
+        const newLabel = await navigatorButton.shadowRoot.querySelector("button").getAttribute("aria-label");
+        expect(newLabel).toEqual("User information");
+    });
+    //KEYBOARD NAVIGATION AND FOCUS
+    it("opens the menu when enter is pressed and closes it on escape", async () => {
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        const wrapper = await page.find("wm-navigator >>> .wrapper");
+        expect(wrapper).not.toHaveClass("hide");
+        await page.keyboard.press("Escape"); // Previous btn
+        await page.waitForChanges();
+        expect(wrapper).toHaveClass("hide");
+        await page.keyboard.press("Space");
+        await page.waitForChanges();
+        expect(wrapper).not.toHaveClass("hide");
+    });
+    it("focuses the current product in use when the menu opens", async () => {
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        const activeItem = await page.find("wm-navigator >>> priv-navigator-item#planning");
+        expect(activeItem.tabIndex).toEqual(0);
+        const activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        expect(activeElId).toEqual("planning");
+    });
+    it("focuses the next product in the list when the down arrow is pressed", async () => {
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        await page.keyboard.press("ArrowDown");
+        await page.waitForChanges();
+        let activeItem = await page.find("wm-navigator >>> priv-navigator-item#nav-logout");
+        expect(activeItem.tabIndex).toEqual(0);
+        let activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        expect(activeElId).toEqual("nav-logout");
+        await page.keyboard.press("ArrowDown");
+        await page.waitForChanges();
+        activeItem = await page.find("wm-navigator >>> priv-navigator-item#aqua");
+        expect(activeItem.tabIndex).toEqual(0);
+        activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        expect(activeElId).toEqual("aqua");
+    });
+    it("focuses the previous product in the list when the up arrow is pressed", async () => {
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        await page.keyboard.press("ArrowUp");
+        await page.waitForChanges();
+        let activeItem = await page.find("wm-navigator >>> priv-navigator-item#dm");
+        expect(activeItem.tabIndex).toEqual(0);
+        let activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        expect(activeElId).toEqual("dm");
+        await page.keyboard.press("ArrowUp");
+        await page.waitForChanges();
+        await page.keyboard.press("ArrowUp");
+        await page.waitForChanges();
+        activeItem = await page.find("wm-navigator >>> priv-navigator-item#nav-logout");
+        expect(activeItem.tabIndex).toEqual(0);
+        activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        expect(activeElId).toEqual("nav-logout");
+    });
+    //FUNCTIONALITY
+    // the next 3 tests are failing for unknown reasons (they used to pass)
+    // it("should change pages/products when a dropdown item is activated", async () => {
+    //   const browser = await puppeteer.launch();
+    //   const page = await browser.newPage();
+    //   await page.goto("http://localhost:3333/../src/components/wm-navigator/navigator.html", {
+    //     waitUntil: "networkidle2"
+    //   });
+    //   await page.evaluate(async () => {
+    //     const aquaNavItem = document!
+    //       .querySelector("#nav")!
+    //       .shadowRoot!.querySelector("priv-navigator-item");
+    //     aquaNavItem!.click();
+    //   });
+    //   await page.waitForNavigation();
+    //   await Promise.all([
+    //     expect(page.url()).toEqual(
+    //       "http://localhost:3333/aqua/?connection_name=test"
+    //     )
+    //   ]);
+    // });
+    // it("should redirect to a logout URL when the logout item is activated", async () => {
+    //   const browser = await puppeteer.launch();
+    //   const page = await browser.newPage();
+    //   await page.goto("http://localhost:3333/components/wm-navigator/navigator.html", {
+    //     waitUntil: "networkidle2"
+    //   });
+    //   await page.evaluate(async () => {
+    //     const logoutItem = document!
+    //       .querySelector("#nav")!
+    //       .shadowRoot!.querySelector("#nav-logout") as HTMLElement;
+    //     logoutItem!.click();
+    //   });
+    //   await page.waitForNavigation();
+    //   await Promise.all([
+    //     expect(page.url()).toEqual("http://localhost:3333/logout")
+    //   ]);
+    // });
+    // it("should redirect to a URL with a connection name when a dropdown item is activated and the user is a saml user", async () => {
+    //   const browser = await puppeteer.launch({
+    //     headless: true,
+    //     defaultViewport: {
+    //       width: 1100,
+    //       height: 1100
+    //     }
+    //   });
+    //   const page = await browser.newPage();
+    //   await page.goto("http://localhost:3333/devpages/navigator.html", {
+    //     waitUntil: "networkidle2"
+    //   });
+    //   // page.on("console", (msg: any) => console.log("PAGE LOG:", msg.text()));
+    //   await page.evaluate(async () => {
+    //     const aquaNavItem = document!
+    //       .querySelector("#nav-aqua")!
+    //       .shadowRoot!.querySelector("#ek") as HTMLElement;
+    //     aquaNavItem!.click();
+    //   });
+    //   await page.waitForNavigation();
+    //   await Promise.all([
+    //     expect(page.url()).toEqual(
+    //       "http://localhost:3333/saml/ek/?connection_name=something"
+    //     )
+    //   ]);
+    // });
+});
+// const page = await newSpecPage({
+//   html: `<wm-navigator id="nav" logout-uri="https://www.dummy.wm/logout" user-name="Adrienne Johnson" email="ajohnson@watermarkinsights.wm" auth-type="username_password_sso" products="[]"></wm-navigator>`,
+//   components: [Navigator]
+// });
+// const button = page.root!.querySelector("wm-navigator");
+// button!.click();
+// console.log("PAGE HREF", page.win.location.href);

package/dist/collection/components/wm-navigator/wm-navigator.spec.js

@@ -0,0 +1,177 @@
+jest.mock("../../global/services/http-service");
+import { newSpecPage } from "@stencil/core/testing";
+//import { PrivNavigatorItem } from "./priv-navigator-item/priv-navigator-item";
+import { Navigator } from "./wm-navigator";
+describe("wm-navigator", () => {
+    it("builds (with props)", async () => {
+        const comp = await newSpecPage({
+            components: [Navigator],
+            html: `<wm-navigator
+      email="anna@user.com"
+      user-name="Anna User"
+      auth-type="3"
+      products='[{"samlLinkUrl":"https://aqua.taskstream.com/sso/samlLogin","linkUrl":"https://aqua.taskstream.com/sso/login","id":"aqua","iconUrl":"https://cdn.watermarkinsights.com/images/login/aqua.svg","name":"Aqua"},{"samlLinkUrl":"https://www.vialivetext.com/wm_sso/saml_login","linkUrl":"https://www.vialivetext.com/wm_sso/login","id":"via","iconUrl":"https://cdn.watermarkinsights.com/images/login/via.svg","name":"Via"},{"samlLinkUrl":"https://watermark.evaluationkit.com/Login/SAML","linkUrl":"https://watermark.evaluationkit.com/Login","id":"ek","iconUrl":"https://cdn.watermarkinsights.com/images/login/evaluationkit.svg","name":"Evaluation Kit"},{"samlLinkUrl":null,"linkUrl":"https://w.taskstream.com/WatermarkSSO/Authenticate/lat","id":"lat","iconUrl":"https://cdn.watermarkinsights.com/images/login/tslat.svg","name":"Taskstream LAT"},{"samlLinkUrl":null,"linkUrl":"https://w.taskstream.com/WatermarkSSO/Authenticate/ams","id":"ams","iconUrl":"https://cdn.watermarkinsights.com/images/login/tsams.svg","name":"Taskstream AMS"},{"samlLinkUrl":"https://www.digitalmeasures.com/login/sso/authenticate/saml","linkUrl":"https://www.digitalmeasures.com/login/sso/authenticate","id":"dm","iconUrl":"https://cdn.watermarkinsights.com/images/login/digitalmeasures.svg","name":"Digital Measures"},{"samlLinkUrl":"https://planning.watermarkinsights.com/login/sso/saml_login","linkUrl":"https://planning.watermarkinsights.com/login/sso","id":"planning","iconUrl":"https://cdn.watermarkinsights.com/images/login/planningselfstudy.svg","name":"Planning & Self-Study"}]'
+      ></wm-navigator>`,
+        });
+        expect(comp.root).toMatchSnapshot();
+    });
+    it("builds (endpoint)", async () => {
+        const comp = await newSpecPage({
+            components: [Navigator],
+            html: `<wm-navigator
+      user-name="Bettie User"
+      load-from-userinfo="true"
+      ></wm-navigator>`,
+        });
+        expect(comp.root).toMatchSnapshot();
+    });
+    it("returns the proper link", () => {
+        const nav = new Navigator();
+        nav.email = "a_user@company.com";
+        nav.userName = "Anna User";
+        nav.parsedProducts = [
+            {
+                name: "Aqua",
+                iconUrl: "aqua icon",
+                linkUrl: "aqua sso",
+                samlLinkUrl: "aqua saml",
+                id: "aqua",
+            },
+            {
+                name: "via",
+                iconUrl: "via icon",
+                linkUrl: "via sso",
+                samlLinkUrl: "via saml",
+                id: "via",
+            },
+            {
+                name: "ek",
+                iconUrl: "ek icon",
+                linkUrl: "ek sso",
+                samlLinkUrl: "ek saml",
+                id: "ek",
+            },
+            {
+                name: "lat",
+                iconUrl: "lat icon",
+                linkUrl: "lat sso",
+                samlLinkUrl: "lat saml",
+                id: "lat",
+            },
+            {
+                name: "ams",
+                iconUrl: "ams icon",
+                linkUrl: "ams sso",
+                samlLinkUrl: "ams saml",
+                id: "ams",
+            },
+            {
+                name: "dm",
+                iconUrl: "dm icon",
+                linkUrl: "dm sso",
+                samlLinkUrl: "dm saml",
+                id: "dm",
+            },
+            {
+                name: "planning",
+                iconUrl: "planning icon",
+                linkUrl: "planning sso",
+                samlLinkUrl: "planning saml",
+                id: "planning",
+            },
+        ];
+        nav.connectionName = "xoxo"; // connection name only appended for saml
+        nav.authType = 2; // = sso
+        // setProductOnClick returns the onClick function
+        // we invoke it to test the string
+        expect(nav.setProductOnClick("aqua")()).toBe("aqua sso");
+        expect(nav.setProductOnClick("via")()).toBe("via sso");
+        expect(nav.setProductOnClick("ek")()).toBe("ek sso");
+        expect(nav.setProductOnClick("lat")()).toBe("lat sso");
+        expect(nav.setProductOnClick("ams")()).toBe("ams sso");
+        expect(nav.setProductOnClick("dm")()).toBe("dm sso");
+        expect(nav.setProductOnClick("planning")()).toBe("planning sso");
+        nav.authType = 3; // = saml
+        expect(nav.setProductOnClick("aqua")()).toBe("aqua saml/?connection_name=xoxo");
+        // if connection_name is not set, nothing is appended
+        nav.connectionName = "";
+        expect(nav.setProductOnClick("aqua")()).toBe("aqua saml");
+    });
+    it("handles unknown products (props mode)", async () => {
+        // in props mode the component checks a hard-coded list of products
+        // if the product is not in the list, it ignores it altogether
+        // 2 exceptions: "c1" is converted to "livetext", and anything with the name "admin" (e.g. "system_admin_sit", "platform_admin") is converted to "platform_admin"
+        const comp = await newSpecPage({
+            components: [Navigator],
+            html: `<wm-navigator
+      email="anna@user.com"
+      user-name="Anna User"
+      auth-type="3"
+      products='[{"samlLinkUrl":"something_weird.fakeurl","linkUrl":"something_weird.fakeurl","id":"something_weird"},{"samlLinkUrl":"livetext.fakeurl","linkUrl":"livetext.fakeurl","id":"c1"},{"samlLinkUrl":"platform.fakeurl","linkUrl":"platform.fakeurl","id":"something_with_admin_in_it"}]'
+       ></wm-navigator>`,
+        });
+        expect(comp.root).toMatchSnapshot();
+    });
+    it("loads (userinfo mode)", async () => {
+        const page = await newSpecPage({
+            components: [Navigator],
+            html: `<wm-navigator user-name="User Name" load-from-userinfo="true"></wm-navigator>`,
+        });
+        expect(page.root).toMatchSnapshot();
+        const nav = page.body.querySelector("wm-navigator");
+        const items = nav.shadowRoot.querySelectorAll("priv-navigator-item");
+        expect(items.length).toBe(7);
+        items.forEach((i) => {
+            expect(i.id).not.toBeNull();
+            expect(i.onClick).not.toBeNull();
+        });
+    });
+    it("camel cases product keys", async () => {
+        const nav = new Navigator();
+        expect(nav.productKeysToCamelCase([
+            {
+                description: "desc1",
+                icon_url: "url1",
+                id: "id1",
+                link_url: "url1",
+                name: "name1",
+            },
+            {
+                description: "desc2",
+                icon_url: "url2",
+                id: "id2",
+                link_url: "url2",
+                name: "name2",
+            },
+            {
+                description: "desc3",
+                icon_url: "url3",
+                id: "id3",
+                link_url: "url3",
+                name: "name3",
+            },
+        ])).toStrictEqual([
+            {
+                description: "desc1",
+                iconUrl: "url1",
+                id: "id1",
+                linkUrl: "url1",
+                name: "name1",
+            },
+            {
+                description: "desc2",
+                iconUrl: "url2",
+                id: "id2",
+                linkUrl: "url2",
+                name: "name2",
+            },
+            {
+                description: "desc3",
+                iconUrl: "url3",
+                id: "id3",
+                linkUrl: "url3",
+                name: "name3",
+            },
+        ]);
+    });
+});