@internetarchive/ia-topnav 1.3.6 → 1.3.7-alpha.0

package/test/media-menu.test.js

@@ -1,40 +1,40 @@
-import { html, fixture, expect } from '@open-wc/testing';
-
-import '../src/media-menu';
-
-const component = html`<media-menu></media-menu>`;
-
-describe('<media-menu>', () => {
-  it('sets default properties', async () => {
-    const mediaMenu = await fixture(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(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(component);
-
-    mediaMenu.mediaMenuAnimate = true;
-    await mediaMenu.updateComplete;
-
-    expect(mediaMenu.shadowRoot.querySelector('.media-menu-container').classList.contains('closed'))
-      .to.be.true;
-  });
-});
+import { html, fixture, expect } from '@open-wc/testing';
+
+import '../src/media-menu';
+
+const component = html`<media-menu></media-menu>`;
+
+describe('<media-menu>', () => {
+  it('sets default properties', async () => {
+    const mediaMenu = await fixture(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(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(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.js

@@ -1,57 +1,57 @@
-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;
-  });
-});
+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 +1,13 @@
-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);
-  });
-});
+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 +1,61 @@
-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;
-  });
-});
+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 +1,82 @@
-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;
-  });
-});
+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 +1,35 @@
-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');
-  });
-});
+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');
+  });
+});