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

package/src/wayback-slider.ts

@@ -0,0 +1,88 @@
+import { html } from 'lit';
+import './wayback-search';
+import TrackedElement from './tracked-element';
+import './save-page-form';
+import queryHandler from './lib/query-handler';
+import waybackSliderCSS from './styles/wayback-slider';
+import toSentenceCase from './lib/toSentenceCase';
+import formatUrl from './lib/formatUrl';
+import { customElement, property } from 'lit/decorators.js';
+import { IATopNavConfig, IATopNavLink } from './models';
+import { defaultTopNavConfig } from './data/menus';
+
+@customElement('wayback-slider')
+export class WaybackSlider extends TrackedElement {
+  @property({ type: Array }) archiveItLinks: IATopNavLink[] = [];
+  @property({ type: String }) baseHost = '';
+  @property({ type: Array }) browserExtensionsLinks: IATopNavLink[] = [];
+  @property({ type: Object }) config: IATopNavConfig = defaultTopNavConfig;
+  @property({ type: Array }) mobileAppsLinks: IATopNavLink[] = [];
+
+  static get styles() {
+    return waybackSliderCSS;
+  }
+
+  get mobileAppsItems() {
+    return this.linkList(this.mobileAppsLinks, 'Wayback');
+  }
+
+  get browserExtensionsItems() {
+    return this.linkList(this.browserExtensionsLinks, 'Wayback');
+  }
+
+  get archiveItItems() {
+    return this.linkList(this.archiveItLinks, 'ArchiveIt');
+  }
+
+  private linkList(links: IATopNavLink[], eventPrefix: string) {
+    return links.map(
+      (link) =>
+        html`<li>
+          <a
+            .href=${formatUrl(link.url, this.baseHost)}
+            @click=${this.trackClick}
+            data-event-click-tracking="${this.analyticsEvent(
+              `${eventPrefix}${link.title}`,
+            )}"
+            target=${link.external ? '_blank' : ''}
+            rel=${link.external ? 'noreferrer noopener' : ''}
+            >${link.title}</a
+          >
+        </li>`,
+    );
+  }
+
+  analyticsEvent(title: string) {
+    return `${this.config?.eventCategory}|${toSentenceCase(title)}`;
+  }
+
+  render() {
+    return html`
+      <div class="grid">
+        <wayback-search
+          .waybackPagesArchived=${this.config.waybackPagesArchived ?? ''}
+          .queryHandler=${queryHandler}
+        ></wayback-search>
+        <div class="link-lists">
+          <div>
+            <h4>Mobile Apps</h4>
+            <ul class="mobile-apps">
+              ${this.mobileAppsItems}
+            </ul>
+            <h4>Browser Extensions</h4>
+            <ul class="browser-extensions">
+              ${this.browserExtensionsItems}
+            </ul>
+          </div>
+          <div>
+            <h4>Archive-It Subscription</h4>
+            <ul class="archive-it">
+              ${this.archiveItItems}
+            </ul>
+          </div>
+        </div>
+        <save-page-form .config=${this.config}></save-page-form>
+      </div>
+    `;
+  }
+}

package/ssl/server.crt

@@ -0,0 +1,22 @@
+-----BEGIN CERTIFICATE-----
+MIIDszCCApugAwIBAgIUYr5csS2ntaMTww0b5QoFI0xlOpUwDQYJKoZIhvcNAQEL
+BQAwaTELMAkGA1UEBhMCVVMxCzAJBgNVBAgMAkNBMRYwFAYDVQQHDA1TYW4gRnJh
+bmNpc2NvMRkwFwYDVQQKDBBJbnRlcm5ldCBBcmNoaXZlMRowGAYDVQQDDBFsb2Nh
+bC5hcmNoaXZlLm9yZzAeFw0yNTAzMDcxOTM1MzRaFw0yNTA0MDYxOTM1MzRaMGkx
+CzAJBgNVBAYTAlVTMQswCQYDVQQIDAJDQTEWMBQGA1UEBwwNU2FuIEZyYW5jaXNj
+bzEZMBcGA1UECgwQSW50ZXJuZXQgQXJjaGl2ZTEaMBgGA1UEAwwRbG9jYWwuYXJj
+aGl2ZS5vcmcwggEiMA0GCSqGSIb3DQEBAQUAA4IBDwAwggEKAoIBAQDZqbS9hNS3
+8AtcA7Uszq7EA7RavuHc8AcpbURa6Y7NORs0SmfDD0oLptQ7DX5pSuHyOeDHzQ3U
+XRCUDAhAD1XlaYQ6PPdiJPRAe4ACELzgDzepxVz3pdKPcfXd5/mHV3ghUZya2XW5
+DSF1CRYUX2j10a+JORJIG4bhvTg4HxTJZZDuaNfBMC6ZSn7d9YLQoAf1MLLJm43Y
+cj1WlOnyG4DHxNEqEk260BlbBywJH+SJA6GA0GR2bnzYZaDnZ0wqea0Zamx8ijpd
+JxBUxYOqLfzs2KREVkkGOmsFEu82W6G3D4bKsY1UNaWXb/jcl3UkXIJJij6CdbbM
+QkUJc8dow3sVAgMBAAGjUzBRMB0GA1UdDgQWBBSla0L0Yhpx9/DEV4uJ6OoHH92Q
+bTAfBgNVHSMEGDAWgBSla0L0Yhpx9/DEV4uJ6OoHH92QbTAPBgNVHRMBAf8EBTAD
+AQH/MA0GCSqGSIb3DQEBCwUAA4IBAQBEzt9sgWtwjLI7AVrejDSE6F/01ng4bTni
+0PJXa7IpwjhAApVWcjxDKp8SkDUAcZNULqBGvpPicqjnKf+wxk3xTMc7pvLqzOor
+pm+plDUBfCEbrv1ouLDMgOtxQxbwbBUPySsLoNmDUGAGnL2zENX7qidOOmmSQEN4
+jZuPtiEkgTqmtkfHaRX/7jhmGVfxMxj0Krlar1/cSbvwaVs4kRSjiL9/avT+AX59
+0QoNYTLGcBP0RKia8NF2A3cgUivIMFZQDvdsiAvqY+DbC7Mnyv4Sj/ZHHwVa9+8k
+iRU56DrOt7sgaa/oQfzWnvRtL0F5eXC3veqM4qZrXs9hHeGlgPFo
+-----END CERTIFICATE-----

