@internetarchive/modal-manager 0.2.8 → 0.2.9-alpha.2

package/test/modal-config.test.ts

@@ -1,69 +1,69 @@
-import { expect } from '@open-wc/testing';
-import { html } from 'lit';
-
-import { ModalConfig } from '../src/modal-config';
-
-describe('Modal Config', () => {
-  it('can be instantiated properly', async () => {
-    const config = new ModalConfig();
-    const title = html`Foo`;
-    config.title = title;
-    config.headerColor = 'green';
-
-    expect(config.title).to.equal(title);
-    expect(config.headerColor).to.equal('green');
-  });
-
-  it('can be instantiated properly with constructor', async () => {
-    const title = html`Foo`;
-    const subtitle = html`Bar`;
-    const headline = html`Baz`;
-    const message = html`Boop`;
-
-    const headerColor = 'blue';
-    const showProcessingIndicator = true;
-    const processingImageMode = 'processing';
-    const showCloseButton = false;
-    const showHeaderLogo = false;
-    const closeOnBackdropClick = false;
-
-    const config = new ModalConfig({
-      title: title,
-      subtitle: subtitle,
-      headline: headline,
-      message: message,
-      headerColor: headerColor,
-      showProcessingIndicator: showProcessingIndicator,
-      processingImageMode: processingImageMode,
-      showCloseButton: showCloseButton,
-      showHeaderLogo: showHeaderLogo,
-      closeOnBackdropClick: closeOnBackdropClick,
-    });
-
-    expect(config.title).to.equal(title);
-    expect(config.subtitle).to.equal(subtitle);
-    expect(config.headline).to.equal(headline);
-    expect(config.message).to.equal(message);
-
-    expect(config.headerColor).to.equal(headerColor);
-    expect(config.showProcessingIndicator).to.equal(showProcessingIndicator);
-    expect(config.processingImageMode).to.equal(processingImageMode);
-    expect(config.showCloseButton).to.equal(showCloseButton);
-    expect(config.showHeaderLogo).to.equal(showHeaderLogo);
-    expect(config.closeOnBackdropClick).to.equal(closeOnBackdropClick);
-  });
-
-  it('instantiates properly with defaults', async () => {
-    const config = new ModalConfig();
-    expect(config.title).to.equal(undefined);
-    expect(config.subtitle).to.equal(undefined);
-    expect(config.headline).to.equal(undefined);
-    expect(config.message).to.equal(undefined);
-    expect(config.headerColor).to.equal('#55A183');
-    expect(config.showProcessingIndicator).to.equal(false);
-    expect(config.processingImageMode).to.equal('complete');
-    expect(config.showCloseButton).to.equal(true);
-    expect(config.showHeaderLogo).to.equal(true);
-    expect(config.closeOnBackdropClick).to.equal(true);
-  });
-});
+import { expect } from '@open-wc/testing';
+import { html } from 'lit';
+
+import { ModalConfig } from '../src/modal-config';
+
+describe('Modal Config', () => {
+  it('can be instantiated properly', async () => {
+    const config = new ModalConfig();
+    const title = html`Foo`;
+    config.title = title;
+    config.headerColor = 'green';
+
+    expect(config.title).to.equal(title);
+    expect(config.headerColor).to.equal('green');
+  });
+
+  it('can be instantiated properly with constructor', async () => {
+    const title = html`Foo`;
+    const subtitle = html`Bar`;
+    const headline = html`Baz`;
+    const message = html`Boop`;
+
+    const headerColor = 'blue';
+    const showProcessingIndicator = true;
+    const processingImageMode = 'processing';
+    const showCloseButton = false;
+    const showHeaderLogo = false;
+    const closeOnBackdropClick = false;
+
+    const config = new ModalConfig({
+      title: title,
+      subtitle: subtitle,
+      headline: headline,
+      message: message,
+      headerColor: headerColor,
+      showProcessingIndicator: showProcessingIndicator,
+      processingImageMode: processingImageMode,
+      showCloseButton: showCloseButton,
+      showHeaderLogo: showHeaderLogo,
+      closeOnBackdropClick: closeOnBackdropClick,
+    });
+
+    expect(config.title).to.equal(title);
+    expect(config.subtitle).to.equal(subtitle);
+    expect(config.headline).to.equal(headline);
+    expect(config.message).to.equal(message);
+
+    expect(config.headerColor).to.equal(headerColor);
+    expect(config.showProcessingIndicator).to.equal(showProcessingIndicator);
+    expect(config.processingImageMode).to.equal(processingImageMode);
+    expect(config.showCloseButton).to.equal(showCloseButton);
+    expect(config.showHeaderLogo).to.equal(showHeaderLogo);
+    expect(config.closeOnBackdropClick).to.equal(closeOnBackdropClick);
+  });
+
+  it('instantiates properly with defaults', async () => {
+    const config = new ModalConfig();
+    expect(config.title).to.equal(undefined);
+    expect(config.subtitle).to.equal(undefined);
+    expect(config.headline).to.equal(undefined);
+    expect(config.message).to.equal(undefined);
+    expect(config.headerColor).to.equal('#55A183');
+    expect(config.showProcessingIndicator).to.equal(false);
+    expect(config.processingImageMode).to.equal('complete');
+    expect(config.showCloseButton).to.equal(true);
+    expect(config.showHeaderLogo).to.equal(true);
+    expect(config.closeOnBackdropClick).to.equal(true);
+  });
+});

