@internetarchive/modal-manager 2.0.2 → 2.0.4-alpha-webdev7960.0

package/test/modal-template.test.ts

@@ -1,124 +1,206 @@
-import { fixture, expect, oneEvent } from '@open-wc/testing';
-import { html } from 'lit';
-import '../src/modal-template';
-import { ModalConfig } from '../src/modal-config';
-
-describe('Modal Template', () => {
-  it('has correct default configuration', async () => {
-    const el = await fixture(html` <modal-template></modal-template> `);
-
-    const processingLogo = el.shadowRoot?.querySelector('.processing-logo');
-    const headline = el.shadowRoot?.querySelector('.headline');
-    const message = el.shadowRoot?.querySelector('.message');
-    const title = el.shadowRoot?.querySelector('h1.title') as HTMLElement;
-
-    expect(headline).to.not.exist;
-    expect(message).to.not.exist;
-    expect(title).to.not.exist;
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    expect('hidden' in processingLogo!.classList);
-  });
-
-  it('does not show the title if one not provided', async () => {
-    const config = new ModalConfig();
-    config.title = undefined;
-
-    const el = await fixture(html`
-      <modal-template .config=${config}></modal-template>
-    `);
-
-    const title = el.shadowRoot?.querySelector('h1.title');
-    expect(title).to.not.exist;
-  });
-
-  it('emits closeButtonPressed event when close button is pressed', async () => {
-    const el = await fixture(html` <modal-template></modal-template> `);
-
-    const closeButton = el.shadowRoot?.querySelector('.close-button');
-    const clickEvent = new MouseEvent('click');
-
-    setTimeout(() => {
-      closeButton?.dispatchEvent(clickEvent);
-    });
-    const response = await oneEvent(el, 'closeButtonPressed', false);
-    expect(response).to.exist;
-  });
-
-  it('emits closeButtonPressed event when close button gets spacebar pressed', async () => {
-    const el = await fixture(html` <modal-template></modal-template> `);
-
-    const closeButton = el.shadowRoot?.querySelector('.close-button');
-    const clickEvent = new KeyboardEvent('keydown', { key: ' ' });
-
-    setTimeout(() => {
-      closeButton?.dispatchEvent(clickEvent);
-    });
-    const response = await oneEvent(el, 'closeButtonPressed', false);
-    expect(response).to.exist;
-  });
-
-  it('shows the processing indicator if configured to', async () => {
-    const config = new ModalConfig();
-    config.showProcessingIndicator = true;
-
-    const el = await fixture(html`
-      <modal-template .config=${config}></modal-template>
-    `);
-
-    const processingLogo = el.shadowRoot?.querySelector('.processing-logo');
-    const classList = processingLogo?.classList ?? [];
-    expect('hidden' in classList).to.equal(false);
-  });
-
-  it('shows the close button if configured to', async () => {
-    const config = new ModalConfig();
-    config.showCloseButton = true;
-    const el = await fixture(html`
-      <modal-template .config=${config}></modal-template>
-    `);
-
-    const closeButton = el.shadowRoot?.querySelector('.close-button');
-    expect(closeButton).to.exist;
-  });
-
-  it('hides the close button if configured to', async () => {
-    const config = new ModalConfig();
-    config.showCloseButton = false;
-    const el = await fixture(html`
-      <modal-template .config=${config}></modal-template>
-    `);
-
-    const closeButton = el.shadowRoot?.querySelector('.close-button');
-    expect(closeButton).to.not.exist;
-  });
-
-  it('shows the properties from the config', async () => {
-    const config = new ModalConfig();
-    config.title = html`Boop`;
-    config.subtitle = html`Bop`;
-    config.headline = html`Foo`;
-    config.message = html`Bar`;
-
-    const el = await fixture(html`
-      <modal-template .config=${config}></modal-template>
-    `);
-
-    const title = el.shadowRoot?.querySelector('h1');
-    const subtitle = el.shadowRoot?.querySelector('h2');
-
-    const headline = el.shadowRoot?.querySelector('.headline');
-    const message = el.shadowRoot?.querySelector('.message');
-
-    expect(title).to.exist;
-    expect(title?.innerText).to.equal('Boop');
-
-    expect(subtitle).to.exist;
-    expect(subtitle?.innerText).to.equal('Bop');
-
-    expect(headline).to.exist;
-    expect(headline?.textContent).to.equal('Foo');
-
-    expect(message).to.exist;
-    expect(message?.textContent).to.equal('Bar');
-  });
-});
+import { fixture, expect, oneEvent } from '@open-wc/testing';
+import { html } from 'lit';
+import '../src/modal-template';
+import { ModalConfig } from '../src/modal-config';
+
+describe('Modal Template', () => {
+  it('has correct default configuration', async () => {
+    const el = await fixture(html` <modal-template></modal-template> `);
+
+    const processingLogo = el.shadowRoot?.querySelector('.processing-logo');
+    const headline = el.shadowRoot?.querySelector('.headline');
+    const message = el.shadowRoot?.querySelector('.message');
+    const title = el.shadowRoot?.querySelector('h1.title') as HTMLElement;
+
+    expect(headline).to.not.exist;
+    expect(message).to.not.exist;
+    expect(title).to.not.exist;
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    expect('hidden' in processingLogo!.classList);
+  });
+
+  it('does not show the title if one not provided', async () => {
+    const config = new ModalConfig();
+    config.title = undefined;
+
+    const el = await fixture(html`
+      <modal-template .config=${config}></modal-template>
+    `);
+
+    const title = el.shadowRoot?.querySelector('h1.title');
+    expect(title).to.not.exist;
+  });
+
+  it('emits closeButtonPressed event when close button is pressed', async () => {
+    const el = await fixture(html` <modal-template></modal-template> `);
+
+    const closeButton = el.shadowRoot?.querySelector('.close-button');
+    const clickEvent = new MouseEvent('click');
+
+    setTimeout(() => {
+      closeButton?.dispatchEvent(clickEvent);
+    });
+    const response = await oneEvent(el, 'closeButtonPressed', false);
+    expect(response).to.exist;
+  });
+
+  it('emits closeButtonPressed event when close button gets spacebar pressed', async () => {
+    const el = await fixture(html` <modal-template></modal-template> `);
+
+    const closeButton = el.shadowRoot?.querySelector('.close-button');
+    const clickEvent = new KeyboardEvent('keydown', { key: ' ' });
+
+    setTimeout(() => {
+      closeButton?.dispatchEvent(clickEvent);
+    });
+    const response = await oneEvent(el, 'closeButtonPressed', false);
+    expect(response).to.exist;
+  });
+
+  it('emits leftNavButtonPressed event when left nav button is pressed', async () => {
+    const config = new ModalConfig();
+    config.showLeftNavButton = true;
+    const el = await fixture(html`
+      <modal-template .config=${config}></modal-template>
+    `);
+
+    const leftNavButton = el.shadowRoot?.querySelector('.back-button');
+    const clickEvent = new MouseEvent('click');
+
+    setTimeout(() => {
+      leftNavButton?.dispatchEvent(clickEvent);
+    });
+    const response = await oneEvent(el, 'leftNavButtonPressed', false);
+    expect(response).to.exist;
+  });
+
+  it('emits leftNavButtonPressed event when left nav button gets spacebar pressed', async () => {
+    const config = new ModalConfig();
+    config.showLeftNavButton = true;
+    const el = await fixture(html`
+      <modal-template .config=${config}></modal-template>
+    `);
+
+    const leftNavButton = el.shadowRoot?.querySelector('.back-button');
+    const clickEvent = new KeyboardEvent('keydown', { key: ' ' });
+
+    setTimeout(() => {
+      leftNavButton?.dispatchEvent(clickEvent);
+    });
+    const response = await oneEvent(el, 'leftNavButtonPressed', false);
+    expect(response).to.exist;
+  });
+
+  it('shows the processing indicator if configured to', async () => {
+    const config = new ModalConfig();
+    config.showProcessingIndicator = true;
+
+    const el = await fixture(html`
+      <modal-template .config=${config}></modal-template>
+    `);
+
+    const processingLogo = el.shadowRoot?.querySelector('.processing-logo');
+    const classList = processingLogo?.classList ?? [];
+    expect('hidden' in classList).to.equal(false);
+  });
+
+  it('shows the left nav button if configured to', async () => {
+    const config = new ModalConfig();
+    config.showLeftNavButton = true;
+    const el = await fixture(html`
+      <modal-template .config=${config}></modal-template>
+    `);
+
+    const leftNavButton = el.shadowRoot?.querySelector('.back-button');
+    expect(leftNavButton).to.exist;
+  });
+
+  it('hides the left nav button if configured to', async () => {
+    const config = new ModalConfig();
+    config.showCloseButton = false;
+    const el = await fixture(html`
+      <modal-template .config=${config}></modal-template>
+    `);
+
+    const closeButton = el.shadowRoot?.querySelector('.close-button');
+    expect(closeButton).to.not.exist;
+  });
+
+  it('uses custom text for the left nav button if configured to', async () => {
+    const config = new ModalConfig();
+    config.showLeftNavButton = true;
+    config.leftNavButtonText = 'Previous';
+    const el = await fixture(html`
+      <modal-template .config=${config}></modal-template>
+    `);
+
+    const leftNavButton = el.shadowRoot?.querySelector('.back-button');
+
+    expect(leftNavButton).to.exist;
+    expect(leftNavButton?.innerHTML).to.contain('Previous');
+  });
+
+  it('does not use any text for the left nav button if not configured to', async () => {
+    const config = new ModalConfig();
+    config.showLeftNavButton = true;
+
+    const el = await fixture(html`
+      <modal-template .config=${config}></modal-template>
+    `);
+
+    const leftNavButton = el.shadowRoot?.querySelector('.back-button');
+    expect(leftNavButton?.innerHTML).not.to.contain('Previous');
+  });
+
+  it('shows the close button if configured to', async () => {
+    const config = new ModalConfig();
+    config.showCloseButton = true;
+    const el = await fixture(html`
+      <modal-template .config=${config}></modal-template>
+    `);
+
+    const closeButton = el.shadowRoot?.querySelector('.close-button');
+    expect(closeButton).to.exist;
+  });
+
+  it('hides the close button if configured to', async () => {
+    const config = new ModalConfig();
+    config.showCloseButton = false;
+    const el = await fixture(html`
+      <modal-template .config=${config}></modal-template>
+    `);
+
+    const closeButton = el.shadowRoot?.querySelector('.close-button');
+    expect(closeButton).to.not.exist;
+  });
+
+  it('shows the properties from the config', async () => {
+    const config = new ModalConfig();
+    config.title = html`Boop`;
+    config.subtitle = html`Bop`;
+    config.headline = html`Foo`;
+    config.message = html`Bar`;
+
+    const el = await fixture(html`
+      <modal-template .config=${config}></modal-template>
+    `);
+
+    const title = el.shadowRoot?.querySelector('h1');
+    const subtitle = el.shadowRoot?.querySelector('h2');
+
+    const headline = el.shadowRoot?.querySelector('.headline');
+    const message = el.shadowRoot?.querySelector('.message');
+
+    expect(title).to.exist;
+    expect(title?.innerText).to.equal('Boop');
+
+    expect(subtitle).to.exist;
+    expect(subtitle?.innerText).to.equal('Bop');
+
+    expect(headline).to.exist;
+    expect(headline?.textContent).to.equal('Foo');
+
+    expect(message).to.exist;
+    expect(message?.textContent).to.equal('Bar');
+  });
+});

