diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md new file mode 100644 index 0000000..9c617ee --- /dev/null +++ b/.github/ISSUE_TEMPLATE.md @@ -0,0 +1,13 @@ + + + + +## 💬 Issue + + + diff --git a/.github/ISSUE_TEMPLATE/bug.md b/.github/ISSUE_TEMPLATE/bug.md new file mode 100644 index 0000000..d73d32d --- /dev/null +++ b/.github/ISSUE_TEMPLATE/bug.md @@ -0,0 +1,10 @@ +--- +name: 🐛 Bug +about: Create a report to help us improve +labels: bug +title: 🐛 [Bug] +--- + + +## 🐛 Bug + diff --git a/.github/ISSUE_TEMPLATE/devops.md b/.github/ISSUE_TEMPLATE/devops.md new file mode 100644 index 0000000..038fcc8 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/devops.md @@ -0,0 +1,10 @@ +--- +name: 💥 DevOp +about: Help us manage our deployed Software. +labels: devops +title: 💥 [DevOps] +--- + + +## 💥 DevOps + diff --git a/.github/ISSUE_TEMPLATE/epic.md b/.github/ISSUE_TEMPLATE/epic.md new file mode 100644 index 0000000..af511e6 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/epic.md @@ -0,0 +1,13 @@ +--- +name: 🌟 Epic +about: Define a big development Step +labels: epic +title: 🌟 [EPIC] +--- + + + + + +## 🌟 EPIC + diff --git a/.github/ISSUE_TEMPLATE/feature.md b/.github/ISSUE_TEMPLATE/feature.md new file mode 100644 index 0000000..27f2211 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/feature.md @@ -0,0 +1,10 @@ +--- +name: 🚀 Feature +about: Suggest an idea for this project +labels: feature +title: 🚀 [Feature] +--- + + +## 🚀 Feature + diff --git a/.github/ISSUE_TEMPLATE/question.md b/.github/ISSUE_TEMPLATE/question.md new file mode 100644 index 0000000..b57adcd --- /dev/null +++ b/.github/ISSUE_TEMPLATE/question.md @@ -0,0 +1,13 @@ +--- +name: 💬 Question +about: If you need help understanding our Software. +labels: question +title: 💬 [Question] +--- + + + + + +## 💬 Question + diff --git a/.github/ISSUE_TEMPLATE/refactor.md b/.github/ISSUE_TEMPLATE/refactor.md new file mode 100644 index 0000000..49223c6 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/refactor.md @@ -0,0 +1,10 @@ +--- +name: 🔧 Refactor +about: Help us improve our code by refactoring it. +labels: refactor +title: 🔧 [Refactor] +--- + + +## 🔧 Refactor + diff --git a/.github/ISSUE_TEMPLATE/release.md b/.github/ISSUE_TEMPLATE/release.md new file mode 100644 index 0000000..c9f4b78 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/release.md @@ -0,0 +1,13 @@ +--- +name: 🎂 Release +about: Define a Release +labels: release +title: 🎂 [RELEASE] +--- + + + + + +## 🎂 RELEASE + diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md new file mode 100644 index 0000000..d40a277 --- /dev/null +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -0,0 +1,15 @@ + + +## 🍰 Pullrequest + + +### Issues + +- None + +### Todo + +- [X] None diff --git a/.github/file-filters.yml b/.github/file-filters.yml index ea13733..dddb3cf 100644 --- a/.github/file-filters.yml +++ b/.github/file-filters.yml @@ -5,3 +5,4 @@ e2e-all: e2e-docs: - '**/*.md' - '.vuepress/*' + - 'package.json' diff --git a/.github/workflows/e2e.run.tests.yml b/.github/workflows/e2e.run.tests.yml index 08b51e4..ec38391 100644 --- a/.github/workflows/e2e.run.tests.yml +++ b/.github/workflows/e2e.run.tests.yml @@ -18,7 +18,7 @@ jobs: if: ${{ failure() && steps.e2e-run.conclusion == 'failure' }} run: | cd cypress/ - node create-cucumber-html-report.js + npx tsx create-cucumber-html-report.ts - name: Get PR number if: ${{ failure() && steps.e2e-run.conclusion == 'failure' }} diff --git a/.vuepress/config.ts b/.vuepress/config.ts index a37b11a..bed044c 100644 --- a/.vuepress/config.ts +++ b/.vuepress/config.ts @@ -8,7 +8,7 @@ export default defineUserConfig({ description: 'IT4C - E2E Cypress Cucumber Boilerplate Documentation', dest: 'build/docs', base: process.env.VUEPRESS_BASE ? `/${process.env.VUEPRESS_BASE}/` : '/', - pagePatterns: ['**/*.md', '**/LICENSE', '!.vuepress', '!node_modules'], + pagePatterns: ['**/*.md', '**/LICENSE', '!.vuepress', '!node_modules'], // bundler bundler: viteBundler({}), // theme @@ -25,6 +25,8 @@ export default defineUserConfig({ repo: 'IT4Change/boilerplate-e2e-cypress-cucumber', repoLabel: 'GitHub', repoDisplay: true, + displayFooter: true, + footer: 'CC BY IT4C.dev & Authors - Imprint', navbarLayout: { start: ['Brand'], end: ['Repo', 'Outlook', 'Search'], diff --git a/README.md b/README.md index 9b83cf2..8c81e8b 100644 --- a/README.md +++ b/README.md @@ -1,117 +1,80 @@ # boilerplate-e2e-cypress-cucumber -The IT4C Boilerplate for End-to-End Testing with Cypress and Cucumber in Typescript + +IT4C Boilerplate for End-to-End Testing with Cypress utilizing +* [cypress-io/github-action](https://github.com/marketplace/actions/cypress-io) caching the Cypress installation and dependencies for fast Cypress CI initialisation +* [Cucumber](https://cucumber.io/docs/gherkin/reference/) for human-readable test specifications +* [Multiple Cucumber HTML Reporter](https://github.com/WasiqB/multiple-cucumber-html-reporter/tree/main) to create easy readable, and searchable HTML reports enriched with metadata + +## Requirements and Commands + +Building this project requires `nodejs` (`>= v20`) and `npm`. -## Requirements & Technology +### Commands -To be able to build this project you need `nodejs`, `npm` and optional `docker`. +| Command | Description | +|----------------------------|-----------------------------------------------| +| **Installation** | | +| `npm install` | Project setup | +| **Linting** | | +| `npm run test:lint:eslint` | Run Eslint linter | +| **Run Cypress** | | +| `npm run cypress:open` | Open Cypress GUI | +| `npm run cypress:run` | Run all Cypress tests headless in CLI | +| **Documentation** | | +| `npm run docs:dev` | Run documentation locally in development mode | +| `npm run docs:build` | Build static documentation | +| **Maintenance** | | +| `npm run update` | Check for updates | -## Commands - -The following commands are available: - -| Command | Description | -|----------------------------|---------------------------------------| -| `npm install` | Project setup | -| **Run Linter** | | -| `npm run test:lint` | Run all linters | -| `npm run test:lint:eslint` | Run linter eslint | -| **Run Cypress** | | -| `npm run cypress:open` | Open Cypress GUI | -| `npm run cypress:run` | Run all Cypress tests headless in CLI | -| **Documentation** | | -| `npm run docs:dev` | Run Documentation in development mode | -| `npm run docs:build` | Build static documentation | - -### Docker - -Docker can be run in development mode utilizing `docker-compose.overwrite.yml`: -```bash -docker compose up -``` - -Docker can be run in production mode: -```bash -docker compose -f docker-compose.yml up -``` ### Update -You can get a list of packes to update by running `npm run update`. +Retrieve a list of updatable packages by running `npm run update`. -Appending `-u ` will also update the packages in the `package.json`. You have to run `npm install` again after. +Appending `-u ` will also update the packages in the `package.json`. +Afterwards run `npm install`. ```bash npm run update -- -u npm install ``` + +## Test Examples + +To showcase Cucumber feature tests, a simple login example on [the-internet](https://the-internet.herokuapp.com/) is written in the feature file [Login.feature](./cypress/e2e/features/Login.feature). +The `baseUrl` is set in [cypress.config.ts](https://github.com/IT4Change/boilerplate-e2e-cypress-cucumber/blob/8306614812c1011642c75ae34057ca66784cae4f/cypress.config.ts#L25) and the test steps are defined in [this step definition file](./cypress/e2e/ssteps/login.ts). + + +Testing against the demo website [the-internet](https://the-internet.herokuapp.com/) was chosen from the test practice recommendations of https://www.davidmello.com/best-websites-for-practicing-test-automation/. + + ## How to use as part of a project -If you want to use this as part of a larger project, e.g. in conjunction with a frontend also utilizing a boilerplate you cannot use the template mechanic provided by github for this repository. +If you want to use this template as part of a larger project, e.g. in conjunction with a frontend also utilizing a boilerplate you cannot use the template mechanic provided by github for this repository. You can use the following commands to include the whole git history of the boilerplate and be able to update according to changes to this repo using another remote. ```bash -git remote add xxx_boilerplate_backend git@github.com:IT4Change/boilerplate-backend.git -git fetch xxx_boilerplate_backend -git merge -s ours --no-commit --allow-unrelated-histories xxx_boilerplate_backend/master -git read-tree --prefix=xxx/ -u xxx_boilerplate_backend/master -git commit -m "Imported boilerplate_backend as a subtree under xxx/." +git remote add xxx_boilerplate-e2e-cypress-cucumber git@github.com:IT4Change/boilerplate-backend.git +git fetch xxx_boilerplate-e2e-cypress-cucumber +git merge -s ours --no-commit --allow-unrelated-histories xxx_boilerplate-e2e-cypress-cucumber/master +git read-tree --prefix=xxx/ -u xxx_boilerplate-e2e-cypress-cucumber/master +git commit -m "Imported boilerplate-e2e-cypress-cucumber as a subtree under xxx/." ``` To update the subtree you can use ```bash -git subtree pull -P xxx/ xxx_boilerplate_backend master -git commit -m "Updated boilerplate_backend in subtree under xxx/." +git subtree pull -P xxx/ xxx_boilerplate-e2e-cypress-cucumber master +git commit -m "Updated boilerplate-e2e-cypress-cucumber in subtree under xxx/." ``` -Where `xxx` refers to the folder and product part you want to use the boilerplate in. This assumes that you might need several copies of the frontend boilerplate for you product. +Where `xxx` refers to the folder and product part you want to use the boilerplate in (e.g. `cypress` or `e2e-tests`). This mechanic was taken from this [source](https://stackoverflow.com/questions/1683531/how-to-import-existing-git-repository-into-another/8396318#8396318) -## Database setup - -The project is set up for a `sqlite` database. -In order to run the project against a mysql database adjust `prisma/schema.prisma`, copy the `.env.dist` file to `.env` and configure the database connection appropriately. -Then run `npm run db:migrate` to generate the database. It might be required to delete the migration folder beforehand. - ## License [Apache 2.0](./LICENSE) - - -[badge-nodejs-img]: https://img.shields.io/badge/nodejs-%3E%3D20.5.0-blue -[badge-nodejs-href]: https://nodejs.org/ - -[badge-npm-img]: https://img.shields.io/badge/npm-latest-blue -[badge-npm-href]: https://www.npmjs.com/package/npm - -[badge-docker-img]: https://img.shields.io/badge/docker-latest-blue -[badge-docker-href]: https://www.docker.com/ - -[badge-apollo-img]: https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fraw.githubusercontent.com%2FIT4Change%2Fboilerplate-backend%2Fmaster%2Fpackage.json&query=dependencies%5B%22%40apollo%2Fserver%22%5D&label=apollo-server&color=green -[badge-apollo-href]: https://apollographql.com - -[badge-graphql-img]: https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fraw.githubusercontent.com%2FIT4Change%2Fboilerplate-backend%2Fmaster%2Fpackage.json&query=dependencies.graphql&label=graphql&color=green -[badge-graphql-href]: https://graphql.org/ - -[badge-type-graphql-img]: https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fraw.githubusercontent.com%2FIT4Change%2Fboilerplate-backend%2Fmaster%2Fpackage.json&query=dependencies%5B%22type-graphql%22%5D&label=type-graphql&color=green -[badge-type-graphql-href]: https://typegraphql.com/ - -[badge-prisma-img]: https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fraw.githubusercontent.com%2FIT4Change%2Fboilerplate-backend%2Fmaster%2Fpackage.json&query=dependencies.prisma&label=prisma&color=green -[badge-prisma-href]: https://prisma.io/ - -[badge-eslint-img]: https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fraw.githubusercontent.com%2FIT4Change%2Fboilerplate-backend%2Fmaster%2Fpackage.json&query=devDependencies.eslint&label=eslint&color=yellow -[badge-eslint-href]: https://eslint.org/ - -[badge-remark-cli-img]: https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fraw.githubusercontent.com%2FIT4Change%2Fboilerplate-backend%2Fmaster%2Fpackage.json&query=devDependencies%5B%27remark-cli%27%5D&label=remark-cli&color=yellow -[badge-remark-cli-href]: https://remark.js.org/ - -[badge-jest-img]: https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fraw.githubusercontent.com%2FIT4Change%2Fboilerplate-backend%2Fmaster%2Fpackage.json&query=devDependencies.jest&label=jest&color=yellow -[badge-jest-href]: https://jestjs.io/ - -[badge-vuepress-img]: https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fraw.githubusercontent.com%2FIT4Change%2Fboilerplate-backend%2Fmaster%2Fpackage.json&query=devDependencies.vuepress&label=vuepress&color=orange -[badge-vuepress-href]: https://vuepress.vuejs.org/ - diff --git a/cypress/create-cucumber-html-report.js b/cypress/create-cucumber-html-report.ts similarity index 62% rename from cypress/create-cucumber-html-report.js rename to cypress/create-cucumber-html-report.ts index 1321172..a2c0f7d 100644 --- a/cypress/create-cucumber-html-report.js +++ b/cypress/create-cucumber-html-report.ts @@ -1,7 +1,8 @@ import report from 'multiple-cucumber-html-reporter' -const reportTitle = 'DreamMall End-to-End Test Report' +const reportTitle = 'End-to-End Test Report' +// eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access report.generate({ jsonDir: './reports/json/', reportPath: './reports/e2e_html_report', diff --git a/cypress/e2e/features/Login.feature b/cypress/e2e/features/Login.feature index a991174..baafca7 100644 --- a/cypress/e2e/features/Login.feature +++ b/cypress/e2e/features/Login.feature @@ -1,7 +1,6 @@ Feature: Login As a user I want to sign in - I want to benoticed when sign in fails Background: Given The web browser is at the login page diff --git a/cypress/e2e/step_definitions/login.ts b/cypress/e2e/steps/login.ts similarity index 100% rename from cypress/e2e/step_definitions/login.ts rename to cypress/e2e/steps/login.ts diff --git a/package.json b/package.json index 8f12327..7a91c92 100644 --- a/package.json +++ b/package.json @@ -54,14 +54,15 @@ "multiple-cucumber-html-reporter": "^3.6.2", "prettier": "^3.2.5", "ts-loader": "^9.5.1", + "tsx": "^4.7.1", "typescript": "^5.4.2", - "vuepress": "^2.0.0-rc.0", + "vuepress": "^2.0.0-rc.8", "vuepress-plugin-search-pro": "^2.0.0-rc.29", "vuepress-theme-hope": "^2.0.0-rc.29" }, "cypress-cucumber-preprocessor": { "nonGlobalStepDefinitions": true, - "stepDefinitions": "cypress/e2e/step_definitions/**/*.{js,ts}", + "stepDefinitions": "cypress/e2e/steps/**/*.{js,ts}", "json": { "enabled": true, "output": "cypress/reports/json/cucumber-report.json"