Angular 14, Cypress 10, Google Sheets block, share metadata with flow…

…, state reactive mapping block, documentation

Merges pull request #331 from kendraio/develop

.devcontainer/Dockerfile

@@ -0,0 +1,26 @@
+# Establish a development environment for Kendraio
+# 
+# This builds on top of microsoft's codespace container for typescript
+
+# [Choice] Node.js version (use -bullseye variants on local arm64/Apple Silicon): 18, 16, 14, 18-bullseye, 16-bullseye, 14-bullseye, 18-buster, 16-buster, 14-buster
+ARG VARIANT=16-bullseye
+FROM mcr.microsoft.com/vscode/devcontainers/typescript-node:0-${VARIANT}
+
+
+# Install additional packages 
+
+# Karma and Cypress both require electron. 
+RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
+     && apt-get -y install --no-install-recommends libgtk2.0-0 \
+        libgtk-3-0 \
+        libgbm-dev \
+        libnotify-dev \
+        libgconf-2-4 \
+        libnss3 \
+        libxss1 \
+        libasound2 \
+        libxtst6 xauth xvfb \
+        openssh-server
+
+# Install more global node packages
+RUN su node -c "npm install -g @angular/cli --legacy-peer-deps"

.devcontainer/devcontainer.json

@@ -1,7 +1,34 @@
+// For format details, see https://aka.ms/devcontainer.json. For config options, see the README at:
+// https://github.com/microsoft/vscode-dev-containers/tree/v0.241.1/containers/typescript-node
 {
-    "name":"kendraio-app",
-    "forwardPorts": [4200],
+	"name": "Node.js & TypeScript",
+	"build": {
+		"dockerfile": "Dockerfile",
+		// Update 'VARIANT' to pick a Node version: 18, 16, 14.
+		// Append -bullseye or -buster to pin to an OS version.
+		// Use -bullseye variants on local on arm64/Apple Silicon.
+		"args": { 
+			"VARIANT": "16-bullseye"
+		}
+	},
 
-    "image": "mcr.microsoft.com/vscode/devcontainers/typescript-node:0-16"
+	// Configure tool-specific properties.
+	"customizations": {
+		// Configure properties specific to VS Code.
+		"vscode": {
+			// Add the IDs of extensions you want installed when the container is created.
+			"extensions": [
+				"dbaeumer.vscode-eslint"
+			]
+		}
+	},
 
-}
+	// Use 'forwardPorts' to make a list of ports inside the container available locally.
+	"forwardPorts": [4200],
+
+	// Use 'postCreateCommand' to run commands after the container is created.
+	"postCreateCommand": "npm install --legacy-peer-deps",
+
+	// Comment out to connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
+	"remoteUser": "node"
+}

.github/actions/tests/entrypoint.sh

@@ -14,7 +14,7 @@ FAILURE_COUNT=0
 echo "::group::Karma unit tests"
 echo "Starting Karma unit tests"
 echo '::echo::on'
-xvfb-run --auto-servernum npx ng test -- --watch=false
+xvfb-run --auto-servernum npx ng test --watch=false
 if [ $? -ne 0 ]; then
   echo "::error::Karma unit tests failed"
   FAILURE_COUNT=$((FAILURE_COUNT+1))

README.md

@@ -53,13 +53,14 @@ The Devcontainer.json file
 A devcontainer.json file in your project tells Visual Studio Code (and other services and tools that support the format) how to access (or create) a development container with a well-defined tool and runtime stack. This file is used to automatically configure Codespaces, and it will also allow for local development using containers. 
 
 
-
 Setting up a local development environment
 ------------------------------------------
 
-You will need to install node, npm, and the Angular CLI.
-Clone the repo.
-Run `npm install`
+If you are not running inside a container, you will need to install node, npm, and the Angular CLI.
+
+* Clone the repo.
+* Run `npm install`
+
 You can start the development server using `npm run serve:dev` or use `npm run e2e:serve_and_retest_on_change`, which will run the dev server and tests upon changes.
 
 
@@ -72,10 +73,21 @@ Running End-to-end tests with the development environment
 
 `npm run e2e:autorun` is good for automatically running unit and E2E tests ONCE, using an already running server.
 
-`npm run e2e:serve_and_test` will start the dev server, and run unit and E2E headless tests once automatically and stop. It might even work in CI, producing a HTML report file and JSON file at `cypress/results/mochawesome.json` on first run.
+`npm run e2e:serve_and_test` will start the dev server, and run unit and E2E headless tests once automatically and stop, producing a HTML report file and JSON file at `cypress/results/mochawesome.json` on first run.
 
 The existing `npx ng e2e` Angular command works too, but requires clicking on the set of tests that need running. It builds and runs the server then runs E2E tests once.
 
