gristlabs_grist-core/test/nbrowser/FormView.ts

import {CHOOSE_TEXT} from 'app/common/Forms';
import {UserAPI} from 'app/common/UserAPI';
import {escapeRegExp} from 'lodash';
import {addToRepl, assert, driver, Key, WebElement, WebElementPromise} from 'mocha-webdriver';
import * as gu from 'test/nbrowser/gristUtils';
import {setupTestSuite} from 'test/nbrowser/testUtils';

describe('FormView', function() {
  this.timeout('90s');
  gu.bigScreen();

  let api: UserAPI;
  let docId: string;

  const cleanup = setupTestSuite();

  addToRepl('question', question);
  addToRepl('labels', readLabels);
  addToRepl('questionType', questionType);
  const clipboard = gu.getLockableClipboard();

  afterEach(() => gu.checkForErrors());

  before(async function() {
    const session = await gu.session().login();
    docId = await session.tempNewDoc(cleanup);
    api = session.createHomeApi();
    await driver.executeScript(createClipboardTextArea);
  });

  after(async function() {
    await driver.executeScript(removeClipboardTextArea);
  });

  /**
   * Adds a temporary textarea to the document for pasting the contents of
   * the clipboard.
   *
   * Used to test copying of form URLs to the clipboard.
   */
  function createClipboardTextArea() {
    const textArea = document.createElement('textarea');
    textArea.style.position = 'absolute';
    textArea.style.top = '0';
    textArea.style.height = '2rem';
    textArea.style.width = '16rem';
    textArea.id = 'clipboardText';
    window.document.body.appendChild(textArea);
  }

  function removeClipboardTextArea() {
    const textArea = document.getElementById('clipboardText');
    if (textArea) {
      window.document.body.removeChild(textArea);
    }
  }

  async function createFormWith(type: string, more = false) {
    await gu.addNewSection('Form', 'Table1');

    // Make sure column D is not there.
    assert.isUndefined(await api.getTable(docId, 'Table1').then(t => t.D));

    // Add a text question
    await plusButton().click();
    if (more) {
      await clickMenu('More');
    }
    await clickMenu(type);
    await gu.waitForServer();

    // Make sure we see this new question (D).
    assert.deepEqual(await readLabels(), ['A', 'B', 'C', 'D']);

    await driver.find('.test-forms-publish').click();
    if (await driver.find('.test-modal-confirm').isPresent()) {
      await driver.find('.test-modal-confirm').click();
    }
    await gu.waitForServer();


    // Now open the form in external window.
    await clipboard.lockAndPerform(async (cb) => {
      await driver.find(`.test-forms-link`).click();
      await gu.waitForServer();
      await gu.waitToPass(async () => assert.match(
        await driver.find('.test-tooltip').getText(), /Link copied to clipboard/), 1000);
      await driver.find('#clipboardText').click();
      await gu.selectAll();
      await cb.paste();
    });

    // Select it
    await question('D').click();

    return await driver.find('#clipboardText').value();
  }

  async function removeForm() {
    // Remove this section.
    await gu.openSectionMenu('viewLayout');
    await driver.find('.test-section-delete').click();
    await gu.waitForServer();

    // Remove record.
    await gu.sendActions([
      ['RemoveRecord', 'Table1', 1],
      ['RemoveColumn', 'Table1', 'D']
    ]);
  }

  async function waitForConfirm() {
    await gu.waitToPass(async () => {
      assert.isTrue(await driver.findWait('.grist-form-confirm', 1000).isDisplayed());
    });
  }

  async function expectSingle(value: any) {
    assert.deepEqual(await api.getTable(docId, 'Table1').then(t => t.D), [value]);
  }

  async function expectInD(values: any[]) {
    assert.deepEqual(await api.getTable(docId, 'Table1').then(t => t.D), values);
  }

  it('updates creator panel when navigated away', async function() {
    // Add 2 new pages.
    await gu.addNewPage('Form', 'New Table', {tableName: 'TabA'});
    await gu.renamePage('TabA');
    await gu.addNewPage('Form', 'New Table', {tableName: 'TabB'});

    // Open the creator panel on field tab
    await gu.openColumnPanel();

    // Select A column
    await question('A').click();

    // Make sure it is selected.
    assert.equal(await selectedLabel(), 'A');

    // And creator panel reflects it.
    assert.equal(await driver.find('.test-field-label').value(), "A");

    // Now switch to page TabA.
    await gu.openPage('TabA');

    // And select B column.
    await question('B').click();
    assert.equal(await selectedLabel(), 'B');

    // Make sure creator panel reflects it (it didn't).
    assert.equal(await driver.find('.test-field-label').value(), "B");

    await gu.undo(2); // There was a bug with second undo.
    await gu.undo();
  });

  it('triggers trigger formulas', async function() {
    const formUrl = await createFormWith('Text');
    // Add a trigger formula for this column.
    await gu.showRawData();
    await gu.getCell('D', 1).click();
    await gu.openColumnPanel();
    await driver.find(".test-field-set-trigger").click();
    await gu.waitAppFocus(false);
    await gu.sendKeys('"Hello from trigger"', Key.ENTER);
    await gu.waitForServer();
    await gu.closeRawTable();
    await gu.onNewTab(async () => {
      await driver.get(formUrl);
      await driver.find('input[type="submit"]').click();
      await waitForConfirm();
    });
    await expectSingle('Hello from trigger');
    await removeForm();
  });

  it('can submit a form with Text field', async function() {
    const formUrl = await createFormWith('Text');
    // We are in a new window.
    await gu.onNewTab(async () => {
      await driver.get(formUrl);
      await driver.findWait('input[name="D"]', 1000).click();
      await gu.sendKeys('Hello World');
      await driver.find('input[type="submit"]').click();
      await waitForConfirm();
    });
    // Make sure we see the new record.
    await expectSingle('Hello World');
    await removeForm();
  });

  it('can submit a form with Numeric field', async function() {
    const formUrl = await createFormWith('Numeric');
    // We are in a new window.
    await gu.onNewTab(async () => {
      await driver.get(formUrl);
      await driver.findWait('input[name="D"]', 1000).click();
      await gu.sendKeys('1984');
      await driver.find('input[type="submit"]').click();
      await waitForConfirm();
    });
    // Make sure we see the new record.
    await expectSingle(1984);
    await removeForm();
  });

  it('can submit a form with Date field', async function() {
    const formUrl = await createFormWith('Date');
    // We are in a new window.
    await gu.onNewTab(async () => {
      await driver.get(formUrl);
      await driver.findWait('input[name="D"]', 1000).click();
      await driver.executeScript(
        () => (document.querySelector('input[name="D"]') as HTMLInputElement).value = '2000-01-01'
      );
      await driver.find('input[type="submit"]').click();
      await waitForConfirm();
    });
    // Make sure we see the new record.
    await expectSingle(/* 2000-01-01 */946684800);
    await removeForm();
  });

  it('can submit a form with Choice field', async function() {
    const formUrl = await createFormWith('Choice');
    // Add some options.
    await gu.openColumnPanel();

    await gu.choicesEditor.edit();
    await gu.choicesEditor.add('Foo');
    await gu.choicesEditor.add('Bar');
    await gu.choicesEditor.add('Baz');
    await gu.choicesEditor.save();
    await gu.toggleSidePanel('right', 'close');

    // We need to press preview, as form is not saved yet.
    await gu.scrollActiveViewTop();
    await gu.waitToPass(async () => {
      assert.isTrue(await driver.find('.test-forms-preview').isDisplayed());
    });
    // We are in a new window.
    await gu.onNewTab(async () => {
      await driver.get(formUrl);
      // Make sure options are there.
      assert.deepEqual(
        await driver.findAll('select[name="D"] option', e => e.getText()), [CHOOSE_TEXT, 'Foo', 'Bar', 'Baz']
      );
      await driver.findWait('select[name="D"]', 1000).click();
      await driver.find("option[value='Bar']").click();
      await driver.find('input[type="submit"]').click();
      await waitForConfirm();
    });
    await expectSingle('Bar');
    await removeForm();
  });

  it('can submit a form with Integer field', async function() {
    const formUrl = await createFormWith('Integer', true);
    // We are in a new window.
    await gu.onNewTab(async () => {
      await driver.get(formUrl);
      await driver.findWait('input[name="D"]', 1000).click();
      await gu.sendKeys('1984');
      await driver.find('input[type="submit"]').click();
      await waitForConfirm();
    });
    // Make sure we see the new record.
    await expectSingle(1984);
    await removeForm();
  });

  it('can submit a form with Toggle field', async function() {
    const formUrl = await createFormWith('Toggle', true);
    // We are in a new window.
    await gu.onNewTab(async () => {
      await driver.get(formUrl);
      await driver.findWait('input[name="D"]', 1000).findClosest("label").click();
      await driver.find('input[type="submit"]').click();
      await waitForConfirm();
    });
    await expectSingle(true);
    await gu.onNewTab(async () => {
      await driver.get(formUrl);
      await driver.find('input[type="submit"]').click();
      await waitForConfirm();
    });
    await expectInD([true, false]);

    // Remove the additional record added just now.
    await gu.sendActions([
      ['RemoveRecord', 'Table1', 2],
    ]);
    await removeForm();
  });

  it('can submit a form with ChoiceList field', async function() {
    const formUrl = await createFormWith('Choice List', true);
    // Add some options.
    await gu.openColumnPanel();

    await gu.choicesEditor.edit();
    await gu.choicesEditor.add('Foo');
    await gu.choicesEditor.add('Bar');
    await gu.choicesEditor.add('Baz');
    await gu.choicesEditor.save();
    await gu.toggleSidePanel('right', 'close');
    // We are in a new window.
    await gu.onNewTab(async () => {
      await driver.get(formUrl);
      await driver.findWait('input[name="D[]"][value="Foo"]', 1000).click();
      await driver.findWait('input[name="D[]"][value="Baz"]', 1000).click();
      await driver.find('input[type="submit"]').click();
      await waitForConfirm();
    });
    await expectSingle(['L', 'Foo', 'Baz']);

    await removeForm();
  });

  it('can submit a form with Ref field', async function() {
    const formUrl = await createFormWith('Reference', true);
    // Add some options.
    await gu.openColumnPanel();
    await gu.setRefShowColumn('A');
    // Add 3 records to this table (it is now empty).
    await gu.sendActions([
      ['AddRecord', 'Table1', null, {A: 'Foo'}], // id 1
      ['AddRecord', 'Table1', null, {A: 'Bar'}], // id 2
      ['AddRecord', 'Table1', null, {A: 'Baz'}], // id 3
    ]);
    await gu.toggleSidePanel('right', 'close');
    // We are in a new window.
    await gu.onNewTab(async () => {
      await driver.get(formUrl);
      assert.deepEqual(
        await driver.findAll('select[name="D"] option', e => e.getText()),
        [CHOOSE_TEXT, ...['Bar', 'Baz', 'Foo']]
      );
      assert.deepEqual(
        await driver.findAll('select[name="D"] option', e => e.value()),
        ['', ...['2', '3', '1']]
      );
      await driver.findWait('select[name="D"]', 1000).click();
      await driver.find('option[value="2"]').click();
      await driver.find('input[type="submit"]').click();
      await waitForConfirm();
    });
    await expectInD([0, 0, 0, 2]);

    // Remove 3 records.
    await gu.sendActions([
      ['BulkRemoveRecord', 'Table1', [1, 2, 3, 4]],
    ]);

    await removeForm();
  });

  it('can submit a form with RefList field', async function() {
    const formUrl = await createFormWith('Reference List', true);
    // Add some options.
    await gu.openColumnPanel();

    await gu.setRefShowColumn('A');
    // Add 3 records to this table (it is now empty).
    await gu.sendActions([
      ['AddRecord', 'Table1', null, {A: 'Foo'}], // id 1
      ['AddRecord', 'Table1', null, {A: 'Bar'}], // id 2
      ['AddRecord', 'Table1', null, {A: 'Baz'}], // id 3
    ]);
    await gu.toggleSidePanel('right', 'close');
    // We are in a new window.
    await gu.onNewTab(async () => {
      await driver.get(formUrl);
      await driver.findWait('input[name="D[]"][value="1"]', 1000).click();
      await driver.findWait('input[name="D[]"][value="2"]', 1000).click();
      assert.equal(await driver.find('.grist-checkbox:has(input[name="D[]"][value="1"])').getText(), 'Foo');
      assert.equal(await driver.find('.grist-checkbox:has(input[name="D[]"][value="2"])').getText(), 'Bar');
      assert.equal(await driver.find('.grist-checkbox:has(input[name="D[]"][value="3"])').getText(), 'Baz');
      await driver.find('input[type="submit"]').click();
      await waitForConfirm();
    });
    await expectInD([null, null, null, ['L', 2, 1]]);

    // Remove 3 records.
    await gu.sendActions([
      ['BulkRemoveRecord', 'Table1', [1, 2, 3, 4]],
    ]);

    await removeForm();
  });

  it('can submit a form with a formula field', async function() {
    const formUrl = await createFormWith('Text');

    // Temporarily make A a formula column.
    await gu.sendActions([
      ['AddRecord', 'Table1', null, {A: 'Foo'}],
      ['UpdateRecord', '_grist_Tables_column', 2, {formula: '"hello"', isFormula: true}],
    ]);
    assert.deepEqual(await api.getTable(docId, 'Table1').then(t => t.A), ['hello']);

    await gu.onNewTab(async () => {
      await driver.get(formUrl);
      await driver.findWait('input[name="D"]', 1000).click();
      await gu.sendKeys('Hello World');
      await driver.find('input[name="_A"]').click();
      await gu.sendKeys('goodbye');
      await driver.find('input[type="submit"]').click();
      await waitForConfirm();
    });

    // Make sure we see the new record.
    await expectInD(['', 'Hello World']);

    // And check that A was not modified.
    assert.deepEqual(await api.getTable(docId, 'Table1').then(t => t.A), ['hello', 'hello']);

    await gu.sendActions([
      ['RemoveRecord', 'Table1', 1],
      ['UpdateRecord', '_grist_Tables_column', 2, {formula: '', isFormula: false}],
    ]);
    await removeForm();
  });

  it('can unpublish forms', async function() {
    const formUrl = await createFormWith('Text');
    await driver.find('.test-forms-unpublish').click();
    await driver.find('.test-modal-confirm').click();
    await gu.waitForServer();
    await gu.onNewTab(async () => {
      await driver.get(formUrl);
      assert.match(
        await driver.findWait('.test-error-text', 2000).getText(),
        /Oops! This form is no longer published\./
      );
    });

    // Republish the form and check that the same URL works again.
    await driver.find('.test-forms-publish').click();
    await driver.find('.test-modal-confirm').click();
    await gu.waitForServer();
    await gu.onNewTab(async () => {
      await driver.get(formUrl);
      await driver.findWait('input[name="D"]', 1000);
    });
  });

  it('can stop showing warning when publishing or unpublishing', async function() {
    // Click "Don't show again" in both modals and confirm.
    await driver.find('.test-forms-unpublish').click();
    await driver.find('.test-modal-dont-show-again').click();
    await driver.find('.test-modal-confirm').click();
    await gu.waitForServer();
    await driver.find('.test-forms-publish').click();
    await driver.find('.test-modal-dont-show-again').click();
    await driver.find('.test-modal-confirm').click();
    await gu.waitForServer();

    // Check that the modals are no longer shown when publishing or unpublishing.
    await driver.find('.test-forms-unpublish').click();
    await gu.waitForServer();
    assert.isFalse(await driver.find('.test-modal-title').isPresent());
    await driver.find('.test-forms-publish').click();
    await gu.waitForServer();
    assert.isFalse(await driver.find('.test-modal-title').isPresent());
  });

  it('can create a form for a blank table', async function() {

    // Add new page and select form.
    await gu.addNewPage('Form', 'New Table', {
      tableName: 'Form'
    });

    // Make sure we see a form editor.
    assert.isTrue(await driver.find('.test-forms-editor').isDisplayed());

    // With 3 questions A, B, C.
    assert.deepEqual(await readLabels(), ['A', 'B', 'C']);

    // And a submit button.
    assert.isTrue(await driver.findContent('.test-forms-submit', gu.exactMatch('Submit')).isDisplayed());
  });

  it("doesn't generate fields when they are added", async function() {
    await gu.sendActions([
      ['AddVisibleColumn', 'Form', 'Choice',
        {type: 'Choice', widgetOption: JSON.stringify({choices: ['A', 'B', 'C']})}],
    ]);

    // Make sure we see a form editor.
    assert.isTrue(await driver.find('.test-forms-editor').isDisplayed());
    await driver.sleep(100);
    assert.isFalse(
      await driver.findContent('.test-forms-question-choice .test-forms-label', gu.exactMatch('Choice')).isPresent()
    );
  });

  it('supports basic drag and drop', async function() {

    // Make sure the order is right.
    assert.deepEqual(
      await readLabels(), ['A', 'B', 'C']
    );

    await driver.withActions(a =>
      a.move({origin: questionDrag('B')})
        .press()
        .move({origin: questionDrag('A')})
        .release()
    );

    await gu.waitForServer();

    // Make sure the order is right.
    assert.deepEqual(
      await readLabels(), ['B', 'A', 'C']
    );

    await driver.withActions(a =>
      a.move({origin: questionDrag('C')})
        .press()
        .move({origin: questionDrag('B')})
        .release()
    );

    await gu.waitForServer();

    // Make sure the order is right.
    assert.deepEqual(
      await readLabels(), ['C', 'B', 'A']
    );

    // Now move A on A and make sure nothing changes.
    await driver.withActions(a =>
      a.move({origin: questionDrag('A')})
        .press()
        .move({origin: questionDrag('A'), x: 50})
        .release()
    );

    await gu.waitForServer();
    assert.deepEqual(await readLabels(), ['C', 'B', 'A']);
  });

  it('can undo drag and drop', async function() {
    await gu.undo();
    assert.deepEqual(await readLabels(), ['B', 'A', 'C']);

    await gu.undo();
    assert.deepEqual(await readLabels(), ['A', 'B', 'C']);
  });

  it('adds new question at the end', async function() {
    // We should see single drop zone.
    assert.equal((await drops()).length, 1);

    // Move the A over there.
    await driver.withActions(a =>
      a.move({origin: questionDrag('A')})
        .press()
        .move({origin: plusButton().drag()})
        .release()
    );

    await gu.waitForServer();
    assert.deepEqual(await readLabels(), ['B', 'C', 'A']);
    await gu.undo();
    assert.deepEqual(await readLabels(), ['A', 'B', 'C']);

    // Now add a new question.
    await plusButton().click();

    await clickMenu('Text');
    await gu.waitForServer();

    // We should have new column D or type text.
    assert.deepEqual(await readLabels(), ['A', 'B', 'C', 'D']);
    assert.equal(await questionType('D'), 'Text');

    await gu.undo();
    assert.deepEqual(await readLabels(), ['A', 'B', 'C']);
  });

  it('adds question in the middle', async function() {
    await driver.withActions(a => a.contextClick(question('B')));
    await clickMenu('Insert question above');
    await gu.waitForServer();
    assert.deepEqual(await readLabels(), ['A', 'D', 'B', 'C']);

    // Now below C.
    await driver.withActions(a => a.contextClick(question('B')));
    await clickMenu('Insert question below');
    await gu.waitForServer();
    assert.deepEqual(await readLabels(), ['A', 'D', 'B', 'E', 'C']);

    // Make sure they are draggable.
    // Move D infront of C.
    await driver.withActions(a =>
      a.move({origin: questionDrag('D')})
        .press()
        .move({origin: questionDrag('C')})
        .release()
    );

    await gu.waitForServer();
    assert.deepEqual(await readLabels(), ['A', 'B', 'E', 'D', 'C']);

    // Remove 3 times.
    await gu.undo(3);
    assert.deepEqual(await readLabels(), ['A', 'B', 'C']);
  });

  it('selection works', async function() {

    // Click on A.
    await question('A').click();

    // Now A is selected.
    assert.equal(await selectedLabel(), 'A');

    // Click B.
    await question('B').click();

    // Now B is selected.
    assert.equal(await selectedLabel(), 'B');

    // Click on the edit button.
    await driver.find('.test-forms-submit').click();

    // Now nothing is selected.
    assert.isFalse(await isSelected(), 'Something is selected');

    // When we add new question, it is automatically selected.
    await plusButton().click();
    await clickMenu('Text');
    await gu.waitForServer();
    // Now D is selected.
    assert.equal(await selectedLabel(), 'D');

    await gu.undo();
    assert.deepEqual(await readLabels(), ['A', 'B', 'C']);
    await question('A').click();
  });

  it('hiding and revealing works', async function() {
    await gu.toggleSidePanel('left', 'close');
    await gu.openWidgetPanel();

    // We have only one hidden column.
    assert.deepEqual(await hiddenColumns(), ['Choice']);

    // Make sure we see it in the menu.
    await plusButton().click();

    // We have 1 unmapped menu item.
    assert.equal(await elementCount('menu-unmapped'), 1);

    // Now move it to the form on B
    await driver.withActions(a =>
      a.move({origin: hiddenColumn('Choice')})
        .press()
        .move({origin: questionDrag('B')})
        .release()
    );
    await gu.waitForServer();

    // It should be after A.
    await gu.waitToPass(async () => {
      assert.deepEqual(await readLabels(), ['A', 'Choice', 'B', 'C']);
    }, 500);

    // Undo to make sure it is bundled.
    await gu.undo();

    // It should be hidden again.
    assert.deepEqual(await hiddenColumns(), ['Choice']);
    assert.deepEqual(await readLabels(), ['A', 'B', 'C']);

    // And redo.
    await gu.redo();
    assert.deepEqual(await readLabels(), ['A', 'Choice', 'B', 'C']);
    assert.deepEqual(await hiddenColumns(), []);


    // Now hide it using menu.
    await question('Choice').rightClick();
    await clickMenu('Hide');
    await gu.waitForServer();

    // It should be hidden again.
    assert.deepEqual(await hiddenColumns(), ['Choice']);
    assert.deepEqual(await readLabels(), ['A', 'B', 'C']);

    // And undo.
    await gu.undo();
    assert.deepEqual(await readLabels(), ['A', 'Choice', 'B', 'C']);
    assert.deepEqual(await hiddenColumns(), []);

    // And redo.
    await gu.redo();
    assert.deepEqual(await readLabels(), ['A', 'B', 'C']);
    assert.deepEqual(await hiddenColumns(), ['Choice']);

    // Now unhide it using menu.
    await plusButton().click();
    await element('menu-unmapped').click();
    await gu.waitForServer();

    assert.deepEqual(await readLabels(), ['A', 'B', 'C', 'Choice']);
    assert.deepEqual(await hiddenColumns(), []);

    // Now hide it using Delete key.
    await driver.find('.test-forms-submit').click();
    await question('Choice').click();
    await gu.sendKeys(Key.DELETE);
    await gu.waitForServer();

    // It should be hidden again.
    assert.deepEqual(await hiddenColumns(), ['Choice']);
    assert.deepEqual(await readLabels(), ['A', 'B', 'C']);


    await gu.toggleSidePanel('right', 'close');
  });

  it('basic keyboard navigation works', async function() {
    await question('A').click();
    assert.equal(await selectedLabel(), 'A');

    // Move down.
    await arrow(Key.ARROW_DOWN);
    assert.equal(await selectedLabel(), 'B');

    // Move up.
    await arrow(Key.ARROW_UP);
    assert.equal(await selectedLabel(), 'A');

    // Move down to C.
    await arrow(Key.ARROW_DOWN, 2);
    assert.equal(await selectedLabel(), 'C');

    // Move down we should be at A (past the submit button, and titles and sections).
    await arrow(Key.ARROW_DOWN, 7);
    assert.equal(await selectedLabel(), 'A');

    // Do the same with Left and Right.
    await arrow(Key.ARROW_RIGHT);
    assert.equal(await selectedLabel(), 'B');
    await arrow(Key.ARROW_LEFT);
    assert.equal(await selectedLabel(), 'A');
    await arrow(Key.ARROW_RIGHT, 2);
    assert.equal(await selectedLabel(), 'C');
  });

  it('cutting works', async function() {
    const revert = await gu.begin();
    await question('A').click();
    // Send copy command.
    await clipboard.lockAndPerform(async (cb) => {
      await cb.cut();
      await gu.sendKeys(Key.ARROW_DOWN); // Focus on B.
      await gu.sendKeys(Key.ARROW_DOWN); // Focus on C.
      await cb.paste();
    });
    await gu.waitForServer();
    assert.deepEqual(await readLabels(), ['B', 'A', 'C']);
    await gu.undo();
    assert.deepEqual(await readLabels(), ['A', 'B', 'C']);

    // To the same for paragraph.
    await plusButton().click();
    await clickMenu('Paragraph');
    await gu.waitForServer();
    await element('Paragraph', 5).click();
    await clipboard.lockAndPerform(async (cb) => {
      await cb.cut();
      // Go over A and paste there.
      await gu.sendKeys(Key.ARROW_UP); // Focus on C.
      await gu.sendKeys(Key.ARROW_UP); // Focus on B.
      await gu.sendKeys(Key.ARROW_UP); // Focus on A.
      await cb.paste();
    });
    await gu.waitForServer();

    // Paragraph should be the first one now.
    assert.deepEqual(await readLabels(), ['A', 'B', 'C']);
    let elements = await driver.findAll('.test-forms-element');
    assert.isTrue(await elements[0].matches('.test-forms-Paragraph'));
    assert.isTrue(await elements[1].matches('.test-forms-Paragraph'));
    assert.isTrue(await elements[2].matches('.test-forms-Section'));
    assert.isTrue(await elements[3].matches('.test-forms-Paragraph'));
    assert.isTrue(await elements[4].matches('.test-forms-Paragraph'));
    assert.isTrue(await elements[5].matches('.test-forms-Paragraph'));

    // Put it back using undo.
    await gu.undo();
    elements = await driver.findAll('.test-forms-element');
    assert.isTrue(await elements[5].matches('.test-forms-Field'));
    // 0 - A, 1 - B, 2 - C, 3 - submit button.
    assert.isTrue(await elements[8].matches('.test-forms-Paragraph'));

    await revert();
  });

  const checkInitial = async () => assert.deepEqual(await readLabels(), ['A', 'B', 'C']);
  const checkNewCol = async () => {
    assert.equal(await selectedLabel(), 'D');
    assert.deepEqual(await readLabels(), ['A', 'B', 'C', 'D']);
    await gu.undo();
    await checkInitial();
  };
  const checkFieldsAtFirstLevel = (menuText: string) => {
    it(`can add ${menuText} elements from the menu`, async function() {
      await plusButton().click();
      await clickMenu(menuText);
      await gu.waitForServer();
      await checkNewCol();
    });
  };

  checkFieldsAtFirstLevel('Text');
  checkFieldsAtFirstLevel('Numeric');
  checkFieldsAtFirstLevel('Date');
  checkFieldsAtFirstLevel('Choice');

  const checkFieldInMore = (menuText: string) => {
    it(`can add ${menuText} elements from the menu`, async function() {
      await plusButton().click();
      await clickMenu('More');
      await clickMenu(menuText);
      await gu.waitForServer();
      await checkNewCol();
    });
  };

  checkFieldInMore('Integer');
  checkFieldInMore('Toggle');
  checkFieldInMore('DateTime');
  checkFieldInMore('Choice List');
  checkFieldInMore('Reference');
  checkFieldInMore('Reference List');

  const testStruct = (type: string, existing = 0) => {
    it(`can add structure ${type} element`, async function() {
      assert.equal(await elementCount(type), existing);
      await plusButton().click();
      await clickMenu(type);
      await gu.waitForServer();
      assert.equal(await elementCount(type), existing + 1);
      await gu.undo();
      assert.equal(await elementCount(type), existing);
    });
  };

  // testStruct('Section'); // There is already a section
  testStruct('Columns');
  testStruct('Paragraph', 4);

  it('basic section', async function() {
    const revert = await gu.begin();

    // Adding section is disabled for now, so this test is altered to use the existing section.
    // await drop().click();
    // await clickMenu('Section');
    // await gu.waitForServer();
    assert.equal(await elementCount('Section'), 1);

    assert.deepEqual(await readLabels(), ['A', 'B', 'C']);

    // There is a drop in that section, click it to add a new question.
    await element('Section', 1).element('plus').click();
    await clickMenu('Text');
    await gu.waitForServer();

    assert.deepEqual(await readLabels(), ['A', 'B', 'C', 'D']);

    // And the question is inside a section.
    assert.equal(await element('Section', 1).element('label', 4).getText(), 'D');

    // Make sure we can move that question around.
    await driver.withActions(a =>
      a.move({origin: questionDrag('D')})
        .press()
        .move({origin: questionDrag('B')})
        .release()
    );

    await gu.waitForServer();
    assert.deepEqual(await readLabels(), ['A', 'D', 'B', 'C']);

    // Make sure that it is not inside the section anymore.
    // assert.equal(await element('Section', 1).element('label').isPresent(), false);

    await gu.undo();
    assert.deepEqual(await readLabels(), ['A', 'B', 'C', 'D']);
    assert.equal(await element('Section', 1).element('label', 4).getText(), 'D');

    await revert();
    assert.deepEqual(await readLabels(), ['A', 'B', 'C']);
  });

  it('basic columns work', async function() {
    const revert = await gu.begin();

    // Open the creator panel to make sure it works.
    await gu.openColumnPanel();

    await plusButton().click();
    await clickMenu('Columns');
    await gu.waitForServer();

    // We have two placeholders for free.
    assert.equal(await elementCount('Placeholder', element('Columns')), 2);

    // We can add another placeholder
    await element('add').click();
    await gu.waitForServer();

    // Now we have 3 placeholders.
    assert.equal(await elementCount('Placeholder', element('Columns')), 3);

    // We can click the middle one, and add a question.
    await element('Columns').element(`Placeholder`, 2).click();
    await clickMenu('Text');
    await gu.waitForServer();

    // Now we have 2 placeholders
    assert.equal(await elementCount('Placeholder', element('Columns')), 2);
    // And 4 questions.
    assert.deepEqual(await readLabels(), ['A', 'B', 'C', 'D']);

    // The question D is in the columns.
    assert.equal(await element('Columns').element('label').getText(), 'D');

    // We can move it around.
    await driver.withActions(a =>
      a.move({origin: questionDrag('D')})
        .press()
        .move({origin: questionDrag('B')})
        .release()
    );
    await gu.waitForServer();
    assert.deepEqual(await readLabels(), ['A', 'D', 'B', 'C']);

    // And move it back.
    await driver.withActions(a =>
      a.move({origin: questionDrag('D')})
        .press()
        .move({origin: element('Columns').element(`Placeholder`, 2).find(`.test-forms-drag`)})
        .release()
    );
    await gu.waitForServer();
    assert.deepEqual(await readLabels(), ['A', 'B', 'C', 'D']);


    assert.equal(await elementCount('column'), 3);
    assert.equal(await element('column', 1).type(), 'Placeholder');
    assert.equal(await element('column', 2).type(), 'Field');
    assert.equal(await element('column', 2).element('label').getText(), 'D');
    assert.equal(await element('column', 3).type(), 'Placeholder');

    // Check that we can remove the question.
    await question('D').rightClick();
    await clickMenu('Hide');
    await gu.waitForServer();

    // Now we have 3 placeholders.
    assert.equal(await elementCount('Placeholder', element('Columns')), 3);
    assert.deepEqual(await readLabels(), ['A', 'B', 'C']);

    // Undo and check it goes back at the right place.
    await gu.undo();
    assert.deepEqual(await readLabels(), ['A', 'B', 'C', 'D']);

    assert.equal(await elementCount('column'), 3);
    assert.equal(await element('column', 1).type(), 'Placeholder');
    assert.equal(await element('column', 2).type(), 'Field');
    assert.equal(await element('column', 2).element('label').getText(), 'D');
    assert.equal(await element('column', 3).type(), 'Placeholder');

    // There was a bug with paragraph and columns.
    // Add a paragraph to first placeholder.
    await element('Columns').element(`Placeholder`, 1).click();
    await clickMenu('Paragraph');
    await gu.waitForServer();

    // Now click this paragraph.
    await element('Columns').element(`Paragraph`, 1).click();
    // And make sure there aren't any errors.
    await gu.checkForErrors();

    await revert();
    assert.lengthOf(await driver.findAll('.test-forms-column'), 0);
    assert.deepEqual(await readLabels(), ['A', 'B', 'C']);
  });

  it('drags and drops on columns properly', async function() {
    const revert = await gu.begin();
    // Open the creator panel to make sure it works.
    await gu.openColumnPanel();

    await plusButton().click();
    await clickMenu('Columns');
    await gu.waitForServer();

    // Make sure that dragging columns on its placeholder doesn't do anything.
    await driver.withActions(a =>
      a.move({origin: element('Columns').element(`Placeholder`, 1).find(`.test-forms-drag`)})
        .press()
        .move({origin: element('Columns').element(`Placeholder`, 2).find(`.test-forms-drag`)})
        .release()
    );
    await gu.waitForServer();
    await gu.checkForErrors();

    // Make sure we see form correctly.
    const testNothingIsMoved = async () => {
      assert.deepEqual(await readLabels(), ['A', 'B', 'C']);
      assert.deepEqual(await elements(), [
        'Paragraph',
        'Paragraph',
        'Section',
        'Paragraph',
        'Paragraph',
        'Field',
        'Field',
        'Field',
        'Columns',
        'Placeholder',
        'Placeholder'
      ]);
    };

    await testNothingIsMoved();

    // Now do the same but move atop the + placeholder.
    await driver.withActions(a =>
      a.move({origin: element('Columns').element(`Placeholder`, 1).find(`.test-forms-drag`)})
        .press()
        .move({origin: driver.find('.test-forms-Columns .test-forms-add')})
        .release()
    );
    await gu.waitForServer();
    await gu.checkForErrors();
    await testNothingIsMoved();

    // Now move C column into first column.
    await driver.withActions(a =>
      a.move({origin: questionDrag('C')})
        .press()
        .move({origin: element('Columns').element(`Placeholder`, 1).find(`.test-forms-drag`)})
        .release()
    );
    await gu.waitForServer();
    await gu.checkForErrors();

    // Check that it worked.
    assert.equal(await element('column', 1).type(), 'Field');
    assert.equal(await element('column', 1).element('label').getText(), 'C');
    assert.equal(await element('column', 2).type(), 'Placeholder');

    // Try to move B over C.
    await driver.withActions(a =>
      a.move({origin: questionDrag('B')})
        .press()
        .move({origin: questionDrag('C')})
        .release()
    );
    await gu.waitForServer();
    await gu.checkForErrors();

    // Make sure it didn't work.
    assert.equal(await element('column', 1).type(), 'Field');
    assert.equal(await element('column', 1).element('label').getText(), 'C');

    // And B is still there.
    assert.equal(await element('Field', 2).element('label').getText(), 'B');

    // Now move B on the empty placholder.
    await driver.withActions(a =>
      a.move({origin: questionDrag('B')})
        .press()
        .move({origin: element('column', 2).drag()})
        .release()
    );
    await gu.waitForServer();
    await gu.checkForErrors();

    // Make sure it worked.
    assert.equal(await element('column', 1).type(), 'Field');
    assert.equal(await element('column', 1).element('label').getText(), 'C');
    assert.equal(await element('column', 2).type(), 'Field');
    assert.equal(await element('column', 2).element('label').getText(), 'B');

    // Now swap them moving C over B.
    await driver.withActions(a =>
      a.move({origin: questionDrag('C')})
        .press()
        .move({origin: questionDrag('B')})
        .release()
    );
    await gu.waitForServer();
    await gu.checkForErrors();
    assert.equal(await element('column', 1).element('label').getText(), 'B');
    assert.equal(await element('column', 2).element('label').getText(), 'C');

    // And swap them back.
    await driver.withActions(a =>
      a.move({origin: questionDrag('B')})
        .press()
        .move({origin: questionDrag('C')})
        .release()
    );
    await gu.waitForServer();
    await gu.checkForErrors();
    assert.equal(await element('column', 1).element('label').getText(), 'C');
    assert.equal(await element('column', 2).element('label').getText(), 'B');

    // Make sure we still have two columns only.
    assert.lengthOf(await driver.findAll('.test-forms-column'), 2);

    // Make sure draggin column on the add button doesn't add column.
    await driver.withActions(a =>
      a.move({origin: questionDrag('B')})
        .press()
        .move({origin: driver.find('.test-forms-Columns .test-forms-add')})
        .release()
    );
    await gu.waitForServer();
    await gu.checkForErrors();

    // Make sure we still have two columns only.
    assert.lengthOf(await driver.findAll('.test-forms-column'), 2);
    assert.equal(await element('column', 1).element('label').getText(), 'C');
    assert.equal(await element('column', 2).element('label').getText(), 'B');

    // Now move A over the + button to add a new column.
    await driver.withActions(a =>
      a.move({origin: questionDrag('A')})
        .press()
        .move({origin: driver.find('.test-forms-Columns .test-forms-add')})
        .release()
    );
    await gu.waitForServer();
    await gu.checkForErrors();
    assert.lengthOf(await driver.findAll('.test-forms-column'), 3);
    assert.equal(await element('column', 1).element('label').getText(), 'C');
    assert.equal(await element('column', 2).element('label').getText(), 'B');
    assert.equal(await element('column', 3).element('label').getText(), 'A');

    await revert();
  });

  it('changes type of a question', async function() {
    // Add text question as D column.
    await plusButton().click();
    await clickMenu('Text');
    await gu.waitForServer();
    assert.deepEqual(await readLabels(), ['A', 'B', 'C', 'D']);

    // Make sure it is a text question.
    assert.equal(await questionType('D'), 'Text');

    // Now change it to a choice, from the backend (as the UI is not clear here).
    await gu.sendActions([
      ['ModifyColumn', 'Form', 'D', {type: 'Choice', widgetOptions: JSON.stringify({choices: ['A', 'B', 'C']})}],
    ]);

    // Make sure it is a choice question.
    await gu.waitToPass(async () => {
      assert.equal(await questionType('D'), 'Choice');
    });

    // Now change it back to a text question.
    await gu.undo();
    await gu.waitToPass(async () => {
      assert.equal(await questionType('D'), 'Text');
    });

    await gu.redo();
    await gu.waitToPass(async () => {
      assert.equal(await questionType('D'), 'Choice');
    });

    await gu.undo(2);
    await gu.waitToPass(async () => {
      assert.deepEqual(await readLabels(), ['A', 'B', 'C']);
    });
  });
});

