@internetarchive/ia-topnav 0.0.0-webdev7666-1

package/test/ia-topnav.test.ts

@@ -0,0 +1,343 @@
+import {
+  html,
+  fixture,
+  expect,
+  oneEvent,
+  fixtureCleanup,
+  elementUpdated,
+} from '@open-wc/testing';
+
+import '../src/ia-topnav';
+import { IATopNav } from '../src/ia-topnav';
+import { SearchMenu } from '../src/search-menu';
+import { SignedOutDropdown } from '../src/signed-out-dropdown';
+import UserMenu from '../src/user-menu';
+
+// const container = (
+//   {
+//     username = '',
+//     screenName = '',
+//     config = {},
+//     localLinks = true,
+//     secondIdentitySlotMode = '',
+//   }: {
+//     username?: string;
+//     screenName?: string;
+//     config?: IATopNavConfig;
+//     localLinks: boolean;
+//     secondIdentitySlotMode?: IATopNavSecondIdentitySlotMode;
+//   } = {
+//     localLinks: true,
+//   },
+// ) =>
+//   html`<ia-topnav
+//     .screenName=${screenName}
+//     username=${username}
+//     ?localLinks=${localLinks}
+//     .config=${config}
+//     .secondIdentitySlotMode=${secondIdentitySlotMode}
+//   ></ia-topnav>`;
+
+const verifyClosed = (instance: IATopNav) => {
+  expect(instance.mediaSliderOpen).to.be.false;
+  expect(instance.selectedMenuOption).to.equal('');
+};
+
+const verifyOpened = (instance: IATopNav, mediatype: string) => {
+  expect(instance.mediaSliderOpen).to.be.true;
+  expect(instance.selectedMenuOption).to.equal(mediatype);
+};
+
+afterEach(() => {
+  fixtureCleanup();
+});
+
+describe('<ia-topnav>', () => {
+  it('assigns a value to "search in" from outside event', async () => {
+    const el = await fixture<IATopNav>(html` <ia-topnav></ia-topnav>`);
+    const query = 'atari';
+    const searchMenu = el.shadowRoot?.querySelector(
+      'search-menu',
+    ) as SearchMenu;
+
+    const inputEvent = new InputEvent('input');
+    Object.defineProperty(inputEvent, 'target', {
+      value: { value: query },
+      writable: false,
+    });
+
+    searchMenu?.searchInChanged(inputEvent);
+    await el.updateComplete;
+
+    expect(el.searchIn).to.equal(query);
+  });
+
+  it('dispatches an analyticsClick event when trackClick event fired', async () => {
+    const el = await fixture<IATopNav>(html` <ia-topnav></ia-topnav>`);
+    const clickEvent = new MouseEvent('click');
+
+    setTimeout(() =>
+      el.shadowRoot
+        ?.querySelector('primary-nav')
+        ?.shadowRoot?.querySelector('.hamburger')
+        ?.dispatchEvent(clickEvent),
+    );
+    const response = await oneEvent(el, 'trackClick');
+
+    expect(response).to.exist;
+  });
+
+  it('dispatches an analyticsSubmit event when trackSubmit event fired', async () => {
+    const el = await fixture<IATopNav>(html` <ia-topnav></ia-topnav>`);
+    const submitEvent = new Event('submit');
+    const form = el.shadowRoot
+      ?.querySelector('primary-nav')
+      ?.shadowRoot?.querySelector('nav-search')
+      ?.shadowRoot?.querySelector('form');
+
+    form?.addEventListener('submit', (e) => e.preventDefault());
+    (form?.querySelector('[name=query]') as HTMLInputElement).value = 'atari';
+    setTimeout(() => form?.dispatchEvent(submitEvent));
+    const response = await oneEvent(el, 'trackSubmit');
+
+    expect(response).to.exist;
+  });
+
+  it('closes all menus when close-layer clicked', async () => {
+    const el = await fixture<IATopNav>(html` <ia-topnav></ia-topnav>`);
+
+    el.openMenu = 'media';
+    el.selectedMenuOption = 'texts';
+    el.mediaSliderOpen = true;
+    await el.updateComplete;
+    el.closeMenus();
+    await el.updateComplete;
+
+    expect(el.mediaSliderOpen).to.be.false;
+    expect(el.openMenu).to.equal('');
+    expect(el.selectedMenuOption).to.equal('');
+  });
+
+  it('sets media slider to closed', async () => {
+    const el = await fixture<IATopNav>(html` <ia-topnav></ia-topnav>`);
+
+    el.mediaSliderOpen = true;
+    el.selectedMenuOption = 'foo';
+    el.closeMediaSlider();
+
+    verifyClosed(el);
+  });
+
+  it('toggles media slider visibility and starts animation', async () => {
+    const el = await fixture<IATopNav>(html` <ia-topnav></ia-topnav>`);
+    const mediatype = 'foo';
+
+    el.selectedMenuOption = mediatype;
+    el.openMediaSlider();
+
+    verifyOpened(el, mediatype);
+  });
+
+  it('closes media slider if selected menu type is the open menu type', async () => {
+    const el = await fixture<IATopNav>(html` <ia-topnav></ia-topnav>`);
+    const mediatype = 'foo';
+
+    el.selectedMenuOption = mediatype;
+
+    const event = new CustomEvent('mediaTypeSelected', {
+      detail: {
+        mediatype,
+      },
+    });
+
+    el.mediaTypeSelected(event);
+
+    verifyClosed(el);
+  });
+
+  it('opens media slider menu and starts animation', async () => {
+    const el = await fixture<IATopNav>(html` <ia-topnav></ia-topnav>`);
+    const mediatype = 'foo';
+
+    const event = new CustomEvent('mediaTypeSelected', {
+      detail: {
+        mediatype,
+      },
+    });
+
+    el.mediaTypeSelected(event);
+
+    verifyOpened(el, mediatype);
+  });
+
+  it('closes slider when menu closed', async () => {
+    const el = await fixture<IATopNav>(html` <ia-topnav></ia-topnav>`);
+
+    el.openMenu = 'media';
+    el.selectedMenuOption = 'foo';
+    el.mediaSliderOpen = true;
+    await el.updateComplete;
+
+    const event = new CustomEvent('menuToggled', {
+      detail: {
+        menuName: '',
+      },
+    });
+
+    el.menuToggled(event);
+    await el.updateComplete;
+
+    expect(el.selectedMenuOption).to.equal('');
+  });
+
+  it('toggles search menu tabindex when dropdown open', async () => {
+    const el = await fixture<IATopNav>(html` <ia-topnav></ia-topnav>`);
+
+    el.openMenu = 'search';
+    await el.updateComplete;
+
+    expect(
+      el.shadowRoot?.querySelector('search-menu')?.getAttribute('tabindex'),
+    ).to.equal('');
+  });
+
+  it('toggles user menu tabindex when dropdown open', async () => {
+    const el = await fixture<IATopNav>(
+      html` <ia-topnav username="shaneriley" ?localLinks=${false}></ia-topnav>`,
+    );
+
+    el.openMenu = 'user';
+    await el.updateComplete;
+
+    expect(
+      el.shadowRoot?.querySelector('user-menu')?.getAttribute('tabindex'),
+    ).to.equal('');
+  });
+
+  it('toggles signed out menu tabindex when dropdown open', async () => {
+    const el = await fixture<IATopNav>(html` <ia-topnav></ia-topnav>`);
+
+    el.openMenu = 'login';
+    await el.updateComplete;
+
+    expect(
+      el.shadowRoot
+        ?.querySelector('signed-out-dropdown')
+        ?.getAttribute('tabindex'),
+    ).to.equal('');
+  });
+
+  it('toggles search menu when search toggle button clicked', async () => {
+    const el = await fixture<IATopNav>(html` <ia-topnav></ia-topnav>`);
+    (
+      el.shadowRoot
+        ?.querySelector('primary-nav')
+        ?.shadowRoot?.querySelector('.search-trigger') as HTMLButtonElement
+    ).click();
+    await el.updateComplete;
+
+    expect(el.openMenu).to.equal('search');
+  });
+
+  it('toggles user menu when search user avatar clicked', async () => {
+    const el = await fixture<IATopNav>(
+      html` <ia-topnav
+        username="shaneriley"
+        screenName="shaneriley"
+        ?localLinks=${false}
+      ></ia-topnav>`,
+      // container({
+      //   username: 'shaneriley',
+      //   screenName: 'shaneriley',
+      //   localLinks: false,
+      // }),
+    );
+
+    (
+      el.shadowRoot
+        ?.querySelector('primary-nav')
+        ?.shadowRoot?.querySelector('.user-menu') as HTMLButtonElement
+    ).click();
+    await el.updateComplete;
+
+    expect(el.openMenu).to.equal('user');
+  });
+
+  it('uses localLinks for archive.org logo link', async () => {
+    const el = await fixture<IATopNav>(
+      html` <ia-topnav ?localLinks=${false}></ia-topnav>`,
+    );
+    const logoLink = el.shadowRoot
+      ?.querySelector('primary-nav')
+      ?.shadowRoot?.querySelector('.link-home');
+    expect(logoLink?.getAttribute('href')).to.match(/\/\/archive\.org/);
+  });
+
+  describe('sets localLinks properly', async () => {
+    it('uses localLinks to archive.org links on common child components', async () => {
+      const el = await fixture<IATopNav>(
+        html` <ia-topnav ?localLinks=${false}></ia-topnav>`,
+      );
+      const componentSelectors = [
+        'primary-nav',
+        'media-slider',
+        'desktop-subnav',
+        'search-menu',
+      ];
+      componentSelectors.forEach((selector) => {
+        const component = el.shadowRoot?.querySelector(selector) as unknown as {
+          baseHost: string;
+        };
+        expect(component?.baseHost).to.equal('https://archive.org');
+      });
+    });
+
+    it('uses localLinks to archive.org links on the signed out dropdown', async () => {
+      const el = await fixture<IATopNav>(
+        html` <ia-topnav ?localLinks=${false}></ia-topnav>`,
+      );
+      const signedOutDropdown = el.shadowRoot?.querySelector(
+        'signed-out-dropdown',
+      ) as SignedOutDropdown;
+      expect(signedOutDropdown?.baseHost).to.equal('https://archive.org');
+    });
+
+    it('uses localLinks to archive.org links on the user dropdown', async () => {
+      const el = await fixture<IATopNav>(
+        html` <ia-topnav username="foopey" ?localLinks=${false}></ia-topnav>`,
+      );
+      const signedOutDropdown = el.shadowRoot?.querySelector(
+        'user-menu',
+      ) as UserMenu;
+      expect(signedOutDropdown.baseHost).to.equal('https://archive.org');
+    });
+  });
+
+  describe('slot pass throughs', () => {
+    describe('slot for <primary-nav>', () => {
+      it('opens a slot with `secondIdentitySlotMode`', async () => {
+        const el = await fixture<IATopNav>(
+          html`<ia-topnav
+            ?localLinks=${false}
+            username="boop"
+            screenName="somesuperlongscreenname"
+            secondIdentitySlotMode="allow"
+          ></ia-topnav>`,
+        );
+
+        const slot = el.shadowRoot
+          ?.querySelector('primary-nav')
+          ?.querySelector('slot');
+        expect(slot).to.exist;
+        expect(slot?.getAttribute('name')).to.equal('opt-sec-logo');
+
+        el.secondIdentitySlotMode = '';
+        await elementUpdated(el);
+        const noSlot = el.shadowRoot
+          ?.querySelector('primary-nav')
+          ?.querySelector('slot');
+        expect(noSlot).to.not.exist;
+      });
+    });
+  });
+});

