Set Graphql Syntax Highlighter as an extension dependency (#8739)

* fix integration tests

* set graphql syntax highlighter as an extension dependency

---------

Co-authored-by: joehan <[email protected]>

Author: hlshen

firebase-vscode/CHANGELOG.md

@@ -1,5 +1,7 @@
 ## NEXT
 
+- [Changed] Graphql Syntax Highlighter is now an extension dependency
+
 ## 1.4.1
 
 - Update internal `firebase-tools` dependency to 14.6.0

firebase-vscode/package.json

@@ -11,7 +11,8 @@
   "repository": "https://github.com/firebase/firebase-tools",
   "sideEffects": false,
   "extensionDependencies": [
-    "google.geminicodeassist"
+    "google.geminicodeassist",
+    "graphql.vscode-graphql-syntax"
   ],
   "categories": [
     "Other"
@@ -216,7 +217,8 @@
     "test-compile": "npm run copyfiles && webpack --config src/test/webpack.test.js",
     "lint": "eslint src --ext ts",
     "test": "npm run test:unit && npm run test:e2e",
-    "pretest:e2e": "curl -fsSL https://code-server.dev/install.sh | sh -s -- --edge && code-server --install-extension Google.geminicodeassist --extensions-dir ./prebuilt-extensions/",
+    "install:extensions": "code-server --install-extension Google.geminicodeassist --extensions-dir ./prebuilt-extensions/ && code-server --install-extension graphql.vscode-graphql-syntax --extensions-dir ./prebuilt-extensions/",
+    "pretest:e2e": "curl -fsSL https://code-server.dev/install.sh | sh -s -- --edge && npm run install:extensions",
     "pretest:unit": "npm run test-compile && tsc -p src/test/tsconfig.test.json",
     "test:unit": "node ./dist/test/firebase-vscode/src/test/runTest.js",
     "test:e2e": "npm run test:e2e:empty && npm run test:e2e:fishfood",

firebase-vscode/src/data-connect/graphql-syntax-highlighter.ts

@@ -21,15 +21,12 @@ import { AuthService } from "./auth/service";
 import { AnalyticsLogger, IDX_METRIC_NOTICE } from "./analytics";
 import { env } from "./core/env";
 
-import { suggestGraphqlSyntaxExtension } from "./data-connect/graphql-syntax-highlighter";
 import { setIsVSCodeExtension } from "../../src/vsCodeUtils";
 
 // This method is called when your extension is activated
 export async function activate(context: vscode.ExtensionContext) {
   const analyticsLogger = new AnalyticsLogger(context);
 
-  // Suggest installing the GraphQL syntax highlighter extension
-  await suggestGraphqlSyntaxExtension();
 
   await setupFirebasePath(analyticsLogger);
   const settings = getSettings();

firebase-vscode/src/extension.ts

@@ -41,14 +41,11 @@ export const config: WebdriverIO.Config = {
 
   logLevel: "debug",
 
-  beforeTest: async function () {
-    const workbench = await browser.getWorkbench();
-    const notifications = new Notifications(workbench);
-    await notifications.installRecommendedExtension({
-      extensionId: "graphql.vscode-graphql-syntax",
-      message: "It is recommended to install GraphQL: Syntax Highlighter",
+  beforeTest: async function () {    
+    await browser.pause(3000); // give some time for extension dependencies to load their README page
+    await browser.executeWorkbench((vscode) => {
+      vscode.commands.executeCommand("workbench.action.closeAllEditors"); // close GCA home page
     });
-    await browser.pause(3000); // temporary fix, since installing the GCA extension takes over the main page
   },
 
   afterTest: async function (test) {

firebase-vscode/src/test/default_wdio.conf.ts

@@ -31,18 +31,23 @@ firebaseSuite("Emulator", async function () {
       expect(current).toContain("dataconnect :9399");
 
       // Test 1: clear data button
+      console.log("Running test: clear data button");
       await sidebar.clearEmulatorData();
+      
       const text = await terminal.getTerminalText();
       expect(
         text.includes("Clearing data from Data Connect data sources"),
       ).toBeTruthy();
 
       // Test 2: export data button
+      console.log("Running test: export button");
+
       await sidebar.exportEmulatorData();
       const exportNotification = await notifications.getExportNotification();
       expect(exportNotification).toExist();
 
       // Test 3: edit the schema to cause a migration error
+      console.log("Running test: migration error");
       const editor = new EditorView(workbench);
       await editor.openFile(schemaPath);
 

firebase-vscode/src/test/integration/fishfood/emulator.ts

@@ -9,6 +9,7 @@ export class ExecutionPanel {
   readonly history: HistoryView;
 
   async open(): Promise<void> {
+    await browser.keys("F1");
     await this.workbench.executeCommand(
       "data-connect-execution-configuration.focus",
     );

firebase-vscode/src/test/utils/page_objects/execution.ts

@@ -6,6 +6,11 @@ export class TerminalView {
   private readonly bottomBar = this.workbench.getBottomBar();
   async getTerminalText() {
     const tv = await this.bottomBar.openTerminalView();
-    return tv.getText();
+    /** 
+     * SEE: https://github.com/webdriverio-community/wdio-vscode-service/blob/e4ef4d5a1da194e9a6195fad881733c3aa6720d8/src/pageobjects/workbench/Workbench.ts#L183
+     * The code recognizes our webview, and chooses to send `F1` as an input instead of as a keystroke.
+     */
+    await browser.keys("F1");
+    return await tv.getText();
   }
 }