gristlabs_grist-core/test/nbrowser/RightPanel.ts

369 lines
15 KiB
TypeScript
Raw Normal View History

import {assert, driver, Key} from 'mocha-webdriver';
import * as gu from 'test/nbrowser/gristUtils';
import {server, setupTestSuite} from 'test/nbrowser/testUtils';
describe('RightPanel', function() {
this.timeout(20000);
const cleanup = setupTestSuite();
afterEach(() => gu.checkForErrors());
it('should focus on the creator panel when chart/custom section is added', async () => {
const mainSession = await gu.session().teamSite.login();
await mainSession.tempNewDoc(cleanup);
// Reset prefs.
await driver.executeScript('resetDismissedPopups();');
await gu.waitForServer();
// Refresh for a clean start.
await gu.reloadDoc();
// Close panel and make sure it stays closed.
await gu.toggleSidePanel('right', 'close');
// Add a chart section.
await gu.addNewSection('Chart', 'Table1', { dismissTips: true});
assert.isFalse(await gu.isSidePanelOpen('right'));
await gu.undo();
// Add a chart page.
await gu.addNewPage('Chart', 'Table1');
assert.isFalse(await gu.isSidePanelOpen('right'));
await gu.undo();
// Add a custom section.
await gu.addNewSection('Custom', 'Table1');
assert.isFalse(await gu.isSidePanelOpen('right'));
await gu.undo();
// Add a custom page.
await gu.addNewPage('Custom', 'Table1');
assert.isFalse(await gu.isSidePanelOpen('right'));
await gu.undo();
// Now open the panel on the column tab.
const columnTab = async () => {
await gu.toggleSidePanel('right', 'open');
await driver.find('.test-right-tab-field').click();
};
await columnTab();
// Add a chart section.
await gu.addNewSection('Chart', 'Table1');
assert.isTrue(await gu.isSidePanelOpen('right'));
assert.isTrue(await driver.find('.test-right-widget-title').isDisplayed());
await gu.undo();
await columnTab();
// Add a chart page.
await gu.addNewPage('Chart', 'Table1');
assert.isTrue(await gu.isSidePanelOpen('right'));
assert.isTrue(await driver.find('.test-right-widget-title').isDisplayed());
await gu.undo();
await columnTab();
// Add a custom section.
await gu.addNewSection('Custom', 'Table1');
assert.isTrue(await gu.isSidePanelOpen('right'));
assert.isTrue(await driver.find('.test-right-widget-title').isDisplayed());
await gu.undo();
await columnTab();
// Add a custom page.
await gu.addNewPage('Custom', 'Table1');
assert.isTrue(await gu.isSidePanelOpen('right'));
assert.isTrue(await driver.find('.test-right-widget-title').isDisplayed());
await gu.undo();
});
it('should open/close panel, and reflect the current section', async function() {
// Open a document with multiple views and multiple sections.
await server.simulateLogin("Chimpy", "chimpy@getgrist.com", 'nasa');
const doc = await gu.importFixturesDoc('chimpy', 'nasa', 'Horizon', 'World.grist', false);
await driver.get(`${server.getHost()}/o/nasa/doc/${doc.id}`);
// Check current view and section name.
assert.equal(await gu.getActiveSectionTitle(6000), 'CITY');
assert.equal(await driver.find('.test-bc-page').getAttribute('value'), 'City');
// Open side pane, and check it shows the right section.
await gu.toggleSidePanel('right', 'open');
await driver.find('.test-config-widget').click();
assert.equal(await gu.isSidePanelOpen('right'), true);
assert.equal(await driver.find('.test-right-widget-title').value(), 'CITY');
// Check that the tab's name reflects suitable text
assert.equal(await driver.find('.test-right-tab-pagewidget').getText(), 'Table');
assert.equal(await driver.find('.test-right-tab-field').getText(), 'Column');
// Switch to Field tab, check that it shows the right field.
await driver.find('.test-right-tab-field').click();
assert.equal(await driver.find('.test-field-label').value(), "Name");
// Check to a different field, check a different field is shown.
await driver.sendKeys(Key.RIGHT);
assert.equal(await driver.find('.test-field-label').value(), "Country");
// Click to a different section, check a different field is shown.
await gu.getSection('CITY Card List').find('.detail_row_num').click();
assert.equal(await driver.find('.test-field-label').value(), "Name");
// Check that the tab's name reflects suitable text
assert.equal(await driver.find('.test-right-tab-pagewidget').getText(), 'Card List');
assert.equal(await driver.find('.test-right-tab-field').getText(), 'Field');
// Close panel, check it's hidden.
await gu.toggleSidePanel('right');
assert.equal(await gu.isSidePanelOpen('right'), false);
assert.equal(await driver.find('.config_item').isPresent(), false);
// Reopen panel, check it's still right.
await gu.toggleSidePanel('right');
assert.equal(await driver.find('.test-field-label').value(), "Name");
// Switch to the section tab, check the new section is reflected.
await driver.find('.test-right-tab-pagewidget').click();
assert.equal(await driver.find('.test-right-widget-title').value(), 'CITY Card List');
// Switch to a different view, check the new section is reflected.
await driver.findContent('.test-treeview-itemHeader', /Country/).click();
assert.equal(await driver.find('.test-right-widget-title').value(), 'COUNTRY');
// Switch to field tab; check the new field is reflected.
await driver.find('.test-right-tab-field').click();
assert.equal(await driver.find('.test-field-label').value(), "Code");
});
it('should not cause errors when switching pages with Field tab open', async () => {
// There was an error ("this.calcSize is not a function") switching between pages when the
// active section changes type and Field tab is open, triggered by an unnecessary rebuilding
// of FieldConfigTab.
// Check that the active field tab is called "Column" (since the active section is "Table")
// and is open to column "Code".
assert.equal(await driver.find('.test-right-tab-field').getText(), 'Column');
assert.equal(await driver.find('.test-field-label').value(), "Code");
// Switch to the "City" page. Check that the tab is now called "Field" (since the active section is of
// type "CardList"), and open to the field "Name".
await driver.findContent('.test-treeview-itemHeader', /City/).click();
assert.equal(await driver.find('.test-right-tab-field').getText(), 'Field');
assert.equal(await driver.find('.test-field-label').value(), "Name");
// Check that this did not cause client-side errors.
await gu.checkForErrors();
// Now switch back, and check for errors again.
await driver.findContent('.test-treeview-itemHeader', /Country/).click();
await gu.checkForErrors();
});
it('should show tools when requested', async function() {
// Select specific view/section/field. Close side-pane.
await gu.getCell({col: "Name", rowNum: 3}).click();
assert.equal(await driver.find('.test-field-label').value(), "Name");
await gu.toggleSidePanel('right');
assert.equal(await gu.isSidePanelOpen('right'), false);
// Click Activity Log.
assert.equal(await driver.find('.action_log').isPresent(), false);
await driver.find('.test-tools-log').click();
await gu.waitToPass(() => // Click might not work while panel is sliding out to open.
driver.findContentWait('.test-doc-history-tabs .test-select-button', 'Activity', 500).click());
// Check that panel is shown, and correct.
assert.equal(await gu.isSidePanelOpen('right'), true);
assert.equal(await driver.find('.test-right-tab-field').isPresent(), false);
assert.equal(await driver.find('.action_log').isDisplayed(), true);
// Click "x", Check expected section config shown.
await driver.find('.test-right-tool-close').click();
assert.equal(await driver.find('.test-right-tab-field').getText(), 'Column');
assert.equal(await driver.find('.test-field-label').value(), "Name");
// TODO: polish data validation and then uncomment
/*
// Click Validations. Check it's shown and correct.
await driver.find('.test-tools-validate').click();
assert.equal(await driver.findContent('.config_item', /Validations/).isDisplayed(), true);
// Close panel. Switch to another view.
await gu.toggleSidePanel('right');
assert.equal(await gu.isSidePanelOpen('right'), false);
assert.equal(await driver.findContent('.config_item', /Validations/).isPresent(), false);
await driver.findContent('.test-treeview-itemHeader', /Country/).click();
// Open panel. Check Validations are still shown.
await gu.toggleSidePanel('right');
assert.equal(await driver.findContent('.config_item', /Validations/).isDisplayed(), true);
await driver.find('.test-right-tool-close').click();
*/
});
it('should keep panel state on reload', async function() {
// Check the panel is currently open and showing Field options.
assert.equal(await gu.isSidePanelOpen('right'), true);
assert.equal(await driver.find('.test-field-label').value(), "Name");
// Reload the page, and click the same cell as before.
await driver.navigate().refresh();
assert.equal(await gu.getActiveSectionTitle(3000), 'COUNTRY');
await gu.waitForServer();
await gu.getCell({col: "Name", rowNum: 3}).click();
// Check the panel is still open and showing the same Field options.
assert.equal(await gu.isSidePanelOpen('right'), true);
assert.equal(await driver.find('.test-field-label').value(), "Name");
});
it('\'SELECTOR FOR\' should work correctly', async function() {
// open the Data tab
await driver.find('.test-right-tab-pagewidget').click();
await driver.find('.test-config-data').click();
// open a page that has linked section
await driver.findContent('.test-treeview-itemHeader', /Country/).click();
// wait for data to load
assert(await gu.getActiveSectionTitle(3000));
await gu.waitForServer();
// select a view section that does not select other section
await gu.getSection('COUNTRY Card List').click();
// check that selector-for is not present
assert.equal(await driver.find('.test-selector-for').isPresent(), false);
// select a view section that does select other section
await gu.getSection('COUNTRY').click();
// check that selector-of is present and that all selected section are listed
assert.equal(await driver.find('.test-selector-for').isPresent(), true);
assert.deepEqual(await driver.findAll('.test-selector-for-entry', (e) => e.getText()), [
"CITY",
"COUNTRYLANGUAGE",
"COUNTRY Card List",
]);
});
it('\'Edit Data Selection\' should allow to change link', async () => {
// select COUNTRY DETAIL
await gu.getSection('CITY').click();
// open page widget picker
await driver.find('.test-pwc-editDataSelection').click();
// remove link
await driver.find('.test-wselect-selectby').doClick();
await driver.findContent('.test-wselect-selectby option', /Select Widget/).doClick();
// click save
await driver.find('.test-wselect-addBtn').doClick();
await gu.waitForServer();
// Go to the first record.
await gu.sendKeys(Key.chord(await gu.modKey(), Key.UP));
// Check that link was removed, by going to Aruba.
await gu.getSection('COUNTRY').click();
await gu.getCell(0, 1).click();
// City section should stay where it was
assert.equal(await gu.getCell(0, 1, 'CITY').getText(), 'Kabul');
// re-set the link
await gu.getSection('CITY').click();
await driver.find('.test-pwc-editDataSelection').click();
await driver.find('.test-wselect-selectby').click();
await driver.findContent('.test-wselect-selectby option', /Country$/).click();
await driver.find('.test-wselect-addBtn').doClick();
await gu.waitForServer();
// check link is set
await gu.getSection('COUNTRY').click();
await gu.getCell(0, 1).click();
assert.equal(await gu.getCell(0, 1, 'CITY').getText(), 'Oranjestad');
});
it('should not cause errors when switching pages with Table tab open', async () => {
// There were an error doing eigher one of 1) switching to `Code View`, or 2) removing the
// active page, when the Table tab was open, because: both caused the activeView to be set to an
// empty model causes some computed property of the ViewSectionRec to fail. This is what this
// test is aiming at catching.
await gu.toggleSidePanel('right', 'open');
await driver.find('.test-config-widget').click();
assert.deepEqual(await gu.getPageNames(), ['City', 'Country', 'CountryLanguage']);
// adds a new page
await gu.addNewPage(/Table/, /City/);
assert.deepEqual(await gu.getPageNames(), ['City', 'Country', 'CountryLanguage', 'New page']);
// remove that page
await gu.openPageMenu(/New page/);
await driver.find('.grist-floating-menu .test-docpage-remove').click();
await gu.waitForServer();
// check pages were removed and nothing break
assert.deepEqual(await gu.getPageNames(), ['City', 'Country', 'CountryLanguage']);
await gu.checkForErrors();
// now switch to `Code View`
await driver.find('.test-tools-code').click();
assert.equal(await driver.findWait('.g-code-viewer', 1000).isPresent(), true);
// check nothing broke
await gu.checkForErrors();
// switch back to City
await gu.getPageItem(/City/).click();
});
it('should not cause errors when editing summary table with `Change Widget` button', async () => {
// Changing the grouped by columns using the `Change Widget` used to throw `TypeError: Cannot
// read property `toUpperCase` of undefined`. The goal of this test is to prevent future
// regression.
// Create a summary table of City groupbed by country
await gu.addNewPage(/Table/, /City/, {summarize: [/Country/]});
// open right panel Widget
await gu.toggleSidePanel('right', 'open');
await driver.find('.test-right-tab-pagewidget').click();
await driver.find('.test-config-widget').click();
// click `Change Widget`
await driver.findContent('.test-right-panel button', /Change Widget/).click();
// remove column `Country` and save
await gu.selectWidget(/Table/, /City/, {summarize: []});
// check there were no error
await gu.checkForErrors();
});
it('should not raise errors when opening with table\'s `Widget Options`', async function() {
// Open right panel and select 'Column'
await gu.toggleSidePanel('right', 'open');
await driver.find('.test-right-tab-field').click();
// Close the right panel
await gu.toggleSidePanel('right', 'close');
// Open the right panel using the table's `Widget option`
await gu.openSectionMenu('viewLayout');
await driver.find('.test-widget-options').click();
await gu.checkForErrors();
});
});