package/test/login-button.test.ts

@@ -0,0 +1,19 @@
+import { html, fixture, expect } from '@open-wc/testing';
+import '../src/login-button';
+import { LoginButton } from '../src/login-button';
+
+const component = html`<login-button></login-button>`;
+
+describe('<login-button>', () => {
+  it('toggles active class when avatar clicked', async () => {
+    const el = await fixture<LoginButton>(component);
+    const toggle = el.shadowRoot?.querySelector(
+      '.dropdown-toggle',
+    ) as HTMLAnchorElement;
+
+    toggle?.click();
+    await el.updateComplete;
+
+    expect(el.shadowRoot?.querySelector('.active')).to.not.be.undefined;
+  });
+});

package/test/media-button.test.ts

@@ -0,0 +1,19 @@
+import { html, fixture, expect, oneEvent } from '@open-wc/testing';
+
+import '../src/media-button';
+import { MediaButton } from '../src/media-button';
+
+describe('<media-button>', () => {
+  it('emits an event when button pressed', async () => {
+    const el = await fixture<MediaButton>(html`<media-button></media-button>`);
+
+    const link = el.shadowRoot?.querySelector(
+      '.menu-item',
+    ) as HTMLAnchorElement;
+
+    setTimeout(() => link.click());
+    const response = await oneEvent(el, 'mediaTypeSelected');
+
+    expect(response).to.exist;
+  });
+});

