golden/modules/query-dialog-sk/query-dialog-sk_test.ts

import './index';

import { expect } from 'chai';
import { ParamSet, fromParamSet } from 'common-sk/modules/query';
import { $$ } from 'common-sk/modules/dom';
import { setUpElementUnderTest, eventPromise, noEventPromise } from '../../../infra-sk/modules/test_util';
import { QueryDialogSk } from './query-dialog-sk';
import { QueryDialogSkPO } from './query-dialog-sk_po';

describe('query-dialog-sk', () => {
  const newInstance = setUpElementUnderTest<QueryDialogSk>('query-dialog-sk');

  let queryDialogSk: QueryDialogSk;
  let queryDialogSkPO: QueryDialogSkPO;

  beforeEach(() => {
    queryDialogSk = newInstance();
    queryDialogSkPO = new QueryDialogSkPO(queryDialogSk);
  });

  describe('open/close/edit events', () => {
    it('should emit "query-dialog-open" when opened', async () => {
      const event = eventPromise('query-dialog-open');
      queryDialogSk.open({}, '');
      await event;
    });

    it('should emit "query-dialog-close" but not "edit" when closed via the "Cancel" button',
      async () => {
        queryDialogSk.open({}, '');
        const events = Promise.all([eventPromise('query-dialog-close'), noEventPromise('edit')]);
        await queryDialogSkPO.clickCancelBtn();
        await events;
      });

    it('should emit "query-dialog-close" and "edit" when closed via the "Show Matches" button',
      async () => {
        queryDialogSk.open({}, '');
        const events = Promise.all([eventPromise('query-dialog-close'), eventPromise('edit')]);
        await queryDialogSkPO.clickShowMatchesBtn();
        await events;
      });
  });

  describe('opened with an empty selection', () => {
    const paramSet: ParamSet = { a: ['1', '2', '3'], b: ['4', '5'], c: ['6'] };

    beforeEach(() => {
      queryDialogSk.open(paramSet, /* selection= */ '');
    });

    it('should have an empty selection', async () => {
      // The query-sk component correctly shows the ParamSet.
      expect(await queryDialogSkPO.getParamSet()).to.deep.equal(paramSet);

      // But none of the ParamSet items are selected.
      expect(await queryDialogSkPO.getSelection()).to.deep.equal({});

      // The "empty selection" placeholder text is visible instead of the paramset-sk component.
      expect(await queryDialogSkPO.isEmptySelectionMessageVisible()).to.be.true;
      expect(await queryDialogSkPO.isParamSetSkVisible()).to.be.false;
    });

    it('should update paramset-sk when selection changes', async () => {
      await queryDialogSkPO.setSelection({ a: ['1'] });
      expect(await queryDialogSkPO.getParamSetSkContents()).to.deep.equal({ a: ['1'] });

      // The placeholder text should not be visible. It suffices to assert this just once.
      expect(await queryDialogSkPO.isEmptySelectionMessageVisible()).to.be.false;

      await queryDialogSkPO.setSelection({ a: ['1', '2'] });
      expect(await queryDialogSkPO.getParamSetSkContents()).to.deep.equal({ a: ['1', '2'] });

      await queryDialogSkPO.setSelection({ a: ['1', '2'], b: ['4'] });
      expect(await queryDialogSkPO.getParamSetSkContents())
        .to.deep.equal({ a: ['1', '2'], b: ['4'] });
    });

    it('should emit event "edit" containing the current selection when "Show Matches" is clicked',
      async () => {
        await queryDialogSkPO.setSelection({ a: ['1', '2'], b: ['4'] });

        // Click "Show Matches" button and catch the "edit" event.
        const event = eventPromise<CustomEvent<string>>('edit');
        await queryDialogSkPO.clickShowMatchesBtn();
        const eventSelection = (await event).detail;

        // The event contents should match the selection.
        expect(eventSelection).to.equal('a=1&a=2&b=4');
      });

    it('should clear the previous selection when reopened with an empty selection', async () => {
      // Select a=1
      await queryDialogSkPO.setSelection({ a: ['1'] });

      // It should have selected a=1.
      expect(await queryDialogSkPO.getParamSetSkContents()).to.deep.equal({ a: ['1'] });

      // Close dialog.
      await queryDialogSkPO.clickCancelBtn();

      // Reopen with same ParamSet and empty selection.
      queryDialogSk.open(paramSet, /* selection= */ '');

      // Selection should be empty.
      expect(await queryDialogSkPO.getSelection()).to.deep.equal({});
      expect(await queryDialogSkPO.isEmptySelectionMessageVisible()).to.be.true;
      expect(await queryDialogSkPO.isParamSetSkVisible()).to.be.false;
    });
  });

  describe('opened with a non-empty selection', () => {
    const paramSet: ParamSet = { a: ['1', '2', '3'], b: ['4', '5'], c: ['6'] };
    const selection: ParamSet = { a: ['1', '2'], b: ['4'] };

    beforeEach(() => {
      queryDialogSk.open(paramSet, fromParamSet(selection));
    });

    it('shows the passed in selection', async () => {
      // Both query-sk and paramset-sk show the passed in selection.
      expect(await queryDialogSkPO.getSelection()).to.deep.equal(selection);
      expect(await queryDialogSkPO.getParamSetSkContents()).to.deep.equal(selection);

      // The "empty selection" placeholder text is not visible.
      expect(await queryDialogSkPO.isEmptySelectionMessageVisible()).to.be.false;
    });

    it('can be reopened with a different selection', async () => {
      const differentSelection: ParamSet = { a: ['2', '3'], c: ['6'] };

      // Close dialog and reopen it with a different selection.
      await queryDialogSkPO.clickCancelBtn();
      queryDialogSk.open(paramSet, fromParamSet(differentSelection));

      // Both query-sk and paramset-sk show the passed in selection.
      expect(await queryDialogSkPO.getSelection()).to.deep.equal(differentSelection);
      expect(await queryDialogSkPO.getParamSetSkContents()).to.deep.equal(differentSelection);
    });
  });

  describe('reopened with a different ParamSet', async () => {
    const paramSet: ParamSet = { a: ['1', '2', '3'], b: ['4', '5'], c: ['6'] };
    const selection: ParamSet = { a: ['3'], b: ['4'] };

    const differentParamSet: ParamSet = { a: ['3', '4', '5'], b: ['6'], z: ['7'] };
    const differentSelection: ParamSet = { a: ['3', '4'], b: ['6'] };

    beforeEach(() => {
      queryDialogSk.open(paramSet, fromParamSet(selection));
    });

    it('can be reopened with a different ParamSet and an empty selection', async () => {
      // Close dialog and reopen it with a different ParamSet.
      await queryDialogSkPO.clickCancelBtn();
      queryDialogSk.open(differentParamSet, /* selection= */ '');

      // The query-sk component shows the new ParamSet, and the selection is empty.
      expect(await queryDialogSkPO.getParamSet()).to.deep.equal(differentParamSet);
      expect(await queryDialogSkPO.getSelection()).to.deep.equal({});

      // The "empty selection" placeholder text is visible instead of the paramset-sk component.
      expect(await queryDialogSkPO.isEmptySelectionMessageVisible()).to.be.true;
      expect(await queryDialogSkPO.isParamSetSkVisible()).to.be.false;
    });

    it('can be reopened with a different ParamSet and a non-empty selection', async () => {
      // Close dialog and reopen it with a different ParamSet and a non-empty selection.
      await queryDialogSkPO.clickCancelBtn();
      queryDialogSk.open(differentParamSet, fromParamSet(differentSelection));

      // Both query-sk and paramset-sk show the passed in selection.
      expect(await queryDialogSkPO.getSelection()).to.deep.equal(differentSelection);
      expect(await queryDialogSkPO.getParamSetSkContents()).to.deep.equal(differentSelection);

      // The placeholder text should not be visible.
      expect(await queryDialogSkPO.isEmptySelectionMessageVisible()).to.be.false;
    });
  });

  it('rationalizes an invalid selection', async () => {
    const paramSet: ParamSet = { a: ['1', '2', '3'], b: ['4', '5'], c: ['6'] };

    // This contains the invalid value "a=4" and a value for the invalid key "d".
    const invalidSelection: ParamSet = { a: ['2', '3', '4'], b: ['5'], d: ['7'] };

    // This is the invalidSelection with the invalid key/value pairs removed.
    const rationalizedSelection: ParamSet = { a: ['2', '3'], b: ['5'] };

    // Open dialog with invalid selection.
    queryDialogSk.open(paramSet, fromParamSet(invalidSelection));

    // The dialog should rationalize the invalid selection.
    expect(await queryDialogSkPO.getSelection()).to.deep.equal(rationalizedSelection);
    expect(await queryDialogSkPO.getParamSetSkContents()).to.deep.equal(rationalizedSelection);
  });

  it('can customize the submit button label', () => {
    // Dialog contents do not matter.
    queryDialogSk.open({ a: ['1'] }, '');

    const showMatchesBtn = $$<HTMLButtonElement>('button.show-matches', queryDialogSk)!;

    // Shows "Show Matches" by default.
    expect(showMatchesBtn.innerText).to.equal('Show Matches');

    // Button label can be changed.
    queryDialogSk.submitButtonLabel = 'Submit';
    expect(showMatchesBtn.innerText).to.equal('Submit');
  });
});