Merge pull request #1363 from oasisprotocol/lw/cypress-console-log

ts-web/*: Cypress forward console logs from browser to terminal
oasisprotocol · May 11, 2023 · 1f1c7af · 1f1c7af
2 parents 1c910a7 + 3213c2d
commit 1f1c7af
Show file tree

Hide file tree

Showing 11 changed files with 70 additions and 7 deletions.
diff --git a/.github/workflows/ci-test.yaml b/.github/workflows/ci-test.yaml
@@ -222,7 +222,7 @@ jobs:
 
       - name: Cypress run
         working-directory: client-sdk/ts-web/core
-        run: npx --package cypress -c 'cypress run'
+        run: npm run-script test-e2e-cy
 
       - name: Upload screenshot
         if: failure()
@@ -263,7 +263,7 @@ jobs:
 
       - name: Cypress run
         working-directory: client-sdk/ts-web/ext-utils
-        run: npx --package cypress -c 'cypress run'
+        run: npm run-script test-e2e-cy
 
       - name: Upload screenshot
         if: failure()
@@ -333,7 +333,7 @@ jobs:
 
       - name: Cypress run
         working-directory: client-sdk/ts-web/rt
-        run: npx --package cypress -c 'cypress run'
+        run: npm run-script test-e2e-cy
 
       - name: Upload screenshot
         if: failure()

diff --git a/client-sdk/ts-web/core/cypress.config.ts b/client-sdk/ts-web/core/cypress.config.ts
@@ -1,8 +1,10 @@
 import {defineConfig} from 'cypress';
+import * as outputConsoleLogs from './cypress/outputConsoleLogs';
 
 export default defineConfig({
     video: false,
     e2e: {
         supportFile: false,
+        setupNodeEvents: outputConsoleLogs.setupNodeEvents,
     },
 });
diff --git a/client-sdk/ts-web/core/cypress/e2e/playground.cy.ts b/client-sdk/ts-web/core/cypress/e2e/playground.cy.ts
@@ -1,3 +1,7 @@
+import * as outputConsoleLogs from './../outputConsoleLogs';
+
+outputConsoleLogs.beforeWindowLoadListener();
+
 describe('playground.cy.ts', () => {
     it('should finish', () => {
         cy.visit('http://localhost:8080/');

diff --git a/client-sdk/ts-web/core/cypress/outputConsoleLogs.ts b/client-sdk/ts-web/core/cypress/outputConsoleLogs.ts
@@ -0,0 +1,42 @@
+/** Usage: add to cypress config */
+export const setupNodeEvents: Cypress.Config['setupNodeEvents'] = (on, config) => {
+    on('task', {
+        consoleLog(stringifiedArray) {
+            console.log('console.log', ...JSON.parse(stringifiedArray))
+            return null
+        },
+        consoleWarn(stringifiedArray) {
+            console.warn('console.warn', ...JSON.parse(stringifiedArray))
+            return null
+        },
+        consoleError(stringifiedArray) {
+            console.error('console.error', ...JSON.parse(stringifiedArray))
+            return null
+        },
+    });
+};
+
+/** Usage: call before a test */
+export function beforeWindowLoadListener() {
+    before(() => {
+        Cypress.on('window:before:load', (w) => {
+            cy.stub(w.console, 'log').callsFake((...args) => consoleTask('consoleLog', ...args));
+            cy.stub(w.console, 'warn').callsFake((...args) => consoleTask('consoleWarn', ...args));
+            cy.stub(w.console, 'error').callsFake((...args) => consoleTask('consoleError', ...args));
+        });
+    });
+}
+
+/**
+ * Workaround: `cy.task('consoleLog', stringifiedArray)` throws because cypress command is inside cypress command.
+ */
+function consoleTask(taskName: 'consoleLog' | 'consoleWarn' | 'consoleError', ...args: any[]) {
+    const stringifiedArray = JSON.stringify(args, (key, value) => (typeof value === 'bigint' ? `${value}n` : value), 2);
+
+    Cypress.emit(
+        'backend:request',
+        'task',
+        { task: taskName, arg: stringifiedArray },
+        () => {},
+    );
+}
diff --git a/client-sdk/ts-web/core/package.json b/client-sdk/ts-web/core/package.json
@@ -15,12 +15,13 @@
     ],
     "main": "dist/index.js",
     "scripts": {
+        "prepare": "./compile-proto.sh && tsc",
         "check-playground": "cd playground && tsc -p jsconfig.json",
         "fmt": "prettier --write playground/src src test",
         "lint": "prettier --check playground/src src test",
         "playground": "cd playground && webpack s -c webpack.config.js",
-        "prepare": "./compile-proto.sh && tsc",
-        "test": "jest"
+        "test": "jest",
+        "test-e2e-cy": "cypress run"
     },
     "dependencies": {
         "bech32": "^2.0.0",

diff --git a/client-sdk/ts-web/ext-utils/cypress.config.ts b/client-sdk/ts-web/ext-utils/cypress.config.ts
@@ -1,8 +1,10 @@
 import {defineConfig} from 'cypress';
+import * as outputConsoleLogs from './../core/cypress/outputConsoleLogs';
 
 export default defineConfig({
     video: false,
     e2e: {
         supportFile: false,
+        setupNodeEvents: outputConsoleLogs.setupNodeEvents,
     },
 });
diff --git a/client-sdk/ts-web/ext-utils/cypress/e2e/playground.cy.ts b/client-sdk/ts-web/ext-utils/cypress/e2e/playground.cy.ts
@@ -1,3 +1,7 @@
+import * as outputConsoleLogs from './../../../core/cypress/outputConsoleLogs';
+
+outputConsoleLogs.beforeWindowLoadListener();
+
 describe('playground.cy.ts', () => {
     it('should finish', () => {
         cy.visit('http://localhost:8080/?ext=http://localhost:8081&test_noninteractive=1');

diff --git a/client-sdk/ts-web/ext-utils/package.json b/client-sdk/ts-web/ext-utils/package.json
@@ -13,14 +13,15 @@
     ],
     "main": "dist/index.js",
     "scripts": {
+        "prepare": "tsc",
         "check-sample-page": "cd sample-page && tsc -p jsconfig.json",
         "check-sample-ext": "cd sample-ext && tsc -p jsconfig.json",
         "fmt": "prettier --write sample-ext/src sample-page/src src",
         "lint": "prettier --check sample-ext/src sample-page/src src",
         "sample-page": "cd sample-page && webpack s -c webpack.config.js",
         "sample-ext": "cd sample-ext && webpack -c webpack.config.js",
         "fake-sample-ext": "cd sample-ext && webpack s -c webpack.config.js",
-        "prepare": "tsc"
+        "test-e2e-cy": "cypress run"
     },
     "dependencies": {
         "@oasisprotocol/client": "^0.1.1-alpha.2"

diff --git a/client-sdk/ts-web/rt/cypress.config.ts b/client-sdk/ts-web/rt/cypress.config.ts
@@ -1,8 +1,10 @@
 import {defineConfig} from 'cypress';
+import * as outputConsoleLogs from './../core/cypress/outputConsoleLogs';
 
 export default defineConfig({
     video: false,
     e2e: {
         supportFile: false,
+        setupNodeEvents: outputConsoleLogs.setupNodeEvents,
     },
 });
diff --git a/client-sdk/ts-web/rt/cypress/e2e/playground.cy.ts b/client-sdk/ts-web/rt/cypress/e2e/playground.cy.ts
@@ -1,3 +1,7 @@
+import * as outputConsoleLogs from './../../../core/cypress/outputConsoleLogs';
+
+outputConsoleLogs.beforeWindowLoadListener();
+
 describe('playground.cy.ts', () => {
     it('should finish simple-keyvalue', () => {
         cy.visit('http://localhost:8080/');

diff --git a/client-sdk/ts-web/rt/package.json b/client-sdk/ts-web/rt/package.json
@@ -18,7 +18,8 @@
         "fmt": "prettier --write playground/src src test",
         "lint": "prettier --check playground/src src test",
         "playground": "cd playground && webpack s -c webpack.config.js",
-        "test": "jest"
+        "test": "jest",
+        "test-e2e-cy": "cypress run"
     },
     "dependencies": {
         "@oasisprotocol/client": "^0.1.1-alpha.2",