@internetarchive/ia-topnav 1.3.9 → 1.3.10-webdev-7394.1

package/test/ia-topnav.test.js

@@ -1,273 +0,0 @@
-import {
-  html,
-  fixture,
-  expect,
-  oneEvent,
-  fixtureCleanup,
-  elementUpdated
-} from '@open-wc/testing';
-
-import '../src/ia-topnav';
-
-const container = ({
-  username = '',
-  screenName = '',
-  config = {},
-  localLinks = true,
-  secondIdentitySlotMode = ''
-} = {}) => (
-  html`<ia-topnav
-    .screenName=${screenName}
-    username=${username}
-    localLinks=${localLinks}
-    .config=${config}
-    .secondIdentitySlotMode=${secondIdentitySlotMode}
-  ></ia-topnav>`
-);
-
-const verifyClosed = (instance) => {
-  expect(instance.mediaSliderOpen).to.be.false;
-  expect(instance.selectedMenuOption).to.equal('');
-};
-
-const verifyOpened = (instance, mediatype) => {
-  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(container());
-    const query = 'atari';
-    const searchMenu = el
-      .shadowRoot
-      .querySelector('search-menu');
-
-    searchMenu.searchInChanged({
-      target: {
-        value: query
-      }
-    });
-    await el.updateComplete;
-
-    expect(el.searchIn).to.equal(query);
-  });
-
-  it('dispatches an analyticsClick event when trackClick event fired', async () => {
-    const el = await fixture(container());
-    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(container());
-    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]').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(container());
-
-    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(container());
-
-    el.mediaSliderOpen = true;
-    el.selectedMenuOption = 'foo';
-    el.closeMediaSlider();
-
-    verifyClosed(el);
-  });
-
-  it('toggles media slider visibility and starts animation', async () => {
-    const el = await fixture(container());
-    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(container());
-    const mediatype = 'foo';
-
-    el.selectedMenuOption = mediatype;
-    el.mediaTypeSelected({
-      detail: {
-        mediatype
-      }
-    });
-
-    verifyClosed(el);
-  });
-
-  it('opens media slider menu and starts animation', async () => {
-    const el = await fixture(container());
-    const mediatype = 'foo';
-
-    el.mediaTypeSelected({
-      detail: {
-        mediatype
-      }
-    });
-
-    verifyOpened(el, mediatype);
-  });
-
-  it('closes slider when menu closed', async () => {
-    const el = await fixture(container());
-
-    el.openMenu = 'media';
-    el.selectedMenuOption = 'foo';
-    el.mediaSliderOpen = true;
-    await el.updateComplete;
-
-    el.menuToggled({ detail: { menuName: '' } });
-    await el.updateComplete;
-
-    expect(el.selectedMenuOption).to.equal('');
-  });
-
-  it('toggles search menu tabindex when dropdown open', async () => {
-    const el = await fixture(container());
-
-    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(container({ username: 'shaneriley' }));
-
-    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(container());
-
-    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(container());
-    el.shadowRoot.querySelector('primary-nav').shadowRoot.querySelector('.search-trigger').click();
-    await el.updateComplete;
-
-    expect(el.openMenu).to.equal('search');
-  });
-
-  it('toggles user menu when search user avatar clicked', async () => {
-    const el = await fixture(container({
-      username: 'shaneriley',
-      screenName: 'shaneriley',
-    }));
-
-    el.shadowRoot.querySelector('primary-nav').shadowRoot.querySelector('.user-menu').click();
-    await el.updateComplete;
-
-    expect(el.openMenu).to.equal('user');
-  });
-
-  it('uses localLinks for archive.org logo link', async () => {
-    const el = await fixture(container({ localLinks: false }));
-    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(container({ localLinks: false }));
-      const componentSelectors = ['primary-nav', 'media-slider', 'desktop-subnav', 'search-menu'];
-      componentSelectors.forEach((selector) => {
-        const component = el.shadowRoot.querySelector(selector);
-        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(container({ localLinks: false }));
-      const signedOutDropdown = el.shadowRoot.querySelector('signed-out-dropdown');
-      expect(signedOutDropdown.baseHost).to.equal('https://archive.org');
-    });
-
-    it('uses localLinks to archive.org links on the user dropdown', async () => {
-      const el = await fixture(container({ username: 'foo', localLinks: false }));
-      const signedOutDropdown = el.shadowRoot.querySelector('user-menu');
-      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(container({
-          localLinks: false,
-          username: 'boop',
-          screenName: 'somesuperlongscreenname',
-          secondIdentitySlotMode: 'allow'
-        }));
-
-        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.js

@@ -1,15 +0,0 @@
-import { html, fixture, expect } from '@open-wc/testing';
-import '../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(component);
-
-    el.shadowRoot.querySelector('.dropdown-toggle').click();
-    await el.updateComplete;
-
-    expect(el.shadowRoot.querySelector('.active')).to.not.be.undefined;
-  });
-});

package/test/media-button.test.js

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

package/test/media-slider.test.js