package/test/media-menu.test.ts

@@ -0,0 +1,42 @@
+import { html, fixture, expect } from '@open-wc/testing';
+
+import '../src/media-menu';
+import { MediaMenu } from '../src/media-menu';
+
+const component = html`<media-menu></media-menu>`;
+
+describe('<media-menu>', () => {
+  it('sets default properties', async () => {
+    const mediaMenu = await fixture<MediaMenu>(component);
+
+    expect(mediaMenu.openMenu).to.equal('');
+    expect(mediaMenu.selectedMenuOption).to.equal('');
+  });
+
+  it('renders menu icon as selected when selectedMenuOption matches', async () => {
+    const mediaMenu = await fixture<MediaMenu>(component);
+    const mediaType = 'texts';
+
+    mediaMenu.selectedMenuOption = mediaType;
+    await mediaMenu.updateComplete;
+
+    const textsButton = mediaMenu.shadowRoot
+      ?.querySelector(`[data-mediatype=${mediaType}`)
+      ?.shadowRoot?.querySelector('.selected');
+
+    expect(textsButton).to.not.be.null;
+  });
+
+  it('renders with closed class if done animating', async () => {
+    const mediaMenu = await fixture<MediaMenu>(component);
+
+    // mediaMenu.mediaMenuAnimate = true;
+    // await mediaMenu.updateComplete;
+
+    expect(
+      mediaMenu.shadowRoot
+        ?.querySelector('.media-menu-container')
+        ?.classList.contains('closed'),
+    ).to.be.true;
+  });
+});

