@internetarchive/ia-topnav 0.0.0-webdev7666-1

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.ts

@@ -0,0 +1,58 @@
+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<SearchMenu>(component);
+
+    expect(el.searchMenuOpen).to.be.false;
+    expect(el.searchMenuAnimate).to.be.false;
+    expect(el.selectedSearchType).to.equal('');
+  });
+
+  it('sets selected search type', async () => {
+    const el = await fixture<SearchMenu>(component);
+    const value = 'text';
+
+    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<SearchMenu>(component);
+
+    el.searchMenuAnimate = true;
+    await el.updateComplete;
+
+    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<SearchMenu>(component);
+    const hiddenSearchOptions = ['WEB', 'RADIO'];
+
+    el.config = { hiddenSearchOptions };
+    await el.updateComplete;
+
+    hiddenSearchOptions.forEach((value) => {
+      expect(el.shadowRoot?.querySelector(`[value=${value}]`)).to.equal(null);
+    });
+  });
+});

package/test/user-menu.test.ts

@@ -0,0 +1,34 @@
+import { html, fixture, expect } from '@open-wc/testing';
+import '../src/user-menu';
+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<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);
+  });
+
+  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<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('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
+});