function element(type: string, parent?: WebElement): ExtraElement;
function element(type: string, index: number, parent?: WebElement): ExtraElement;
function element(type: string, arg1?: number | WebElement, arg2?: WebElement): ExtraElement {
  if (typeof arg1 === 'number') {
    if (arg1 === 1) {
      return extra((arg2 ?? driver).find(`.test-forms-${type}`));
    }
    const nth = ((arg2 ?? driver).findAll(`.test-forms-${type}`).then(els => els[arg1 - 1])).then(el => {
      if (!el) { throw new Error(`No element of type ${type} at index ${arg1}`); }
      return el;
    });
    return extra(new WebElementPromise(driver, nth));
  } else {
    return extra((arg1 ?? driver).find(`.test-forms-${type}`));
  }
}

async function elementCount(type: string, parent?: WebElement) {
  return await (parent ?? driver).findAll(`.test-forms-${type}`).then(els => els.length);
}

async function readLabels() {
  return await driver.findAll('.test-forms-question .test-forms-label', el => el.getText());
}

function question(label: string) {
  return extra(driver.findContent(`.test-forms-label`, new RegExp('^' + escapeRegExp(label) + '\\*?$'))
                     .findClosest('.test-forms-editor'));
}

function questionDrag(label: string) {
  return question(label).find('.test-forms-drag');
}

