Skip to content

Commit f923177

Browse files
ds-ext-dskrzypczakds-ext-dskrzypczak
authored
Merge pull request #201 from catenax-ng/TRACEFOSS-764_cypress_local_e2e
TRACEFOSS-764 - Local E2E tests with Cypress
2 parents 1ee6a15 + ddccfd2 commit f923177

File tree

12 files changed

+1289
-34
lines changed

12 files changed

+1289
-34
lines changed

‎.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,9 @@ testem.log
3636
/typings
3737
/audit-reports
3838
src/tests/test-report.xml
39+
cypress/videos
40+
cypress/screenshots
41+
3942
# e2e
4043
/e2e/*.js
4144
/e2e/*.map

‎angular.json‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -198,6 +198,37 @@
198198
"lintFilePatterns": ["src/**/*.ts", "src/**/*.component.html"],
199199
"exclude": ["**/node_modules/**"]
200200
}
201+
},
202+
"cypress-run": {
203+
"builder": "@cypress/schematic:cypress",
204+
"options": {
205+
"devServerTarget": "trace-x:serve"
206+
},
207+
"configurations": {
208+
"production": {
209+
"devServerTarget": "trace-x:serve:production"
210+
}
211+
}
212+
},
213+
"cypress-open": {
214+
"builder": "@cypress/schematic:cypress",
215+
"options": {
216+
"watch": true,
217+
"headless": false
218+
}
219+
},
220+
"e2e": {
221+
"builder": "@cypress/schematic:cypress",
222+
"options": {
223+
"devServerTarget": "trace-x:serve",
224+
"watch": true,
225+
"headless": false
226+
},
227+
"configurations": {
228+
"production": {
229+
"devServerTarget": "trace-x:serve:production"
230+
}
231+
}
201232
}
202233
}
203234
}

‎cypress.config.ts‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { defineConfig } from 'cypress';
2+
import * as createBundler from '@bahmutov/cypress-esbuild-preprocessor';
3+
import { addCucumberPreprocessorPlugin } from '@badeball/cypress-cucumber-preprocessor';
4+
import { createEsbuildPlugin } from '@badeball/cypress-cucumber-preprocessor/esbuild';
5+
6+
async function setupNodeEvents(
7+
on: Cypress.PluginEvents,
8+
config: Cypress.PluginConfigOptions,
9+
): Promise<Cypress.PluginConfigOptions> {
10+
// This is required for the preprocessor to be able to generate JSON reports after each run, and more,
11+
await addCucumberPreprocessorPlugin(on, config);
12+
13+
on(
14+
'file:preprocessor',
15+
createBundler({
16+
plugins: [createEsbuildPlugin(config)],
17+
}),
18+
);
19+
20+
// Make sure to return the config object as it might have been modified by the plugin.
21+
return config;
22+
}
23+
24+
export default defineConfig({
25+
e2e: {
26+
baseUrl: 'http://localhost:4200',
27+
specPattern: '**/*.feature',
28+
supportFile: false,
29+
viewportWidth: 1366,
30+
viewportHeight: 768,
31+
setupNodeEvents,
32+
},
33+
});

‎cypress/e2e/dashboard.feature‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
Feature: Dashboard Page feature
2+
Scenario: successful load dashboard page
3+
Given browser is opened to dashboard page
4+
Then url should contain dashboard
5+
And should be visible "Dashboard" header
6+
And should be visible "TOTAL OF PARTS" section
7+
And should be visible "TOTAL OF OTHER PARTS" section
8+
And should be visible "TOTAL INVESTIGATIONS" section
9+
And should be visible "Quality Investigations" section
10+
And should be visible "Number of parts per country" section
11+
And in "Quality Investigations" section should be able to click on "View all" button and go to integrations page

