gristlabs_grist-core/test/nbrowser/FormView.ts
George Gevoian 6cb8614017 (core) Polish forms
Summary:
  - Updates styling of form submitted page.
  - Tweaks styling of checkboxes, labels, and questions on form page.
  - Adds new form 404 page.
  - Adds checkbox to not show warning again when publishing or un-publishing a form.
  - Excludes formula, hidden, and attachment columns in submitted form data.
  - Adds placeholder text to form configuration inputs.
  - Improves dark mode styling in Form widget.
  - Updates default title and description of new forms.
  - Updates styling of Form widget buttons.
  - Fixes form success text input handling.

Test Plan: Browser tests.

Reviewers: jarek

Reviewed By: jarek

Differential Revision: https://phab.getgrist.com/D4170
2024-01-24 02:18:03 -08:00

1129 lines
36 KiB
TypeScript

import {UserAPI} from 'app/common/UserAPI';
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();
gu.withEnvironmentSnapshot({
'GRIST_EXPERIMENTAL_PLUGINS': '1'
});
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()), ['', '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()),
['', ...['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).value(), '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).value(), 'D');
await revert();
assert.deepEqual(await readLabels(), ['A', 'B', 'C']);
});
it('basic columns work', async function() {
const revert = await gu.begin();
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').value(), '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']);
let allColumns = await driver.findAll('.test-forms-column');
assert.lengthOf(allColumns, 3);
assert.isTrue(await allColumns[0].matches('.test-forms-Placeholder'));
assert.isTrue(await allColumns[1].matches('.test-forms-question'));
assert.equal(await allColumns[1].find('.test-forms-label').value(), 'D');
assert.isTrue(await allColumns[2].matches('.test-forms-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']);
allColumns = await driver.findAll('.test-forms-column');
assert.lengthOf(allColumns, 3);
assert.isTrue(await allColumns[0].matches('.test-forms-Placeholder'));
assert.isTrue(await allColumns[1].matches('.test-forms-question'));
assert.equal(await allColumns[1].find('.test-forms-label').value(), 'D');
assert.isTrue(await allColumns[2].matches('.test-forms-Placeholder'));
await revert();
assert.lengthOf(await driver.findAll('.test-forms-column'), 0);
assert.deepEqual(await readLabels(), ['A', 'B', 'C']);
});
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.value());
}
function question(label: string) {
return extra(gu.findValue(`.test-forms-label`, 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').value();
}
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,
};
function extra(el: WebElementPromise): ExtraElement {
const webElement: any = el;
webElement.rightClick = async function() {
await driver.withActions(a => a.contextClick(webElement));
};
webElement.element = function(type: string, index?: number) {
return element(type, index ?? 1, webElement);
};
webElement.drag = function() {
return webElement.find('.test-forms-drag');
};
return webElement;
}
async function arrow(key: string, times: number = 1) {
for (let i = 0; i < times; i++) {
await gu.sendKeys(key);
}
}