function questionType(label: string) {
  return question(label).find('.test-forms-type').value();
}

function plusButton() {
  return element('plus');
}

function drops() {
  return driver.findAll('.test-forms-plus');
}

async function clickMenu(label: string) {
  // First try command as it will also contain the keyboard shortcut we need to discard.
  if (await driver.findContent('.grist-floating-menu li .test-cmd-name', gu.exactMatch(label)).isPresent()) {
    return driver.findContent('.grist-floating-menu li .test-cmd-name', gu.exactMatch(label)).click();
  }
  return driver.findContentWait('.grist-floating-menu li', gu.exactMatch(label), 100).click();
}

function isSelected() {
  return driver.findAll('.test-forms-field-editor-selected').then(els => els.length > 0);
}

function selected() {
  return driver.find('.test-forms-field-editor-selected');
}

function selectedLabel() {
  return selected().find('.test-forms-label-rendered').getText();
}

function hiddenColumns() {
  return driver.findAll('.test-vfc-hidden-field', e => e.getText());
}

function hiddenColumn(label: string) {
  return driver.findContent('.test-vfc-hidden-field', gu.exactMatch(label));
}

type ExtraElement = WebElementPromise & {
  rightClick: () => Promise<void>,
  element: (type: string, index?: number) => ExtraElement,
  /**
   * A draggable element inside. This is 2x2px div to help with drag and drop.
   */
  drag: () => WebElementPromise,
  type: () => Promise<string>,
};

function extra(el: WebElementPromise): ExtraElement {
  const webElement: any = el;

  webElement.rightClick = async function() {
    await driver.withActions(a => a.contextClick(el));
  };

  webElement.element = function(type: string, index?: number) {
    return element(type, index ?? 1, el);
  };

  webElement.drag = function() {
    return el.find('.test-forms-drag');
  };
  webElement.type = async function() {
    return await el.getAttribute('data-box-model');
  };

  return webElement;
}

async function arrow(key: string, times: number = 1) {
  for (let i = 0; i < times; i++) {
    await gu.sendKeys(key);
  }
}

async function elements() {
  return await driver.findAll('.test-forms-element', el => el.getAttribute('data-box-model'));
}