polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label_test.js

/**
 * @license
 * Copyright (C) 2016 The Android Open Source Project
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import '../../../test/common-test-setup-karma.js';
import './gr-editable-label.js';
import {html} from '@polymer/polymer/lib/utils/html-tag.js';

const basicFixture = fixtureFromTemplate(html`
<gr-editable-label
        value="value text"
        placeholder="label text"></gr-editable-label>
`);

const noPlaceholderFixture = fixtureFromTemplate(html`
<gr-editable-label value=""></gr-editable-label>
`);

const readOnlyFixture = fixtureFromTemplate(html`
<gr-editable-label
        read-only
        value="value text"
        placeholder="label text"></gr-editable-label>
`);

suite('gr-editable-label tests', () => {
  let element;
  let elementNoPlaceholder;
  let input;
  let label;

  setup(async () => {
    element = basicFixture.instantiate();
    elementNoPlaceholder = noPlaceholderFixture.instantiate();
    flush();
    label = element.shadowRoot.querySelector('label');

    await flush();
    // In Polymer 2 inputElement isn't nativeInput anymore
    const paperInput = element.shadowRoot.querySelector('#input');
    input = paperInput.$.nativeInput || paperInput.inputElement;
  });

  test('renders', () => {
    expect(element).shadowDom.to.equal(`<label
      aria-label="value text"
      class="editable"
      part="label"
      title="value text"
    >
      value text
    </label>
    <dom-if style="display: none;"><template is="dom-if"></template></dom-if>
    <dom-if style="display: none;"><template is="dom-if"></template></dom-if>
    <iron-dropdown
      allow-outside-scroll="true"
      aria-disabled="false"
      aria-hidden="true"
      horizontal-align="auto"
      id="dropdown"
      style="outline: none; display: none;"
      vertical-align="auto"
    >
      <div class="dropdown-content" slot="dropdown-content">
        <div class="inputContainer" part="input-container">
          <paper-input
            aria-disabled="false"
            id="input"
            tabindex="0"
          ></paper-input>
          <dom-if style="display: none;"><template is="dom-if"></template>
          </dom-if>
          <dom-if style="display: none;"><template is="dom-if"></template>
          </dom-if>
          <div class="buttons">
            <gr-button
              aria-disabled="false"
              id="cancelBtn"
              link=""
              role="button"
              tabindex="0"
            >
              cancel
            </gr-button>
            <gr-button
              aria-disabled="false"
              id="saveBtn"
              link=""
              role="button"
              tabindex="0"
            >
              save
            </gr-button>
          </div>
        </div>
      </div>
    </iron-dropdown>`);
  });

  test('element render', () => {
    // The dropdown is closed and the label is visible:
    assert.isFalse(element.$.dropdown.opened);
    assert.isTrue(label.classList.contains('editable'));
    assert.equal(label.textContent, 'value text');
    const focusSpy = sinon.spy(input, 'focus');
    const showSpy = sinon.spy(element, '_showDropdown');

    MockInteractions.tap(label);

    return showSpy.lastCall.returnValue.then(() => {
      // The dropdown is open (which covers up the label):
      assert.isTrue(element.$.dropdown.opened);
      assert.isTrue(focusSpy.called);
      assert.equal(input.value, 'value text');
    });
  });

  test('title with placeholder', () => {
    assert.equal(element.title, 'value text');
    element.value = '';

    flush();
    assert.equal(element.title, 'label text');
  });

  test('title without placeholder', () => {
    assert.equal(elementNoPlaceholder.title, '');
    element.value = 'value text';

    flush();
    assert.equal(element.title, 'value text');
  });

  test('edit value', async () => {
    const editedSpy = sinon.spy();
    element.addEventListener('changed', editedSpy);
    assert.isFalse(element.editing);

    MockInteractions.tap(label);
    flush();

    assert.isTrue(element.editing);
    assert.isFalse(editedSpy.called);

    element._inputText = 'new text';
    // Press enter:
    MockInteractions.keyDownOn(input, 13, null, 'Enter');
    flush();

    assert.isTrue(editedSpy.called);
    assert.equal(input.value, 'new text');
    assert.isFalse(element.editing);
  });

  test('save button', () => {
    const editedSpy = sinon.spy();
    element.addEventListener('changed', editedSpy);
    assert.isFalse(element.editing);

    MockInteractions.tap(label);
    flush();

    assert.isTrue(element.editing);
    assert.isFalse(editedSpy.called);

    element._inputText = 'new text';
    // Press enter:
    MockInteractions.tap(element.$.saveBtn, 13, null, 'Enter');
    flush();

    assert.isTrue(editedSpy.called);
    assert.equal(input.value, 'new text');
    assert.isFalse(element.editing);
  });

  test('edit and then escape key', () => {
    const editedSpy = sinon.spy();
    element.addEventListener('changed', editedSpy);
    assert.isFalse(element.editing);

    MockInteractions.tap(label);
    flush();

    assert.isTrue(element.editing);
    assert.isFalse(editedSpy.called);

    element._inputText = 'new text';
    // Press escape:
    MockInteractions.keyDownOn(input, 27, null, 'Escape');
    flush();

    assert.isFalse(editedSpy.called);
    // Text changes should be discarded.
    assert.equal(input.value, 'value text');
    assert.isFalse(element.editing);
  });

  test('cancel button', () => {
    const editedSpy = sinon.spy();
    element.addEventListener('changed', editedSpy);
    assert.isFalse(element.editing);

    MockInteractions.tap(label);
    flush();

    assert.isTrue(element.editing);
    assert.isFalse(editedSpy.called);

    element._inputText = 'new text';
    // Press escape:
    MockInteractions.tap(element.$.cancelBtn);
    flush();

    assert.isFalse(editedSpy.called);
    // Text changes should be discarded.
    assert.equal(input.value, 'value text');
    assert.isFalse(element.editing);
  });

  suite('gr-editable-label read-only tests', () => {
    let element;
    let label;

    setup(() => {
      element = readOnlyFixture.instantiate();
      flush();
      label = element.shadowRoot
          .querySelector('label');
    });

    test('disallows edit when read-only', () => {
      // The dropdown is closed.
      assert.isFalse(element.$.dropdown.opened);
      MockInteractions.tap(label);

      flush();

      // The dropdown is still closed.
      assert.isFalse(element.$.dropdown.opened);
    });

    test('label is not marked as editable', () => {
      assert.isFalse(label.classList.contains('editable'));
    });
  });
});