Skip to content
Permalink
Browse files
fix e2e tests for helix-front (#2144)
Fix the helix-front end to end tests by replacing the deprecated Protractor testing library with Cypress
  • Loading branch information
micahstubbs committed Jun 15, 2022
1 parent 602f081 commit 1c16a6f4cac3dcefa10a3beb14fabf14bf5cd547
Show file tree
Hide file tree
Showing 23 changed files with 2,823 additions and 1,096 deletions.
@@ -11,7 +11,7 @@
"parserOptions": {
"project": [
"tsconfig.json",
"e2e/tsconfig.json"
"cypress/tsconfig.json"
],
"createDefaultProgram": true
},
@@ -38,9 +38,9 @@ testem.log
/typings
/node

# e2e
/e2e/*.js
/e2e/*.map
# tests
/cypress/*.js
/cypress/*.map

# System Files
.DS_Store
@@ -4,17 +4,17 @@ A modern user interface to manage [Helix](http://helix.apache.org).

## Development server

Run `npm start` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
Run `yarn start` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.

## Production Build

Run `npm run build` to build the project. The build artifacts will be stored in the `dist/` directory.
Run `yarn build` to build the project. The build artifacts will be stored in the `dist/` directory.

## Running unit tests

Run `npm test` to execute the unit tests via [Karma](https://karma-runner.github.io).
Run `yarn test` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Running end-to-end tests

Run `npm e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
Before running the tests make sure you are serving the app via `npm start`.
Run `yarn e2e` to execute the end-to-end tests via [Cypress](https://www.cypress.io/).
Before running the tests make sure you are serving the app via `yarn start`.
@@ -81,12 +81,16 @@
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"builder": "@angular-builders/jest:run",
"options": {
"main": "client/test.ts",
"karmaConfig": "./karma.conf.js",
"polyfills": "client/polyfills.ts",
"main": [
"setupJest.ts"
],
"tsConfig": "client/tsconfig.spec.json",
"polyfills": [
"client/polyfills.ts"
],
"no-cache": true,
"scripts": [],
"styles": [
"client/styles.scss",
@@ -103,38 +107,96 @@
"options": {
"tsConfig": [
"client/tsconfig.app.json",
"client/tsconfig.spec.json"
"client/tsconfig.spec.json",
"cypress/tsconfig.json"
],
"exclude": [],
"lintFilePatterns": [
"src/**/*.ts",
"src/**/*.html"
]
}
},
"cypress-run": {
"builder": "@cypress/schematic:cypress",
"options": {
"devServerTarget": "helix-front:serve"
},
"configurations": {
"production": {
"devServerTarget": "helix-front:serve:production"
}
}
},
"cypress-open": {
"builder": "@cypress/schematic:cypress",
"options": {
"watch": true,
"headless": false
}
},
"e2e": {
"builder": "@cypress/schematic:cypress",
"options": {
"devServerTarget": "helix-front:serve",
"watch": true,
"headless": false,
"tsConfig": "cypress/tsconfig.json"
},
"configurations": {
"production": {
"devServerTarget": "helix-front:serve:production"
}
}
}
}
},
"helix-front-e2e": {
"root": "e2e",
"sourceRoot": "e2e",
"root": "cypress",
"sourceRoot": "cypress",
"projectType": "application",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"builder": "@cypress/schematic:cypress",
"options": {
"protractorConfig": "./protractor.conf.js",
"devServerTarget": "helix-front:serve"
"devServerTarget": "helix-front-e2e:serve",
"watch": true,
"headless": false
},
"configurations": {}
"configurations": {
"production": {
"devServerTarget": "helix-front-e2e:serve:production"
}
}
},
"lint": {
"builder": "@angular-eslint/builder:lint",
"options": {
"lintFilePatterns": [
"e2e/**/*.ts",
"e2e/**/*.html"
"cypress/**/*.ts",
"cypress/**/*.html"
]
}
},
"cypress-run": {
"builder": "@cypress/schematic:cypress",
"options": {
"devServerTarget": "helix-front-e2e:serve",
"configFile": "./cypress.config.ts"
},
"configurations": {
"production": {
"devServerTarget": "helix-front-e2e:serve:production"
}
}
},
"cypress-open": {
"builder": "@cypress/schematic:cypress",
"options": {
"watch": true,
"headless": false,
"configFile": "./cypress.config.js"
}
}
}
}
@@ -9,7 +9,8 @@ import { ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs';
import { map } from 'rxjs/operators';

import * as _ from 'lodash';
import _ from 'lodash';
import { forEach as lodashForEach } from 'lodash';
import {Data, Edge, Node, Options, VisNetworkService } from 'ngx-vis';

import { ResourceService } from '../resource/shared/resource.service';
@@ -169,7 +170,7 @@ export class DashboardComponent implements OnInit, AfterViewInit, OnDestroy {
.getAll(this.clusterName)
.subscribe(
result => {
_.forEach(result, (resource) => {
lodashForEach(result, (resource) => {
const lastId = this.nodes.length;
const newId = this.nodes.length + 1;
this.resourceToId[resource.name] = newId;
@@ -191,7 +192,7 @@ export class DashboardComponent implements OnInit, AfterViewInit, OnDestroy {
.getAll(this.clusterName)
.subscribe(
result => {
_.forEach(result, (instance) => {
lodashForEach(result, (instance) => {
const newId = this.visNetworkData.nodes.length + 1;
this.instanceToId[instance.name] = newId;
(this.visNetworkData.nodes as Node[])[this.visNetworkData.nodes.length] = {
@@ -236,7 +237,7 @@ export class DashboardComponent implements OnInit, AfterViewInit, OnDestroy {
.getAllOnInstance(this.clusterName, instanceName)
.subscribe(
resources => {
_.forEach(resources, (resource) => {
lodashForEach(resources, (resource) => {
(this.visNetworkData.edges as Edge[])[this.visNetworkData.nodes.length] = {
from: id,
to: this.resourceToId[resource.name]
@@ -1,6 +1,6 @@
import { Component, OnInit, Input, ViewChild } from '@angular/core';

import * as moment from 'moment';
import moment from 'moment';

import { Settings } from '../../core/settings';
import { Job } from '../shared/workflow.model';

This file was deleted.

@@ -1,5 +1,8 @@
{
"extends": "../tsconfig.json",
"include": [
"client/**/*.d.ts"
],
"compilerOptions": {
"outDir": "../out-tsc/app",
"baseUrl": "",
@@ -8,8 +11,5 @@
"files": [
"main.ts",
"polyfills.ts"
],
"include": [
"client/**/*.d.ts"
]
}
@@ -1,20 +1,19 @@
{
"extends": "../tsconfig.json",
"include": [
"**/*.spec.ts",
"**/*.d.ts"
],
"compilerOptions": {
"outDir": "../out-tsc/spec",
"target": "es5",
"baseUrl": "",
"types": [
"jasmine",
"jest",
"node"
]
},
"files": [
"test.ts",
"../setupJest.ts",
"polyfills.ts"
],
"include": [
"**/*.spec.ts",
"**/*.d.ts"
]
}
@@ -0,0 +1,8 @@
import { defineConfig } from 'cypress'

export default defineConfig({
e2e: {
baseUrl: 'http://localhost:4200',
watchForFileChanges: true,
},
})
@@ -0,0 +1,10 @@
describe('helix-ui App', () => {
it('Displays the page title', () => {
cy.visit('/')
cy.get('.helix-title').contains('Helix')
})
it('Displays the footer', () => {
cy.visit('/')
cy.get('.footer').contains(/©\s\d\d\d\d\sHelix\.\sAll\srights\sreserved\./)
})
})
@@ -0,0 +1,29 @@
{
"include": ["**/*.cy.ts"],
"compileOnSave": false,
"compilerOptions": {
"importHelpers": true,
"sourceMap": false,
"declaration": false,
"moduleResolution": "node",
"experimentalDecorators": true,
"target": "es2015",
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"outDir": "../out-tsc/e2e",
"typeRoots": [
"node_modules/@types"
],
"types": [
"cypress",
"jest",
"node"
],
"lib": [
"es2016",
"dom"
],
"module": "es2020",
}
}

0 comments on commit 1c16a6f

Please sign in to comment.