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

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}
+      ></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,110 @@
+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('truncates a long screenname', async () => {
+    const el = await fixture<PrimaryNav>(
+      component({
+        baseHost: 'archive.org',
+        username: 'boop',
+        screenName: 'somesuperlongscreenname',
+      }),
+    );
+
+    const usernameSpan = el.shadowRoot?.querySelector(
+      '.screen-name',
+    ) as HTMLSpanElement;
+
+    expect(usernameSpan.innerText).to.equal('somesuper…');
+  });
+
+  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;
+  });
+});

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

@@ -0,0 +1,62 @@
+import { html, fixture, expect } from '@open-wc/testing';
+
+import '../src/save-page-form';
+import { SavePageForm } from '../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<SavePageForm>(component);
+    const urlInput = el.shadowRoot?.querySelector(
+      '[name="url_preload"]',
+    ) as HTMLInputElement;
+    const errorMessage = el.shadowRoot?.querySelector('.error');
+    // const submitEvent: { type: string, target: Element | null | undefined, preventDefault: () => void, currentTarget: Element | null | undefined } = {
+    //   type: 'submit',
+    //   target: el.shadowRoot?.querySelector('form'),
+    //   preventDefault: () => { },
+    //   currentTarget: null,
+    // };
+
+    const submitEvent = new Event('submit', {
+      bubbles: true,
+      cancelable: true,
+    }) as SubmitEvent;
+
+    Object.defineProperty(submitEvent, 'target', {
+      value: el.shadowRoot?.querySelector('form') as HTMLFormElement,
+      writable: false,
+    });
+
+    Object.defineProperty(submitEvent, 'currentTarget', {
+      value: el.shadowRoot?.querySelector('form') as HTMLFormElement,
+      writable: false,
+    });
+
+    // const submitEvent: CustomEvent = {
+    //   type: 'submit',
+    //   target: el.shadowRoot!.querySelector('form'),
+    //   preventDefault: () => { },
+    //   currentTarget: null,
+    // };
+
+    // 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/{search-menu.test.js → search-menu.test.ts}

@@ -1,12 +1,13 @@
 import { html, fixture, expect } from '@open-wc/testing';
 
 import '../src/search-menu';
+import { SearchMenu } from '../src/search-menu';
 
 const component = html`<search-menu></search-menu>`;
 
 describe('<search-menu>', () => {
   it('sets default properties', async () => {
-    const el = await fixture(component);
+    const el = await fixture<SearchMenu>(component);
 
     expect(el.searchMenuOpen).to.be.false;
     expect(el.searchMenuAnimate).to.be.false;
@@ -14,36 +15,44 @@ describe('<search-menu>', () => {
   });
 
   it('sets selected search type', async () => {
-    const el = await fixture(component);
+    const el = await fixture<SearchMenu>(component);
     const value = 'text';
 
-    el.selectSearchType({
-      target: {
-        value
-      }
+    const inputEvent = new InputEvent('input');
+    Object.defineProperty(inputEvent, 'target', {
+      value: {
+        value,
+      },
+      writable: false,
     });
 
+    el.selectSearchType(inputEvent);
+
     expect(el.selectedSearchType).to.equal(value);
   });
 
   it('renders with closed class if done animating', async () => {
-    const el = await fixture(component);
+    const el = await fixture<SearchMenu>(component);
 
     el.searchMenuAnimate = true;
     await el.updateComplete;
 
-    expect(el.shadowRoot.querySelector('.search-menu-inner').classList.contains('closed')).to.be.true;
+    expect(
+      el.shadowRoot
+        ?.querySelector('.search-menu-inner')
+        ?.classList.contains('closed'),
+    ).to.be.true;
   });
 
   it('omits rendering of an option when hiddenSearchOptions has a value', async () => {
-    const el = await fixture(component);
+    const el = await fixture<SearchMenu>(component);
     const hiddenSearchOptions = ['WEB', 'RADIO'];
 
     el.config = { hiddenSearchOptions };
     await el.updateComplete;
 
     hiddenSearchOptions.forEach((value) => {
-      expect(el.shadowRoot.querySelector(`[value=${value}]`)).to.equal(null);
+      expect(el.shadowRoot?.querySelector(`[value=${value}]`)).to.equal(null);
     });
   });
 });

package/test/{user-menu.test.js → user-menu.test.ts}

@@ -1,33 +1,34 @@
 import { html, fixture, expect } from '@open-wc/testing';
 import '../src/user-menu';
-import { buildTopNavMenus } from '../../src/data/menus.js';
+import { buildTopNavMenus } from '../src/data/menus';
+import UserMenu from '../src/user-menu';
 
 const component = html`<user-menu></user-menu>`;
 const component2 = html`<user-menu screenName="brewster"></user-menu>`;
 
 describe('<user-menu>', () => {
   it('does not render admin links for logged out users', async () => {
-    const el = await fixture(component);
+    const el = await fixture<UserMenu>(component);
     el.menuItems = buildTopNavMenus().user;
 
     await el.updateComplete;
 
-    expect(el.shadowRoot.querySelectorAll('li').length).to.be.gt(0);
-    expect(el.shadowRoot.querySelectorAll('.divider').length).to.equal(0);
+    expect(el.shadowRoot?.querySelectorAll('li').length).to.be.gt(0);
+    expect(el.shadowRoot?.querySelectorAll('.divider').length).to.equal(0);
   });
 
   it('does not render admin links for logged in users', async () => {
     // NOTE: top-nav never renders admin links now -- that's been delegated to dynamic JS insertion
     // in petabox tree (since it's only relevant there).
-    const el = await fixture(component2);
+    const el = await fixture<UserMenu>(component2);
     el.menuItems = buildTopNavMenus('brewster_userid').user;
 
     await el.updateComplete;
 
-    expect(el.shadowRoot.querySelectorAll('li').length).to.be.gt(0);
-    expect(el.shadowRoot.querySelectorAll('.divider').length).to.equal(0);
+    expect(el.shadowRoot?.querySelectorAll('li').length).to.be.gt(0);
+    expect(el.shadowRoot?.querySelectorAll('.divider').length).to.equal(0);
 
-    expect(el.shadowRoot.querySelectorAll('h3').length).to.equal(1);
-    expect(el.shadowRoot.querySelector('h3').innerText).to.equal('brewster');
+    expect(el.shadowRoot?.querySelectorAll('h3').length).to.equal(1);
+    expect(el.shadowRoot?.querySelector('h3')?.innerText).to.equal('brewster');
   });
 });

package/test/wayback-slider.test.ts

@@ -0,0 +1,97 @@
+import { html, fixture, expect } from '@open-wc/testing';
+
+import '../src/wayback-slider';
+import type { IATopNavLink } from '../src/models';
+
+const component = ({
+  archiveItLinks,
+  browserExtensionsLinks,
+  config,
+  mobileAppsLinks,
+}: {
+  archiveItLinks: IATopNavLink[];
+  browserExtensionsLinks: IATopNavLink[];
+  config: Record<string, unknown>;
+  mobileAppsLinks: IATopNavLink[];
+}) => 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) => {
+      const anchor = anchors[i] as HTMLAnchorElement;
+      expect(anchor.innerText).to.equal(link.title);
+      expect(anchor.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) => {
+      const anchor = anchors[i] as HTMLAnchorElement;
+      expect(anchor.innerText).to.equal(link.title);
+      expect(anchor.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) => {
+      const anchor = anchors[i] as HTMLAnchorElement;
+      expect(anchor.innerText).to.equal(link.title);
+      expect(anchor.getAttribute('href')).to.contain(link.url);
+    });
+  });
+});