@@ -1,57 +0,0 @@
-import { html, fixture, expect } from '@open-wc/testing';
-
-import '../src/media-slider';
-import { buildTopNavMenus } from '../../src/data/menus.js';
-
-const menus = buildTopNavMenus();
-
-const component = (mediaSliderOpen, selectedMenuOption) => (
-  html`<media-slider
-          ?mediaSliderOpen="${mediaSliderOpen}"
-          selectedMenuOption="${selectedMenuOption}"
-          .menus=${menus}></media-slider>`
-);
-
-describe('<media-slider>', () => {
-  it('sets default properties', async () => {
-    const mediaSlider = await fixture(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(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(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(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(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.js

@@ -1,13 +0,0 @@
-import { html, fixture, expect } from '@open-wc/testing';
-import '../src/more-slider';
-import { buildTopNavMenus } from '../../src/data/menus.js';
-
-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}>`);
-
-    expect(el.shadowRoot.querySelector('a').getAttribute('href')).to.contain(baseHost);
-  });
-});

package/test/nav-search.test.js

@@ -1,61 +0,0 @@
-import { html, fixture, expect } from '@open-wc/testing';
-import sinon from 'sinon';
-
-import '../src/nav-search';
-
-const component = html`<nav-search></nav-search>`;
-
-describe('<nav-search>', () => {
-  it('defaults to closed', async () => {
-    const el = await fixture(component);
-
-    expect(el.open).to.be.false;
-  });
-
-  it('does not allow search form to submit if query empty', async () => {
-    const el = await fixture(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(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(html`<nav-search searchQuery='bananas'></nav-search>`);
-
-    expect(el.shadowRoot.querySelector('[name="query"]').value).to.equal('bananas');
-  });
-
-  it('conditionally renders `sin` input based on `searchIn` truthiness', async () => {
-    const el = await fixture(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.js

@@ -1,82 +0,0 @@
-import {
-  html, fixture, expect, fixtureCleanup, elementUpdated
-} from '@open-wc/testing';
-
-import '../src/primary-nav';
-
-const component = ({
-  baseHost, username, screenName, hideSearch, config = {}, secondIdentitySlotMode
-}) => (
-  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(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(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('truncates a long screenname', async () => {
-    const el = await fixture(component({
-      baseHost: 'archive.org',
-      username: 'boop',
-      screenName: 'somesuperlongscreenname'
-    }));
-
-    const usernameSpan = el.shadowRoot.querySelector('.username');
-
-    expect(usernameSpan.innerText).to.equal('somesuper…');
-  });
-
-  it('opens a slot with `secondIdentitySlotMode`', async () => {
-    const el = await fixture(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;
-  });
-});

package/test/save-page-form.test.js

@@ -1,35 +0,0 @@
-import { html, fixture, expect } from '@open-wc/testing';
-
-import '../src/save-page-form';
-
-const component = html`<save-page-form></save-page-form>`;
-
-describe('<save-page-form>', () => {
-  it('checks validity of URL value and shows an error when invalid', async () => {
-    const el = await fixture(component);
-    const urlInput = el.shadowRoot.querySelector('[name="url_preload"]');
-    const errorMessage = el.shadowRoot.querySelector('.error');
-    const submitEvent = {
-      type: 'submit',
-      target: el.shadowRoot.querySelector('form'),
-      preventDefault: () => {}
-    };
-    submitEvent.currentTarget = submitEvent.target;
-
-    urlInput.value = 'archive';
-    el.validateURL(submitEvent);
-
-    await el.updateComplete;
-
-    expect(el.inputValid).to.be.false;
-    expect(errorMessage.getAttribute('class')).to.contain('visible');
-
-    urlInput.value += '.org';
-    el.validateURL(submitEvent);
-
-    await el.updateComplete;
-
-    expect(el.inputValid).to.be.true;
-    expect(errorMessage.getAttribute('class')).not.to.contain('visible');
-  });
-});

package/test/wayback-slider.test.js

@@ -1,80 +0,0 @@
-import { html, fixture, expect } from '@open-wc/testing';
-
-import '../src/wayback-slider';
-
-const component = ({
-  archiveItLinks,
-  browserExtensionsLinks,
-  config,
-  mobileAppsLinks
-}) => (
-  html`
-    <wayback-slider
-      .baseHost='archive.org'
-      .config=${config}
-      .archiveItLinks=${archiveItLinks}
-      .browserExtensionsLinks=${browserExtensionsLinks}
-      .mobileAppsLinks=${mobileAppsLinks}
-    ></wayback-slider>
-  `
-);
-
-const buildDefaults = () => ({
-  config: {},
-  archiveItLinks: [{
-    url: '1',
-    title: 'first'
-  }, {
-    url: '2',
-    title: 'second'
-  }],
-  browserExtensionsLinks: [{
-    url: '3',
-    title: 'third'
-  }, {
-    url: '4',
-    title: 'fourth'
-  }],
-  mobileAppsLinks: [{
-    url: '5',
-    title: 'fifth'
-  }, {
-    url: '6',
-    title: 'sixth'
-  }]
-});
-
-describe('<wayback-slider>', () => {
-  it('renders the links passed in via the archiveItLinks prop', async () => {
-    const options = buildDefaults();
-    const el = await fixture(component(options));
-    const anchors = el.shadowRoot.querySelectorAll('.archive-it a');
-
-    options.archiveItLinks.forEach((link, i) => {
-      expect(anchors[i].innerText).to.equal(link.title);
-      expect(anchors[i].getAttribute('href')).to.contain(link.url);
-    });
-  });
-
-  it('renders the links passed in via the browserExtensionsLinks prop', async () => {
-    const options = buildDefaults();
-    const el = await fixture(component(options));
-    const anchors = el.shadowRoot.querySelectorAll('.browser-extensions a');
-
-    options.browserExtensionsLinks.forEach((link, i) => {
-      expect(anchors[i].innerText).to.equal(link.title);
-      expect(anchors[i].getAttribute('href')).to.contain(link.url);
-    });
-  });
-
-  it('renders the links passed in via the mobileAppsLinks prop', async () => {
-    const options = buildDefaults();
-    const el = await fixture(component(options));
-    const anchors = el.shadowRoot.querySelectorAll('.mobile-apps a');
-
-    options.mobileAppsLinks.forEach((link, i) => {
-      expect(anchors[i].innerText).to.equal(link.title);
-      expect(anchors[i].getAttribute('href')).to.contain(link.url);
-    });
-  });
-});