[8.18] [Vega] Fix update vega spec in functional tests (#216620)

test/functional/apps/visualize/group6/_vega_chart.ts

@@ -96,7 +96,11 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
         });
 
         it('should render different data in response to filter change', async function () {
-          await vegaChart.typeInSpec('"config": { "kibana": {"renderer": "svg"} },');
+          const { spec, isValid } = await vegaChart.getSpecAsJSON();
+          expect(isValid).to.be(true);
+          // add SVG renderer to read the Y axis labels
+          const updatedSpec = { ...spec, config: { kibana: { renderer: 'svg' } } };
+          await vegaChart.fillSpec(JSON.stringify(updatedSpec, null, 2));
           await visEditor.clickGo();
           await visChart.waitForVisualizationRenderingStabilized();
           const fullDataLabels = await vegaChart.getYAxisLabels();

test/functional/page_objects/vega_chart_page.ts

@@ -8,6 +8,7 @@
  */
 
 import expect from '@kbn/expect';
+import hjson from 'hjson';
 import { FtrService } from '../ftr_provider_context';
 
 const compareSpecs = (first: string, second: string) => {
@@ -18,7 +19,6 @@ const compareSpecs = (first: string, second: string) => {
 export class VegaChartPageObject extends FtrService {
   private readonly find = this.ctx.getService('find');
   private readonly testSubjects = this.ctx.getService('testSubjects');
-  private readonly browser = this.ctx.getService('browser');
   private readonly retry = this.ctx.getService('retry');
   private readonly monacoEditor = this.ctx.getService('monacoEditor');
 
@@ -51,14 +51,17 @@ export class VegaChartPageObject extends FtrService {
     });
   }
 
-  public async typeInSpec(text: string) {
-    const editor = await this.testSubjects.find('vega-editor');
-    const textarea = await editor.findByCssSelector('textarea');
-
-    await textarea.focus();
-    await this.browser.pressKeys(this.browser.keys.RIGHT);
-    await this.browser.pressKeys(this.browser.keys.RIGHT);
-    await textarea.type(text);
+  public async getSpecAsJSON() {
+    const text = await this.monacoEditor.getCodeEditorValue();
+    try {
+      const spec = hjson.parse(text, { legacyRoot: false, keepWsc: true });
+      return {
+        spec,
+        isValid: true,
+      };
+    } catch (err) {
+      return { spec: text, isValid: false };
+    }
   }
 
   public async cleanSpec() {

x-pack/test_serverless/functional/test_suites/common/visualizations/group1/vega_chart.ts

@@ -86,7 +86,11 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
         });
 
         it('should render different data in response to filter change', async function () {
-          await PageObjects.vegaChart.typeInSpec('"config": { "kibana": {"renderer": "svg"} },');
+          const { spec, isValid } = await PageObjects.vegaChart.getSpecAsJSON();
+          expect(isValid).to.be(true);
+          // add SVG renderer to read the Y axis labels
+          const updatedSpec = { ...spec, config: { kibana: { renderer: 'svg' } } };
+          await PageObjects.vegaChart.fillSpec(JSON.stringify(updatedSpec, null, 2));
           await PageObjects.visEditor.clickGo();
           await PageObjects.visChart.waitForVisualizationRenderingStabilized();
           const fullDataLabels = await PageObjects.vegaChart.getYAxisLabels();