select_test.ts

/**
 * @license
 * Copyright 2023 Google LLC
 * SPDX-License-Identifier: Apache-2.0
 */

// import 'jasmine'; (google3-only)

import {html, render} from 'lit';

import {createFormTests} from '../testing/forms.js';
import {createTokenTests} from '../testing/tokens.js';

import {MdFilledSelect} from './filled-select.js';
import {SelectHarness} from './harness.js';
import {MdOutlinedSelect} from './outlined-select.js';
import {MdSelectOption} from './select-option.js';

describe('<md-outlined-select>', () => {
  describe('.styles', () => {
    createTokenTests(MdOutlinedSelect.styles);
  });

  let root: HTMLDivElement;

  beforeEach(() => {
    root = document.createElement('div');
    document.body.appendChild(root);
  });

  afterEach(() => {
    root?.remove();
  });

  it('clicking on option triggers change', async () => {
    let changed = false;
    render(
      html` <md-outlined-select
        @change=${() => {
          changed = true;
        }}>
        <md-select-option selected></md-select-option>
        <md-select-option></md-select-option>
      </md-outlined-select>`,
      root,
    );
    const selectEl = root.querySelector('md-outlined-select')!;
    await selectEl.updateComplete;

    await new SelectHarness(selectEl).clickOption(1);

    expect(changed).toBeTrue();
  });

  it('typeahead selects an option', async () => {
    let changed = false;
    render(
      html` <md-outlined-select
        @change=${() => {
          changed = true;
        }}>
        <md-select-option
          value="apple"
          typeahead-text="apple"></md-select-option>
        <md-select-option
          value="banana"
          typeahead-text="banana"></md-select-option>
      </md-outlined-select>`,
      root,
    );
    const selectEl = root.querySelector('md-outlined-select')!;
    await selectEl.updateComplete;

    const harness = new SelectHarness(selectEl);
    await harness.focusWithKeyboard();
    await harness.keypress('b');
    await selectEl.updateComplete;

    expect(selectEl.value).withContext('value after typeahead').toBe('banana');
    expect(changed).withContext('option changed').toBeTrue();
  });

  it('typeahead with no matching option does not change selected option', async () => {
    let changed = false;
    render(
      html` <md-outlined-select
        @change=${() => {
          changed = true;
        }}>
        <md-select-option
          value="apple"
          typeahead-text="apple"
          selected></md-select-option>
        <md-select-option
          value="banana"
          typeahead-text="banana"></md-select-option>
      </md-outlined-select>`,
      root,
    );
    const selectEl = root.querySelector('md-outlined-select')!;
    await selectEl.updateComplete;

    const harness = new SelectHarness(selectEl);
    await harness.focusWithKeyboard();
    await harness.keypress('z');
    await selectEl.updateComplete;

    expect(selectEl.value)
      .withContext('value after non-matching typeahead keypress')
      .toBe('apple');
    expect(changed).withContext('did not change').toBeFalse();
  });

  it('clicking an option with mouse and then typeahead with no matching option does not change the selected option', async () => {
    render(
      html` <md-outlined-select>
        <md-select-option
          value="apple"
          typeahead-text="apple"
          selected></md-select-option>
        <md-select-option
          value="banana"
          typeahead-text="banana"></md-select-option>
      </md-outlined-select>`,
      root,
    );
    const selectEl = root.querySelector('md-outlined-select')!;
    await selectEl.updateComplete;

    // Open menu to click an option
    const harness = new SelectHarness(selectEl);
    await harness.clickWithMouse();
    await selectEl.updateComplete; // wait for menu to open

    await harness.clickOption(1);
    expect(selectEl.value)
      .withContext('value after clicking option')
      .toBe('banana');

    await harness.keypress('z');
    await selectEl.updateComplete;

    expect(selectEl.value)
      .withContext(
        'value after non-matching typeahead keypress stays the same (banana)',
      )
      .toBe('banana');
  });

  describe('forms', () => {
    createFormTests({
      queryControl: (root) => root.querySelector('md-outlined-select'),
      valueTests: [
        {
          name: 'unnamed',
          render: () => html`
            <md-outlined-select>
              <md-select-option value="one"></md-select-option>
              <md-select-option value="two" selected></md-select-option>
            </md-outlined-select>
          `,
          assertValue(formData) {
            expect(formData)
              .withContext('should not add anything to form without a name')
              .toHaveSize(0);
          },
        },
        {
          name: 'unselected',
          render: () => html`
            <md-outlined-select name="select">
              <md-select-option value="one"></md-select-option>
              <md-select-option value="two"></md-select-option>
            </md-outlined-select>
          `,
          assertValue(formData) {
            expect(formData.get('select')).toBe('');
          },
        },
        {
          name: 'selected',
          render: () => html`
            <md-outlined-select name="select">
              <md-select-option value="one"></md-select-option>
              <md-select-option value="two" selected></md-select-option>
            </md-outlined-select>
          `,
          assertValue(formData) {
            expect(formData.get('select')).toBe('two');
          },
        },
        {
          name: 'disabled',
          render: () => html`
            <md-outlined-select name="select" disabled>
              <md-select-option value="one"></md-select-option>
              <md-select-option value="two" selected></md-select-option>
            </md-outlined-select>
          `,
          assertValue(formData) {
            expect(formData)
              .withContext('should not add anything to form when disabled')
              .toHaveSize(0);
          },
        },
      ],
      resetTests: [
        {
          name: 'reset to unselected',
          render: () => html`
            <md-outlined-select name="select">
              <md-select-option value="one"></md-select-option>
              <md-select-option value="two"></md-select-option>
            </md-outlined-select>
          `,
          change(select) {
            select.value = 'one';
          },
          assertReset(select) {
            expect(select.value)
              .withContext('select.value after reset')
              .toBe('');
          },
        },
        {
          name: 'reset to selected',
          render: () => html`
            <md-outlined-select name="select">
              <md-select-option value="one"></md-select-option>
              <md-select-option value="two" selected></md-select-option>
            </md-outlined-select>
          `,
          change(select) {
            select.value = 'one';
          },
          assertReset(select) {
            expect(select.value)
              .withContext('select.value after reset')
              .toBe('two');
          },
        },
      ],
      restoreTests: [
        {
          name: 'restore unselected',
          render: () => html`
            <md-outlined-select name="select">
              <md-select-option value="one"></md-select-option>
              <md-select-option value="two"></md-select-option>
            </md-outlined-select>
          `,
          assertRestored(select) {
            expect(select.value)
              .withContext('select.value after restore')
              .toBe('');
          },
        },
        {
          name: 'restore selected',
          render: () => html`
            <md-outlined-select name="select">
              <md-select-option value="one"></md-select-option>
              <md-select-option value="two" selected></md-select-option>
            </md-outlined-select>
          `,
          assertRestored(select) {
            expect(select.value)
              .withContext('select.value after restore')
              .toBe('two');
          },
        },
      ],
    });
  });
});

describe('<md-filled-select>', () => {
  describe('.styles', () => {
    createTokenTests(MdFilledSelect.styles);
  });
});

describe('<md-select-option>', () => {
  describe('.styles', () => {
    createTokenTests(MdSelectOption.styles);
  });
});