Update integration tests and package versions (#211)

* Update gas-types-detailed package

* Update LICENSE

* update node versions and macos versions in workflows

* add NODE_OPTIONS env: max_old_space_size=4096

* support new log-in flow

Author: enuchi

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

@@ -9,9 +9,9 @@ jobs:
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
-        os: [macos-10.15, macos-latest, windows-latest]
+        os: [macos-11, macos-latest, windows-latest]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
-        node-version: [12, 14, 16]
+        node-version: [14, 16, 18]
     timeout-minutes: 8
     steps:
       - uses: actions/checkout@v2
@@ -21,9 +21,9 @@ jobs:
           node-version: ${{ matrix.node-version }}
       - name: Install packages [npm ci]
         run: npm ci
-      - name: Allow installing cert in Mac OS Big Sur
+      - name: Allow running mkcert on Mac
         run: sudo security authorizationdb write com.apple.trust-settings.admin allow
-        if: matrix.os == 'macOS-latest'
+        if: runner.os == 'MacOS'
       - name: Install mkcert
         run: brew install mkcert
         if: runner.os == 'MacOS'

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

@@ -8,9 +8,9 @@ jobs:
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
-        os: [macos-10.15, macos-latest, windows-latest]
+        os: [macos-11, macos-latest, windows-latest]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
-        node-version: [12, 14, 16]
+        node-version: [14, 16, 18]
     timeout-minutes: 11
     steps:
       - uses: actions/checkout@v2
@@ -20,9 +20,9 @@ jobs:
           node-version: ${{ matrix.node-version }}
       - name: Install packages [npm ci]
         run: npm ci
-      - name: Allow installing cert in Mac OS Big Sur
+      - name: Allow running mkcert on Mac
         run: sudo security authorizationdb write com.apple.trust-settings.admin allow
-        if: matrix.os == 'macOS-latest'
+        if: runner.os == 'MacOS'
       - name: Install mkcert
         run: brew install mkcert
         if: runner.os == 'MacOS'
@@ -32,7 +32,7 @@ jobs:
       - name: Install https cert [npm setup:https]
         run: npm run setup:https
         if: runner.os == 'MacOS'
-      - run: | 
+      - run: |
           mkdir certs
           .\test\generate-cert.ps1
         shell: pwsh
@@ -67,6 +67,8 @@ jobs:
           AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
       - name: Build and deploy dev setup [npm run deploy:dev]
         run: npm run deploy:dev
+        env:
+          NODE_OPTIONS: '--max_old_space_size=4096'
       - name: Run integration tests
         run: npm run test:integration:extended
         shell: bash

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2020 Elisha Nuchi
+Copyright (c) 2024 Elisha Nuchi
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -3,7 +3,7 @@
  <img width="400" src="https://i.imgur.com/83Y7bWN.png" alt="React & Google Apps Script logos"></a>
 </p>
 <p align="center"><i>
-  Update 2023: Now with support for React v18 and React Fast Refresh
+  With support for React v18 and React Fast Refresh
 </i></p>
 
 <div align="center">

package-lock.json

@@ -89,7 +89,7 @@
     "eslint-plugin-standard": "^5.0.0",
     "gas-client": "^1.1.1",
     "gas-lib": "^2.0.4",
-    "gas-types-detailed": "^1.1.0",
+    "gas-types-detailed": "^1.1.2",
     "gas-webpack-plugin": "^2.2.2",
     "html-webpack-plugin": "^5.5.0",
     "jest": "^28.1.1",

package.json

@@ -0,0 +1,62 @@
+/* eslint-disable */
+
+/**
+ * Reference: https://github.com/americanexpress/jest-image-snapshot/blob/main/examples/image-reporter.js
+ *
+ * To enable this image reporter, add it to your `jest.config.js` "reporters" definition:
+ * "reporters": [ "default", "<rootDir>/image-reporter.js" ]
+ *
+ * Note: Image Reporter may not work with jest's --forceExit flag
+ *
+ * Note: If image reporter doesn't work in pipeline can try running as standalone script
+ * by creating a separate script file and running like this:
+ * "test:integration": "jest test/local-development.test || node test/utils/image-reporter-standalone.js"
+ */
+
+const fs = require('fs');
+const AWS = require('aws-sdk/global');
+const S3 = require('aws-sdk/clients/s3'); // this is needed
+require('dotenv').config();
+
+const UPLOAD_BUCKET = process.env.S3_BUCKET_NAME;
+
+if (
+  !process.env.S3_BUCKET_NAME ||
+  !process.env.AWS_SECRET_ACCESS_KEY ||
+  !process.env.AWS_ACCESS_KEY_ID
+) {
+  console.log('Missing env variables. Skipping upload of image diff files.');
+}
+
+AWS.config.update({
+  accessKeyId: process.env.AWS_ACCESS_KEY_ID,
+  secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY,
+});
+
+const s3 = new AWS.S3({ apiVersion: '2006-03-01' });
+
+const targetDirectories = [
+  './test/__image_snapshots__/',
+  './test/__image_snapshots__/__diff_output__/',
+];
+targetDirectories.forEach((targetDirectory) => {
+  fs.readdirSync(targetDirectory, { withFileTypes: true }).forEach((dirent) => {
+    if (!dirent.isFile()) return;
+    const path = `images/${dirent.name}`;
+    const params = {
+      Body: fs.readFileSync(`${targetDirectory}/${dirent.name}`),
+      Bucket: UPLOAD_BUCKET,
+      Key: path,
+      ContentType: 'image/png',
+    };
+    s3.putObject(params, (err) => {
+      if (err) {
+        console.log(err, err.stack);
+      } else {
+        console.log(
+          `Uploaded file to https://${UPLOAD_BUCKET}.s3.amazonaws.com/${path}`
+        );
+      }
+    });
+  });
+});

test/utils/image-reporter-standalone.js

@@ -20,6 +20,11 @@ require('dotenv').config();
 
 const UPLOAD_BUCKET = process.env.S3_BUCKET_NAME;
 
+AWS.config.update({
+  accessKeyId: process.env.AWS_ACCESS_KEY_ID,
+  secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY,
+});
+
 const s3 = new AWS.S3({ apiVersion: '2006-03-01' });
 
 class ImageReporter {

test/utils/image-reporter.js

@@ -34,19 +34,39 @@ const openAddon = async (page) => {
       process.env.TEST_RECOVERY_EMAIL
     ); // type recovery email
     await page.waitForTimeout(6000);
-    await page.click('button'); // click "next" button
+    await page.click('div[data-primary-action-label] button'); // click "next" button
     await page.waitForTimeout(5000);
   }
 
+  if (
+    await page.evaluate(
+      () =>
+        document.querySelector('h1#headingText') &&
+        document
+          .querySelector('h1#headingText')
+          .innerText.includes('implify your sign')
+    )
+  ) {
+    try {
+      await page.click(
+        'div[data-secondary-action-label] > div > div:nth-child(2) button'
+      );
+      await page.waitForTimeout(6000);
+    } catch {
+      // eslint-disable-next-line no-console
+      console.log('The "Simplify your sign-in" page isn\'t shown');
+    }
+  }
+
   await page.waitForSelector(
-    'div.menu-button.goog-control.goog-inline-block:nth-child(11)',
+    'div.menu-button.goog-control.goog-inline-block:nth-child(10)',
     { visible: true }
   );
 
   // open new addon menubar item
   await page.evaluate(() => {
     const addOnMenuButton = document.querySelector(
-      'div.menu-button.goog-control.goog-inline-block:nth-child(11)'
+      'div.menu-button.goog-control.goog-inline-block:nth-child(10)'
     );
     addOnMenuButton.dispatchEvent(
       new MouseEvent('mousedown', { bubbles: true })