test(ColmunDesc): add Card column description tooltip test

This commit is contained in:
Camille 2023-02-10 12:41:36 +01:00
parent 4a239ad93b
commit 7abecd4783

View File

@ -1,7 +1,16 @@
import { UserAPIImpl } from 'app/common/UserAPI';
import { assert, driver } from 'mocha-webdriver';
import * as gu from 'test/nbrowser/gristUtils';
import { setupTestSuite } from 'test/nbrowser/testUtils';
async function addColumnDescription(api: UserAPIImpl, docId: string, columnName: string) {
await api.applyUserActions(docId, [
[ 'ModifyColumn', 'Table1', columnName, {
description: 'This is the column description'
} ],
]);
}
function getDescriptionInput() {
return driver.find('.test-right-panel .test-column-description');
}
@ -11,31 +20,62 @@ describe('DescriptionColumn', function() {
const cleanup = setupTestSuite();
it('should support basic edition', async () => {
const mainSession = await gu.session().teamSite.login();
const api = mainSession.createHomeApi();
const docId = await mainSession.tempNewDoc(cleanup, 'FormulaCounts', { load: true });
const doc = await mainSession.tempDoc(cleanup, "CardView.grist", { load: true });
const docId = doc.id;
// Make a column and add a description
await api.applyUserActions(docId, [
[ 'ModifyColumn', 'Table1', 'C', {
type: 'Text',
description: 'This is the column description \nI am in two lines'
} ],
]);
addColumnDescription(api, docId, 'B');
// Column description editable in right panel
await driver.find('.test-right-opener').click();
await gu.getCell({ rowNum: 1, col: 'C' }).click();
await driver.find('.test-right-tab-field').click();
assert.equal(await getDescriptionInput().value(), 'This is the column description \nI am in two lines');
await gu.getCell({ rowNum: 1, col: 'B' }).click();
await driver.find('.test-right-tab-field').click();
assert.equal(await getDescriptionInput().value(), 'This is the column description');
await gu.getCell({ rowNum: 1, col: 'A' }).click();
assert.equal(await getDescriptionInput().value(), '');
// Remove the description
await api.applyUserActions(docId, [
[ 'ModifyColumn', 'Table1', 'C', {
[ 'ModifyColumn', 'Table1', 'B', {
description: ''
} ],
]);
await gu.getCell({ rowNum: 1, col: 'B' }).click();
assert.equal(await getDescriptionInput().value(), '');
});
it('should show info tooltip only if there is a description', async () => {
const mainSession = await gu.session().teamSite.login();
const api = mainSession.createHomeApi();
const doc = await mainSession.tempDoc(cleanup, "CardView.grist", { load: true });
const docId = doc.id;
addColumnDescription(api, docId, 'B');
await gu.changeWidget('Card');
const detailUndescribedColumnFirstRow = await gu.getDetailCell('A', 1);
assert.isFalse(await detailUndescribedColumnFirstRow.findClosest(".g_record_detail_el").find(".test-column-info-tooltip").isPresent());
const detailDescribedColumnFirstRow = await gu.getDetailCell('B', 1);
const toggle = await detailDescribedColumnFirstRow.findClosest(".g_record_detail_el").find(".test-column-info-tooltip");
// The toggle to show the description is present if there is a description
assert.isTrue(await toggle.isPresent());
// Open the tooltip
await toggle.click();
assert.isTrue(await driver.findWait('.test-column-info-tooltip-popup', 1000).isDisplayed());
// Check the content of the tooltip
const descriptionTooltip = await driver.find('.test-column-info-tooltip-popup .test-column-info-tooltip-popup-body');
assert.equal(await descriptionTooltip.getText(), 'This is the column description');
// Close the tooltip
await toggle.click();
assert.lengthOf(await driver.findAll('.test-column-info-tooltip-popup'), 0);
})
});