chore: upgrade gas-client to version 1.2.1

.clasp.json

@@ -0,0 +1,5 @@
+{
+  "scriptId": "1NEFzHyQtp6F6782v0uZyz3Y7tP24aEzi4Hv0NASYx6I8EY2YTDXGLSjT",
+  "rootDir": "./dist",
+  "parentId": ["1R5v1S3uk17iS53aYtsQ76EDSnANCKocamQ5rfaedheQ"]
+}

.github/workflows/integration-tests-basic.yaml

@@ -9,7 +9,7 @@ jobs:
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
-        os: [macos-13, windows-2022]
+        os: [macos-14, windows-2022]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
         node-version: [20]
     timeout-minutes: 8

.github/workflows/integration-tests-extended.yaml

@@ -9,7 +9,7 @@ jobs:
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
-        os: [macos-13, windows-2022]
+        os: [macos-14, windows-2022]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
         node-version: [20]
     timeout-minutes: 11
@@ -72,6 +72,6 @@ jobs:
           NODE_OPTIONS: '--max_old_space_size=4096'
       - name: Run integration tests
         # use ci-reporter to publish failing diff images to s3 bucket
-        # run: yarn test:integration:extended:ci-reporter
-        run: yarn test:integration:extended
+        run: yarn test:integration:extended:ci-reporter
+        # run: yarn test:integration:extended
         shell: bash

dev/dev-server-wrapper.html

@@ -20,7 +20,7 @@
     <base target="_top" />
     <title>Dev Server</title>
     <!-- Load gas-client as external. Exposed global variable is GASClient.  -->