package/test/modal-manager.test.ts

@@ -1,245 +1,245 @@
-import { fixture, expect, oneEvent, elementUpdated } from '@open-wc/testing';
-import { html } from 'lit';
-
-import '../src/modal-manager';
-import { ModalConfig } from '../src/modal-config';
-import { ModalManager } from '../src/modal-manager';
-import { ModalManagerMode } from '../src/modal-manager-mode';
-import { ModalManagerInterface } from '../src/modal-manager-interface';
-
-describe('Modal Manager', () => {
-  it('defaults to closed', async () => {
-    const el = (await fixture(html`
-      <modal-manager></modal-manager>
-    `)) as ModalManager;
-
-    expect(el.mode).to.equal('closed');
-  });
-
-  it('can be closed by calling closeModal', async () => {
-    const el = (await fixture(html`
-      <modal-manager .mode=${ModalManagerMode.Open}></modal-manager>
-    `)) as ModalManager;
-
-    el.closeModal();
-    await elementUpdated(el);
-
-    expect(el.mode).to.equal('closed');
-  });
-
-  it('can be closed by clicking on the backdrop', async () => {
-    const el = (await fixture(html`
-      <modal-manager .mode=${ModalManagerMode.Open}></modal-manager>
-    `)) as ModalManager;
-
-    const backdrop = el.shadowRoot?.querySelector('.backdrop');
-    const clickEvent = new MouseEvent('click');
-
-    backdrop?.dispatchEvent(clickEvent);
-    await elementUpdated(el);
-
-    expect(el.mode).to.equal('closed');
-  });
-
-  it('emits a modeChanged event when opening', async () => {
-    const el = (await fixture(html`
-      <modal-manager></modal-manager>
-    `)) as ModalManager;
-
-    const config = new ModalConfig();
-
-    setTimeout(() => {
-      el.showModal({ config });
-    });
-    const response = await oneEvent(el, 'modeChanged');
-    expect(response.detail.mode).to.equal(ModalManagerMode.Open);
-  });
-
-  it('emits a modeChanged event when closing', async () => {
-    const el = (await fixture(html`
-      <modal-manager></modal-manager>
-    `)) as ModalManager;
-
-    const config = new ModalConfig();
-    el.showModal({ config });
-    await elementUpdated(el);
-
-    setTimeout(() => {
-      el.closeModal();
-    });
-    const response = await oneEvent(el, 'modeChanged');
-    expect(response.detail.mode).to.equal(ModalManagerMode.Closed);
-  });
-
-  it('can show a modal', async () => {
-    const el = (await fixture(html`
-      <modal-manager></modal-manager>
-    `)) as ModalManager;
-
-    const config = new ModalConfig();
-    el.showModal({ config });
-    await elementUpdated(el);
-    expect(el.mode).to.equal(ModalManagerMode.Open);
-  });
-
-  it('sets the --containerHeight CSS property when the window resizes', async () => {
-    const el = (await fixture(html`
-      <modal-manager></modal-manager>
-    `)) as ModalManager;
-
-    const config = new ModalConfig();
-    el.showModal({ config });
-    await elementUpdated(el);
-    const event = new Event('resize');
-    const propBefore = el.style.getPropertyValue('--containerHeight');
-    expect(propBefore).to.equal('');
-    window.dispatchEvent(event);
-    await elementUpdated(el);
-    const propAfter = el.style.getPropertyValue('--containerHeight');
-    expect(propAfter).to.not.equal('');
-  });
-
-  it('calls the userClosedModalCallback when the user taps the backdrop', async () => {
-    const el = (await fixture(html`
-      <modal-manager></modal-manager>
-    `)) as ModalManager;
-
-    const config = new ModalConfig();
-    let callbackCalled = false;
-    const callback = (): void => {
-      callbackCalled = true;
-    };
-    el.showModal({
-      config,
-      userClosedModalCallback: callback,
-    });
-    await elementUpdated(el);
-
-    const backdrop = el.shadowRoot?.querySelector('.backdrop');
-    const clickEvent = new MouseEvent('click');
-    backdrop?.dispatchEvent(clickEvent);
-
-    await elementUpdated(el);
-
-    expect(callbackCalled).to.equal(true);
-  });
-
-  it('does not call the userClosedModalCallback when the modal just closes', async () => {
-    const el = (await fixture(html`
-      <modal-manager></modal-manager>
-    `)) as ModalManager;
-
-    const config = new ModalConfig();
-    let callbackCalled = false;
-    const callback = (): void => {
-      callbackCalled = true;
-    };
-    el.showModal({
-      config,
-      userClosedModalCallback: callback,
-    });
-    await elementUpdated(el);
-    el.closeModal();
-    await elementUpdated(el);
-    expect(callbackCalled).to.equal(false);
-  });
-
-  it('calls the userClosedModalCallback when the user taps the backdrop', async () => {
-    const el = (await fixture(html`
-      <modal-manager></modal-manager>
-    `)) as ModalManager;
-
-    const config = new ModalConfig();
-    let callbackCalled = false;
-    const callback = (): void => {
-      callbackCalled = true;
-    };
-    el.showModal({
-      config,
-      userClosedModalCallback: callback,
-    });
-    await elementUpdated(el);
-
-    const modal = el.shadowRoot?.querySelector('modal-template');
-    const closeButton = modal?.shadowRoot?.querySelector('.close-button');
-    const clickEvent = new MouseEvent('click');
-    closeButton?.dispatchEvent(clickEvent);
-
-    await elementUpdated(el);
-
-    expect(callbackCalled).to.equal(true);
-  });
-
-  it('mode is set to closed when close button is pressed', async () => {
-    const el = (await fixture(html`
-      <modal-manager></modal-manager>
-    `)) as ModalManager;
-
-    const config = new ModalConfig();
-    el.showModal({ config });
-    await elementUpdated(el);
-
-    expect(el.mode).to.equal('open');
-
-    const modal = el.shadowRoot?.querySelector('modal-template');
-    const closeButton = modal?.shadowRoot?.querySelector('.close-button');
-    const clickEvent = new MouseEvent('click');
-    closeButton?.dispatchEvent(clickEvent);
-
-    await elementUpdated(el);
-
-    expect(el.mode).to.equal('closed');
-  });
-
-  it('allows the user to close by clicking on the backdrop if configured to', async () => {
-    const el = (await fixture(html`
-      <modal-manager></modal-manager>
-    `)) as ModalManager;
-
-    const config = new ModalConfig();
-    config.closeOnBackdropClick = true;
-    el.showModal({ config });
-    await elementUpdated(el);
-
-    const backdrop = el.shadowRoot?.querySelector('.backdrop');
-    const clickEvent = new MouseEvent('click');
-    backdrop?.dispatchEvent(clickEvent);
-
-    await elementUpdated(el);
-
-    expect(el.mode).to.equal('closed');
-  });
-
-  it("dont't allow the user to close by clicking on the backdrop if configured to", async () => {
-    const el = (await fixture(html`
-      <modal-manager></modal-manager>
-    `)) as ModalManagerInterface;
-
-    const config = new ModalConfig();
-    config.closeOnBackdropClick = false;
-    el.showModal({ config });
-    await elementUpdated(el);
-
-    const backdrop = el.shadowRoot?.querySelector('.backdrop');
-    const clickEvent = new MouseEvent('click');
-    backdrop?.dispatchEvent(clickEvent);
-
-    await elementUpdated(el);
-
-    expect(el.getMode()).to.equal('open');
-  });
-
-  it('ia logo should not visible on modal', async () => {
-    const el = (await fixture(html`
-      <modal-manager></modal-manager>
-    `)) as ModalManagerInterface;
-
-    const config = new ModalConfig();
-    config.showHeaderLogo = false;
-    el.showModal({ config });
-    await elementUpdated(el);
-
-    const logoIcon = el.shadowRoot?.querySelector('.logo-icon');
-    expect(logoIcon).to.not.exist;
-  });
-});
+import { fixture, expect, oneEvent, elementUpdated } from '@open-wc/testing';
+import { html } from 'lit';
+
+import '../src/modal-manager';
+import { ModalConfig } from '../src/modal-config';
+import { ModalManager } from '../src/modal-manager';
+import { ModalManagerMode } from '../src/modal-manager-mode';
+import { ModalManagerInterface } from '../src/modal-manager-interface';
+
+describe('Modal Manager', () => {
+  it('defaults to closed', async () => {
+    const el = (await fixture(html`
+      <modal-manager></modal-manager>
+    `)) as ModalManager;
+
+    expect(el.mode).to.equal('closed');
+  });
+
+  it('can be closed by calling closeModal', async () => {
+    const el = (await fixture(html`
+      <modal-manager .mode=${ModalManagerMode.Open}></modal-manager>
+    `)) as ModalManager;
+
+    el.closeModal();
+    await elementUpdated(el);
+
+    expect(el.mode).to.equal('closed');
+  });
+
+  it('can be closed by clicking on the backdrop', async () => {
+    const el = (await fixture(html`
+      <modal-manager .mode=${ModalManagerMode.Open}></modal-manager>
+    `)) as ModalManager;
+
+    const backdrop = el.shadowRoot?.querySelector('.backdrop');
+    const clickEvent = new MouseEvent('click');
+
+    backdrop?.dispatchEvent(clickEvent);
+    await elementUpdated(el);
+
+    expect(el.mode).to.equal('closed');
+  });
+
+  it('emits a modeChanged event when opening', async () => {
+    const el = (await fixture(html`
+      <modal-manager></modal-manager>
+    `)) as ModalManager;
+
+    const config = new ModalConfig();
+
+    setTimeout(() => {
+      el.showModal({ config });
+    });
+    const response = await oneEvent(el, 'modeChanged');
+    expect(response.detail.mode).to.equal(ModalManagerMode.Open);
+  });
+
+  it('emits a modeChanged event when closing', async () => {
+    const el = (await fixture(html`
+      <modal-manager></modal-manager>
+    `)) as ModalManager;
+
+    const config = new ModalConfig();
+    el.showModal({ config });
+    await elementUpdated(el);
+
+    setTimeout(() => {
+      el.closeModal();
+    });
+    const response = await oneEvent(el, 'modeChanged');
+    expect(response.detail.mode).to.equal(ModalManagerMode.Closed);
+  });
+
+  it('can show a modal', async () => {
+    const el = (await fixture(html`
+      <modal-manager></modal-manager>
+    `)) as ModalManager;
+
+    const config = new ModalConfig();
+    el.showModal({ config });
+    await elementUpdated(el);
+    expect(el.mode).to.equal(ModalManagerMode.Open);
+  });
+
+  it('sets the --containerHeight CSS property when the window resizes', async () => {
+    const el = (await fixture(html`
+      <modal-manager></modal-manager>
+    `)) as ModalManager;
+
+    const config = new ModalConfig();
+    el.showModal({ config });
+    await elementUpdated(el);
+    const event = new Event('resize');
+    const propBefore = el.style.getPropertyValue('--containerHeight');
+    expect(propBefore).to.equal('');
+    window.dispatchEvent(event);
+    await elementUpdated(el);
+    const propAfter = el.style.getPropertyValue('--containerHeight');
+    expect(propAfter).to.not.equal('');
+  });
+
+  it('calls the userClosedModalCallback when the user taps the backdrop', async () => {
+    const el = (await fixture(html`
+      <modal-manager></modal-manager>
+    `)) as ModalManager;
+
+    const config = new ModalConfig();
+    let callbackCalled = false;
+    const callback = (): void => {
+      callbackCalled = true;
+    };
+    el.showModal({
+      config,
+      userClosedModalCallback: callback,
+    });
+    await elementUpdated(el);
+
+    const backdrop = el.shadowRoot?.querySelector('.backdrop');
+    const clickEvent = new MouseEvent('click');
+    backdrop?.dispatchEvent(clickEvent);
+
+    await elementUpdated(el);
+
+    expect(callbackCalled).to.equal(true);
+  });
+
+  it('does not call the userClosedModalCallback when the modal just closes', async () => {
+    const el = (await fixture(html`
+      <modal-manager></modal-manager>
+    `)) as ModalManager;
+
+    const config = new ModalConfig();
+    let callbackCalled = false;
+    const callback = (): void => {
+      callbackCalled = true;
+    };
+    el.showModal({
+      config,
+      userClosedModalCallback: callback,
+    });
+    await elementUpdated(el);
+    el.closeModal();
+    await elementUpdated(el);
+    expect(callbackCalled).to.equal(false);
+  });
+
+  it('calls the userClosedModalCallback when the user taps the backdrop', async () => {
+    const el = (await fixture(html`
+      <modal-manager></modal-manager>
+    `)) as ModalManager;
+
+    const config = new ModalConfig();
+    let callbackCalled = false;
+    const callback = (): void => {
+      callbackCalled = true;
+    };
+    el.showModal({
+      config,
+      userClosedModalCallback: callback,
+    });
+    await elementUpdated(el);
+
+    const modal = el.shadowRoot?.querySelector('modal-template');
+    const closeButton = modal?.shadowRoot?.querySelector('.close-button');
+    const clickEvent = new MouseEvent('click');
+    closeButton?.dispatchEvent(clickEvent);
+
+    await elementUpdated(el);
+
+    expect(callbackCalled).to.equal(true);
+  });
+
+  it('mode is set to closed when close button is pressed', async () => {
+    const el = (await fixture(html`
+      <modal-manager></modal-manager>
+    `)) as ModalManager;
+
+    const config = new ModalConfig();
+    el.showModal({ config });
+    await elementUpdated(el);
+
+    expect(el.mode).to.equal('open');
+
+    const modal = el.shadowRoot?.querySelector('modal-template');
+    const closeButton = modal?.shadowRoot?.querySelector('.close-button');
+    const clickEvent = new MouseEvent('click');
+    closeButton?.dispatchEvent(clickEvent);
+
+    await elementUpdated(el);
+
+    expect(el.mode).to.equal('closed');
+  });
+
+  it('allows the user to close by clicking on the backdrop if configured to', async () => {
+    const el = (await fixture(html`
+      <modal-manager></modal-manager>
+    `)) as ModalManager;
+
+    const config = new ModalConfig();
+    config.closeOnBackdropClick = true;
+    el.showModal({ config });
+    await elementUpdated(el);
+
+    const backdrop = el.shadowRoot?.querySelector('.backdrop');
+    const clickEvent = new MouseEvent('click');
+    backdrop?.dispatchEvent(clickEvent);
+
+    await elementUpdated(el);
+
+    expect(el.mode).to.equal('closed');
+  });
+
+  it("dont't allow the user to close by clicking on the backdrop if configured to", async () => {
+    const el = (await fixture(html`
+      <modal-manager></modal-manager>
+    `)) as ModalManagerInterface;
+
+    const config = new ModalConfig();
+    config.closeOnBackdropClick = false;
+    el.showModal({ config });
+    await elementUpdated(el);
+
+    const backdrop = el.shadowRoot?.querySelector('.backdrop');
+    const clickEvent = new MouseEvent('click');
+    backdrop?.dispatchEvent(clickEvent);
+
+    await elementUpdated(el);
+
+    expect(el.getMode()).to.equal('open');
+  });
+
+  it('ia logo should not visible on modal', async () => {
+    const el = (await fixture(html`
+      <modal-manager></modal-manager>
+    `)) as ModalManagerInterface;
+
+    const config = new ModalConfig();
+    config.showHeaderLogo = false;
+    el.showModal({ config });
+    await elementUpdated(el);
+
+    const logoIcon = el.shadowRoot?.querySelector('.logo-icon');
+    expect(logoIcon).to.not.exist;
+  });
+});