gristlabs_grist-core/test/nbrowser/ViewLayoutCollapse.ts

import * as gu from 'test/nbrowser/gristUtils';
import {setupTestSuite} from 'test/nbrowser/testUtils';
import {getCollapsedSection, openCollapsedSectionMenu} from 'test/nbrowser/ViewLayoutUtils';
import {assert, driver, Key, WebElement, WebElementPromise} from 'mocha-webdriver';
import {arrayRepeat} from 'app/plugin/gutil';
import {addStatic, serveSomething} from 'test/server/customUtil';

const GAP = 16;     // Distance between buttons representing collapsed widgets.

describe("ViewLayoutCollapse", function() {
  this.timeout(40000);
  const cleanup = setupTestSuite();
  gu.bigScreen();
  let session: gu.Session;

  before(async () => {
    session = await gu.session().login();
    await session.tempDoc(cleanup, 'Investment Research.grist');
    await gu.openPage("Overview");
  });

  it('fix: custom widget should not throw errors when collapsed', async function() {
    const revert = await gu.begin();

    // Add custom section.
    await gu.addNewPage('Table', 'Companies');
    await gu.addNewSection('Custom', 'Companies', { selectBy: 'COMPANIES'});

    // Serve custom widget.
    const widgetServer = await serveSomething(app => {
      addStatic(app);
    });
    cleanup.addAfterAll(widgetServer.shutdown);
    await gu.openWidgetPanel();
    await gu.setWidgetUrl(widgetServer.url + '/probe/index.html');
    await driver.find('.test-config-widget-access .test-select-open').click();
    await driver.findContent('.test-select-menu li', 'Full document access').click();
    await gu.waitForServer();

    // Collapse it.
    await collapseByMenu('COMPANIES Custom');

    // Change cursor position in the active section.
    await gu.getCell(2, 4).click();

    // Put custom section in popup.
    await openCollapsedSection('COMPANIES Custom');

    // Close it by pressing escape.
    await gu.sendKeys(Key.ESCAPE);

    // Change cursor once again.
    await gu.getCell(2, 5).click();

    // Make sure we don't have an error (there was a bug here).
    await gu.checkForErrors();

    await revert();
  });

  it('fix: should resize other sections correctly when maximized and linked', async function() {
    const revert = await gu.begin();
    // If there are two sections linked, but one is collapsed, and user is changing the row
    // in the popup of the maximized section, the other section should resize correctly.

    // Add two linked tables.
    await gu.addNewTable('Table1');
    await gu.addNewSection('Table', 'New Table');

    await gu.toggleSidePanel('right', 'open');

    // Set A in Table2 to be linked in Table1, by ref column
    await gu.openColumnMenu('A', 'Column Options');

    // Change it to the Ref column of TABLE1
    await gu.setType('Reference');
    await gu.setRefTable('Table1');
    await gu.setRefShowColumn('A');

    // Select it by Table1.
    await gu.selectBy('TABLE1');

    // Now add 2 records with 'White' and 'Black' in Table1
    await gu.sendActions([
      ['BulkAddRecord', 'Table1', arrayRepeat(2, null), { A: ['White', 'Black'] }],
      // And 30 records in Table2 that are connected to White.
      ['BulkAddRecord', 'Table2', arrayRepeat(30, null), { A: arrayRepeat(30, 1) }],
      // And 30 records in Table2 that are connected to Black.
      ['BulkAddRecord', 'Table2', arrayRepeat(30, null), { A: arrayRepeat(30, 2) }],
    ]);

    // Now select White in Table1.
    await gu.getCell('A', 1, 'Table1').click();

    // Now expand Table1.
    await gu.expandSection();

    // Change to black.
    await gu.getCell('A', 2, 'Table1').click();

    // Close popup by sending ESCAPE
    await gu.sendKeys(Key.ESCAPE);

    // Make sure we see 30 records in Table2.
    const count = await driver.executeScript(`
      const section = Array.from(document.querySelectorAll('.test-widget-title-text'))
                           .find(e => e.textContent === 'TABLE2')
                           .closest('.viewsection_content');
      return Array.from(section.querySelectorAll('.gridview_data_row_num')).length;
    `);

    assert.equal(count, 30 + 1);

    await revert();
  });


  it('fix: should support searching', async function() {
    // Collapse Companies section (a first one).
    await collapseByMenu(COMPANIES);

    // Clear any saved position state.
    await driver.executeScript('window.sessionStorage.clear(); window.localStorage.clear();');

    // Refresh.
    await driver.navigate().refresh();
    await gu.waitForDocToLoad();

    // Here we had a bug that the hidden section was active, and the search was not working as it was
    // starting with the hidden section.

    // Now search (for something in the INVESTMENTS section)
    await gu.search('2006');
    await gu.closeSearch();

    // Make sure we don't have an error.
    await gu.checkForErrors();

    assert.equal(await gu.getActiveSectionTitle(), INVESTMENTS);
    // Make sure we are in 1column 9th row.
    assert.deepEqual(await gu.getCursorPosition(), {rowNum: 9, col: 0});

    // Hide companies chart, and search for mobile (should show no results).
    await collapseByMenu(COMPANIES_CHART);
    await gu.search('mobile');
    await gu.hasNoResult();
    await gu.closeSearch();

    // Open companies in the popup.
    await openCollapsedSection(COMPANIES);
    // Search for 2006, there will be no results.
    await gu.search('2006');
    await gu.hasNoResult();
    // Now search for web.
    await gu.closeSearch();
    await gu.search('web');
    assert.deepEqual(await gu.getCursorPosition(), {rowNum: 5, col: 0});

    // Recreate document (can't undo).
    await session.tempDoc(cleanup, 'Investment Research.grist');
  });


  it('fix: should not dispose the instance when drag is cancelled', async function() {
    const revert = await gu.begin();

    // Collapse a section.
    await collapseByMenu(INVESTMENTS);

    // Drag it and then cancel.
    await dragCollapsed(INVESTMENTS);
    const logo = driver.find('.test-dm-logo');
    await move(logo, {y:  0});
    await move(logo, {y:  -1});
    // Drop it here.
    await driver.withActions(actions => actions.release());

    // Now open it in the full view.
    await openCollapsedSection(INVESTMENTS);

    // And make sure we can move cursor.
    await gu.getCell(1, 1).click();
    assert.deepEqual(await gu.getCursorPosition(), {rowNum: 1, col: 1});
    await gu.getCell(1, 2).click();
    assert.deepEqual(await gu.getCursorPosition(), {rowNum: 2, col: 1});

    // Change its type, and check that it works.
    await gu.changeWidget('Card List');
    // Undo it.
    await gu.undo();
    await gu.getCell(1, 3).click();
    assert.deepEqual(await gu.getCursorPosition(), {rowNum: 3, col: 1});

    await gu.sendKeys(Key.ESCAPE);

    // Move it back
    await dragCollapsed(INVESTMENTS);

    // Move back and drop.
    await gu.getSection(COMPANIES_CHART).getRect();
    await move(getDragElement(COMPANIES_CHART));
    await driver.sleep(100);
    await move(getDragElement(COMPANIES_CHART), {x : 200});
    await driver.sleep(300);
    assert.lengthOf(await driver.findAll(".layout_editor_drop_target.layout_hover"), 1);

    await driver.withActions(actions => actions.release());
    await driver.sleep(600);

    // And make sure we can move cursor.
    await gu.getCell(1, 1).click();
    assert.deepEqual(await gu.getCursorPosition(), {rowNum: 1, col: 1});
    await gu.getCell(1, 2).click();
    assert.deepEqual(await gu.getCursorPosition(), {rowNum: 2, col: 1});

    await waitForSave();
    await revert();
  });


  it('fix: should work when the page is refreshed', async function() {
    const revert = await gu.begin();

    await gu.openPage("Companies");
    await gu.selectSectionByTitle("Companies");
    // Go to second row.
    await gu.getCell(0, 2).click();

    // Make sure we see correct company card.
    assert.equal(await gu.getCardCell('name', 'COMPANIES Card').getText(), '#NAME?');

    // Hide first section.
    await collapseByMenu("Companies");
    await waitForSave();

    // Refresh the page.
    await driver.navigate().refresh();
    await gu.waitForDocToLoad();

    // Make sure card is still at the correct row.
    await gu.waitToPass(async () => {
      assert.equal(await gu.getCardCell('name', 'COMPANIES Card').getText(), '#NAME?');
    });

    await addToMainByMenu("Companies");
    await revert();
  });

  it('fix: should support anchor links', async function() {
    const revert = await gu.begin();

    // Open 42Floors in Companies section.
    assert.equal(await gu.getActiveSectionTitle(), "COMPANIES");
    await gu.getCell('Link', 11).click();
    assert.equal(await gu.getActiveCell().getText(), '42Floors');

    // Open 12 row (Alex Bresler, angel).
    await gu.getCell('funding_round_type', 12, 'Investments').click();
    assert.equal(await gu.getActiveCell().getText(), 'angel');

    // Copy anchor link.
    const link = await gu.getAnchor();

    // Collapse first section.
    await collapseByMenu("COMPANIES");

    // Clear any saved position state.
    await driver.executeScript('window.sessionStorage.clear(); window.localStorage.clear();');

    // Navigate to the home screen.
    await gu.loadDocMenu('/o/docs');

    // Now go to the anchor.
    await driver.get(link);
    await gu.waitForAnchor();

    const cursor = await gu.getCursorPosition();
    assert.equal(cursor.rowNum, 12);
    assert.equal(cursor.col, 1);
    assert.equal(await gu.getActiveCell().getText(), 'angel');
    assert.equal(await gu.getActiveSectionTitle(), 'INVESTMENTS');
    assert.match(await driver.getCurrentUrl(), /\/o\/docs\/[^/]+\/Investment-Research\/p\/1$/);
    await revert();
  });

  it("should not autoexpand the tray on a page with a single widget", async () => {
    await gu.openPage("Investments");
    assert.equal((await driver.findAll(".viewsection_content")).length, 1);

    // Start drag the main section.
    await dragMain("INVESTMENTS");

    // Move it over the logo, so that the tray thinks that it should expand.
    const logo = driver.find('.test-dm-logo');
    await move(logo, {y:  0});
    await move(logo, {y:  -1});
    await driver.sleep(100);

    // Make sure the tray was not tricked into expanding itself.
    assert.isFalse(await layoutTray().isDisplayed());
    assert.lengthOf(await layoutTray().findAll(".test-layoutTray-empty-box"), 0); // No empty box

    // Drop it on the button, it should go back to where it was.
    await driver.withActions(actions => actions.release());
  });

  it("should autoexpand the tray", async () => {
    await gu.openPage("Overview");

    // Get one of the sections and start dragging it.
    await dragMain(COMPANIES_CHART);

    // The tray should not be expanded.
    assert.isFalse(await layoutTray().isDisplayed());

    const logo = driver.find('.test-dm-logo');
    // Now move it to the top, so that tray should be expanded.
    await move(logo, {y:  0});
    await driver.sleep(100);

    // Now the tray is visible
    assert.isTrue(await layoutTray().isDisplayed());
    assert.lengthOf(await layoutTray().findAll(".test-layoutTray-empty-box"), 1); // One empty box
    assert.isTrue(await layoutEditor().matches('[class*=-is-active]')); // Is active
    assert.isFalse(await layoutEditor().matches('[class*=-is-target]')); // Is not a target

    // Drop it on the button, it should go back to where it was.
    await driver.withActions(actions => actions.release());

    // The tray should not be expanded.
    assert.isFalse(await layoutTray().isDisplayed());

    await gu.checkForErrors();
  });

  it("should drag onto main area", async () => {
    const revert = await gu.begin();
    await collapseByMenu(COMPANIES);
    await collapseByMenu(INVESTMENTS);

    await dragCollapsed(COMPANIES);
    const chartCords = await gu.getSection(COMPANIES_CHART).getRect();
    await move(getDragElement(COMPANIES_CHART));
    await driver.sleep(100);
    await move(getDragElement(COMPANIES_CHART), {x : 10});
    await driver.sleep(300);

    // We should have a drop target.
    const dropTarget = await driver.find(".layout_editor_drop_target.layout_hover");
    const dCords = await dropTarget.getRect();
    // It should be more or less on the left of the chart.
    assertDistance(dCords.x, chartCords.x, 20);
    assertDistance(dCords.y, chartCords.y, 20);

    // Move away from the drop target.
    const addButton = driver.find('.test-dp-add-new');
    await move(addButton);
    await driver.sleep(300);

    // Drop target should be gone.
    assert.lengthOf(await driver.findAll(".layout_editor_drop_target.layout_hover"), 0);

    // Move back and drop.
    await move(getDragElement(COMPANIES_CHART));
    await driver.sleep(100);
    // Split the movement into two parts, to make sure layout sees the mouse move.
    await move(getDragElement(COMPANIES_CHART), {x : 10});
    await driver.sleep(200);
    assert.lengthOf(await driver.findAll(".layout_editor_drop_target.layout_hover"), 1);
    await driver.withActions(actions => actions.release());
    await driver.sleep(600); // This animation can be longer.

    // Make sure it was dropped.
    assert.lengthOf(await layoutTray().findAll(".test-layoutTray-leaf-box"), 1); // Only one collapsed box.
    assert.lengthOf(await layoutTray().findAll(".test-layoutTray-empty-box"), 0); // No empty box.
    assert.lengthOf(await layoutTray().findAll(".test-layoutTray-target-box"), 0); // No target box.
    assert.deepEqual(await collapsedSectionTitles(), [INVESTMENTS]); // Only investments is collapsed.
    assert.deepEqual(await mainSectionTitles(), [COMPANIES, COMPANIES_CHART, INVESTMENTS_CHART]);
    // Check that it was dropped on the left top side.
    const companiesCords = await gu.getSection(COMPANIES).getRect();
    assertDistance(companiesCords.x, chartCords.x, 20);
    assertDistance(companiesCords.y, chartCords.y, 20);
    // It should be half as tall as the main layout.
    const root = await driver.find(".layout_root").getRect();
    assertDistance(companiesCords.height, root.height / 2, 30);
    // And almost half as wide.
    assertDistance(companiesCords.width, root.width / 2, 30);

    // Now move it back to the tray. But first collapse another section (so we can test inbetween target).
    await collapseByMenu(COMPANIES_CHART);
    await dragMain(COMPANIES);

    // Try to move it as the first element.
    const firstLeafSize = await firstLeaf().getRect();
    await move(firstLeaf(), { x: -firstLeafSize.width / 2 });
    await driver.sleep(300);
    assert.lengthOf(await layoutTray().findAll(".test-layoutTray-target-box"), 1);
    // Make sure that the target is in right place.
    let target = await layoutTray().find(".test-layoutTray-target-box").getRect();
    assertDistance(target.x, firstLeafSize.x, 10);

    // Now as the second element.
    await move(firstLeaf(), { x: firstLeafSize.width / 2 + GAP });
    await driver.sleep(300);
    assert.lengthOf(await layoutTray().findAll(".test-layoutTray-target-box"), 1);
    target = await layoutTray().find(".test-layoutTray-target-box").getRect();
    assertDistance(target.x, firstLeafSize.x + firstLeafSize.width + GAP, 10);

    // Move away to make sure the target is gone.
    await move(addButton);
    await driver.sleep(300);
    assert.lengthOf(await layoutTray().findAll(".test-layoutTray-target-box"), 0);

    // Move back and drop.
    await move(firstLeaf(), { x: firstLeafSize.width / 2 + GAP });
    await driver.sleep(300);
    await driver.withActions(actions => actions.release());
    await driver.sleep(600);

    // Make sure it was dropped.
    assert.lengthOf(await layoutTray().findAll(".test-layoutTray-leaf-box"), 3);
    assert.lengthOf(await layoutTray().findAll(".test-layoutTray-empty-box"), 0);
    assert.lengthOf(await layoutTray().findAll(".test-layoutTray-target-box"), 0);

    assert.deepEqual(await collapsedSectionTitles(), [INVESTMENTS, COMPANIES, COMPANIES_CHART]);
    assert.deepEqual(await mainSectionTitles(), [INVESTMENTS_CHART]);

    await waitForSave(); // Layout save is debounced 1s.

    // Test couple of undo steps.
    await gu.undo();
    assert.deepEqual(await collapsedSectionTitles(), [INVESTMENTS, COMPANIES_CHART]);
    assert.deepEqual(await mainSectionTitles(), [COMPANIES, INVESTMENTS_CHART]);

    await gu.undo();
    assert.deepEqual(await collapsedSectionTitles(), [INVESTMENTS]);
    assert.deepEqual(await mainSectionTitles(), [COMPANIES, COMPANIES_CHART, INVESTMENTS_CHART]);

    await gu.undo();
    assert.deepEqual(await collapsedSectionTitles(), [COMPANIES, INVESTMENTS]);
    assert.deepEqual(await mainSectionTitles(), [COMPANIES_CHART, INVESTMENTS_CHART]);

    await gu.undo();
    assert.deepEqual(await collapsedSectionTitles(), [COMPANIES]);
    assert.deepEqual(await mainSectionTitles(), [COMPANIES_CHART, INVESTMENTS_CHART, INVESTMENTS]);

    await gu.redo();
    assert.deepEqual(await collapsedSectionTitles(), [COMPANIES, INVESTMENTS]);
    assert.deepEqual(await mainSectionTitles(), [COMPANIES_CHART, INVESTMENTS_CHART]);

    await revert();
    assert.deepEqual(await collapsedSectionTitles(), []);
    assert.deepEqual(await mainSectionTitles(), [COMPANIES_CHART, COMPANIES, INVESTMENTS_CHART, INVESTMENTS]);
    await gu.checkForErrors();
  });

  it("should reorder collapsed sections", async () => {
    const revert = await gu.begin();
    await collapseByMenu(COMPANIES);
    await collapseByMenu(INVESTMENTS);
    await collapseByMenu(COMPANIES_CHART);

    await dragCollapsed(COMPANIES);

    // We should see the empty box in the layout.
    assert.lengthOf(await layoutTray().findAll(".test-layoutTray-empty-box"), 1);
    // The section is actually removed from the layout tray.
    assert.lengthOf(await layoutTray().findAll(".test-layoutTray-leaf-box"), 2);
    assert.deepEqual(await collapsedSectionTitles(), [INVESTMENTS, COMPANIES_CHART]);

    // Layout should be active and accepting.
    assert.isTrue(await layoutEditor().matches('[class*=-is-active]'));
    assert.isTrue(await layoutEditor().matches('[class*=-is-target]'));

    // Move mouse somewhere else, layout should not by highlighted.
    const addButton = driver.find('.test-dp-add-new');
    await move(addButton);
    assert.isTrue(await layoutEditor().matches('[class*=-is-active]'));
    assert.isFalse(await layoutEditor().matches('[class*=-is-target]'));

    // Move to the first leaf, and wait for the target to show up.
    const first = await firstLeaf().getRect();
    await move(firstLeaf(), {x : -first.width / 2});
    await driver.sleep(300);
    assert.lengthOf(await layoutTray().findAll(".test-layoutTray-target-box"), 1);
    // Make sure that the target is in right place.
    let target = await layoutTray().find(".test-layoutTray-target-box").getRect();
    assert.isBelow(Math.abs(target.x - first.x), 10);
    assert.isBelow(Math.abs(target.y - first.y), 10);
    assert.isBelow(Math.abs(target.height - first.height), 10);

    // Move away and make sure the target is gone.
    await move(addButton);
    await driver.sleep(300);
    assert.lengthOf(await layoutTray().findAll(".test-layoutTray-target-box"), 0);

    // Move between first and second leaf.
    await move(firstLeaf(), {x : first.width / 2 + GAP});
    await driver.sleep(300);
    assert.lengthOf(await layoutTray().findAll(".test-layoutTray-target-box"), 1);
    target = await layoutTray().find(".test-layoutTray-target-box").getRect();
    assert.isBelow(Math.abs(target.height - first.height), 2);
    assert.isBelow(Math.abs(target.y - first.y), 2);
    // Should be between first and second leaf.
    assert.isBelow(Math.abs(target.x - (first.x + first.width + GAP)), 10);

    // Drop here.
    await driver.withActions(actions => actions.release());
    await waitForSave(); // Wait for layout to be saved.
    // Target is gone.
    assert.lengthOf(await layoutTray().findAll(".test-layoutTray-empty-box"), 0);
    // And we have 3 sections in the layout.
    assert.lengthOf(await layoutTray().findAll(".test-layoutTray-leaf-box"), 3);
    assert.deepEqual(await collapsedSectionTitles(), [INVESTMENTS, COMPANIES, COMPANIES_CHART]);

    // Undo.
    await gu.undo();
    // Order should be restored.
    assert.deepEqual(await collapsedSectionTitles(), [COMPANIES, INVESTMENTS, COMPANIES_CHART]);

    await revert();
    await gu.checkForErrors();
  });

  it("should collapse sections and expand using menu", async () => {
    await collapseByMenu(COMPANIES_CHART);
    await gu.checkForErrors();

    assert.deepEqual(await collapsedSectionTitles(), [COMPANIES_CHART]);
    // Make sure that other sections are not collapsed.
    assert.deepEqual(await mainSectionTitles(), [COMPANIES, INVESTMENTS_CHART, INVESTMENTS]);

    await collapseByMenu(INVESTMENTS_CHART);
    assert.deepEqual(await collapsedSectionTitles(), [COMPANIES_CHART, INVESTMENTS_CHART]);
    assert.deepEqual(await mainSectionTitles(), [COMPANIES, INVESTMENTS]);

    await collapseByMenu(COMPANIES);
    assert.deepEqual(await collapsedSectionTitles(), [COMPANIES_CHART, INVESTMENTS_CHART, COMPANIES]);
    assert.deepEqual(await mainSectionTitles(), [INVESTMENTS]);

    // The last section is INVESTMENTS, which can't be collapsed.
    await gu.openSectionMenu('viewLayout', INVESTMENTS);
    assert.equal(await driver.find('.test-section-collapse').matches('[class*=disabled]'), true);
    await driver.sendKeys(Key.ESCAPE);

    // Now expand them one by one and test.
    await addToMainByMenu(COMPANIES_CHART);
    await gu.checkForErrors();

    assert.deepEqual(await collapsedSectionTitles(), [INVESTMENTS_CHART, COMPANIES]);
    assert.deepEqual(await mainSectionTitles(), [INVESTMENTS, COMPANIES_CHART]);

    await addToMainByMenu(INVESTMENTS_CHART);
    assert.deepEqual(await collapsedSectionTitles(), [COMPANIES]);
    assert.deepEqual(await mainSectionTitles(), [INVESTMENTS, COMPANIES_CHART, INVESTMENTS_CHART]);
    await gu.checkForErrors();

    await addToMainByMenu(COMPANIES);
    assert.deepEqual(await collapsedSectionTitles(), []);
    assert.deepEqual(await mainSectionTitles(), [INVESTMENTS, COMPANIES_CHART, INVESTMENTS_CHART, COMPANIES]);
    await gu.checkForErrors();

    // Now revert everything using undo but test each step.
    await gu.undo();
    assert.deepEqual(await collapsedSectionTitles(), [COMPANIES]);
    assert.deepEqual(await mainSectionTitles(), [INVESTMENTS, COMPANIES_CHART, INVESTMENTS_CHART]);
    await gu.checkForErrors();

    await gu.undo();
    assert.deepEqual(await collapsedSectionTitles(), [INVESTMENTS_CHART, COMPANIES]);
    assert.deepEqual(await mainSectionTitles(), [INVESTMENTS, COMPANIES_CHART]);
    await gu.checkForErrors();

    await gu.undo();
    assert.deepEqual(await collapsedSectionTitles(), [COMPANIES_CHART, INVESTMENTS_CHART, COMPANIES]);
    assert.deepEqual(await mainSectionTitles(), [INVESTMENTS]);
    await gu.checkForErrors();

    await gu.undo();
    assert.deepEqual(await collapsedSectionTitles(), [COMPANIES_CHART, INVESTMENTS_CHART]);
    assert.deepEqual(await mainSectionTitles(), [COMPANIES, INVESTMENTS]);
    await gu.checkForErrors();

    await gu.undo();
    assert.deepEqual(await collapsedSectionTitles(), [COMPANIES_CHART]);
    assert.deepEqual(await mainSectionTitles(), [COMPANIES, INVESTMENTS_CHART, INVESTMENTS]);
    await gu.checkForErrors();

    await gu.undo();
    assert.deepEqual(await collapsedSectionTitles(), []);
    assert.deepEqual(await mainSectionTitles(), [COMPANIES_CHART, COMPANIES, INVESTMENTS_CHART, INVESTMENTS]);
    await gu.checkForErrors();
  });

  it("should remove sections from collapsed tray", async () => {
    const revert = await gu.begin();
    // Collapse everything we can.
    await collapseByMenu(COMPANIES_CHART);
    await collapseByMenu(INVESTMENTS_CHART);
    await collapseByMenu(COMPANIES);
    assert.deepEqual(await mainSectionTitles(), [INVESTMENTS]);

    // Now remove them using menu.
    await removeMiniSection(COMPANIES_CHART);
    await gu.checkForErrors();

    // Check that the section is removed from the collapsed tray.
    assert.deepEqual(await collapsedSectionTitles(), [INVESTMENTS_CHART, COMPANIES]);
    // Make sure it is stays removed when we move to the other page.
    await gu.openPage("Investments");
    // Go back.
    await gu.openPage("Overview");
    await gu.checkForErrors();

    // Test if we see everything as it was.
    assert.deepEqual(await collapsedSectionTitles(), [INVESTMENTS_CHART, COMPANIES]);
    // Make sure that visible sections are not affected.
    assert.deepEqual(await mainSectionTitles(), [INVESTMENTS]);

    // Remove the other sections.
    await removeMiniSection(INVESTMENTS_CHART);
    await removeMiniSection(COMPANIES);
    assert.deepEqual(await collapsedSectionTitles(), []);
    assert.deepEqual(await mainSectionTitles(), [INVESTMENTS]);

    // Now revert everything using undo but test each step.
    await gu.undo();
    assert.deepEqual(await collapsedSectionTitles(), [COMPANIES]);
    assert.deepEqual(await mainSectionTitles(), [INVESTMENTS]);

    await gu.undo();
    assert.deepEqual(await collapsedSectionTitles(), [INVESTMENTS_CHART, COMPANIES]);
    assert.deepEqual(await mainSectionTitles(), [INVESTMENTS]);

    await gu.undo();
    assert.deepEqual(await collapsedSectionTitles(), [COMPANIES_CHART, INVESTMENTS_CHART, COMPANIES]);
    assert.deepEqual(await mainSectionTitles(), [INVESTMENTS]);

    await gu.undo();
    assert.deepEqual(await collapsedSectionTitles(), [COMPANIES_CHART, INVESTMENTS_CHART]);
    assert.deepEqual(await mainSectionTitles(), [COMPANIES, INVESTMENTS]);

    // Ok, we are good, revert back to the original state.
    await revert();
    await gu.checkForErrors();
  });

  it("should switch active section when collapsed", async () => {
    const revert = await gu.begin();
    await gu.selectSectionByTitle(gu.exactMatch(COMPANIES));
    // Make sure we are active.
    assert.equal(await gu.getActiveSectionTitle(), COMPANIES);
    // Collapse it.
    await collapseByMenu(COMPANIES);
    // Make sure it is collapsed.
    assert.deepEqual(await collapsedSectionTitles(), [COMPANIES]);
    // Make sure that now COMPANIES_CHART is active. (first one).
    assert.equal(await gu.getActiveSectionTitle(), COMPANIES_CHART);
    // Expand COMPANIES.
    await addToMainByMenu(COMPANIES);
    // Make sure that now it is active.
    assert.equal(await gu.getActiveSectionTitle(), COMPANIES);
    await revert();
    await gu.checkForErrors();
  });

  it("should show section on popup when clicked", async () => {
    const revert = await gu.begin();
    await collapseByMenu(COMPANIES);
    await openCollapsedSection(COMPANIES);
    // Make sure it is expanded.
    assert.isTrue(await driver.find(".test-viewLayout-overlay").matches("[class*=-active]"));
    assert.equal(await gu.getActiveSectionTitle(), COMPANIES);
    // Make sure that the panel shows it.
    await gu.toggleSidePanel('right', 'open');
    await driver.find('.test-config-widget').click();
    assert.equal(await driver.find('.test-right-widget-title').value(), COMPANIES);
    // Make sure we see proper items in the menu.
    await gu.openSectionMenu('viewLayout', COMPANIES);
    // Collapse widget menu item is disabled.
    assert.equal(await driver.find('.test-section-collapse').matches('[class*=disabled]'), true);
    // Delete widget is enabled.
    assert.equal(await driver.find('.test-section-delete').matches('[class*=disabled]'), false);
    await driver.sendKeys(Key.ESCAPE);
    // Expand button is not visible
    assert.lengthOf(await driver.findAll(".active_section .test-section-menu-expandSection"), 0);
    // We can rename a section using the popup.
    await gu.renameActiveSection("New name");
    assert.equal(await gu.getActiveSectionTitle(), "New name");
    // Make sure the name is reflected in the collapsed tray.
    await gu.sendKeys(Key.ESCAPE);
    assert.deepEqual(await collapsedSectionTitles(), ["New name"]);
    // Open it back.
    await openCollapsedSection("New name");
    // Rename it back using undo.
    await gu.undo();
    assert.equal(await gu.getActiveSectionTitle(), COMPANIES);
    // Now remove it.
    await gu.openSectionMenu('viewLayout', COMPANIES);
    await driver.find('.test-section-delete').click();
    await gu.waitForServer();
    // Make sure it is closed.
    assert.isFalse(await driver.find(".test-viewLayout-overlay").matches("[class*=-active]"));
    // Make sure it is removed.
    assert.deepEqual(await collapsedSectionTitles(), []);
    // Make sure it didn't reappear on the main area.
    assert.deepEqual(await mainSectionTitles(), [COMPANIES_CHART, INVESTMENTS_CHART, INVESTMENTS]);

    await revert();
    await gu.checkForErrors();
  });

  it("should collapse and expand charts without an error", async () => {
    const revert = await gu.begin();
    await collapseByMenu(INVESTMENTS);
    await dragMain(COMPANIES_CHART);
    const firstRect = await firstLeaf().getRect();
    await move(firstLeaf(), { x: firstRect.width / 2 + GAP });
    await driver.sleep(300);
    await driver.withActions(actions => actions.release());
    await waitForSave(); // Resize is delayed.
    await gu.checkForErrors();
    await revert();
  });

  it("should drop on the empty space", async () => {
    const revert = await gu.begin();
    // Get one of the sections and start dragging it.
    await dragMain(COMPANIES_CHART);
    // Move it over the logo to show the tray.
    const logo = driver.find('.test-dm-logo');
    await move(logo, {y:  0});
    await move(logo, {y:  -20});
    await driver.sleep(100);
    // Now the tray is visible
    assert.isTrue(await layoutTray().isDisplayed());
    // Move it on the empty space just after the empty box
    const emptyBox = await layoutTray().find(".test-layoutTray-empty-box");
    const emptyBoxCords = await emptyBox.getRect();
    await move(emptyBox, {x: emptyBoxCords.width + 100 });
    // Make sure that the empty box is not active.
    assert.isFalse(await emptyBox.matches('[class*=-is-active]'));
    // Drop it here
    await driver.withActions(actions => actions.release());
    await driver.sleep(600); // Wait for animation to finish.
    await waitForSave();
    // The tray should stay expanded.
    assert.isTrue(await layoutTray().isDisplayed());

    // Check that the section was collapsed.
    assert.deepEqual(await collapsedSectionTitles(), [COMPANIES_CHART]);
    // And other sections are still there.
    assert.deepEqual(await mainSectionTitles(), [COMPANIES, INVESTMENTS_CHART, INVESTMENTS]);
    await gu.checkForErrors();
    await revert();
    await gu.checkForErrors();
  });

  it("should clear layout when dropped section is removed", async () => {
    await session.tempNewDoc(cleanup, 'CollapsedBug.grist');
    // Add a new section based on current table.
    await gu.addNewSection('Table', 'Table1');
    // It will have id 3 (1 is raw, 2 is visible).
    // Collapse it.
    await gu.renameActiveSection('ToDelete');
    await collapseByMenu('ToDelete');
    // Remove it from the tray.
    await openCollapsedSectionMenu('ToDelete');
    await driver.find('.test-section-delete').click();
    await gu.waitForServer();
    await waitForSave();
    // Now add another one, it will have the same id (3) and it used to be collapsed when added
    // as the layout was not cleared.
    await gu.addNewSection('Table', 'Table1');
    // Make sure it is expanded.
    assert.deepEqual(await mainSectionTitles(), ['TABLE1', 'TABLE1']);
    assert.deepEqual(await collapsedSectionTitles(), []);
  });
});