‎cypress/integration/pages/DashboardPage.ts‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
/********************************************************************************
2+
* Copyright (c) 2022, 2023 Bayerische Motoren Werke Aktiengesellschaft (BMW AG)
3+
* Copyright (c) 2022, 2023 ZF Friedrichshafen AG
4+
* Copyright (c) 2022, 2023 Contributors to the Eclipse Foundation
5+
*
6+
* See the NOTICE file(s) distributed with this work for additional
7+
* information regarding copyright ownership.
8+
*
9+
* This program and the accompanying materials are made available under the
10+
* terms of the Apache License, Version 2.0 which is available at
11+
* https://www.apache.org/licenses/LICENSE-2.0.
12+
*
13+
* Unless required by applicable law or agreed to in writing, software
14+
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
15+
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
16+
* License for the specific language governing permissions and limitations
17+
* under the License.
18+
*
19+
* SPDX-License-Identifier: Apache-2.0
20+
********************************************************************************/
21+
22+
export class DashboardPage {
23+
static clickQualityInvestigationViewAllButton() {
24+
cy.get('button').contains('View all').click();
25+
}
26+
27+
static visit() {
28+
cy.visit('/');
29+
}
30+
}

‎cypress/support/commands.ts‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
/********************************************************************************
2+
* Copyright (c) 2022, 2023 Bayerische Motoren Werke Aktiengesellschaft (BMW AG)
3+
* Copyright (c) 2022, 2023 ZF Friedrichshafen AG
4+
* Copyright (c) 2022, 2023 Contributors to the Eclipse Foundation
5+
*
6+
* See the NOTICE file(s) distributed with this work for additional
7+
* information regarding copyright ownership.
8+
*
9+
* This program and the accompanying materials are made available under the
10+
* terms of the Apache License, Version 2.0 which is available at
11+
* https://www.apache.org/licenses/LICENSE-2.0.
12+
*
13+
* Unless required by applicable law or agreed to in writing, software
14+
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
15+
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
16+
* License for the specific language governing permissions and limitations
17+
* under the License.
18+
*
19+
* SPDX-License-Identifier: Apache-2.0
20+
********************************************************************************/
21+
22+
/// <reference types="cypress" />
23+
// ***********************************************
24+
// This example commands.ts shows you how to
25+
// create various custom commands and overwrite
26+
// existing commands.
27+
//
28+
// For more comprehensive examples of custom
29+
// commands please read more here:
30+
// https://on.cypress.io/custom-commands
31+
// ***********************************************
32+
//
33+
//
34+
// -- This is a parent command --
35+
// Cypress.Commands.add('login', (email, password) => { ... })
36+
//
37+
//
38+
// -- This is a child command --
39+
// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
40+
//
41+
//
42+
// -- This is a dual command --
43+
// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
44+
//
45+
//
46+
// -- This will overwrite an existing command --
47+
// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
48+
//
49+
// declare global {
50+
// namespace Cypress {
51+
// interface Chainable {
52+
// login(email: string, password: string): Chainable<void>
53+
// drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
54+
// dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
55+
// visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
56+
// }
57+
// }
58+
// }

‎cypress/support/e2e.ts‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
/********************************************************************************
2+
* Copyright (c) 2022, 2023 Bayerische Motoren Werke Aktiengesellschaft (BMW AG)
3+
* Copyright (c) 2022, 2023 ZF Friedrichshafen AG
4+
* Copyright (c) 2022, 2023 Contributors to the Eclipse Foundation
5+
*
6+
* See the NOTICE file(s) distributed with this work for additional
7+
* information regarding copyright ownership.
8+
*
9+
* This program and the accompanying materials are made available under the
10+
* terms of the Apache License, Version 2.0 which is available at
11+
* https://www.apache.org/licenses/LICENSE-2.0.
12+
*
13+
* Unless required by applicable law or agreed to in writing, software
14+
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
15+
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
16+
* License for the specific language governing permissions and limitations
17+
* under the License.
18+
*
19+
* SPDX-License-Identifier: Apache-2.0
20+
********************************************************************************/
21+
22+
// ***********************************************************
23+
// This example support/e2e.ts is processed and
24+
// loaded automatically before your test files.
25+
//
26+
// This is a great place to put global configuration and
27+
// behavior that modifies Cypress.
28+
//
29+
// You can change the location of this file or turn off
30+
// automatically serving support files with the
31+
// 'supportFile' configuration option.
32+
//
33+
// You can read more here:
34+
// https://on.cypress.io/configuration
35+
// ***********************************************************
36+
37+
import './commands';

