(core) Adding testId to the widget iframe once it receives the ready message

Summary:
Iframe with custom widget is marked with a test class `test-custom-widget-ready` when
it receives the `ready` message from the rendered widget.

Test Plan: Added and updated. Existing test should pass.

Reviewers: georgegevoian

Reviewed By: georgegevoian

Subscribers: georgegevoian

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

test/nbrowser/CustomView.ts

@@ -39,6 +39,38 @@ describe('CustomView', function() {
     }
   });
 
+  // This tests if test id works. Feels counterintuitive to "test the test" but grist-widget repository test suite
+  // depends on this.
+  it('informs about ready called', async () => {
+    // Add a custom inline widget to a new doc.
+    const session = await gu.session().teamSite.login();
+    await session.tempNewDoc(cleanup);
+    await gu.addNewSection('Custom', 'Table1');
+
+    // Create an inline widget that will call ready message.
+    await inFrame(async () => {
+      const customWidget = `
+        <script src="/grist-plugin-api.js"></script>
+        <button onclick="grist.ready()">Ready</button>
+      `;
+      await driver.executeScript("document.write(`" + customWidget + "`);");
+    });
+
+    // We should have a single iframe.
+    assert.equal(await driver.findAll('iframe').then(f => f.length), 1);
+
+    // But without test ready class.
+    assert.isFalse(await driver.find("iframe.test-custom-widget-ready").isPresent());
+
+    // Now invoke ready.
+    await inFrame(async () => {
+      await driver.find('button').click();
+    });
+
+    // And we should have a test ready class.
+    assert.isTrue(await driver.findWait("iframe.test-custom-widget-ready", 100).isDisplayed());
+  });
+
   for (const access of ['none', 'read table', 'full'] as const) {
 
     function withAccess(obj: any, fallback: any) {
@@ -478,3 +510,9 @@ describe('CustomView', function() {
     assert.equal(opinions['A'][0], 'do not zap plz');
   });
 });
+
+async function inFrame(op: () => Promise<void>)  {
+  await driver.switchTo().frame(driver.find("iframe"));
+  await op();
+  await driver.switchTo().defaultContent();
+}

test/nbrowser/CustomWidgetsConfig.ts

@@ -220,14 +220,10 @@ describe('CustomWidgetsConfig', function () {
 
   // Poor man widget rpc. Class that invokes various parts in the tester widget.
   class Widget {
-    constructor(public frameSelector = 'iframe') {}
+    constructor() {}
     // Wait for a frame.
     public async waitForFrame() {
-      await driver.wait(() => driver.find(this.frameSelector).isPresent(), 3000);
-      const iframe = driver.find(this.frameSelector);
-      await driver.switchTo().frame(iframe);
-      await driver.wait(async () => (await driver.find('#ready').getText()) === 'ready', 3000);
-      await driver.switchTo().defaultContent();
+      await driver.findWait(`iframe.test-custom-widget-ready`, 1000);
     }
     public async content() {
       return await this._read('body');
@@ -254,11 +250,11 @@ describe('CustomWidgetsConfig', function () {
     }
     // Wait for frame to close.
     public async waitForClose() {
-      await driver.wait(async () => !(await driver.find(this.frameSelector).isPresent()), 3000);
+      await driver.wait(async () => !(await driver.find('iframe').isPresent()), 3000);
     }
     // Wait for the onOptions event, and return its value.
     public async onOptions() {
-      const iframe = driver.find(this.frameSelector);
+      const iframe = driver.find('iframe');
       await driver.switchTo().frame(iframe);
       // Wait for options to get filled, initially this div is empty,
       // as first message it should get at least null as an options.
@@ -296,7 +292,7 @@ describe('CustomWidgetsConfig', function () {
     // serialized to the #output div.
     public async invokeOnWidget(name: string, input?: any[]) {
       // Switch to frame.
-      const iframe = driver.find(this.frameSelector);
+      const iframe = driver.find('iframe');
       await driver.switchTo().frame(iframe);
       // Clear input box that holds arguments.
       await driver.find('#input').click();
@@ -331,7 +327,7 @@ describe('CustomWidgetsConfig', function () {
     }
 
     private async _read(selector: string) {
-      const iframe = driver.find(this.frameSelector);
+      const iframe = driver.find('iframe');
       await driver.switchTo().frame(iframe);
       const text = await driver.find(selector).getText();
       await driver.switchTo().defaultContent();