Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kros-sk/kros.angular.bestpractices.tests
Postup tvorby E2E testov pre projekt https://github.com/Kros-sk/Kros.Angular.BestPractices dostupný na adrese https://demo.todos.kros.wtf
https://github.com/kros-sk/kros.angular.bestpractices.tests
Last synced: about 1 month ago
JSON representation
Postup tvorby E2E testov pre projekt https://github.com/Kros-sk/Kros.Angular.BestPractices dostupný na adrese https://demo.todos.kros.wtf
- Host: GitHub
- URL: https://github.com/kros-sk/kros.angular.bestpractices.tests
- Owner: Kros-sk
- License: mit
- Created: 2020-03-11T14:23:18.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T10:45:53.000Z (almost 2 years ago)
- Last Synced: 2024-07-12T07:27:58.629Z (6 months ago)
- Language: TypeScript
- Homepage:
- Size: 1.65 MB
- Stars: 0
- Watchers: 5
- Forks: 1
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Level 0 - Čo potrebujem na vývoj
Na vývoj je odporúčaný Visual Studio Code (Odkaz na stiahnutie: https://code.visualstudio.com/).
Potrebné je mať nainštalovaný Node.js (odkaz na stiahnutie: https://nodejs.org/en/).
Spolu s ním pre lepšiu prácu s testami je odporúčaná inštalácia nasledovných rozšírení:
Angular Essentials
https://marketplace.visualstudio.com/items?itemName=johnpapa.angular-essentials
Cypress Snippets
https://marketplace.visualstudio.com/items?itemName=andrew-codes.cypress-snippets
Cucumber (Gherkin) Full Support
https://marketplace.visualstudio.com/items?itemName=alexkrechik.cucumberautocomplete
Najzákladnejšie nastavenia je potrebné vložiť do súboru `.vscode/settings.json`
Ak adresár `.vscode` neexistuje, môžeme ho vytvoriť ručne. Nastavenia sú uvedené nižšie:
```
{
"typescript.tsdk": "node_modules/typescript/lib",
"cucumberautocomplete.steps": [
"cypress/**/*.ts"
],
"cucumberautocomplete.syncfeatures": "cypress/**/*feature",
"explorer.compactFolders": false
}
```
Stručný návod, ako používať Cypress je aj na našej Wiki https://krosza.sharepoint.com/:o:/s/Webovfakturcia/Eqb-iUaiiFhIll3Mg-YUzAcBq8LNoTAdOGGVhCiXT8pjaQ?e=gJA6XE
# Level 1 - Založenie projektu a nakonfigurovanie Cypress + Cucumber + Typescript
### Založenie projektu
V konzole sa nastav na adresár určený pre nový projekt, zadaj príkaz `npm init` a vyplň vlastnosti pre projekt.
### Pridanie Cypressu
Inštalácia prebehne po zadaní príkazu `npm install cypress`.
### Nakonfigurovanie proxy pre Cypress (iba ak si za firemnou proxy)
Vytvorenie PowerShell súboru `cypress-open.ps1` s týmto obsahom:
```powershell
Write-Output "Setting Proxy..."
$env:HTTP_PROXY = "http://192.168.1.3:3128"
$env:HTTPS_PROXY = "http://192.168.1.3:3128"
Write-Output "Opening Cypress..."
npx cypress open
```
Pridanie shortcut skriptu do `package.json` súboru.
```json
"scripts": {
"cypress": "@powershell -NoProfile -ExecutionPolicy Unrestricted -Command ./cypress-open.ps1"
},
```
### Spustenie Cypressu s jeho examples testami
Ak si za firemnou proxy:
`npm run cypress`
Ak nie:
`npx cypress open`
### Nakonfigurovanie Cypress + Cucumber + Typescript
Inštalácia balíčka `cypress-cucumber-preprocessor`. Stačí spustiť `npm install cypress-cucumber-preprocessor`.
Inštalácia balíčka `@cypress/webpack-preprocessor`. Stačí spustiť `npm install @cypress/webpack-preprocessor`.
Inštalácia balíčka `webpack`. Stačí spustiť `npm install webpack`.
Inštalácia balíčka `ts-loader`. Stačí spustiť `npm install ts-loader`.
Inštalácia balíčka `typescript`. Stačí spustiť `npm install typescript`.
Inštalácia balíčka `@types/cypress-cucumber-preprocessor`. Stačí spustiť `npm install @types/cypress-cucumber-preprocessor`.
Pridanie podpory pre features do súboru `cypress.json`:
```json
{
"testFiles": "**/*.feature"
}
```
Vytvorenie config súboru `tsconfig.json` s týmto obsahom:
```json
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"skipLibCheck": true,
"strict": true,
"types": [
"cypress"
]
},
"include": [
"**/*.ts"
]
}
```
Pridanie tohto kódu do súboru `cypress/plugins/index.js` s týmto obsahom:
```javascript
const cucumber = require('cypress-cucumber-preprocessor').default
const webpack = require('@cypress/webpack-preprocessor')
module.exports = (on, config) => {
const options = {
webpackOptions: require('../webpack.config'),
}
on('file:preprocessor', cucumber())
on('file:preprocessor', webpack(options))
}
```
Vytvorenie súboru `webpack.config.js` v adresári `cypress` s týmto obsahom:
```javascript
module.exports = {
resolve: {
extensions: [".ts", ".js"]
},
node: { fs: "empty", child_process: "empty", readline: "empty" },
module: {
rules: [
{
test: /\.ts$/,
exclude: [/node_modules/],
use: [
{
loader: "ts-loader"
}
]
},
{
test: /\.feature$/,
use: [
{
loader: "cypress-cucumber-preprocessor/loader"
}
]
},
{
test: /\.features$/,
use: [
{
loader: "cypress-cucumber-preprocessor/lib/featuresLoader"
}
]
}
]
}
};
```
Pridanie tohto kódu do súboru `package.json` s týmto obsahom:
```javascript
"cypress-cucumber-preprocessor": {
"nonGlobalStepDefinitions": false,
"stepDefinitions": "cypress/integration/step-definitions"
}
```
Vytvorenie súboru `cypress/integration/first.feature` s prvým scenárom:
```
# language: sk
Požiadavka: Prvá požiadavka
Scenár: Prvý scenár
Pokiaľ som všetko dobre nastavil
Tak všetko funguje a otvorí mi Google!
```
Vytvorenie súboru `cypress/integration/step-definitions/first.ts` s krokmi scenáru:
```typescript
import { Given, Then } from 'cypress-cucumber-preprocessor/steps';
Given(`som všetko dobre nastavil`, () => {});
Then(`všetko funguje a otvorí mi Google!`, () => {
cy.visit('https://www.google.com')
});
```
# Level 2 - Registrácia užívateľov
Pre pokrytie oblasti registrovania užívateľov budem postupovať takto:
- vytvorím súbor `registration.feature` (pre scenáre) v cypress/integration/
- vytovrím súbor `registration.ts` (definície krokov scenárov) v cypress/integration/step-definitions/
- vytvorím všetky súbory v adresáry cypress/integration/pages/
- vytvorím súbor `constants.ts` (konštanty celého projektu) v cypress/support/
- do súboru `cypress.json` pridám nastavenie pre testovaciu appku
```json
{
"baseUrl": "https://demo.todos.kros.wtf",
}
```
# Level 3 - Môj prvý test
Pre napísanie prvého testu potrebujeme 2 vytvoriť súbory:
- first.feature súbor (scenár) v cypress/integration/
- first.ts súbor (definície krokov scenára) v cypress/integration/step-definitions
Začneme písaním scenára v .feature súbori
# Level 4 - Scenáre pre Organizations
Napíšeme si komplikovanejšie scenáre a ukážeme si, čo všetko cucumber dokáže.
Zároveň už využijeme aj Page Object Pattern.
Všetky scenáre sú v súbore `cypress/integration/features/organizations.feature`
## 4.1 Scenár s parametrom
V oraganizations.feature vytvoríme prvý scenár,
v ktorom založíme novú firmu s ľubovolným názvom a IČOm.
## 4.2 Pozadie scenára
K požiadavke pridáme ďalší scenár, ktorý nám pridá firmu s inými parametrami. V tomto prípade
si zavedieme pozadie scenára.
## 4.3 Scenár s množstvom parametrov
Ak máme veľa parametrov v kroku scenára, dokážeme ich uložiť do prehľadnej tabuľky.
## 4.4 Náčrt scenára a príklady
Ak sa nám scenár opakuje viackrát s rôznymi hodnotami, môžeme využiť náčrt scenára.
# Level 5 - Scenáre pre Todos
Skúste teraz sami pokryt testami Todos v appke. Čo treba pokryt?
- vytvorenie nových Todos (s rôznymi hodnotami)
- načítanie všetkých Todos
- zmena názvu, description a stavu pre Todo
- odfiltrovanie poznámok podľa ich stavu
- vymazanie všetkých Todos, ktoré majú stav `Completed`
- vymazanie všetkých Todos
BONUS: Zabezpečte, aby testy definitívne zlyhali, až po 3 pokusoch (retrying pattern).
Postup: https://github.com/Bkucera/cypress-plugin-retries
Výsledné scenáre sú v súbore `cypress/integration/features/todos.feature`