‎cypress/support/step_definitions/dashboard.ts‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
/********************************************************************************
2+
* Copyright (c) 2022, 2023 Bayerische Motoren Werke Aktiengesellschaft (BMW AG)
3+
* Copyright (c) 2022, 2023 ZF Friedrichshafen AG
4+
* Copyright (c) 2022, 2023 Contributors to the Eclipse Foundation
5+
*
6+
* See the NOTICE file(s) distributed with this work for additional
7+
* information regarding copyright ownership.
8+
*
9+
* This program and the accompanying materials are made available under the
10+
* terms of the Apache License, Version 2.0 which is available at
11+
* https://www.apache.org/licenses/LICENSE-2.0.
12+
*
13+
* Unless required by applicable law or agreed to in writing, software
14+
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
15+
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
16+
* License for the specific language governing permissions and limitations
17+
* under the License.
18+
*
19+
* SPDX-License-Identifier: Apache-2.0
20+
********************************************************************************/
21+
22+
import { DashboardPage } from '../../integration/pages/DashboardPage';
23+
import { Given, Then } from '@badeball/cypress-cucumber-preprocessor';
24+
25+
Given(/^browser is opened to dashboard page$/, () => {
26+
DashboardPage.visit();
27+
});
28+
29+
Then(/^url should contain dashboard$/, () => {
30+
cy.url().should('include', '/dashboard');
31+
});
32+
33+
Then(/^should be visible "Dashboard" header$/, () => {
34+
cy.get('h1').contains('Dashboard').should('be.visible');
35+
});
36+
37+
Then(/^should be visible "TOTAL OF PARTS" section$/, () => {
38+
cy.get('section').contains('Total of parts').should('be.visible');
39+
});
40+
Then(/^should be visible "TOTAL OF OTHER PARTS" section$/, () => {
41+
cy.get('section').contains('Total of other parts').should('be.visible');
42+
});
43+
44+
Then(/^should be visible "TOTAL INVESTIGATIONS" section$/, () => {
45+
cy.get('section').contains('Total investigations').should('be.visible');
46+
});
47+
48+
Then(/^should be visible "Quality Investigations" section$/, () => {
49+
cy.get('section').contains('Quality Investigations').should('be.visible');
50+
});
51+
52+
Then(/^should be visible "Number of parts per country" section$/, () => {
53+
cy.get('section').contains('Number of parts per country').should('be.visible');
54+
});
55+
56+
Then(
57+
/^in "Quality Investigations" section should be able to click on "View all" button and go to integrations page$/,
58+
() => {
59+
DashboardPage.clickQualityInvestigationViewAllButton();
60+
cy.url().should('include', '/investigations');
61+
},
62+
);

‎docs/configuration.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,10 @@ There are several Angular artefacts which you can generate:
3535

3636
Run `ng test` to execute the unit tests via [karma](https://karma-runner.github.io/latest/index.html) + [jasmine](https://jasmine.github.io/).
3737

38+
### Running E2E tests
39+
40+
Please find [here](e2e.md) some important information about E2E tests.
41+
3842
### Running updates
3943

4044
Run `ng update` to update your application and its dependencies.

‎docs/e2e.md‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
## E2E tests
2+
3+
We use Cypress as e2e testing framework (https://www.cypress.io/) + https://www.npmjs.com/package/@cypress/schematic.
4+
5+
To be able to use Behavior-driven development (BDD) approach we have configured additional lib: https://github.com/badeball/cypress-cucumber-preprocessor
6+
7+
## File structure
8+
9+
- `cypress.config.ts` - config for cypress test
10+
- `cypress/` - main directory for cypress
11+
- `cypress/e2e/` - contains e2e scenarios as \*.feature files (BDD approach - Gherkin format: https://cucumber.io/docs/gherkin/reference/) e.g. dashboard.feature
12+
- `cypress/support/step_definitions/` - contains implementation e2e scenarios as \*.ts files e.g. dashboard.ts
13+
- `cypress/integration/pages/` - contains classes representing pages with some useful function e.g. DashboardPage.ts
14+
15+
## How to run
16+
17+
- local env (via cypress app):
18+
- run command `ng e2e` - it should open new window with Cypress tool
19+
- click on "E2E testing" and then on "Start E2E Testing in Chrome"
20+
- you should see new window under url: http://localhost:4200/\_\_/#/specs when you can click on given scenario to run it.
21+
- local env (run tests in command line): `yarn run cypress:run`

0 commit comments

Comments
 (0)