infra-sk/modules/query-values-sk/query-values-sk_test.ts

import './index';
import { assert } from 'chai';
import {
  QueryValuesSk,
  QueryValuesSkQueryValuesChangedEventDetail,
} from './query-values-sk';
import { QueryValuesSkPO } from './query-values-sk_po';
import { setUpElementUnderTest, eventPromise } from '../test_util';

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

  let queryValuesSk: QueryValuesSk;
  let queryValuesSkPO: QueryValuesSkPO;

  beforeEach(() => {
    queryValuesSk = newInstance();
    queryValuesSk.options = ['x86', 'arm'];

    queryValuesSkPO = new QueryValuesSkPO(queryValuesSk);
  });

  describe('selected property setter', () => {
    it('removes tildes', () => {
      queryValuesSk.selected = ['~ar'];
      assert.deepEqual(['ar'], queryValuesSk.selected);
    });

    it('removes checks', () => {
      queryValuesSk.selected = ['!x86', '!arm'];
      assert.deepEqual(['x86', 'arm'], queryValuesSk.selected);
    });

    it('leaves the value unchanged if it does not contain checks or tildes', () => {
      queryValuesSk.selected = ['x86', 'arm'];
      assert.deepEqual(['x86', 'arm'], queryValuesSk.selected);
    });
  });

  describe('with regex', () => {
    // We mark the beforeEach hook as async to give the MultiSelectSk's MutationObserver microtask
    // a chance to run and detect the selection change before we execute the tests.
    beforeEach(async () => {
      queryValuesSk.selected = ['~ar'];
    });

    it('shows the options and initial selection', async () => {
      assert.deepEqual(['x86', 'arm'], await queryValuesSkPO.getOptions());
      assert.deepEqual(['~ar'], await queryValuesSkPO.getSelected());
    });

    it('allows the user to set the regex', async () => {
      assert.isTrue(await queryValuesSkPO.isRegexCheckboxChecked());

      const event = queryValuesChangedEventPromise();
      await queryValuesSkPO.setRegexValue('x8');
      const value = (await event).detail;

      assert.deepEqual({ invert: false, regex: true, values: ['~x8'] }, value);
    });

    it('toggles a regex correctly on invert click', async () => {
      assert.isTrue(await queryValuesSkPO.isRegexCheckboxChecked());

      const value = await clickInvertAndWaitForEvent();
      assert.deepEqual(value.values, []);
      assert.isTrue(value.invert);
      assert.isFalse(value.regex);

      // Regex and Invert are mutually exclusive.
      assert.isFalse(
        await queryValuesSkPO.isRegexCheckboxChecked(),
        'Regex checkbox is unchecked'
      );
      assert.isTrue(
        await queryValuesSkPO.isInvertCheckboxChecked(),
        'Invert is checked'
      );
    });

    it('toggles a regex correctly for regex click', async () => {
      assert.isTrue(await queryValuesSkPO.isRegexCheckboxChecked());

      let value = await clickRegexAndWaitForEvent();
      assert.deepEqual([], value.values);
      assert.isFalse(value.invert);
      assert.isFalse(value.regex);
      assert.isFalse(
        await queryValuesSkPO.isRegexCheckboxChecked(),
        'Regex is unchecked'
      );
      assert.isFalse(
        await queryValuesSkPO.isInvertCheckboxChecked(),
        'Invert stays unchecked'
      );

      // Now go back to regex.
      value = await clickRegexAndWaitForEvent();
      assert.deepEqual(
        { invert: false, regex: true, values: ['~ar'] },
        value,
        'Event was sent.'
      );
      assert.isTrue(
        await queryValuesSkPO.isRegexCheckboxChecked(),
        'Regex is checked'
      );
      assert.isFalse(
        await queryValuesSkPO.isInvertCheckboxChecked(),
        'Invert stays unchecked'
      );
    });
  });

  describe('normal input', () => {
    // We mark the beforeEach hook as async to give the MultiSelectSk's MutationObserver microtask
    // a chance to run and detect the selection change before we execute the tests.
    beforeEach(async () => {
      queryValuesSk.selected = ['arm'];
    });

    it('shows the options and initial selection', async () => {
      assert.deepEqual(['x86', 'arm'], await queryValuesSkPO.getOptions());
      assert.deepEqual(['arm'], await queryValuesSkPO.getSelected());
    });

    it('can change the selection via the UI', async () => {
      await queryValuesSkPO.setSelected(['x86']);
      assert.deepEqual(['x86'], queryValuesSk.selected);
    });

    it('toggles invert correctly for invert click', async () => {
      assert.isFalse(await queryValuesSkPO.isRegexCheckboxChecked());
      assert.isFalse(await queryValuesSkPO.isInvertCheckboxChecked());

      let value = await clickInvertAndWaitForEvent();
      assert.deepEqual(
        { invert: true, regex: false, values: ['!arm'] },
        value,
        'Event was sent.'
      );
      assert.isFalse(await queryValuesSkPO.isRegexCheckboxChecked());
      assert.isTrue(await queryValuesSkPO.isInvertCheckboxChecked());

      value = await clickInvertAndWaitForEvent();
      assert.deepEqual(
        { invert: false, regex: false, values: ['arm'] },
        value,
        'Event was sent.'
      );
      assert.isFalse(await queryValuesSkPO.isRegexCheckboxChecked());
      assert.isFalse(await queryValuesSkPO.isInvertCheckboxChecked());
    });

    it('checks if filtering on options is done correctly.', async () => {
      const originalOptions = await queryValuesSkPO.getOptions();
      await queryValuesSkPO.setFilterInputValue('ar');
      assert.deepEqual(
        await queryValuesSkPO.getOptions(),
        ['arm'],
        'Filtering not done correctly.'
      );

      await queryValuesSkPO.setFilterInputValue('');
      assert.deepEqual(
        await queryValuesSkPO.getOptions(),
        originalOptions,
        'Empty filter value should reset the options to the original list.'
      );

      await queryValuesSkPO.setFilterInputValue('returnNothing');
      assert.deepEqual(
        await queryValuesSkPO.getOptions(),
        [],
        'Query should not return any options'
      );
    });

    it('checks if the clear filter button works correctly.', async () => {
      const originalOptions = await queryValuesSkPO.getOptions();
      await queryValuesSkPO.setFilterInputValue('ar');
      assert.deepEqual(
        await queryValuesSkPO.getOptions(),
        ['arm'],
        'Filtering not done correctly.'
      );

      await queryValuesSkPO.clickClearFilter();
      assert.deepEqual(
        await queryValuesSkPO.getOptions(),
        originalOptions,
        'Clear filter button expected to revert to original options.'
      );
    });
  });

  describe('with inverted input', () => {
    // We mark the beforeEach hook as async to give the MultiSelectSk's MutationObserver microtask
    // a chance to run and detect the selection change before we execute the tests.
    beforeEach(async () => {
      queryValuesSk.selected = ['!arm'];
    });

    it('shows the options and initial selection', async () => {
      assert.deepEqual(['x86', 'arm'], await queryValuesSkPO.getOptions());
      assert.deepEqual(['!arm'], await queryValuesSkPO.getSelected());
    });

    it('toggles correctly for invert click when starting inverted', async () => {
      assert.isFalse(await queryValuesSkPO.isRegexCheckboxChecked());
      assert.isTrue(await queryValuesSkPO.isInvertCheckboxChecked());

      let value = await clickInvertAndWaitForEvent();
      assert.deepEqual(
        { invert: false, regex: false, values: ['arm'] },
        value,
        'Event was sent.'
      );
      assert.isFalse(await queryValuesSkPO.isRegexCheckboxChecked());
      assert.isFalse(await queryValuesSkPO.isInvertCheckboxChecked());

      value = await clickInvertAndWaitForEvent();
      assert.deepEqual(
        { invert: true, regex: false, values: ['!arm'] },
        value,
        'Event was sent.'
      );
      assert.isFalse(await queryValuesSkPO.isRegexCheckboxChecked());
      assert.isTrue(await queryValuesSkPO.isInvertCheckboxChecked());
    });

    it('sends right event when value is clicked', async () => {
      assert.isFalse(await queryValuesSkPO.isRegexCheckboxChecked());
      assert.isTrue(await queryValuesSkPO.isInvertCheckboxChecked());

      const event = queryValuesChangedEventPromise();
      await queryValuesSkPO.clickOption('x86');
      let value = (await event).detail;
      assert.deepEqual(
        { invert: true, regex: false, values: ['!x86', '!arm'] },
        value,
        'Event was sent.'
      );

      value = await clickInvertAndWaitForEvent();
      assert.deepEqual(
        { invert: false, regex: false, values: ['x86', 'arm'] },
        value,
        'Event was sent.'
      );
      assert.isFalse(await queryValuesSkPO.isRegexCheckboxChecked());
      assert.isFalse(await queryValuesSkPO.isInvertCheckboxChecked());
    });
  });

  describe('with invert and regex hidden', () => {
    beforeEach(() => {
      queryValuesSk.setAttribute('hide_invert', 'true');
      queryValuesSk.setAttribute('hide_regex', 'true');
    });

    it('can hide the regex and invert boxes', async () => {
      assert.isTrue(await queryValuesSkPO.isInvertCheckboxHidden());
      assert.isTrue(await queryValuesSkPO.isRegexCheckboxHidden());
    });
  });

  const queryValuesChangedEventPromise = () =>
    eventPromise<CustomEvent<QueryValuesSkQueryValuesChangedEventDetail>>(
      'query-values-changed'
    );

  const clickInvertAndWaitForEvent = async () => {
    const event = queryValuesChangedEventPromise();
    await queryValuesSkPO.clickInvertCheckbox();
    return (await event).detail;
  };

  const clickRegexAndWaitForEvent = async () => {
    const event = queryValuesChangedEventPromise();
    await queryValuesSkPO.clickRegexCheckbox();
    return (await event).detail;
  };
});