-    <script src="https://unpkg.com/gas-client@1.2.0/dist/index.js"></script>
+    <script src="https://unpkg.com/gas-client@1.2.1/dist/index.js"></script>
     <style>
       body,
       html {

jest.config.js

@@ -3,4 +3,6 @@ export default {
   globalTeardown: './test/global-teardown.js',
   testEnvironment: './test/puppeteer-environment.js',
   reporters: ['default', '<rootDir>/test/utils/image-reporter.js'],
+  testTimeout: 120000,
+  setupFilesAfterEnv: ['./test/jest.setup.js'],
 };

package.json

@@ -34,14 +34,14 @@
   "author": "Elisha Nuchi",
   "license": "MIT",
   "engines": {
-    "node": ">=10.0.0",
+    "node": ">=20.0.0",
     "npm": ">=6.0.0"
   },
   "dependencies": {
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
     "@mui/material": "^5.11.11",
-    "gas-client": "^1.2.0",
+    "gas-client": "1.2.1",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-bootstrap": "^2.4.0",
@@ -74,13 +74,13 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
     "gas-types-detailed": "^1.1.2",
-    "jest": "^28.1.1",
-    "jest-environment-node": "^28.1.1",
+    "jest": "^29.7.0",
+    "jest-environment-node": "^29.7.0",
     "jest-image-snapshot": "^5.1.0",
     "postcss": "^8.4.38",
     "postcss-preset-env": "^9.5.4",
     "prettier": "^2.7.0",
-    "puppeteer": "^14.3.0",
+    "puppeteer": "19.11.1",
     "puppeteer-extra": "^3.2.3",
     "puppeteer-extra-plugin-stealth": "^2.9.0",
     "rollup": "^4.18.0",

src/client/dialog-demo-bootstrap/index.html

@@ -21,7 +21,7 @@
     ></script>
     <script
       crossorigin
-      src="https://unpkg.com/gas-client@1.2.0/dist/index.js"
+      src="https://unpkg.com/gas-client@1.2.1/dist/index.js"
     ></script>
     <script
       crossorigin

src/client/dialog-demo-mui/index.html

@@ -17,7 +17,7 @@
     ></script>
     <script
       crossorigin
-      src="https://unpkg.com/gas-client@1.2.0/dist/index.js"
+      src="https://unpkg.com/gas-client@1.2.1/dist/index.js"
     ></script>
     <script
       crossorigin

src/client/dialog-demo-tailwindcss/index.html

@@ -17,7 +17,7 @@
     ></script>
     <script
       crossorigin
-      src="https://unpkg.com/gas-client@1.2.0/dist/index.js"
+      src="https://unpkg.com/gas-client@1.2.1/dist/index.js"
     ></script>
     <script
       crossorigin

src/client/dialog-demo/index.html

@@ -17,7 +17,7 @@
     ></script>
     <script
       crossorigin
-      src="https://unpkg.com/gas-client@1.2.0/dist/index.js"
+      src="https://unpkg.com/gas-client@1.2.1/dist/index.js"
     ></script>
     <script
       crossorigin

test/global-setup.js

@@ -17,7 +17,10 @@ const DIR = path.join(os.tmpdir(), 'jest_puppeteer_global_setup');
 
 export default async function globalSetup() {
   puppeteer.use(StealthPlugin());
-  const browser = await puppeteer.launch(jestPuppeteerConfig.launch);
+  const browser = await puppeteer.launch({
+    ...jestPuppeteerConfig.launch,
+    timeout: 120000, // Increase timeout to 2 minutes for CI environments
+  });
   // store the browser instance so we can teardown it later
   // this global is only available in the teardown but not in TestEnvironments
   global.__BROWSER_GLOBAL__ = browser;

test/jest-puppeteer.config.js

@@ -9,6 +9,7 @@ export default {
       '--enable-font-antialiasing',
       '--disable-gpu',
     ],
+    timeout: 60000,
   },
   browserContext: 'default',
 };

test/jest.setup.js

@@ -0,0 +1,2 @@
+// Increase Jest's default timeout
+jest.setTimeout(120000); // 2 minutes

test/puppeteer-environment.js

@@ -10,7 +10,51 @@
 
 const DIR = path.join(os.tmpdir(), 'jest_puppeteer_global_setup');
 
-export default class PuppeteerEnvironment extends NodeEnvironment.default {
+// Debug the NodeEnvironment structure
+console.log('NodeEnvironment import type:', typeof NodeEnvironment);
+console.log('Has default property:', 'default' in NodeEnvironment);
+if ('default' in NodeEnvironment) {
+  console.log('Default property type:', typeof NodeEnvironment.default);
+}
+
+// More robust determination of the correct Environment class
+let NodeEnvironmentClass;
+try {
+  if (typeof NodeEnvironment === 'function') {
+    console.log('Using NodeEnvironment directly as constructor');
+    NodeEnvironmentClass = NodeEnvironment;
+  } else if (
+    NodeEnvironment.default &&
+    typeof NodeEnvironment.default === 'function'
+  ) {
+    console.log('Using NodeEnvironment.default as constructor');
+    NodeEnvironmentClass = NodeEnvironment.default;
+  } else if (NodeEnvironment.__esModule && NodeEnvironment.NodeEnvironment) {
+    // Some ESM patterns expose the class differently
+    console.log('Using NodeEnvironment.NodeEnvironment as constructor');
+    NodeEnvironmentClass = NodeEnvironment.NodeEnvironment;
+  } else {
+    console.log('Falling back to direct import');
+    NodeEnvironmentClass = NodeEnvironment;
+  }
+
+  // Verify we have a valid constructor
+  if (typeof NodeEnvironmentClass !== 'function') {
+    console.error(
+      'Final NodeEnvironmentClass is not a constructor!',
+      typeof NodeEnvironmentClass
+    );
+    // Last resort fallback - use dynamic import to avoid linter warning
+    // eslint-disable-next-line no-new-func
+    const fallbackEnv = Function('return require("jest-environment-node")')();
+    NodeEnvironmentClass = fallbackEnv.default || fallbackEnv;
+  }
+} catch (error) {
+  console.error('Error determining NodeEnvironment class:', error);
+  throw new Error(`Failed to load Jest NodeEnvironment: ${error.message}`);
+}
+
+export default class PuppeteerEnvironment extends NodeEnvironmentClass {
   async setup() {
     await super.setup();
     // get the wsEndpoint

test/utils/image-reporter-standalone.js

@@ -42,6 +42,10 @@ const targetDirectories = [
   './test/__image_snapshots__/__diff_output__/',
 ];
 targetDirectories.forEach((targetDirectory) => {
+  if (!fs.existsSync(targetDirectory)) {
+    return;
+  }
+
   fs.readdirSync(targetDirectory, { withFileTypes: true }).forEach((dirent) => {
     if (!dirent.isFile()) return;
     const path = `images/${dirent.name}`;

test/utils/open-addon.js

@@ -1,30 +1,81 @@
 export const openAddon = async (page) => {
   await page.goto(process.env.SHEET_URL);
 
-  await page.waitForTimeout(5000); // pause for 3 seconds
-  await page.click('a:nth-child(2)'); // click on signin button
+  await page.waitForSelector('a[aria-label="Sign in"]');
+
+  // Create directory for screenshots if it doesn't exist
+  const fs = await import('fs');
+  const path = await import('path');
+  const screenshotDir = 'test/__image_snapshots__/__diff_output__';
+  if (!fs.existsSync(screenshotDir)) {
+    fs.mkdirSync(screenshotDir, { recursive: true });
+  }
+
+  // take screenshot
+  await page.screenshot({
+    path: path.join(
+      screenshotDir,
+      `1-main-spreadsheet-before-signin-${Date.now()}.png`
+    ),
+  });
+  await page.click('a[aria-label="Sign in"]'); // click on signin button
+
+  // take screenshot
+  await page.screenshot({
+    path: path.join(screenshotDir, `2-signin-page-${Date.now()}.png`),
+  });
 
   await page.waitForSelector('input[name="identifier"]', { visible: true });
   await page.type('input[name="identifier"]', process.env.EMAIL); // type email
+
+  // take screenshot after entering email
+  await page.screenshot({
+    path: path.join(screenshotDir, `3-email-entered-${Date.now()}.png`),
+  });
+
   await page.click('#identifierNext'); // click "next" button
 
   await page.waitForSelector('input[name="Passwd"]', { visible: true });
   await page.type('input[name="Passwd"]', process.env.PASSWORD); // type pass
+
+  // take screenshot after entering password
+  await page.screenshot({
+    path: path.join(screenshotDir, `4-password-entered-${Date.now()}.png`),
+  });
+
   await page.waitForTimeout(500);
 
   await page.click('#passwordNext'); // click "next" button
   await page.waitForTimeout(3000);
 
+  // take screenshot after login attempt
+  await page.screenshot({
+    path: path.join(screenshotDir, `5-after-login-attempt-${Date.now()}.png`),
+  });
+
   if (
     await page.evaluate(
       () =>
         document.querySelector('h1#headingText') &&
         document.querySelector('h1#headingText').innerText.includes('erify')
     )
   ) {
+    // take screenshot of verification page
+    await page.screenshot({
+      path: path.join(screenshotDir, `6-verification-needed-${Date.now()}.png`),
+    });
+
     try {
       await page.click('li:nth-child(3)');
       await page.waitForTimeout(6000);
+
+      // take screenshot after selecting verification method
+      await page.screenshot({
+        path: path.join(
+          screenshotDir,
+          `7-verification-method-selected-${Date.now()}.png`
+        ),
+      });
     } catch {
       // eslint-disable-next-line no-console
       console.log('The "choose account recovery method" page isn\'t shown');
@@ -34,9 +85,26 @@ export const openAddon = async (page) => {
       'input[name="knowledgePreregisteredEmailResponse"]',
       process.env.TEST_RECOVERY_EMAIL
     ); // type recovery email
+
+    // take screenshot after entering recovery email
+    await page.screenshot({
+      path: path.join(
+        screenshotDir,
+        `8-recovery-email-entered-${Date.now()}.png`
+      ),
+    });
+
     await page.waitForTimeout(6000);
     await page.click('div[data-primary-action-label] button'); // click "next" button
     await page.waitForTimeout(5000);
+
+    // take screenshot after verification completed
+    await page.screenshot({
+      path: path.join(
+        screenshotDir,
+        `9-verification-completed-${Date.now()}.png`
+      ),
+    });
   }
 
   if (
@@ -48,11 +116,27 @@ export const openAddon = async (page) => {
           .innerText.includes('implify your sign')
     )
   ) {
+    // take screenshot of simplify sign-in page
+    await page.screenshot({
+      path: path.join(
+        screenshotDir,
+        `10-simplify-signin-page-${Date.now()}.png`
+      ),
+    });
+
     try {
       await page.click(
         'div[data-secondary-action-label] > div > div:nth-child(2) button'
       );
       await page.waitForTimeout(6000);
+
+      // take screenshot after dismissing simplify sign-in
+      await page.screenshot({
+        path: path.join(
+          screenshotDir,
+          `11-after-dismissing-simplify-signin-${Date.now()}.png`
+        ),
+      });
     } catch {
       // eslint-disable-next-line no-console
       console.log('The "Simplify your sign-in" page isn\'t shown');
@@ -64,6 +148,14 @@ export const openAddon = async (page) => {
     { visible: true }
   );
 
+  // take screenshot before opening addon menu
+  await page.screenshot({
+    path: path.join(
+      screenshotDir,
+      `12-before-opening-addon-menu-${Date.now()}.png`
+    ),
+  });
+
   // open new addon menubar item
   await page.evaluate(() => {
     const addOnMenuButton = document.querySelector(
@@ -80,6 +172,11 @@ export const openAddon = async (page) => {
     { visible: true }
   );
 
+  // take screenshot with addon menu opened
+  await page.screenshot({
+    path: path.join(screenshotDir, `13-addon-menu-opened-${Date.now()}.png`),
+  });
+
   // open "bootstrap" menu item
   await page.evaluate(() => {
     const bootstrapMenuButton = document.querySelector(
@@ -103,5 +200,18 @@ export const openAddon = async (page) => {
     timeout: 10000,
   });
 
+  // take screenshot after clicking bootstrap menu item
+  await page.screenshot({
+    path: path.join(
+      screenshotDir,
+      `14-bootstrap-dialog-opened-${Date.now()}.png`
+    ),
+  });
+
   await page.waitForTimeout(15000);
+
+  // take final screenshot after waiting period
+  await page.screenshot({
+    path: path.join(screenshotDir, `15-addon-fully-loaded-${Date.now()}.png`),
+  });
 };