package/tsconfig.json

@@ -0,0 +1,31 @@
+{
+  "compilerOptions": {
+    "target": "es2018",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "noEmitOnError": true,
+    "lib": ["es2017", "dom"],
+    "strict": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "outDir": "dist",
+    "sourceMap": true,
+    "inlineSources": true,
+    "rootDir": "./",
+    "declaration": true,
+    "plugins": [
+      {
+        "name": "ts-lit-plugin"
+      }
+    ],
+    "paths": {
+      // workaround for: https://github.com/vitest-dev/vitest/issues/4567
+      "rollup/parseAst": [
+        "./node_modules/rollup/dist/parseAst"
+    ]
+}
+  },
+  "include": ["**/*.ts"]
+}

package/web-dev-server.config.mjs

@@ -0,0 +1,32 @@
+// 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} */ ({
+  nodeResolve: true,
+  open: '/demo',
+  watch: !hmr,
+  sslCert: './ssl/server.crt',
+  sslKey: './ssl/server.key',
+  hostname: 'local.archive.org',
+  http2: true,
+
+  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
+  // esbuildTarget: 'auto'
+
+  /** Set appIndex to enable SPA routing */
+  // appIndex: 'demo/index.html',
+
+  /** Configure bare import resolve plugin */
+  // nodeResolve: {
+  //   exportConditions: ['browser', 'development']
+  // },
+
+  plugins: [
+    /** Use Hot Module Replacement by uncommenting. Requires @open-wc/dev-server-hmr plugin */
+    // hmr && hmrPlugin({ exclude: ['**/*/node_modules/**/*'], presets: [presets.litElement] }),
+  ],
+
+  // See documentation for all available options
+});

package/web-test-runner.config.mjs

@@ -0,0 +1,41 @@
+// import { playwrightLauncher } from '@web/test-runner-playwright';
+
+const filteredLogs = ['Running in dev mode', 'lit-html is in dev mode'];
+
+export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
+  /** Test files to run */
+  files: 'dist/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
+});

package/.eslintrc

@@ -1,16 +0,0 @@
-{
-  "extends": ["../../.eslintrc.json"],
-  "settings": {
-    "import/resolver": {
-      "node": {
-        "extensions": [".js"]
-      }
-    }
-  },
-  "overrides": [{
-    "files": ["test/**/*.js"],
-    "rules": {
-      "no-unused-expressions": "off"
-    }
-  }]
-}