(core) Fixing click-away bug for the cell color widget

Summary:
After introducing multi columns operation, color picker
could save a cell style for a wrong column, if the save operation
was triggered by user clicking on one of the cells.

Test Plan: Updated

Reviewers: georgegevoian

Reviewed By: georgegevoian

Differential Revision: https://phab.getgrist.com/D3668

test/nbrowser/MultiColumn.ts

@@ -61,6 +61,29 @@ describe('MultiColumn', function() {
       }
     });
 
+    it('should undo color change', async () => {
+      // This is test for a bug, colors were not saved when "click outside" was done by clicking
+      // one of the cells.
+      await selectColumns('Test1', 'Test2');
+      await gu.setType('Reference');
+      await gu.getCell('Test1', 1).click();
+      await gu.enterCell('Table1', Key.ENTER);
+      await gu.getCell('Test2', 3).click();
+      await gu.enterCell('Table1', Key.ENTER);
+      await selectColumns('Test1', 'Test2');
+      await gu.openColorPicker();
+      await gu.setFillColor(blue);
+      // Clicking on one of the cell caused that the color was not saved.
+      await gu.getCell('Test2', 1).click();
+      // Test if color is set.
+      await gu.assertFillColor(await gu.getCell('Test1', 1), blue);
+      await gu.assertFillColor(await gu.getCell('Test2', 1), blue);
+      // Press undo
+      await gu.undo();
+      await gu.assertFillColor(await gu.getCell('Test1', 1), transparent);
+      await gu.assertFillColor(await gu.getCell('Test2', 1), transparent);
+    });
+
     for (const type of ['Choice', 'Text', 'Reference', 'Numeric']) {
       it(`should reset all columns to first column type for ${type}`, async () => {
         // We start with empty columns, then we will change first one

test/nbrowser/gristUtils.ts

@@ -852,6 +852,9 @@ export async function waitAppFocus(yesNo: boolean = true): Promise<void> {
   await driver.wait(async () => (await driver.find('.copypaste').hasFocus()) === yesNo, 5000);
 }
 
+export async function waitForLabelInput(): Promise<void> {
+  await driver.wait(async () => (await driver.findWait('.kf_elabel_input', 100).hasFocus()), 300);
+}
 
 /**
  * Waits for all pending comm requests from the client to the doc worker to complete. This taps into
@@ -2026,9 +2029,27 @@ export async function setFont(type: 'bold'|'underline'|'italic'|'strikethrough',
   }
 }
 
+/**
+ * Returns the rgb/hex representation of `color` if it's a name (e.g. red, blue, green, white, black, or transparent),
+ * or `color` unchanged if it's not a name.
+ */
+export function nameToHex(color: string) {
+  switch(color) {
+    case 'red': color = '#FF0000'; break;
+    case 'blue': color = '#0000FF'; break;
+    case 'green': color = '#00FF00'; break;
+    case 'white': color = '#FFFFFF'; break;
+    case 'black': color = '#000000'; break;
+    case 'transparent': color = 'rgba(0, 0, 0, 0)'; break;
+  }
+  return color;
+}
+
 //  Set the value of an `<input type="color">` element to `color` and trigger the `change`
-//  event. Accepts `color` to be of following forms `rgb(120, 10, 3)` or '#780a03'.
+//  event. Accepts `color` to be of following forms `rgb(120, 10, 3)` or '#780a03' or some predefined
+//  values (red, green, blue, white, black, transparent)
 export async function setColor(colorInputEl: WebElement, color: string) {
+  color = nameToHex(color);
   if (color.startsWith('rgb(')) {
     // the `value` of an `<input type='color'>` element must be a rgb color in hexadecimal
     // notation.
@@ -2051,11 +2072,25 @@ export function setFillColor(color: string) {
   return setColor(driver.find('.test-fill-input'), color);
 }
 
+export async function clickAway() {
+  await driver.find(".test-notifier-menu-btn").click();
+  await driver.sendKeys(Key.ESCAPE);
+}
+
 export function openColorPicker() {
   return driver.find('.test-color-select').click();
 }
 
+export async function assertCellTextColor(col: string, row: number, color: string) {
+  await assertTextColor(await getCell(col, row).find('.field_clip'), color);
+}
+
+export async function assertCellFillColor(col: string, row: number, color: string) {
+  await assertFillColor(await getCell(col, row), color);
+}
+
 export async function assertTextColor(cell: WebElement, color: string) {
+  color = nameToHex(color);
   color = color.startsWith('#') ? hexToRgb(color) : color;
   const test = async () => {
     const actual = await cell.getCssValue('color');
@@ -2065,6 +2100,7 @@ export async function assertTextColor(cell: WebElement, color: string) {
 }
 
 export async function assertFillColor(cell: WebElement, color: string) {
+  color = nameToHex(color);
   color = color.startsWith('#') ? hexToRgb(color) : color;
   const test = async () => {
     const actual = await cell.getCssValue('background-color');

test/nbrowser/testUtils.ts

@@ -88,18 +88,7 @@ export function setupTestSuite(options?: TestSuiteOptions) {
   // Also, log out, to avoid logins interacting, unless NO_CLEANUP is requested (useful for
   // debugging tests).
   if (!process.env.NO_CLEANUP) {
-    after(async () => {
-      try {
-        await server.removeLogin();
-      } catch(err) {
-        // If there are any alerts open, close them as it might be blocking other tests.
-        if (err.name && err.name === 'UnexpectedAlertOpenError') {
-          await driver.switchTo().alert().accept();
-          assert.fail("Unexpected alert open");
-        }
-        throw err;
-      }
-    });
+    after(() => server.removeLogin());
   }
 
   // If requested, clear user preferences for all test users after this suite.