Webpack 5 support with updated packages (#131)

- Update to Webpack 5
- Use @effortlessmotion dynamic html and inline source plugins
- Remove .clasp.json and use SAMPLE file
- Consistent prettier formatting throughout
- Update packages to latest versions

Co-authored-by: Kevin Malakoff <kmalakoff@gmail.com>

test/local-development.test.js

@@ -25,10 +25,13 @@ const srcTestFile = path.join(
   '../src/client/dialog-demo-bootstrap/components/SheetEditor.jsx'
 );
 
-const webpackDevServerReady = async process => {
-  return new Promise(resolve => {
-    process.stdout.on('data', data => {
-      if (data.includes('Compiled successfully.')) resolve();
+const webpackDevServerReady = async (process) => {
+  console.log('Waiting for Webpack Dev Server to finish loading...');
+  return new Promise((resolve) => {
+    process.stdout.on('data', (data) => {
+      if (data.includes('DEVELOPMENT: CLIENT - Dialog Demo Bootstrap')) {
+        resolve();
+      }
     });
   });
 };

test/puppeteer-environment.js

@@ -6,11 +6,15 @@ const { readFile } = require('fs').promises;
 const os = require('os');
 const path = require('path');
 const puppeteer = require('puppeteer');
-const NodeEnvironment = require('jest-environment-node');
+const NodeEnvironment = require('jest-environment-node').default;
 
 const DIR = path.join(os.tmpdir(), 'jest_puppeteer_global_setup');
 
 class PuppeteerEnvironment extends NodeEnvironment {
+  constructor(config) {
+    super(config);
+  }
+
   async setup() {
     await super.setup();
     // get the wsEndpoint

test/utils/image-reporter.js

@@ -2,11 +2,15 @@
 
 /**
  * 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" ]
- * 
- * Image Reporter may not work with jest's --forceExit flag
+ *
+ * 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');
@@ -44,9 +48,9 @@ class ImageReporter {
         './test/__image_snapshots__/',
         './test/__image_snapshots__/__diff_output__/',
       ];
-      targetDirectories.forEach(targetDirectory => {
+      targetDirectories.forEach((targetDirectory) => {
         fs.readdirSync(targetDirectory, { withFileTypes: true }).forEach(
-          dirent => {
+          (dirent) => {
             if (!dirent.isFile()) return;
             const path = `images/${dirent.name}`;
             const params = {
@@ -55,7 +59,7 @@ class ImageReporter {
               Key: path,
               ContentType: 'image/png',
             };
-            s3.putObject(params, err => {
+            s3.putObject(params, (err) => {
               if (err) {
                 console.log(err, err.stack);
               } else {

test/utils/open-addon.js

@@ -1,4 +1,4 @@
-const openAddon = async page => {
+const openAddon = async (page) => {
   await page.goto(process.env.SHEET_URL);
 
   await page.click('a:nth-child(2)'); // click on signin button
@@ -22,7 +22,7 @@ const openAddon = async page => {
     )
   ) {
     try {
-      await page.click('div[data-accountrecovery]');
+      await page.click('li:nth-child(3)');
       await page.waitForTimeout(6000);
     } catch {
       // eslint-disable-next-line no-console