package/test/media-slider.test.ts

@@ -0,0 +1,63 @@
+import { html, fixture, expect } from '@open-wc/testing';
+
+import '../src/media-slider';
+import { buildTopNavMenus } from '../src/data/menus';
+import { MediaSlider } from '../src/media-slider';
+
+const menus = buildTopNavMenus();
+
+const component = (mediaSliderOpen: boolean, selectedMenuOption: string) =>
+  html`<media-slider
+    ?mediaSliderOpen="${mediaSliderOpen}"
+    selectedMenuOption="${selectedMenuOption}"
+    .menus=${menus}
+  ></media-slider>`;
+
+describe('<media-slider>', () => {
+  it('sets default properties', async () => {
+    const mediaSlider = await fixture<MediaSlider>(component(false, ''));
+
+    expect(mediaSlider.mediaSliderOpen).to.be.false;
+    expect(mediaSlider.selectedMenuOption).to.equal('');
+  });
+
+  it('renders a media subnav when texts selected', async () => {
+    const mediaSlider = await fixture<MediaSlider>(component(false, 'texts'));
+    const menuHeading = mediaSlider.shadowRoot
+      ?.querySelector('media-subnav[menu=texts]')
+      ?.shadowRoot?.querySelector('h3');
+    expect(menuHeading?.innerText).to.equal(menus.texts.heading);
+  });
+
+  it('renders a media subnav when audio selected', async () => {
+    const mediaSlider = await fixture<MediaSlider>(component(false, 'audio'));
+    const menuHeading = mediaSlider.shadowRoot
+      ?.querySelector('media-subnav[menu=audio]')
+      ?.shadowRoot?.querySelector('h3');
+    expect(menuHeading?.innerText).to.equal(menus.audio.heading);
+  });
+
+  it('renders a media subnav when video selected', async () => {
+    const mediaSlider = await fixture<MediaSlider>(component(false, 'video'));
+    const menuHeading = mediaSlider.shadowRoot
+      ?.querySelector('media-subnav[menu=video]')
+      ?.shadowRoot?.querySelector('h3');
+    expect(menuHeading?.innerText).to.equal(menus.video.heading);
+  });
+
+  it('renders the Wayback component when web menu selected', async () => {
+    const mediaSlider = await fixture(component(false, 'web'));
+    const waybackSearch = mediaSlider.shadowRoot
+      ?.querySelector('media-subnav[menu=web]')
+      ?.shadowRoot?.querySelector('wayback-search');
+    expect(waybackSearch).to.not.be.undefined;
+  });
+
+  it('renders the more links component when more menu selected', async () => {
+    const mediaSlider = await fixture<MediaSlider>(component(false, 'more'));
+    const moreSlider = mediaSlider.shadowRoot
+      ?.querySelector('media-subnav[menu=more]')
+      ?.shadowRoot?.querySelector('more-slider');
+    expect(moreSlider).to.not.be.undefined;
+  });
+});

