(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

app/client/components/Importer.ts

@@ -7,6 +7,7 @@
 import {GristDoc} from 'app/client/components/GristDoc';
 import {buildParseOptionsForm, ParseOptionValues} from 'app/client/components/ParseOptions';
 import {PluginScreen} from 'app/client/components/PluginScreen';
+import {makeTestId} from 'app/client/lib/domUtils';
 import {FocusLayer} from 'app/client/lib/FocusLayer';
 import {ImportSourceElement} from 'app/client/lib/ImportSourceElement';
 import {makeT} from 'app/client/lib/localization';
@@ -46,7 +47,6 @@ import {byteString, not} from 'app/common/gutil';
 import {FetchUrlOptions, UploadResult} from 'app/common/uploads';
 import {ParseOptions, ParseOptionSchema} from 'app/plugin/FileParserAPI';
 import {
-  BindableValue,
   Computed,
   Disposable,
   dom,
@@ -65,7 +65,7 @@ import debounce = require('lodash/debounce');
 
 const t = makeT('Importer');
 // Custom testId that can be appended conditionally.
-const testId = (id: string, obs?: BindableValue<boolean>) => dom.cls('test-importer-' + id, obs ?? true);
+const testId = makeTestId('test-importer-');
 
 
 // We expect a function for creating the preview GridView, to avoid the need to require the

app/client/components/WidgetFrame.ts

@@ -2,6 +2,7 @@ import BaseView from 'app/client/components/BaseView';
 import {GristDoc} from 'app/client/components/GristDoc';
 import {hooks} from 'app/client/Hooks';
 import {get as getBrowserGlobals} from 'app/client/lib/browserGlobals';
+import {makeTestId} from 'app/client/lib/domUtils';
 import {ColumnRec, ViewSectionRec} from 'app/client/models/DocModel';
 import {AccessLevel, isSatisfied} from 'app/common/CustomWidget';
 import {DisposableWithEvents} from 'app/common/DisposableWithEvents';
@@ -16,6 +17,9 @@ import debounce = require('lodash/debounce');
 import isEqual = require('lodash/isEqual');
 import flatMap = require('lodash/flatMap');
 
+const testId = makeTestId('test-custom-widget-');
+
+
 /**
  * This file contains a WidgetFrame and all its components.
  *
@@ -62,6 +66,8 @@ export class WidgetFrame extends DisposableWithEvents {
   private _rpc: Rpc;
   // Created iframe element, used to receive and post messages via Rpc
   private _iframe: HTMLIFrameElement | null;
+  // If widget called ready() method, this will be set to true.
+  private _readyCalled = Observable.create(this, false);
 
   constructor(private _options: WidgetFrameOptions) {
     super();
@@ -155,10 +161,14 @@ export class WidgetFrame extends DisposableWithEvents {
     const fullUrl = urlWithAccess(this._options.url);
     const onElem = this._options.onElem ?? ((el: HTMLIFrameElement) => el);
     return onElem(
-      (this._iframe = dom('iframe', dom.cls('clipboard_focus'), dom.cls('custom_view'), {
-        src: fullUrl,
-        ...hooks.iframeAttributes,
-      }))
+      (this._iframe = dom('iframe',
+        dom.cls('clipboard_focus'),
+        dom.cls('custom_view'), {
+          src: fullUrl,
+          ...hooks.iframeAttributes,
+        },
+        testId('ready', this._readyCalled),
+      ))
     );
   }
 
@@ -177,6 +187,7 @@ export class WidgetFrame extends DisposableWithEvents {
       }
       if (event.data.mtype === MsgType.Ready) {
         this.trigger('ready', this);
+        this._readyCalled.set(true);
       }
       this._rpc.receiveMessage(event.data);
     }
@@ -513,7 +524,7 @@ export class RecordNotifier extends BaseEventSource {
 }
 
 /**
- * Notifies about options position change. Exposed in the API as a onOptions handler.
+ * Notifies about options change. Exposed in the API as a onOptions handler.
  */
 export class ConfigNotifier extends BaseEventSource {
   private _currentConfig: Computed<any | null>;

app/client/lib/domUtils.ts

@@ -0,0 +1,9 @@
+import {BindableValue, dom} from 'grainjs';
+
+/**
+ * Version of makeTestId that can be appended conditionally.
+ * TODO: update grainjs typings, as this is already supported there.
+ */
+export function makeTestId(prefix: string) {
+  return (id: string, obs?: BindableValue<boolean>) => dom.cls(prefix + id, obs ?? true);
+}