swiping through images in viewer widget

package.json

@@ -16,12 +16,15 @@
   },
   "devDependencies": {
     "@types/chai": "^4.3.5",
+    "@types/lodash.escaperegexp": "^4.1.9",
     "@types/mocha": "^10.0.1",
     "@types/node": "18.11.9",
     "@types/node-fetch": "^2.6.4",
     "@types/selenium-webdriver": "^4.1.15",
     "commander": "^11.1.0",
     "live-server": "^1.2.1",
+    "lodash": "^4.17.21",
+    "lodash.escaperegexp": "^4.1.2",
     "mocha": "^10.2.0",
     "mocha-webdriver": "0.3.1",
     "node-fetch": "^2",

test/getGrist.ts

@@ -7,7 +7,7 @@ import fetch from 'node-fetch';
 import {GristWebDriverUtils} from 'test/gristWebDriverUtils';
 
 
-type UserAction = Array<string | number | object | boolean | null | undefined>;
+
 
 /**
  * Set up mocha hooks for starting and stopping Grist. Return
@@ -198,26 +198,12 @@ export class GristUtils extends GristWebDriverUtils {
     await this.waitForServer();
   }
 
-  public async sendActionsAndWaitForServer(actions: UserAction[], optTimeout: number = 2000) {
-    const result = await driver.executeAsyncScript(async (actions: any, done: Function) => {
-      try {
-        await (window as any).gristDocPageModel.gristDoc.get().docModel.docData.sendActions(actions);
-        done(null);
-      } catch (err) {
-        done(String(err?.message || err));
-      }
-    }, actions);
-    if (result) {
-      throw new Error(result as string);
-    }
-    await this.waitForServer(optTimeout);
-  }
+
 
   public async clickWidgetPane() {
     const elem = this.driver.find('.test-config-widget-select .test-select-open');
     if (await elem.isPresent()) {
       await elem.click();
-      // if not present, may just be already selected.
     }
   }
 
@@ -226,6 +212,20 @@ export class GristUtils extends GristWebDriverUtils {
     await this.waitForServer();
   }
 
+  public async removeWidget(name: string|RegExp) {
+    await this.focusOnWidget(name);
+    await this.sendCommand('deleteSection');
+    await this.waitForServer();
+  }
+
+  public async addCustomSection(name: string, type: string, dataSource: string|RegExp= /Table1/) {
+    await this.toggleSidePanel('right', 'open');
+    await this.addNewSection(/Custom/, dataSource);
+    await this.clickWidgetPane();
+    await this.selectCustomWidget(type);
+    await this.waitForServer();
+  }
+
   public async setCustomWidgetAccess(option: "none" | "read table" | "full") {
     const text = {
       "none": "No document access",
@@ -275,6 +275,10 @@ export class GristUtils extends GristWebDriverUtils {
     return this.inCustomWidget(() => this.driver.find(selector).getText());
   }
 
+  public async getCustomWidgetElementParameter(selector: string, parameter: string): Promise<string> {
+    return this.inCustomWidget(() => this.driver.find(selector).getAttribute(parameter));
+  }
+
   public async executeScriptInCustomWidget<T>(script: Function, ...args: any[]): Promise<T> {
     return this.inCustomWidget(() => {
       return driver.executeScript(script, ...args);

test/gristWebDriverUtils.ts

@@ -8,9 +8,11 @@
  * easily.
  */
 
-import { WebDriver, WebElement } from 'mocha-webdriver';
+import {Key, WebDriver, WebElement, WebElementPromise} from 'mocha-webdriver';
+import escapeRegExp =  require('lodash/escapeRegExp');
 
 type SectionTypes = 'Table'|'Card'|'Card List'|'Chart'|'Custom';
+type UserAction = Array<string | number | object | boolean | null | undefined>;
 
 export class GristWebDriverUtils {
   public constructor(public driver: WebDriver) {
@@ -37,6 +39,36 @@ export class GristWebDriverUtils {
     ));
   }
 
+  public async sendActionsAndWaitForServer(actions: UserAction[], optTimeout: number = 2000) {
+    const result = await this.driver.executeAsyncScript(async (actions: any, done: Function) => {
+      try {
+        await (window as any).gristDocPageModel.gristDoc.get().docModel.docData.sendActions(actions);
+        done(null);
+      } catch (err) {
+        done(String(err?.message || err));
+      }
+    }, actions);
+    if (result) {
+      throw new Error(result as string);
+    }
+    await this.waitForServer(optTimeout);
+  }
+
+  /**
+ * Runs a Grist command in the browser window.
+ */
+public async sendCommand(name: string, argument: any = null) {
+  await this.driver.executeAsyncScript((name: any, argument: any, done: any) => {
+    const result = (window as any).gristApp.allCommands[name].run(argument);
+    if (result?.finally) {
+      result.finally(done);
+    } else {
+      done();
+    }
+  }, name, argument);
+  await this.waitForServer();
+}
+
 
   public async login(){
     //just click log in to get example account.
@@ -287,7 +319,7 @@ export class GristWebDriverUtils {
    */
   public async undo(optCount: number = 1, optTimeout?: number) {
     for (let i = 0; i < optCount; ++i) {
-      await this.driver.find('.test-undo').doClick();
+        await this.driver.find('.test-undo').doClick();
     }
     await this.waitForServer(optTimeout);
   }
@@ -306,6 +338,103 @@ export class GristWebDriverUtils {
       await this.driver.manage().window().setRect(oldDimensions);
     });
   }
+
+  public async fillCell(columnName: string, row: number, value: string) {
+    const cell =  await this.getCell({col: columnName, rowNum: row});
+    await cell.click();
+    await this.driver.sendKeys(value)
+    await this.driver.sendKeys(Key.ENTER);
+  }
+
+  public async addColumn(table:string, type: string, name: string) {
+    // focus on table
+    await this.focusOnWidget(table);
+    // add new column using a shortcut
+    await this.driver.actions().keyDown(Key.ALT).sendKeys('=').keyUp(Key.ALT).perform();
+    // wait for rename panel to show up 
+    await this.driver.findWait('.test-column-title-popup', 1000);
+    // rename and accept
+    await this.driver.sendKeys(name);
+    await this.driver.sendKeys(Key.ENTER);
+    await this.waitForServer();
+  }
+
+  public async focusOnWidget(widgetName: string|RegExp) {
+      await this.driver.findContentWait('.test-widget-title-text', widgetName, 5000).click();
+      await this.driver.findWait(".test-widget-title-cancel", 1000).click();
+      await this.waitForServer();
+  }
+
+
+  /**
+   * Returns a visible GridView cell. Options may be given as arguments directly, or as an object.
+   * - col: column name, or 0-based column index
+   * - rowNum: 1-based row numbers, as visible in the row headers on the left of the grid.
+   * - section: optional name of the section to use; will use active section if omitted.
+   */
+  getCell(col: number|string, rowNum: number, section?: string): WebElementPromise;
+  getCell(options: ICellSelect): WebElementPromise;
+  getCell(colOrOptions: number|string|ICellSelect, rowNum?: number, section?: string): WebElementPromise {
+    const mapper = async (el: WebElement) => el;
+    const options: IColSelect<WebElement> = (typeof colOrOptions === 'object' ?
+      {col: colOrOptions.col, rowNums: [colOrOptions.rowNum], section: colOrOptions.section, mapper} :
+      {col: colOrOptions, rowNums: [rowNum!], section, mapper});
+    return new WebElementPromise(this.driver, this.getVisibleGridCells(options).then((elems) => elems[0]));
+  }
+
+  /**
+   * Returns visible cells of the GridView from a single column and one or more rows. Options may be
+   * given as arguments directly, or as an object.
+   * - col: column name, or 0-based column index
+   * - rowNums: array of 1-based row numbers, as visible in the row headers on the left of the grid.
+   * - section: optional name of the section to use; will use active section if omitted.
+   *
+   * If given by an object, then an array of columns is also supported. In this case, the return
+   * value is still a single array, listing all values from the first row, then the second, etc.
+   *
+   * Returns cell text by default. Mapper may be `identity` to return the cell objects.
+   */
+  async getVisibleGridCells(col: number|string, rows: number[], section?: string): Promise<string[]>;
+  async getVisibleGridCells<T = string>(options: IColSelect<T>|IColsSelect<T>): Promise<T[]>;
+  async getVisibleGridCells<T>(
+    colOrOptions: number|string|IColSelect<T>|IColsSelect<T>, _rowNums?: number[], _section?: string
+  ): Promise<T[]> {
+
+    if (typeof colOrOptions === 'object' && 'cols' in colOrOptions) {
+      const {rowNums, section, mapper} = colOrOptions;    // tslint:disable-line:no-shadowed-variable
+      const columns = await Promise.all(colOrOptions.cols.map((oneCol) =>
+        this.getVisibleGridCells({col: oneCol, rowNums, section, mapper})));
+      // This zips column-wise data into a flat row-wise array of values.
+      return ([] as T[]).concat(...rowNums.map((r, i) => columns.map((c) => c[i])));
+    }
+
+    const {col, rowNums, section, mapper = el => el.getText()}: IColSelect<any> = (
+      typeof colOrOptions === 'object' ? colOrOptions :
+        { col: colOrOptions, rowNums: _rowNums!, section: _section}
+    );
+
+    if (rowNums.includes(0)) {
+      // Row-numbers should be what the users sees: 0 is a mistake, so fail with a helpful message.
+      throw new Error('rowNum must not be 0');
+    }
+
+    const sectionElem = section ? await this.getSection(section) : await this.driver.findWait('.active_section', 4000);
+    const colIndex = (typeof col === 'number' ? col :
+      await sectionElem.findContent('.column_name', exactMatch(col)).index());
+
+    const visibleRowNums: number[] = await sectionElem.findAll('.gridview_data_row_num',
+      async (el) => parseInt(await el.getText(), 10));
+
+    const selector = `.gridview_data_scroll .record:not(.column_names) .field:nth-child(${colIndex + 1})`;
+    const fields = mapper ? await sectionElem.findAll(selector, mapper) : await sectionElem.findAll(selector);
+    return rowNums.map((n) => fields[visibleRowNums.indexOf(n)]);
+  }
+
+  getSection(sectionOrTitle: string|WebElement): WebElement|WebElementPromise {
+    if (typeof sectionOrTitle !== 'string') { return sectionOrTitle; }
+    return this.driver.findContent(`.test-viewsection-title`, new RegExp("^" + escapeRegExp(sectionOrTitle) + "$", 'i'))
+      .findClosest('.viewsection_content');
+  }
 }
 
 class ProfileSettingsPage {
@@ -339,4 +468,30 @@ export interface PageWidgetPickerOptions {
   dontAdd?: boolean;
   /** If true, dismiss any tooltips that are shown. */
   dismissTips?: boolean;
-}
+}
+
+export interface IColsSelect<T = WebElement> {
+  cols: Array<number|string>;
+  rowNums: number[];
+  section?: string|WebElement;
+  mapper?: (e: WebElement) => Promise<T>;
+}
+
+export interface IColSelect<T = WebElement> {
+  col: number|string;
+  rowNums: number[];
+  section?: string|WebElement;
+  mapper?: (e: WebElement) => Promise<T>;
+}
+
+export interface ICellSelect {
+  col: number|string;
+  rowNum: number;
+  section?: string|WebElement;
+}
+
+export function exactMatch(value: string, flags?: string): RegExp {
+  return new RegExp(`^${escapeRegExp(value)}$`, flags);
+}
+
+

test/init-mocha-webdriver.ts

@@ -25,7 +25,7 @@ if (process.env.MOCHA_WEBDRIVER_NO_CONTROL_BANNER === undefined) {
 exports.mochaHooks = getMochaHooks();
 
 let server: GristTestServer;
-exports.mochaGlobalSetup = async function() {
+exports.mochaGlobalSetup = async function() {  
   server = new GristTestServer();
   await server.start();
 };