@triptease/tt-navbar 0.1.0 → 0.1.2

package/test/tt-navbar.test.ts

@@ -1,441 +0,0 @@
-import '../src/tt-navbar.js';
-import { elementUpdated, expect, fixture, nextFrame, waitUntil } from '@open-wc/testing';
-import { TtOption } from '@triptease/tt-combobox/tt-option.js';
-import { Config, getInitialNavbarState, TtNavbar } from '../src/index.js';
-import { Routes } from '../src/Routes.js';
-
-const getLinkByHref = (links: NodeListOf<HTMLAnchorElement>, href: string) => {
-  for (const link of links) {
-    if (link.getAttribute('href') === href) {
-      return link;
-    }
-  }
-
-  return undefined;
-};
-
-const selectComboboxOption = async (combobox: Element, value: string) => {
-  const input = combobox.shadowRoot!.querySelector('[role="combobox"]') as HTMLInputElement;
-  input.click();
-
-  await elementUpdated(combobox);
-
-  const option = combobox.shadowRoot!.querySelector(`tt-option[value="${value}"]`) as TtOption;
-  option.click();
-};
-
-const isVisuallyHidden = (element: Element) => {
-  const style = getComputedStyle(element);
-
-  return Boolean(
-    style.position === 'absolute' &&
-      style.width === '1px' &&
-      style.height === '1px' &&
-      style.margin === '-1px' &&
-      style.padding === '0px' &&
-      style.borderWidth === '0px' &&
-      style.overflow === 'hidden' &&
-      style.clip === 'rect(0px, 0px, 0px, 0px)' &&
-      style.clipPath === 'inset(50%)' &&
-      style.whiteSpace === 'nowrap'
-  );
-};
-
-const CLIENT_KEY = 'zxd47KQGAP';
-
-describe('TtNavbar', () => {
-  it('should throw an error if the clientKey is not provided', async () => {
-    try {
-      await fixture<TtNavbar>(`<tt-navbar></tt-navbar>`);
-    } catch (e) {
-      expect(e).to.match(/clientKey is required/);
-    }
-  });
-  it('should render with the default links', async () => {
-    const navbar = await fixture<TtNavbar>(`<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`);
-    const links = navbar.shadowRoot?.querySelectorAll('a');
-
-    if (links) {
-      expect(getLinkByHref(links, '/')).to.exist;
-      expect(getLinkByHref(links, 'https://app.campaign-manager.triptease.io')).to.exist;
-      expect(getLinkByHref(links, `/${CLIENT_KEY}/channels`)).to.exist;
-      expect(getLinkByHref(links, `/parity/${CLIENT_KEY}`)).to.exist;
-      expect(getLinkByHref(links, `/${CLIENT_KEY}/guest-insights`)).to.exist;
-      expect(getLinkByHref(links, `/${CLIENT_KEY}/guest-behavioural-data`)).to.exist;
-      expect(getLinkByHref(links, `/${CLIENT_KEY}/crm-config`)).to.exist;
-      expect(getLinkByHref(links, `/${CLIENT_KEY}/settings/guides`)).to.exist;
-      expect(getLinkByHref(links, `/${CLIENT_KEY}/settings/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, `/subscriptions/${CLIENT_KEY}`)).to.exist;
-    }
-  });
-
-  it('should render platform URLs against the base URL when it is defined', async () => {
-    const platformUrl = 'https://app.triptease.io';
-    const navbar = await fixture<TtNavbar>(
-      `<tt-navbar client-key=${CLIENT_KEY} platform-url="${platformUrl}"></tt-navbar>`
-    );
-    const links = navbar.shadowRoot?.querySelectorAll('a');
-
-    if (links) {
-      expect(getLinkByHref(links, `${platformUrl}/`)).to.exist;
-      expect(getLinkByHref(links, 'https://app.campaign-manager.triptease.io')).to.exist; // This shouldn't change
-      expect(getLinkByHref(links, `${platformUrl}/${CLIENT_KEY}/channels`)).to.exist;
-    }
-  });
-
-  it.skip('should allow navigation events to be handled externally', async () => {
-    let navigateEventCount = 0;
-
-    const onNavigate = (e: MouseEvent) => {
-      e.preventDefault();
-      navigateEventCount += 1;
-    };
-
-    const navbar = await fixture<TtNavbar>(`<tt-navbar client-key=${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(13), 'navigate event did not fire');
-  });
-
-  it('should render a combobox when multiple clients are provided', async () => {
-    const navbar = await fixture<TtNavbar>(`<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`);
-    navbar.clients = [
-      { clientKey: CLIENT_KEY, displayName: 'Client One' },
-      { clientKey: 'abc123', displayName: 'Client Two' },
-    ];
-    await navbar.updateComplete;
-
-    const combobox = navbar.shadowRoot?.querySelector('tt-combobox');
-    const singleClientName = navbar.shadowRoot?.querySelector('.single-client-name');
-
-    expect(combobox).to.exist;
-    expect(singleClientName).to.not.exist;
-    expect(combobox?.value).to.deep.equal([CLIENT_KEY]);
-  });
-
-  it('should render the client name when only one client is provided', async () => {
-    const navbar = await fixture<TtNavbar>(`<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`);
-    navbar.clients = [{ clientKey: CLIENT_KEY, displayName: 'Single Client' }];
-    await navbar.updateComplete;
-
-    const singleClientName = navbar.shadowRoot?.querySelector('.single-client-name');
-    const combobox = navbar.shadowRoot?.querySelector('tt-combobox');
-
-    expect(singleClientName).to.exist;
-    expect(singleClientName?.textContent?.trim()).to.equal('Single Client');
-    expect(combobox).to.not.exist;
-  });
-
-  it('should render the logout link', async () => {
-    const navbar = await fixture<TtNavbar>(`<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`);
-
-    const links = navbar.shadowRoot?.querySelectorAll('a');
-    const logoutLink = getLinkByHref(links!, '/logout');
-
-    expect(logoutLink).to.exist;
-  });
-
-  it('should close other details when one is being opened', async () => {
-    const navbar = await fixture<TtNavbar>(`<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`);
-
-    const allDetails = navbar.shadowRoot!.querySelectorAll('summary');
-    const [marketInsights, settings] = allDetails;
-
-    marketInsights.click();
-    /*
-     * Wait for the DOM to update before continuing. This is necessary because helpers like elementUpdated don't wait for
-     * the browser to fire the $toggle handler as well as adding the open attribute.
-     */
-    await nextFrame();
-    await nextFrame();
-
-    expect(marketInsights.closest('details')?.open).to.be.true;
-
-    settings.click();
-    await nextFrame();
-    await nextFrame();
-
-    expect(settings.closest('details')?.open).to.be.true;
-    expect(marketInsights.closest('details')?.open).to.be.false;
-  });
-
-  it('should collapse the navbar when toggle clicked', async () => {
-    const navbar = await fixture<TtNavbar>(`<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`);
-
-    const navbarToggleBtn = navbar.shadowRoot!.querySelector('#navbar-toggle-btn') as HTMLButtonElement;
-
-    navbarToggleBtn.click();
-    await elementUpdated(navbar);
-
-    const logo = navbar.shadowRoot!.querySelector('.logo');
-    const rootLinksHiddenElements = navbar.shadowRoot!.querySelectorAll('nav a span');
-    const summaryHiddenElements = navbar.shadowRoot!.querySelectorAll('nav summary span');
-    const externalLinks = navbar.shadowRoot!.querySelectorAll('#external-links a');
-    const logoutLink = navbar.shadowRoot!.querySelector('#logout-link span');
-    const clientSelector = navbar.shadowRoot!.querySelector('#client-selector');
-
-    // Visually and accessibly hidden
-    expect(logo?.checkVisibility()).to.be.false;
-    expect(clientSelector?.checkVisibility()).to.be.false;
-    for (const link of externalLinks) {
-      expect(link.checkVisibility()).to.be.false;
-    }
-
-    // Visually hidden only
-    expect(logoutLink).to.exist;
-    expect(rootLinksHiddenElements.length).to.be.greaterThan(1);
-    expect(summaryHiddenElements.length).to.be.greaterThan(1);
-    for (const element of [...rootLinksHiddenElements, ...summaryHiddenElements, logoutLink!]) {
-      expect(isVisuallyHidden(element)).to.be.true;
-    }
-  });
-
-  const collapsibleIds: string[] = ['market-insights', 'settings', 'account', 'billing-routes'];
-  collapsibleIds.forEach((id) => {
-    it(`should open the nav bar when the ${id} collapsible is clicked`, async () => {
-      const navbar = await fixture<TtNavbar>(`<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`);
-
-      const navbarToggleBtn = navbar.shadowRoot!.querySelector('#navbar-toggle-btn') as HTMLButtonElement;
-
-      navbarToggleBtn.click();
-      await elementUpdated(navbar);
-
-      const logo = navbar.shadowRoot!.querySelector('.logo');
-      expect(logo?.checkVisibility()).to.be.false;
-
-      const element: HTMLDetailsElement | null = navbar.shadowRoot!.querySelector(`#${id} summary`);
-
-      expect(element).to.exist;
-
-      element!.click();
-
-      await waitUntil(() => logo?.checkVisibility(), 'navbar should be open', {
-        timeout: 500,
-      });
-    });
-  });
-
-  const URLs = [
-    ['/', 'Dashboard'],
-    [`/${CLIENT_KEY}/channels`, 'Channels'],
-    [`/parity/${CLIENT_KEY}`, 'Parity'],
-    [`/parity/${CLIENT_KEY}/foo`, 'Parity'],
-
-    [`/paidsearch/${CLIENT_KEY}/performance`, 'Channels'],
-    [`/meta/${CLIENT_KEY}/performance`, 'Channels'],
-    [`/retargeting/${CLIENT_KEY}/performance`, 'Channels'],
-    [`/retargeting/${CLIENT_KEY}/ad-config`, 'Channels'],
-    [`/messages/${CLIENT_KEY}/messages`, 'Channels'],
-    [`/messages/${CLIENT_KEY}/messages/wizard`, 'Channels'],
-    [`/messages/${CLIENT_KEY}/messages/type`, 'Channels'],
-    [`/messages/${CLIENT_KEY}/messages/notifications`, 'Channels'],
-    [`/messages/${CLIENT_KEY}/messages/templates/nudge`, 'Channels'],
-    [`/${CLIENT_KEY}/email`, 'Channels'],
-    [`/pricematch/${CLIENT_KEY}/performance`, 'Channels'],
-    [`/chat/insights/${CLIENT_KEY}`, 'Channels'],
-    [`/messages/${CLIENT_KEY}/messages/new/save-the-search`, 'Channels'],
-
-    [`/${CLIENT_KEY}/meta/performance`, 'Channels'],
-    [`/${CLIENT_KEY}/paidsearch/performance`, 'Channels'],
-    [`/${CLIENT_KEY}/retargeting/performance`, 'Channels'],
-    [`/${CLIENT_KEY}/messages/messages`, 'Channels'],
-    [`/${CLIENT_KEY}/pricematch/performance`, 'Channels'],
-
-    [`/${CLIENT_KEY}/guest-insights`, 'Guest insights'],
-    [`/${CLIENT_KEY}/parity`, 'Parity'],
-
-    [`/settings/${CLIENT_KEY}/guides`, 'Group settings'],
-    [`/settings/${CLIENT_KEY}/branding`, 'Group settings'],
-    [`/settings/${CLIENT_KEY}/price-check`, 'Group settings'],
-    [`/settings/${CLIENT_KEY}/price-config`, 'Group settings'],
-    [`/settings/${CLIENT_KEY}/hotel-details-finder`, 'Group settings'],
-    [`/settings/${CLIENT_KEY}/deactivation-center`, 'Group settings'],
-    [`/${CLIENT_KEY}/settings/guides`, 'Group settings'],
-    [`/${CLIENT_KEY}/settings/branding`, 'Group settings'],
-    [`/${CLIENT_KEY}/settings/price-check`, 'Group settings'],
-    [`/${CLIENT_KEY}/settings/price-config`, 'Group settings'],
-    [`/${CLIENT_KEY}/settings/hotel-details-finder`, 'Group settings'],
-    [`/${CLIENT_KEY}/settings/deactivation-center`, 'Group settings'],
-
-    [`/${CLIENT_KEY}/settings/hotels`, 'Property settings'],
-
-    [`/account/team/${CLIENT_KEY}`, 'Team and permissions'],
-    [`/account/billing-management/${CLIENT_KEY}`, 'Booking reconciliation'],
-    [`/subscriptions/${CLIENT_KEY}`, 'Subscriptions'],
-
-    [`/${CLIENT_KEY}/account/team`, 'Team and permissions'],
-    [`/${CLIENT_KEY}/account/billing-management`, 'Booking reconciliation'],
-    [`/${CLIENT_KEY}/subscriptions`, 'Subscriptions'],
-  ];
-
-  URLs.forEach(([route, text]) => {
-    it(`should show the current page as active when link is ${route}`, async () => {
-      history.pushState({}, '', route); // 👈 mock URL
-
-      const navbar = await fixture<TtNavbar>(`<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`);
-
-      const anchor = navbar.shadowRoot!.querySelector('a[aria-current="page"]');
-
-      expect(anchor).to.exist;
-      expect(anchor!.textContent).to.include(text);
-    });
-  });
-
-  it('should show the current page as campaign manager when on the given campaign manager url', async () => {
-    const platformUrl = 'https://app.triptease.io';
-    const campaignManagerUrl = 'http://localhost:8000';
-
-    const navbar = await fixture<TtNavbar>(
-      `<tt-navbar client-key=${CLIENT_KEY} platform-url=${platformUrl} campaign-manager-url=${campaignManagerUrl} active-route="${Routes.CampaignManager}"></tt-navbar>`
-    );
-    const anchor = navbar.shadowRoot!.querySelector('a[aria-current="page"]');
-    expect(anchor).to.exist;
-    expect(anchor!.textContent).to.include('Campaigns');
-  });
-
-  it('should fire an event when the client is changed', async () => {
-    let selectedClientKey: string | undefined;
-    const onClientChange = (clientKey: string) => {
-      selectedClientKey = clientKey;
-    };
-
-    const navbar = await fixture<TtNavbar>(`<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`);
-    navbar.clients = [
-      { clientKey: CLIENT_KEY, displayName: 'Client One' },
-      { clientKey: 'abc123', displayName: 'Client Two' },
-    ];
-    navbar.onClientChange = onClientChange;
-
-    await navbar.updateComplete;
-
-    const combobox = navbar.shadowRoot?.querySelector('tt-combobox');
-    expect(combobox).to.exist;
-
-    await selectComboboxOption(combobox!, 'abc123');
-
-    expect(selectedClientKey).to.equal('abc123');
-  });
-
-  it('should set the --nav-bar-width css variable when collapsed', async () => {
-    const navbar = await fixture<TtNavbar>(`<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`);
-
-    await expect(getComputedStyle(navbar).getPropertyValue('--nav-bar-width').trim()).to.equal('260px');
-
-    const navbarToggleBtn = navbar.shadowRoot!.querySelector('#navbar-toggle-btn') as HTMLButtonElement;
-
-    navbarToggleBtn.click();
-    await elementUpdated(navbar);
-
-    await expect(getComputedStyle(navbar).getPropertyValue('--nav-bar-width').trim()).to.equal('fit-content');
-  });
-
-  it('should expand the details when the current page is within that section', async () => {
-    history.pushState({}, '', `/parity/${CLIENT_KEY}`);
-
-    const navbar = await fixture<TtNavbar>(`<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`);
-
-    const marketInsightsDetails = navbar.shadowRoot!.querySelector('#market-insights') as HTMLDetailsElement;
-
-    expect(marketInsightsDetails).to.exist;
-    expect(marketInsightsDetails.open).to.be.true;
-  });
-
-  it('should set the active route when receives `tetris:navigate` event', async () => {
-    const navbar = await fixture<TtNavbar>(`<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`);
-
-    history.pushState({}, '', `/account/billing-management/${CLIENT_KEY}`);
-
-    // Dispatch the event to change to Channels route
-    const navigateEvent = new CustomEvent('tetris:navigate', {});
-    window.dispatchEvent(navigateEvent);
-
-    await elementUpdated(navbar);
-    const anchor = navbar.shadowRoot!.querySelector('a[aria-current="page"]');
-
-    expect(anchor).to.exist;
-    expect(anchor!.textContent).to.include('Booking reconciliation');
-  });
-
-  it("should default to 'open' when the 'initial-state' attribute is not provided", async () => {
-    const navbar = await fixture<TtNavbar>(`<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`);
-
-    const logo = navbar.shadowRoot!.querySelector('.logo');
-
-    expect(logo).to.exist;
-    expect(logo!.checkVisibility()).to.be.true;
-  });
-
-  it("should default to 'open' when the 'initial-state' attribute is 'open", async () => {
-    const navbar = await fixture<TtNavbar>(
-      `<tt-navbar client-key=${CLIENT_KEY} initial-state=${Config.NavbarStateCookieOpenValue}></tt-navbar>`
-    );
-
-    const logo = navbar.shadowRoot!.querySelector('.logo');
-
-    expect(logo).to.exist;
-    expect(logo!.checkVisibility()).to.be.true;
-  });
-
-  it("should default to 'closed' when the 'initial-state' attribute is 'closed", async () => {
-    const navbar = await fixture<TtNavbar>(
-      `<tt-navbar client-key=${CLIENT_KEY} initial-state=${Config.NavbarStateCookieClosedValue}></tt-navbar>`
-    );
-
-    const logo = navbar.shadowRoot!.querySelector('.logo');
-
-    expect(logo).to.exist;
-    expect(logo!.checkVisibility()).to.be.false;
-  });
-
-  it('should create cookie containing navbar state onToggle if it is missing', async () => {
-    document.cookie = `${Config.NavbarStateCookieName}=; max-age=0; path=/;`;
-    const startingCookieValue = getInitialNavbarState();
-
-    expect(startingCookieValue).to.be.undefined;
-
-    const navbar = await fixture<TtNavbar>(`<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`);
-    const navbarToggleBtn = navbar.shadowRoot!.querySelector('#navbar-toggle-btn') as HTMLButtonElement;
-
-    navbarToggleBtn.click();
-    await elementUpdated(navbar);
-
-    const newState = getInitialNavbarState();
-
-    await expect(newState).to.equal(Config.NavbarStateCookieClosedValue);
-  });
-
-  it('should update the cookie value when navbar is expanded', async () => {
-    const navbar = await fixture<TtNavbar>(
-      `<tt-navbar client-key=${CLIENT_KEY} initial-state=${Config.NavbarStateCookieClosedValue}></tt-navbar>`
-    );
-    const navbarToggleBtn = navbar.shadowRoot!.querySelector('#navbar-toggle-btn') as HTMLButtonElement;
-
-    navbarToggleBtn.click();
-    await elementUpdated(navbar);
-
-    const newState = getInitialNavbarState();
-
-    await expect(newState).to.equal(Config.NavbarStateCookieOpenValue);
-  });
-
-  it('should update the cookie value when navbar is collapsed', async () => {
-    const navbar = await fixture<TtNavbar>(
-      `<tt-navbar client-key=${CLIENT_KEY} initial-state=${Config.NavbarStateCookieOpenValue}></tt-navbar>`
-    );
-    const navbarToggleBtn = navbar.shadowRoot!.querySelector('#navbar-toggle-btn') as HTMLButtonElement;
-
-    navbarToggleBtn.click();
-    await elementUpdated(navbar);
-
-    const newState = getInitialNavbarState();
-
-    await expect(newState).to.equal(Config.NavbarStateCookieClosedValue);
-  });
-});

package/tsconfig.cjs.json

@@ -1,9 +0,0 @@
-{
-  "extends": "../../tsconfig.packages.cjs.json",
-  "compilerOptions": {
-    "rootDir": "./",
-    "outDir": "dist/cjs"
-  },
-  "include": ["src/**/*.ts"],
-  "exclude": ["node_modules", "dist"]
-}

package/tsconfig.json

@@ -1,9 +0,0 @@
-{
-  "extends": "../../tsconfig.packages.esm.json",
-  "compilerOptions": {
-    "rootDir": "./",
-    "outDir": "dist/esm"
-  },
-  "include": ["src/**/*.ts", "test/**/*.ts"],
-  "exclude": ["node_modules", "dist"]
-}

package/web-dev-server.config.js

@@ -1,27 +0,0 @@
-// import { hmrPlugin, presets } from '@open-wc/dev-server-hmr';
-
-/** Use Hot Module replacement by adding --hmr to the start command */
-const hmr = process.argv.includes('--hmr');
-
-export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
-  open: '/demo/',
-  /** Use regular watch mode if HMR is not enabled. */
-  watch: !hmr,
-  /** Resolve bare module imports */
-  nodeResolve: {
-    exportConditions: ['browser', 'development'],
-  },
-
-  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
-  // esbuildTarget: 'auto'
-
-  /** Set appIndex to enable SPA routing */
-  // appIndex: 'demo/index.html',
-
-  plugins: [
-    /** Use Hot Module Replacement by uncommenting. Requires @open-wc/dev-server-hmr plugin */
-    // hmr && hmrPlugin({ exclude: ['**/*/node_modules/**/*'], presets: [presets.lit] }),
-  ],
-
-  // See documentation for all available options
-});

package/web-test-runner.config.js

@@ -1,41 +0,0 @@
-// import { playwrightLauncher } from '@web/test-runner-playwright';
-
-const filteredLogs = ['Running in dev mode', 'Lit is in dev mode'];
-
-export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
-  /** Test files to run */
-  files: 'dist/esm/test/**/*.test.js',
-
-  /** Resolve bare module imports */
-  nodeResolve: {
-    exportConditions: ['browser', 'development'],
-  },
-
-  /** Filter out lit dev mode logs */
-  filterBrowserLogs(log) {
-    for (const arg of log.args) {
-      if (typeof arg === 'string' && filteredLogs.some((l) => arg.includes(l))) {
-        return false;
-      }
-    }
-    return true;
-  },
-
-  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
-  // esbuildTarget: 'auto',
-
-  /** Amount of browsers to run concurrently */
-  // concurrentBrowsers: 2,
-
-  /** Amount of test files per browser to test concurrently */
-  // concurrency: 1,
-
-  /** Browsers to run tests on */
-  // browsers: [
-  //   playwrightLauncher({ product: 'chromium' }),
-  //   playwrightLauncher({ product: 'firefox' }),
-  //   playwrightLauncher({ product: 'webkit' }),
-  // ],
-
-  // See documentation for all available options
-});