async function addToMainByMenu(section: string) {
  await openCollapsedSectionMenu(section);
  await driver.find('.test-section-expand').click();
  await gu.waitForServer();
  await gu.checkForErrors();
}

async function dragCollapsed(section: string) {
  const handle = getCollapsedSection(section).find('.draggable-handle');
  await driver.withActions((actions) => actions
    .move({origin: handle})
    .press());
  await move(handle, {x : 10, y: 10});
  return handle;
}

async function dragMain(section: string) {
  const handle = gu.getSection(section).find('.viewsection_drag_indicator');
  await driver.withActions((actions) => actions
    .move({origin: handle}));
  await driver.withActions((actions) => actions
    .move({origin: handle, x : 1}) // This is needed to show the drag element.
    .press());
  await move(handle, {x : 10, y: 10});
  return handle;
}

async function openCollapsedSection(section: string) {
  await getCollapsedSection(section).find('.draggable-handle').click();
}

async function removeMiniSection(section: string) {
  await openCollapsedSectionMenu(section);
  await driver.find('.test-section-delete').click();
  await gu.waitForServer();
  await gu.checkForErrors();
}

async function collapseByMenu(section: string) {
  await gu.openSectionMenu('viewLayout', section);
  await driver.find('.test-section-collapse').click();
  await gu.waitForServer();
  await gu.checkForErrors();
}