package/test/more-slider.test.ts

@@ -0,0 +1,21 @@
+import { html, fixture, expect } from '@open-wc/testing';
+import '../src/more-slider';
+import { buildTopNavMenus } from '../src/data/menus';
+
+describe('<more-slider>', () => {
+  it('renders links with relative hrefs using baseHost', async () => {
+    const menus = buildTopNavMenus();
+    const baseHost = 'archive.org';
+    const el = await fixture(
+      html`<more-slider
+        .baseHost=${baseHost}
+        .config=${{}}
+        .menuItems=${menus.more.links}
+      ></more-slider>`,
+    );
+
+    expect(el.shadowRoot?.querySelector('a')?.getAttribute('href')).to.contain(
+      baseHost,
+    );
+  });
+});

package/test/nav-search.test.ts

@@ -0,0 +1,70 @@
+import { html, fixture, expect } from '@open-wc/testing';
+import sinon from 'sinon';
+
+import '../src/nav-search';
+import { NavSearch } from '../src/nav-search';
+
+const component = html`<nav-search></nav-search>`;
+
+describe('<nav-search>', () => {
+  it('defaults to closed', async () => {
+    const el = await fixture<NavSearch>(component);
+
+    expect(el.open).to.be.false;
+  });
+
+  it('does not allow search form to submit if query empty', async () => {
+    const el = await fixture<NavSearch>(component);
+
+    // const result = el.search({
+    //   preventDefault: () => {},
+    // });
+
+    // expect(result).to.be.false;
+  });
+
+  it('redirects to the TV details page when search inside is TV', async () => {
+    const query = 'bananas';
+    const submitEvent = {
+      type: 'submit',
+      preventDefault: () => {},
+    };
+    const locationHandler = sinon.fake();
+    const el = await fixture<NavSearch>(
+      html`<nav-search .locationHandler=${locationHandler}></nav-search>`,
+    );
+
+    el.searchIn = 'TV';
+
+    await el.updateComplete;
+
+    // el.shadowRoot.querySelector('[name=query]').value = query;
+    // el.search(submitEvent);
+
+    // expect(locationHandler.callCount).to.equal(1);
+    // expect(locationHandler.firstArg).to.contain(`/details/tv?q=${query}`);
+  });
+
+  it('prefills the search query when present in config', async () => {
+    const el = await fixture<NavSearch>(
+      html`<nav-search searchQuery="bananas"></nav-search>`,
+    );
+
+    const queryInput = el.shadowRoot?.querySelector(
+      '[name="query"]',
+    ) as HTMLInputElement;
+
+    expect(queryInput.value).to.equal('bananas');
+  });
+
+  it('conditionally renders `sin` input based on `searchIn` truthiness', async () => {
+    const el = await fixture<NavSearch>(component);
+
+    expect(el.shadowRoot?.querySelector('[name="sin"]')).to.be.null;
+
+    el.searchIn = 'TV';
+    await el.updateComplete;
+
+    expect(el.shadowRoot?.querySelector('[name="sin"]')).not.to.be.null;
+  });
+});

