init of cypress tests (TouK#1382)

* minor deps

* some major deps

* more deps & warns fix

* tests fix for r17

* cypress init

* cypress tests

* minor deps

* scripts

* readme

* cleanup

* readme

* start-server-and-test

* image snapshots

ui/client/.eslintrc

@@ -238,6 +238,14 @@
     ]
   },
   "overrides": [
+    {
+      "files": [
+        "./cypress/**/*.ts"
+      ],
+      "rules": {
+        "i18next/no-literal-string": "off"
+      }
+    },
     {
       "files": [
         "*.ts",

ui/client/.gitignore

@@ -11,3 +11,9 @@ npm-debug.log
 coverage/
 dist/
 translations/
+
+cypress/videos
+cypress/screenshots
+cypress/fixtures/env.json
+cypress/**/__image_snapshots__/**/*.actual.png
+cypress/**/__image_snapshots__/**/*.diff.png

ui/client/README.md

@@ -1,28 +1,46 @@
 # Prerequisites
-To run make sure that you have the newest version of nodejs (currently it is 6.3.0) and npm (currently it is 3.10.3).
-If you have older versions follow the insruction on http://askubuntu.com/questions/594656/how-to-install-the-latest-versions-of-nodejs-and-npm-for-ubuntu-14-04-lts
+
+To run make sure that you have the newest version of nodejs (currently it is 6.3.0) and npm (currently it is 3.10.3). If you have older
+versions follow the insruction
+on http://askubuntu.com/questions/594656/how-to-install-the-latest-versions-of-nodejs-and-npm-for-ubuntu-14-04-lts
 After that you may need to cleanup npm global modules (result of `sudo npm -g list` should be blank).
 
 # Run
+
 ```
-npm ci
-npm start
+npm ci && npm start
 open http://localhost:3000
 ```
 
-#Run tests from console
+# Tests
+
+## Unit (jest) tests
+
 ```npm test```
 
-#Run tests from IntelliJ - Karma plugin needed
-- config file: ...ui/client/karma.conf.js
-- browsers to start: empty
-- node interpreter: np. usr/bin/node
-- karma package: ...ui/client/node_modules/karma
-- env variables: NODE_ENV=production
+### Run tests from IntelliJ
+
+`Jest` should work out of the box, just click green arrow.
+
+## E2E (cypress) tests
+_You should copy and fill `cypress/fixtures/env.json.template` into `cypress/fixtures/env.json` before start._
+
+### Start server and test (CI)
+```npm test:e2e:ci```
+
+### CLI test with running devServer
+```npm test:e2e```
+
+### GUI test with running devServer
+```npm test:e2e:dev```
+
 
 # Background
-As a initial template was used todomvc example from https://github.com/gaearon/redux-devtools (commit 619a18b26a5482585b10eddd331ccacf582ba913)
+
+As a initial template was used todomvc example from https://github.com/gaearon/redux-devtools (commit
+619a18b26a5482585b10eddd331ccacf582ba913)
 It contains:
+
 - react in version 15.0.1
 - redux in version 3.1.1
 - application embraces [react-devtools-extension](https://github.com/zalmoxisus/redux-devtools-extension)

ui/client/common/JsonUtils.js

@@ -1,4 +1,4 @@
-import Flattenizer from "flattenizer"
+import * as Flattenizer from "flattenizer"
 import _ from "lodash"
 
 //tryStringify and tryParse are hacky functions.

ui/client/components/themed/ThemedSelect.tsx

@@ -6,7 +6,7 @@ import {useNkTheme} from "../../containers/theme"
 
 const className = "form-select"
 
-export function ThemedSelect<T = string>(props: SelectProps<T>) {
+export function ThemedSelect<T = string, IsMulti extends boolean = false>(props: SelectProps<T, IsMulti>) {
   const {theme} = useNkTheme()
   return (
     <Select
@@ -32,13 +32,13 @@ export function ThemedSelect<T = string>(props: SelectProps<T>) {
             borderColor: theme.colors.neutral30,
           },
         }),
-        input: (provided, {theme}) => ({
+        input: (provided) => ({
           ...provided,
           color: theme.colors.neutral90,
         }),
         option: (provided, {theme, isDisabled, isSelected, isFocused}) => ({
           ...provided,
-          fontSize: theme.fontSize,
+          fontSize: theme["fontSize"],
           color: isDisabled ?
             theme.colors.neutral20 :
             isSelected || isFocused ?

ui/client/cypress.json

@@ -0,0 +1,14 @@
+{
+  "baseUrl": "http://localhost:3000",
+  "ignoreTestFiles": [
+    "**/__snapshots__/*",
+    "**/__image_snapshots__/*"
+  ],
+  "env": {
+    "cypress-plugin-snapshots": {
+      "imageConfig": {
+        "threshold": 0.01
+      }
+    }
+  }
+}

ui/client/cypress/fixtures/env.json.template

@@ -0,0 +1,6 @@
+{
+  "BASIC_AUTH": {
+    "username": "username",
+    "password": "password"
+  }
+}

ui/client/cypress/fixtures/testProcess.json

@@ -0,0 +1,214 @@
+{
+  "metaData": {
+    "id" : "FeaturesTest",
+    "typeSpecificData": {
+      "parallelism": 1,
+      "splitStateToDisk": true,
+      "useAsyncInterpretation": null,
+      "checkpointIntervalInSeconds": null,
+      "type": "StreamMetaData"
+    },
+    "isSubprocess": false,
+    "additionalFields": {
+      "description": null,
+      "groups": [],
+      "properties": {
+        "numberOfThreads": "1",
+        "environment": "test"
+      }
+    },
+    "subprocessVersions": {}
+  },
+  "exceptionHandlerRef": {
+    "parameters": []
+  },
+  "nodes": [
+    {
+      "id": "kafka-transaction",
+      "ref": {
+        "typ": "kafka-transaction",
+        "parameters": []
+      },
+      "additionalFields": {
+        "description": null,
+        "layoutData": {
+          "x": 0,
+          "y": 0
+        }
+      },
+      "type": "Source"
+    },
+    {
+      "id": "configuratorService",
+      "service": {
+        "id": "configuratorService",
+        "parameters": [
+          {
+            "name": "Template ID",
+            "expression": {
+              "language": "spel",
+              "expression": "'ddddddd'"
+            }
+          },
+          {
+            "name": "Version",
+            "expression": {
+              "language": "spel",
+              "expression": "0"
+            }
+          },
+          {
+            "name": "JsonConfig",
+            "expression": {
+              "language": "spel",
+              "expression": "'sdfsaf'"
+            }
+          }
+        ]
+      },
+      "isDisabled": null,
+      "additionalFields": {
+        "description": null,
+        "layoutData": {
+          "x": 0,
+          "y": 135
+        }
+      },
+      "type": "Processor"
+    },
+    {
+      "nextFalse": [],
+      "id": "filter",
+      "expression": {
+        "language": "spel",
+        "expression": "true"
+      },
+      "isDisabled": null,
+      "additionalFields": {
+        "description": null,
+        "layoutData": {
+          "x": 0,
+          "y": 270
+        }
+      },
+      "type": "Filter"
+    },
+    {
+      "outputs": {
+        "output": [
+          {
+            "id": "meetingService",
+            "service": {
+              "id": "meetingService",
+              "parameters": [
+                {
+                  "name": "Date",
+                  "expression": {
+                    "language": "spel",
+                    "expression": "T(java.time.LocalDateTime).parse('2020-11-11T00:00')"
+                  }
+                },
+                {
+                  "name": "EndTime",
+                  "expression": {
+                    "language": "spel",
+                    "expression": "T(java.time.LocalTime).parse('02:00:00')"
+                  }
+                },
+                {
+                  "name": "Duration",
+                  "expression": {
+                    "language": "spel",
+                    "expression": "T(java.time.Duration).parse('P1D')"
+                  }
+                },
+                {
+                  "name": "Period",
+                  "expression": {
+                    "language": "spel",
+                    "expression": "T(java.time.Period).parse('P2Y')"
+                  }
+                },
+                {
+                  "name": "NextMeeting",
+                  "expression": {
+                    "language": "spel",
+                    "expression": "T(java.time.LocalDate).parse('2020-11-05')"
+                  }
+                },
+                {
+                  "name": "Scheduler",
+                  "expression": {
+                    "language": "spel",
+                    "expression": "new com.cronutils.parser.CronParser(T(com.cronutils.model.definition.CronDefinitionBuilder).instanceDefinitionFor(T(com.cronutils.model.CronType).QUARTZ)).parse('0 0 00 1/1 * ? *')"
+                  }
+                }
+              ]
+            },
+            "isDisabled": null,
+            "additionalFields": {
+              "description": null,
+              "layoutData": {
+                "x": 0,
+                "y": 540
+              }
+            },
+            "type": "Processor"
+          },
+          {
+            "id": "kafka-string",
+            "ref": {
+              "typ": "kafka-string",
+              "parameters": [
+                {
+                  "name": "topic",
+                  "expression": {
+                    "language": "spel",
+                    "expression": "'ala'"
+                  }
+                }
+              ]
+            },
+            "endResult": {
+              "language": "spel",
+              "expression": "#input"
+            },
+            "isDisabled": null,
+            "additionalFields": {
+              "description": null,
+              "layoutData": {
+                "x": 0,
+                "y": 675
+              }
+            },
+            "type": "Sink"
+          }
+        ]
+      },
+      "id": "enricher",
+      "ref": {
+        "id": "enricher",
+        "parameters": [
+          {
+            "name": "param",
+            "expression": {
+              "language": "spel",
+              "expression": "'default value'"
+            }
+          }
+        ]
+      },
+      "additionalFields": {
+        "description": null,
+        "layoutData": {
+          "x": 0,
+          "y": 405
+        }
+      },
+      "isDisabled": null,
+      "subprocessParams": null,
+      "type": "SubprocessInput"
+    }
+  ],
+  "additionalBranches": []
+}

ui/client/cypress/integration/process.ts

@@ -0,0 +1,47 @@
+import {createTestProcess, deleteTestProcess, getProcessName, jsonToBlob} from "../support/tools"
+
+describe("Processes diagram", () => {
+  let processName: string
+
+  before(() => {
+    processName = getProcessName()
+    createTestProcess(processName)
+  })
+
+  beforeEach(() => {
+    cy.fixture("env")
+      .then(({BASIC_AUTH}) => cy.visit(`/visualization/${processName}?businessView=false`, {auth: BASIC_AUTH}))
+    cy.get("#graphContainer").toMatchImageSnapshot()
+  })
+
+  after(() => {
+    deleteTestProcess(processName)
+  })
+
+  it("should show process diagram", () => {
+    cy.url().should("contain", `visualization\/${processName}`)
+    cy.contains(/has never been deployed/i).should("be.visible")
+  })
+
+  it("should import JSON and save", () => {
+    cy.intercept("PUT", "/api/processes/*").as("save")
+    cy.fixture("testProcess").then(json => cy.get("[title=import]")
+      .next("[type=file]")
+      .should("exist")
+      .attachFile({fileContent: jsonToBlob({...json, metaData: {...json.metaData, id: processName}})}))
+    cy.get("#graphContainer").toMatchImageSnapshot()
+    cy.contains(/^save/i).should("be.enabled").click()
+    cy.contains(/^ok$/i).should("be.enabled").click()
+    cy.wait("@save").its("response.statusCode").should("eq", 200)
+  })
+
+  it("should allow drag model", () => {
+    cy.get("[model-id=meetingService]")
+      .should("be.visible")
+      .trigger("mousedown", {which: 1})
+      .trigger("mousemove", {clientX: 10, clientY: 10})
+      .trigger("mouseup", {force: true})
+    cy.get("[model-id=meetingService]").should("not.be.visible")
+    cy.get("#graphContainer").toMatchImageSnapshot()
+  })
+})