package/ssl/server.key

@@ -0,0 +1,28 @@
+-----BEGIN PRIVATE KEY-----
+MIIEvAIBADANBgkqhkiG9w0BAQEFAASCBKYwggSiAgEAAoIBAQDZqbS9hNS38Atc
+A7Uszq7EA7RavuHc8AcpbURa6Y7NORs0SmfDD0oLptQ7DX5pSuHyOeDHzQ3UXRCU
+DAhAD1XlaYQ6PPdiJPRAe4ACELzgDzepxVz3pdKPcfXd5/mHV3ghUZya2XW5DSF1
+CRYUX2j10a+JORJIG4bhvTg4HxTJZZDuaNfBMC6ZSn7d9YLQoAf1MLLJm43Ycj1W
+lOnyG4DHxNEqEk260BlbBywJH+SJA6GA0GR2bnzYZaDnZ0wqea0Zamx8ijpdJxBU
+xYOqLfzs2KREVkkGOmsFEu82W6G3D4bKsY1UNaWXb/jcl3UkXIJJij6CdbbMQkUJ
+c8dow3sVAgMBAAECggEANgLpITAhcuVDhFk9L3m4H1bF/dCpDmCXfl2pXR/guicm
+C4M9HUeheaOzvVWbXThiOe/HyfylpmFTmFEmCPNlPrDAyYzQXE/MNmYO/TQ3Eihk
+iSG68I764XKHbsG+Byoa2rW8NSaqEjniZ/7Rtkt4qasXMmdxlGgUP9bq6O45g8HV
+kHxneFlA2KbrvmWnBi7NTea9+tp61NWiq5n97UgHacQR6KkYIpbxd7uNSnCSdmXt
+pcwzO4ZPabJ2/DKRjePhU5OggPh+9AhJ3jsBo99GwYPgSZDh8E3vh2OWOtLBMUH3
+rmAYwlRT2aZ5hy5yi+4QD98WoUQtsr+9n757F8V6MQKBgQDzZycdgaKwWd5d34NN
+0TkFtPQPwxxJTCCs3I3q02uWcS3svQzBK0cWb4nISO04TnJ3MnXo83dgGhCMF+uZ
+FCXxAA53z8F92iZo+ELlXFDFwNeNYih/afDA42tWZ6TlVsDnZ4zQgRjHS7jEF/JV
+0ZgwGpw5725JQt64dic8wTOcDQKBgQDk7YYACQcWTnmjDhZQ3PZSX4fcTtzPZKZj
+fa1GrXEaUH1hSyc9VmY6qJpUmXexpvtr194nXE+O5wbThOHcBjVlo2Qv+vswmUX3
+WEcVzTVN4/fODCLCqFcMNIr+BzwZfwpT+p0u8g9FxDy1gGmvkxwIu8DCpnUT12Xj
+hm2wO+UxKQKBgFxCSDBF9+2SUtgQJYv0dwGzwiLLWMhro6MCAoT02D3w7nBihBgg
+GFTnuDkDc285ROfrZ4gB6MizeHwxgOrIGU2NMO62/+d9LbvyBiE76Z3bZ5i+kQ0i
+kc/7I69fn8ASLxJHTLenh0XbbNBfJ0riJCZvn7HSEGKShysyFdNQhAhtAoGAFYVi
+0IQIv4cXFkYPwQBUw7+pVQOw7GpI3heFf5x0goXIk6nuAW0q5R7Oi192CiRphGTh
+xI+ABy4ezSmz1exbfreShpQwowv1sOACpsEI3s6skBlB90y+Ci6yVlk1xCvWO7jW
+qAAngWaGUoXE6bWJsCR+ZY4ieYAJWw9bJnMrA6kCgYAzV4Xeoh5ofENZM21wKW3W
+iCzRibPObv6Vb/j9A9yT57yzI3BdfvsX5zmuSvOJm1DimgGY9nCJUzUEYG0a1Dhh
+/rqObPoVIFGesmvwflVYFktmVHk7ycEDVreSTz23cvmraPz1fnpdKeuEs4sRQJV7
+iJhLoxX5SJlJc0RXMhgHGQ==
+-----END PRIVATE KEY-----