// Returns the titles of all collapsed sections.
async function collapsedSectionTitles() {
  return await layoutTray().findAll('.test-layoutTray-leaf-box .test-collapsed-section-title', e => e.getText());
}

// Returns titles of all sections in the view layout.
async function mainSectionTitles() {
  return await driver.findAll('.layout_root .test-viewsection-title', e => e.getText());
}

async function move(element: WebElementPromise|WebElement, offset: {x?: number, y?: number} = {x: 0, y: 0}) {
  // With current version of webdriver, a fractional values will get ignored, so round to nearest.
  if (offset.x) { offset.x = Math.round(offset.x); }
  if (offset.y) { offset.y = Math.round(offset.y); }
  await driver.withActions(actions => actions.move({origin: element, ...offset}));
}


function getDragElement(section: string) {
  return gu.getSection(section).find('.viewsection_drag_indicator');
}

function layoutTray() {
  return driver.find(".test-layoutTray-layout");
}

function firstLeaf() {
  return layoutTray().find(".test-layoutTray-leaf-box");
}

function layoutEditor() {
  return driver.find(".test-layoutTray-editor");
}

const COMPANIES_CHART = 'COMPANIES [by category_code] Chart';
const INVESTMENTS_CHART = 'INVESTMENTS [by funded_year] Chart';
const COMPANIES = 'COMPANIES [by category_code]';
const INVESTMENTS = 'INVESTMENTS [by funded_year]';

function assertDistance(left: number, right: number, max: number) {
  return assert.isBelow(Math.abs(left - right), max);
}

async function waitForSave() {
  await gu.waitToPass(async () => {
    const pending = await driver.findAll(".test-viewLayout-save-pending");
    assert.isTrue(pending.length === 0);
    await gu.waitForServer();
  }, 3000);
}