package/test/primary-nav.test.ts

@@ -0,0 +1,94 @@
+import {
+  html,
+  fixture,
+  expect,
+  fixtureCleanup,
+  elementUpdated,
+} from '@open-wc/testing';
+
+import '../src/primary-nav';
+import { IATopNavConfig, IATopNavSecondIdentitySlotMode } from '../src/models';
+import { PrimaryNav } from '../src/primary-nav';
+
+const component = ({
+  baseHost = 'archive.org',
+  username = '',
+  screenName = '',
+  hideSearch = false,
+  config = {},
+  secondIdentitySlotMode = 'allow',
+}: {
+  baseHost?: string;
+  username?: string;
+  screenName?: string;
+  hideSearch?: boolean;
+  config?: IATopNavConfig;
+  secondIdentitySlotMode?: IATopNavSecondIdentitySlotMode;
+}) =>
+  html` <primary-nav
+    .baseHost=${baseHost}
+    .username=${username}
+    .screenName=${screenName}
+    ?hideSearch=${hideSearch}
+    .config=${config}
+    .secondIdentitySlotMode=${secondIdentitySlotMode}
+  ></primary-nav>`;
+
+afterEach(() => {
+  fixtureCleanup();
+});
+
+describe('<primary-nav>', () => {
+  it('renders the login link when no username present', async () => {
+    const el = await fixture<PrimaryNav>(
+      component({
+        baseHost: 'archive.org',
+        username: '',
+      }),
+    );
+
+    expect(el.shadowRoot?.querySelector('login-button')).to.not.be.undefined;
+  });
+
+  it('does not render search menu toggle and search form if hideSearch true', async () => {
+    const el = await fixture<PrimaryNav>(
+      component({
+        baseHost: 'archive.org',
+        username: 'shaneriley',
+        screenName: 'shaneriley',
+        hideSearch: true,
+      }),
+    );
+
+    expect(el.shadowRoot?.querySelector('.search-trigger')).to.equal(null);
+    expect(el.shadowRoot?.querySelector('nav-search')).to.equal(null);
+  });
+
+  it('opens a slot with `secondIdentitySlotMode`', async () => {
+    const el = await fixture<PrimaryNav>(
+      component({
+        baseHost: 'archive.org',
+        username: 'boop',
+        screenName: 'somesuperlongscreenname',
+        secondIdentitySlotMode: 'allow',
+      }),
+    );
+
+    const brandingBlock = el.shadowRoot?.querySelector('div.branding');
+    expect(brandingBlock?.getAttribute('class')).to.contain(
+      'branding second-logo',
+    );
+
+    const slot = brandingBlock?.querySelector('slot');
+    expect(slot).to.exist;
+    expect(slot?.getAttribute('name')).to.equal('opt-sec-logo');
+
+    el.secondIdentitySlotMode = '';
+    await elementUpdated(el);
+    const noSlotBrandingBlock = el.shadowRoot?.querySelector('div.branding');
+    expect(noSlotBrandingBlock?.getAttribute('class')).to.contain('branding');
+
+    const noSlot = noSlotBrandingBlock?.querySelector('slot');
+    expect(noSlot).to.not.exist;
+  });
+});