Archives/gristlabs_grist-core
1
0
Fork 0
mirror of https://github.com/gristlabs/grist-core.git synced 2026-03-02 04:09:24 +00:00
Code Issues Projects Releases Wiki Activity

Header colored (#581)

Browse Source
This commit is contained in:
CamilleLegeron
2023-08-07 20:01:35 +02:00
committed by GitHub
parent 7c114bf600
commit 02841bd15c
16 changed files with 408 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
test/nbrowser/CellColor.ts
View File

@@ -23,7 +23,7 @@ describe('CellColor', function() {
it('should save by clicking away', async function() {
await gu.getCell('A', 1).click();
// open color picker
await gu.openColorPicker();
await gu.openCellColorPicker();
await gu.setFillColor('red');
await gu.setTextColor('blue');
// Save by clicking B column
@@ -46,7 +46,7 @@ describe('CellColor', function() {
it('should undo and redo colors when clicked away', async function() {
await gu.getCell('A', 1).click();
// open color picker
await gu.openColorPicker();
await gu.openCellColorPicker();
await gu.setFillColor('red');
await gu.setTextColor('blue');
// Save by clicking B column
@@ -78,7 +78,7 @@ describe('CellColor', function() {
await cell.click();
// open color picker
await driver.find('.test-color-select').click();
await gu.openCellColorPicker();
// set cell colors
await gu.setColor(driver.find('.test-text-input'), 'rgb(0, 255, 0)');
@@ -247,7 +247,7 @@ describe('CellColor', function() {
assert.equal(await cell.matches('.test-attachment-widget'), true);
// open color picker
await driver.find('.test-color-select').click();
await gu.openCellColorPicker();
// set and check cellColor
await gu.setColor(driver.find('.test-text-input'), 'rgb(0, 255, 0)');
@@ -277,7 +277,7 @@ describe('CellColor', function() {
assert.equal(await cell.find('.widget_checkbox').isPresent(), true);
// open color picker
await driver.find('.test-color-select').click();
await gu.openCellColorPicker();
// set and check cell color
await gu.setColor(driver.find('.test-text-input'), 'rgb(0, 255, 0)');
@@ -311,7 +311,7 @@ describe('CellColor', function() {
const clip = cell.find('.field_clip');
// open color picker
await driver.find('.test-color-select').click();
await gu.openCellColorPicker();
// set and check cell color
await gu.setColor(driver.find('.test-text-input'), 'rgb(0, 255, 0)');
@@ -338,7 +338,7 @@ describe('CellColor', function() {
const cell = gu.getCell('A', 1).find('.field_clip');
// open color picker
await driver.find('.test-color-select').click();
await gu.openCellColorPicker();
// set and check cell color
await gu.setColor(driver.find('.test-text-input'), 'rgb(0, 255, 0)');
@@ -369,7 +369,7 @@ describe('CellColor', function() {
await gu.enterCell(Key.DELETE);
// open color picker
await driver.find('.test-color-select').click();
await gu.openCellColorPicker();
// set and check cell color
await gu.setColor(driver.find('.test-text-input'), 'rgb(0, 255, 0)');
@@ -400,7 +400,7 @@ describe('CellColor', function() {
await gu.enterCell('foo');
// open color picker
await driver.find('.test-color-select').click();
await gu.openCellColorPicker();
// set and check cell color
const cell = await gu.getCell('A', 1).find('.field_clip');
@@ -430,7 +430,7 @@ describe('CellColor', function() {
let cell = gu.getCell('A', 1).find('.field_clip');
// open color picker
await driver.find('.test-color-select').click();
await gu.openCellColorPicker();
// set and check cell color
await gu.setColor(driver.find('.test-text-input'), 'rgb(0, 255, 0)');
@@ -465,7 +465,7 @@ describe('CellColor', function() {
await gu.setType(/Toggle/);
// open the color picker
await driver.find('.test-color-select').click();
await gu.openCellColorPicker();
// check color preview is correct
assert.equal(await driver.find('.test-text-hex').value(), '#606060');
@@ -479,7 +479,7 @@ describe('CellColor', function() {
await gu.waitForServer();
// open the color picker
await driver.find('.test-color-select').click();
await gu.openCellColorPicker();
// check color preview is correct
assert.equal(await driver.find('.test-text-hex').value(), '#2CB0AF');
@@ -505,7 +505,7 @@ describe('CellColor', function() {
assert.equal(await cell().find('.checkmark_stem').getCssValue('background-color'), gu.hexToRgb('#606060'));
// open the color picker and press ESC
await driver.find('.test-color-select').click();
await gu.openCellColorPicker();
await driver.wait(() => driver.find('.test-fill-palette').isPresent(), 3000);
await driver.sendKeys(Key.ESCAPE);
await driver.wait(async () => !(await driver.find('.test-fill-palette').isPresent()), 3000);

112
test/nbrowser/HeaderColor.ts Normal file
View File

@@ -0,0 +1,112 @@
import { assert, driver, Key } from 'mocha-webdriver';
import * as gu from 'test/nbrowser/gristUtils';
import { setupTestSuite } from 'test/nbrowser/testUtils';
const defaultHeaderBackgroundColor = '#f7f7f7';
describe('HeaderColor', function () {
this.timeout(20000);
const cleanup = setupTestSuite();
before(async () => {
// Create a new document
const mainSession = await gu.session().login();
await mainSession.tempNewDoc(cleanup, 'HeaderColor');
// add records
await gu.enterCell('a');
await gu.enterCell('b');
await gu.enterCell('c');
await gu.toggleSidePanel('right', 'open');
await driver.find('.test-right-tab-field').click();
});
it('should save by clicking away', async function () {
await gu.getCell('A', 1).click();
// open color picker
await gu.openHeaderColorPicker();
await gu.setFillColor('red');
await gu.setTextColor('blue');
// Save by clicking B column
await gu.getCell('B', 1).click();
await gu.waitForServer();
// Make sure the color is saved.
await gu.assertHeaderFillColor('A', 'red');
await gu.assertHeaderTextColor('A', 'blue');
await gu.assertHeaderFillColor('B', defaultHeaderBackgroundColor);
await gu.assertHeaderTextColor('B', 'black');
// Make sure it sticks after reload.
await driver.navigate().refresh();
await gu.waitForDocToLoad();
await gu.assertHeaderFillColor('A', 'red');
await gu.assertHeaderTextColor('A', 'blue');
await gu.assertHeaderFillColor('B', defaultHeaderBackgroundColor);
await gu.assertHeaderTextColor('B', 'black');
});
it('should undo and redo colors when clicked away', async function () {
await gu.getCell('A', 1).click();
// open color picker
await gu.openHeaderColorPicker();
await gu.setFillColor('red');
await gu.setTextColor('blue');
// Save by clicking B column
await gu.getCell('B', 1).click();
await gu.waitForServer();
// Make sure the color is saved.
await gu.assertHeaderFillColor('A', 'red');
await gu.assertHeaderTextColor('A', 'blue');
await gu.assertHeaderFillColor('B', defaultHeaderBackgroundColor);
await gu.assertHeaderTextColor('B', 'black');
// Make sure then undoing works.
await gu.undo();
await gu.assertHeaderFillColor('A', defaultHeaderBackgroundColor);
await gu.assertHeaderTextColor('A', 'black');
await gu.assertHeaderFillColor('B', defaultHeaderBackgroundColor);
await gu.assertHeaderTextColor('B', 'black');
await gu.redo();
await gu.assertHeaderFillColor('A', 'red');
await gu.assertHeaderTextColor('A', 'blue');
await gu.assertHeaderFillColor('B', defaultHeaderBackgroundColor);
await gu.assertHeaderTextColor('B', 'black');
});
it('should work correctly on Grid view', async function () {
const columnHeader = gu.getColumnHeader('C');
await columnHeader.click();
// open color picker
await gu.openHeaderColorPicker();
// set header colors
await gu.setColor(driver.find('.test-text-input'), 'rgb(255, 0, 0)');
await gu.setColor(driver.find('.test-fill-input'), 'rgb(0, 0, 255)');
// press enter to close color picker
await driver.sendKeys(Key.ENTER);
// check header colors
assert.equal(await columnHeader.getCssValue('color'), 'rgba(255, 0, 0, 1)');
assert.equal(await columnHeader.getCssValue('background-color'), 'rgba(0, 0, 255, 1)');
});
it('should not exist in Detail view', async function () {
// Color the A column in Grid View
const columnHeader = gu.getColumnHeader('A');
await columnHeader.click();
await gu.openHeaderColorPicker();
await gu.setColor(driver.find('.test-text-input'), 'rgb(255, 0, 0)');
await driver.sendKeys(Key.ENTER);
// Add a card list widget of Table1
await gu.addNewSection(/Card List/, /Table1/);
// check header colors
const detailHeader = await driver.findContent('.g_record_detail_label', gu.exactMatch('A'));
assert.equal(await detailHeader.getCssValue('color'), 'rgba(146, 146, 153, 1)');
// There is no header color picker
assert.isFalse(await driver.find('.test-header-color-select .test-color-select').isPresent());
});
});

84
test/nbrowser/MultiColumn.ts
View File

@@ -86,7 +86,7 @@ describe('MultiColumn', function() {
await gu.getCell('Test2', 3).click();
await gu.enterCell('Table1', Key.ENTER);
await selectColumns('Test1', 'Test2');
await gu.openColorPicker();
await gu.openCellColorPicker();
await gu.setFillColor(blue);
// Clicking on one of the cell caused that the color was not saved.
await gu.getCell('Test2', 1).click();
@@ -346,21 +346,21 @@ describe('MultiColumn', function() {
await removeColumn('Test1');
await removeColumn('Test2');
});
it('should change background for multiple columns', async () => {
it('should change cell background for multiple columns', async () => {
await selectColumns('Test1', 'Test2');
assert.equal(await colorLabel(), "Default cell style");
await gu.openColorPicker();
assert.equal(await cellColorLabel(), "Default cell style");
await gu.openCellColorPicker();
await gu.setFillColor(blue);
await gu.assertFillColor(await gu.getCell('Test1', 1).find(".field_clip"), blue);
await gu.assertFillColor(await gu.getCell('Test2', 1).find(".field_clip"), blue);
await driver.sendKeys(Key.ESCAPE);
await gu.assertFillColor(await gu.getCell('Test1', 1).find(".field_clip"), transparent);
await gu.assertFillColor(await gu.getCell('Test2', 1).find(".field_clip"), transparent);
assert.equal(await colorLabel(), "Default cell style");
assert.equal(await cellColorLabel(), "Default cell style");
// Change one cell to red
await selectColumns('Test1');
await gu.openColorPicker();
await gu.openCellColorPicker();
await gu.setFillColor(red);
await driver.sendKeys(Key.ENTER);
await gu.waitForServer();
@@ -369,9 +369,9 @@ describe('MultiColumn', function() {
// Check label and colors for multicolumn selection.
await selectColumns('Test1', 'Test2');
assert.equal(await colorLabel(), "Mixed style");
assert.equal(await cellColorLabel(), "Mixed style");
// Try to change to blue, but press escape.
await gu.openColorPicker();
await gu.openCellColorPicker();
await gu.setFillColor(blue);
await gu.assertFillColor(await gu.getCell('Test1', 1).find(".field_clip"), blue);
await gu.assertFillColor(await gu.getCell('Test2', 1).find(".field_clip"), blue);
@@ -381,21 +381,73 @@ describe('MultiColumn', function() {
await gu.assertFillColor(await gu.getCell('Test2', 1).find(".field_clip"), transparent);
// Change both colors.
await gu.openColorPicker();
await gu.openCellColorPicker();
await gu.setFillColor(blue);
await driver.sendKeys(Key.ENTER);
await gu.waitForServer();
assert.equal(await colorLabel(), "Default cell style");
assert.equal(await cellColorLabel(), "Default cell style");
await gu.assertFillColor(await gu.getCell('Test1', 1).find(".field_clip"), blue);
await gu.assertFillColor(await gu.getCell('Test2', 1).find(".field_clip"), blue);
// Make sure they stick.
await driver.navigate().refresh();
await gu.waitForDocToLoad();
assert.equal(await colorLabel(), "Default cell style");
assert.equal(await cellColorLabel(), "Default cell style");
await gu.assertFillColor(await gu.getCell('Test1', 1).find(".field_clip"), blue);
await gu.assertFillColor(await gu.getCell('Test2', 1).find(".field_clip"), blue);
});
it('should change header background for multiple columns', async () => {
const defaultHeaderFillColor = 'rgba(247, 247, 247, 1)';
await selectColumns('Test1', 'Test2');
assert.equal(await headerColorLabel(), "Default header style");
await gu.openHeaderColorPicker();
await gu.setFillColor(blue);
await gu.assertHeaderFillColor('Test1', blue);
await gu.assertHeaderFillColor('Test2', blue);
await driver.sendKeys(Key.ESCAPE);
await gu.assertHeaderFillColor('Test1', defaultHeaderFillColor);
await gu.assertHeaderFillColor('Test2', defaultHeaderFillColor);
assert.equal(await headerColorLabel(), "Default header style");
// Change one header to red
await selectColumns('Test1');
await gu.openHeaderColorPicker();
await gu.setFillColor(red);
await driver.sendKeys(Key.ENTER);
await gu.waitForServer();
await gu.assertHeaderFillColor('Test1', red);
await gu.assertHeaderFillColor('Test2', defaultHeaderFillColor);
// Check label and colors for multicolumn selection.
await selectColumns('Test1', 'Test2');
assert.equal(await headerColorLabel(), "Mixed style");
// Try to change to blue, but press escape.
await gu.openHeaderColorPicker();
await gu.setFillColor(blue);
await gu.assertHeaderFillColor('Test1', blue);
await gu.assertHeaderFillColor('Test2', blue);
await driver.sendKeys(Key.ESCAPE);
await gu.assertHeaderFillColor('Test1', red);
await gu.assertHeaderFillColor('Test2', defaultHeaderFillColor);
// Change both colors.
await gu.openHeaderColorPicker();
await gu.setFillColor(blue);
await driver.sendKeys(Key.ENTER);
await gu.waitForServer();
assert.equal(await headerColorLabel(), "Default header style");
await gu.assertHeaderFillColor('Test1', blue);
await gu.assertHeaderFillColor('Test2', blue);
// Make sure they stick.
await driver.navigate().refresh();
await gu.waitForDocToLoad();
assert.equal(await headerColorLabel(), "Default header style");
await gu.assertHeaderFillColor('Test1', blue);
await gu.assertHeaderFillColor('Test2', blue);
});
});
describe(`test for Integer column`, function() {
@@ -1344,8 +1396,14 @@ async function slider(value?: number) {
return parseInt(await driver.find(".test-pw-thumbnail-size").getAttribute('value'));
}
async function colorLabel() {
async function cellColorLabel() {
// Text actually contains T symbol before.
const label = await driver.find(".test-color-select").getText();
const label = await driver.find(".test-cell-color-select .test-color-select").getText();
return label.replace(/^T/, '').trim();
}
async function headerColorLabel() {
// Text actually contains T symbol before.
const label = await driver.find(".test-header-color-select .test-color-select").getText();
return label.replace(/^T/, '').trim();
}

23
test/nbrowser/gristUtils.ts
View File

@@ -2203,15 +2203,30 @@ export async function clickAway() {
}
/**
* Opens a color picker, either the default one or the one for a specific style rule.
* Opens the header color picker.
*/
export function openColorPicker(nr?: number) {
export function openHeaderColorPicker() {
return driver.find('.test-header-color-select .test-color-select').click();
}
export async function assertHeaderTextColor(col: string, color: string) {
await assertTextColor(await getColumnHeader(col), color);
}
export async function assertHeaderFillColor(col: string, color: string) {
await assertFillColor(await getColumnHeader(col), color);
}
/**
* Opens a cell color picker, either the default one or the one for a specific style rule.
*/
export function openCellColorPicker(nr?: number) {
if (nr !== undefined) {
return driver
.find(`.test-widget-style-conditional-rule-${nr} .test-color-select`)
.find(`.test-widget-style-conditional-rule-${nr} .test-cell-color-select .test-color-select`)
.click();
}
return driver.find('.test-color-select').click();
return driver.find('.test-cell-color-select .test-color-select').click();
}
export async function assertCellTextColor(col: string, row: number, color: string) {