+Running tests in a container
+============================
+The predefined npm test commands have all been configured to run in a container, but if you are using alternative testing commands, you may find that testing fails due to the lack of a display. To get around this, use **xvfb-maybe**, which will set up a virtual display if one is needed. 
+
+To use xvfb-maybe, prefix any commandline with `npx xvfb-maybe`
+eg: 
+* `npx xvfb-maybe ng test`
+
+
+
+
 
 Adding a "Block" (i.e. Task for the Flow editor)
 --------------------------------------------------

angular.json

@@ -221,8 +221,10 @@
     }
 
   },
-  "defaultProject": "kendraio-app",
   "cli": {
-    "defaultCollection": "@ngrx/schematics"
+    "analytics": false,
+    "schematicCollections": [
+      "@ngrx/schematics"
+    ]
   }
 }

cypress.config.ts

@@ -0,0 +1,30 @@
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+  videosFolder: 'cypress/videos',
+  video: false,
+  screenshotsFolder: 'cypress/screenshots',
+  fixturesFolder: 'cypress/fixtures',
+  reporter: 'mochawesome',
+  reporterOptions: {
+    reportDir: 'cypress/results',
+    overwrite: false,
+    html: true,
+    json: true,
+  },
+  watchForFileChanges: false,
+  projectId: 'ebzwp1',
+  pageLoadTimeout: 100000,
+  defaultCommandTimeout: 30000,
+  retries: {
+    runMode: 2,
+    openMode: 2,
+  },
+  experimentalStudio: true,
+  e2e: {
+    setupNodeEvents(on, config) {},
+    supportFile: false,
+    baseUrl: 'http://localhost:4200',
+    specPattern: 'cypress/e2e/**/*.{js,jsx,ts,tsx}',
+  },
+})

cypress/integration/adapters.ts → cypress/e2e/adapters.ts

@@ -1,4 +1,5 @@
 import { loadFlowCode } from '../support/helper';
+import "cypress-localstorage-commands";
 // tslint:disable: quotemark
 /// <reference types="Cypress" />
 
@@ -8,21 +9,21 @@ describe('Adapter install', () => {
   beforeEach(() => {
     // Prevent external network request for adapter config
     cy.intercept('GET', 'https://kendraio.github.io/kendraio-adapter/config.json', {
-      fixture: 'adapterConfig.json'
+      fixture: 'adapterConfig'
     }
-    ).as('adapterConfig.json');
+    ).as('adapterConfig');
     cy.intercept('GET', 'https://kendraio-adapter.kendraio.now.sh/bloomen.json', {
       fixture: 'bloomen.json'
     }
-    ).as('bloomen.json');
+    ).as('bloomen');
 
+    // Alter settings to allow adapters to be installed from flows
+    let localStorageConfig = JSON.stringify( {adapterRepoUrl:"https://kendraio.github.io/kendraio-adapter/", exposeCoreActions:true});
+    cy.setLocalStorage('core.variables.settings',localStorageConfig);
   });
 
   it('Export a packaged adapter with attachments', () => {
-    // first go to settings and allow core actions in flows
-    cy.visit('/core/settings');
-    cy.get('#formly_16_boolean_exposeCoreActions_5 .mat-checkbox-inner-container').click();
-    cy.contains('Save settings').click({ force: true });
+
     loadFlowCode([
       {
         "type": "init"
@@ -32,11 +33,21 @@ describe('Adapter install', () => {
         "mapping": "{repoUrl:`https://kendraio-adapter.kendraio.now.sh/`, name:`bloomen`}"
       },
       {
-        "type": "dispatch",
-        "action": "installAdapter"
+        "type": "actions",
+        "buttons": [
+          {
+            "label": "Import Adapter",
+            "color": "default",
+            "blocks": [
+
+              {
+                "type": "dispatch",
+                "action": "installAdapter"
+              }]
+          }]
       }
-    ]);
-    cy.wait(1000); // give the adapter time to install.
+    ]);   
+    cy.contains('Import Adapter').click().wait(['@bloomen']).wait(2000); // make sure that the data is downloaded and give the adapter time to install.
     loadFlowCode([
       {
         "type": "adapter-info",
@@ -58,4 +69,3 @@ describe('Adapter install', () => {
 
 
 });
-