@triptease/tt-navbar 0.0.5 → 0.0.6

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent tt-navbar following open-wc recommendations",
   "license": "MIT",
   "author": "tt-navbar",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "type": "module",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",

package/src/TtNavbar.ts

@@ -106,6 +106,7 @@ export class TtNavbar extends LitElement {
             >
           </div>
         </details>
+        <slot name="clientSelector"></slot>
       </nav>
     `;
   }

package/stories/index.stories.ts

@@ -12,6 +12,9 @@ export default {
 const Template = () => html`
   <div>
     <tt-navbar clientKey="zxd47KQGAP">
+      <div slot="clientSelector">
+        <p>My Cool Client Selector</p>
+      </div>
     </tt-navbar>
   </div>
 

package/test/tt-navbar.test.ts

@@ -3,59 +3,65 @@ import { expect, fixture, waitUntil } from '@open-wc/testing';
 import { TtNavbar } from '../src/index.js';
 
 // eslint-disable-next-line no-undef
-const getLinkByHref = (links:   NodeListOf<HTMLAnchorElement> , href: string)=> {
-  for(const link of links) {
-    if(link.getAttribute('href') === href) {
+const getLinkByHref = (links: NodeListOf<HTMLAnchorElement>, href: string) => {
+  for (const link of links) {
+    if (link.getAttribute('href') === href) {
       return link;
     }
   }
 
-  return undefined
-}
+  return undefined;
+};
 
 const CLIENT_KEY = 'zxd47KQGAP';
 
 describe('TtNavbar', () => {
-
-  it("should throw an error if the clientKey is not provided", async () => {
+  it('should throw an error if the clientKey is not provided', async () => {
     try {
       await fixture<TtNavbar>(`<tt-navbar></tt-navbar>`);
-    } catch(e) {
+    } catch (e) {
       expect(e).to.match(/clientKey is required/);
     }
-  })
+  });
   it('should render with the default links', async () => {
-    const navbar = await fixture<TtNavbar>(`<tt-navbar clientKey=${CLIENT_KEY}></tt-navbar>`);
+    const navbar = await fixture<TtNavbar>(
+      `<tt-navbar clientKey=${CLIENT_KEY}></tt-navbar>`,
+    );
     const links = navbar.shadowRoot?.querySelectorAll('a');
 
     expect(links?.length).to.equal(13);
 
-    if(links) {
+    if (links) {
       expect(getLinkByHref(links, '/')).to.exist;
-      expect(getLinkByHref(links, 'https://app.campaign-manager.triptease.io')).to.exist;
+      expect(getLinkByHref(links, 'https://app.campaign-manager.triptease.io'))
+        .to.exist;
       expect(getLinkByHref(links, '/channels')).to.exist;
       expect(getLinkByHref(links, `/parity/${CLIENT_KEY}`)).to.exist;
       expect(getLinkByHref(links, `/guest-insights/${CLIENT_KEY}`)).to.exist;
-      expect(getLinkByHref(links, `/${CLIENT_KEY}/guest-behavioural-data`)).to.exist;
+      expect(getLinkByHref(links, `/${CLIENT_KEY}/guest-behavioural-data`)).to
+        .exist;
       expect(getLinkByHref(links, `/${CLIENT_KEY}/crm-config`)).to.exist;
       expect(getLinkByHref(links, `/settings/group`)).to.exist;
       expect(getLinkByHref(links, `/settings/${CLIENT_KEY}/hotels/`)).to.exist;
       expect(getLinkByHref(links, `/account`)).to.exist;
       expect(getLinkByHref(links, `/account/team/${CLIENT_KEY}`)).to.exist;
-      expect(getLinkByHref(links, `/account/billing-management/${CLIENT_KEY}`)).to.exist;
+      expect(getLinkByHref(links, `/account/billing-management/${CLIENT_KEY}`))
+        .to.exist;
       expect(getLinkByHref(links, `/subscriptions/${CLIENT_KEY}`)).to.exist;
     }
-
   });
 
   it('should render platform URLs against the base URL when it is defined', async () => {
     const baseUrl = 'https://app.triptease.io';
-    const navbar = await fixture<TtNavbar>(`<tt-navbar clientKey=${CLIENT_KEY} baseUrl="${baseUrl}"></tt-navbar>`);
+    const navbar = await fixture<TtNavbar>(
+      `<tt-navbar clientKey=${CLIENT_KEY} baseUrl="${baseUrl}"></tt-navbar>`,
+    );
     const links = navbar.shadowRoot?.querySelectorAll('a');
 
-    if(links) {
+    if (links) {
       expect(getLinkByHref(links, `${baseUrl}/`)).to.exist;
-      expect(getLinkByHref(links, 'https://app.campaign-manager.triptease.io')).to.exist; // This shouldn't change
+      expect(getLinkByHref(links, 'https://app.campaign-manager.triptease.io'))
+        .to.exist; // This shouldn't change
       expect(getLinkByHref(links, `${baseUrl}/channels`)).to.exist;
     }
   });
@@ -66,15 +72,30 @@ describe('TtNavbar', () => {
     const onNavigate = (e: MouseEvent) => {
       e.preventDefault();
       navigateEventCount += 1;
-    }
+    };
 
-    const navbar = await fixture<TtNavbar>(`<tt-navbar clientKey=${CLIENT_KEY}></tt-navbar>`);
+    const navbar = await fixture<TtNavbar>(
+      `<tt-navbar clientKey=${CLIENT_KEY}></tt-navbar>`,
+    );
     navbar.navigate = onNavigate;
     await navbar.updateComplete;
 
     const links = navbar.shadowRoot?.querySelectorAll('a');
     links?.forEach(l => l.click());
 
-    await waitUntil(() => expect(navigateEventCount).to.equal(12), 'navigate event did not fire');
+    await waitUntil(
+      () => expect(navigateEventCount).to.equal(12),
+      'navigate event did not fire',
+    );
+  });
+
+  it('should render the given client selector', async () => {
+    const navbar = await fixture<TtNavbar>(
+      `<tt-navbar clientKey=${CLIENT_KEY}><div slot="clientSelector"><div id="myCoolClientSelector"></div></div></tt-navbar>`,
+    );
+
+    const clientSelector = navbar.querySelector('#myCoolClientSelector');
+
+    expect(clientSelector).to.exist;
   });
 });