package/tsconfig.json

@@ -1,21 +1,21 @@
-{
-  "compilerOptions": {
-    "target": "es6",
-    "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,
-    "declaration": true,
-    "rootDir": "./",
-    "skipLibCheck": true
-  },
-  "include": ["**/*.ts"]
-}
+{
+  "compilerOptions": {
+    "target": "es6",
+    "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,
+    "declaration": true,
+    "rootDir": "./",
+    "skipLibCheck": true
+  },
+  "include": ["**/*.ts"]
+}

package/vite.config.ts

@@ -1,23 +1,23 @@
-import { defineConfig } from 'vite';
-import { resolve } from 'path';
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  base: '',
-  assetsInclude: ['**/*.jpg'],
-  build: {
-    outDir: 'ghpages',
-    manifest: true,
-    rollupOptions: {
-      input: {
-        main: resolve(__dirname, 'index.html'),
-      },
-    },
-  },
-  server: {
-    host: true,
-    port: 8080,
-    open: true,
-    cors: true,
-  },
-});
+import { defineConfig } from 'vite';
+import { resolve } from 'path';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  base: '',
+  assetsInclude: ['**/*.jpg'],
+  build: {
+    outDir: 'ghpages',
+    manifest: true,
+    rollupOptions: {
+      input: {
+        main: resolve(__dirname, 'index.html'),
+      },
+    },
+  },
+  server: {
+    host: true,
+    port: 8080,
+    open: true,
+    cors: true,
+  },
+});