package/test/assets/img/hamburger.test.ts

@@ -0,0 +1,18 @@
+import { html, fixture, expect } from '@open-wc/testing';
+import '../../../src/assets/img/hamburger';
+import { HamBurger } from '../../../src/assets/img/hamburger';
+
+describe('<icon-hamburger>', () => {
+  it('toggles close icon when property toggled', async () => {
+    const icon = await fixture<HamBurger>(
+      html`<icon-hamburger></icon-hamburger>`,
+    );
+
+    icon.active = true;
+    await icon.updateComplete;
+
+    const titleElement = icon.shadowRoot?.querySelector('svg title');
+
+    expect(titleElement?.getAttribute('id')).to.match(/close/);
+  });
+});

package/test/assets/img/user.test.ts

@@ -0,0 +1,15 @@
+import { html, fixture, expect } from '@open-wc/testing';
+import '../../../src/assets/img/icon-user';
+
+describe('<user-image>', () => {
+  it('toggles active class when property toggled', async () => {
+    const icon = await fixture(html`<user-image></user-image>`);
+
+    // icon.active = true;
+    // await icon.updateComplete;
+
+    // const styleElement = icon.shadowRoot.querySelector('svg > path');
+
+    // expect(styleElement.classList.contains('active')).to.be.true;
+  });
+});

package/test/data/menus.test.ts

@@ -0,0 +1,15 @@
+import { expect } from '@open-wc/testing';
+import { buildTopNavMenus } from '../../src/data/menus';
+
+describe('Menu data', () => {
+  it('returns a collection for each media category', () => {
+    const menus = buildTopNavMenus();
+
+    ['texts', 'video', 'audio', 'software', 'images', 'user', 'more'].forEach(
+      (category) => {
+        const menus = buildTopNavMenus();
+        // expect(menus[category]).to.not.be.undefined;
+      },
+    );
+  });
+});

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

@@ -8,7 +8,7 @@ const component = html`<dropdown-menu></dropdown-menu>`;
 
 describe('<dropdown-menu>', () => {
   it('sets default properties', async () => {
-    const el = await fixture(component);
+    const el = await fixture<DropdownMenu>(component);
 
     expect(el.animate).to.be.false;
     expect(el.open).to.be.false;
@@ -16,10 +16,10 @@ describe('<dropdown-menu>', () => {
   });
 
   it('renders a closed class if component is animating', async () => {
-    const el = await fixture(component);
+    const el = await fixture<DropdownMenu>(component);
 
-    el.animate = true;
+    el.animated = true;
     await el.updateComplete;
-    expect(el.shadowRoot.querySelector('.closed')).to.not.be.undefined;
+    expect(el.shadowRoot?.querySelector('.closed')).to.not.be.undefined;
   });
 });

package/test/{ia-icon.test.js → ia-icon.test.ts}

@@ -1,13 +1,15 @@
 import { html, fixture, expect } from '@open-wc/testing';
-import '../src/assets/img/ia-icon';
+import { IAIcon } from '../src/assets/img/ia-icon';
 
 describe('<ia-icon>', () => {
   it('renders an icon with a fill color', async () => {
     const iconType = 'web';
-    const fill = '#999';
-    const iaIcon = await fixture(html`<ia-icon .icon=${iconType} .fill=${fill}></ia-icon>`);
+    // const fill = '#999';
+    const iaIcon = await fixture<IAIcon>(
+      html`<ia-icon .icon=${iconType}></ia-icon>`,
+    );
 
     expect(iaIcon.icon).to.equal(iconType);
-    expect(iaIcon.fill).to.equal(fill);
+    // expect(iaIcon.fill).to.equal(fill);
   });
 });

package/test/ia-topnav.test.ts

@@ -0,0 +1,344 @@
+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';
+import { IATopNavConfig, IATopNavSecondIdentitySlotMode } from '../src/models';
+
+// 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.js → media-menu.test.ts}

@@ -1,40 +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(component);
+    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(component);
+    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');
+    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);
+    const mediaMenu = await fixture<MediaMenu>(component);
 
-    mediaMenu.mediaMenuAnimate = true;
-    await mediaMenu.updateComplete;
+    // mediaMenu.mediaMenuAnimate = true;
+    // await mediaMenu.updateComplete;
 
-    expect(mediaMenu.shadowRoot.querySelector('.media-menu-container').classList.contains('closed'))
-      .to.be.true;
+    expect(
+      mediaMenu.shadowRoot
+        ?.querySelector('.media-menu-container')
+        ?.classList.contains('closed'),
+    ).to.be.true;
   });
 });