Skip to content

Commit f332e98

Browse files
vejolvejol
committed
Make small fixes to part5e Cypress
1 parent 6a4b19c commit f332e98

File tree

2 files changed

+57
-63
lines changed

2 files changed

+57
-63
lines changed

‎src/content/5/en/part5e.md‎

Lines changed: 28 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -47,15 +47,12 @@ Let's add an npm script to <i>the backend</i> which starts it in test mode, or s
4747
{
4848
// ...
4949
"scripts": {
50-
"start": "NODE_ENV=production node index.js",
51-
"dev": "NODE_ENV=development nodemon index.js",
52-
"build:ui": "rm -rf build && cd ../frontend/ && npm run build && cp -r build ../backend",
53-
"deploy": "fly deploy",
54-
"deploy:full": "npm run build:ui && npm run deploy",
55-
"logs:prod": "fly logs",
50+
"start": "cross-env NODE_ENV=production node index.js",
51+
"dev": "cross-env NODE_ENV=development node --watch index.js",
52+
"test": "cross-env NODE_ENV=test node --test",
5653
"lint": "eslint .",
57-
"test": "jest --verbose --runInBand",
58-
"start:test": "NODE_ENV=test node index.js" // highlight-line
54+
// ...
55+
"start:test": "cross-env NODE_ENV=test node --watch index.js" // highlight-line
5956
},
6057
// ...
6158
}
@@ -94,7 +91,7 @@ describe('Note app', function() {
9491
it('front page can be opened', function() {
9592
cy.visit('http://localhost:5173')
9693
cy.contains('Notes')
97-
cy.contains('Note app, Department of Computer Science, University of Helsinki 2023')
94+
cy.contains('Note app, Department of Computer Science, University of Helsinki 2025')
9895
})
9996
})
10097
```
@@ -105,7 +102,7 @@ Running the test shows how the application behaves as the test is run:
105102

106103
![cypress showing automation of note test](../../images/5/56new.png)
107104

108-
The structure of the test should look familiar. They use <i>describe</i> blocks to group different test cases, just like Jest. The test cases have been defined with the <i>it</i> method. Cypress borrowed these parts from the [Mocha](https://mochajs.org/) testing library that it uses under the hood.
105+
The structure of the test should look familiar. They use <i>describe</i> blocks to group different test cases, just like Vitest. The test cases have been defined with the <i>it</i> method. Cypress borrowed these parts from the [Mocha](https://mochajs.org/) testing library that it uses under the hood.
109106

110107
[cy.visit](https://docs.cypress.io/api/commands/visit.html) and [cy.contains](https://docs.cypress.io/api/commands/contains.html) are Cypress commands, and their purpose is quite obvious.
111108
[cy.visit](https://docs.cypress.io/api/commands/visit.html) opens the web address given to it as a parameter in the browser used by the test. [cy.contains](https://docs.cypress.io/api/commands/contains.html) searches for the string it received as a parameter in the page.
@@ -117,7 +114,7 @@ describe('Note app', () => { // highlight-line
117114
it('front page can be opened', () => { // highlight-line
118115
cy.visit('http://localhost:5173')
119116
cy.contains('Notes')
120-
cy.contains('Note app, Department of Computer Science, University of Helsinki 2023')
117+
cy.contains('Note app, Department of Computer Science, University of Helsinki 2025')
121118
})
122119
})
123120
```
@@ -131,7 +128,7 @@ describe('Note app', function() {
131128
it('front page can be opened', function() {
132129
cy.visit('http://localhost:5173')
133130
cy.contains('Notes')
134-
cy.contains('Note app, Department of Computer Science, University of Helsinki 2023')
131+
cy.contains('Note app, Department of Computer Science, University of Helsinki 2025')
135132
})
136133

137134
// highlight-start
@@ -151,7 +148,7 @@ Let's remove the failing code from the test.
151148

152149
### Writing to a form
153150

154-
Let's extend our tests so that our new test tries to log in to our application.
151+
Let's extend our tests so that our new test tries to login to our application.
155152
We assume our backend contains a user with the username <i>mluukkai</i> and password <i>salainen</i>.
156153

157154
The test begins by opening the login form.
@@ -162,7 +159,7 @@ describe('Note app', function() {
162159

163160
it('login form can be opened', function() {
164161
cy.visit('http://localhost:5173')
165-
cy.contains('log in').click()
162+
cy.contains('login').click()
166163
})
167164
})
168165
```
@@ -181,11 +178,11 @@ describe('Note app', function() {
181178

182179
it('front page can be opened', function() {
183180
cy.contains('Notes')
184-
cy.contains('Note app, Department of Computer Science, University of Helsinki 2023')
181+
cy.contains('Note app, Department of Computer Science, University of Helsinki 2025')
185182
})
186183

187184
it('login form can be opened', function() {
188-
cy.contains('log in').click()
185+
cy.contains('login').click()
189186
})
190187
})
191188
```
@@ -198,7 +195,7 @@ We can access the first and the last input field on the page, and write to them
198195

199196
```js
200197
it('user can login', function () {
201-
cy.contains('log in').click()
198+
cy.contains('login').click()
202199
cy.get('input:first').type('mluukkai')
203200
cy.get('input:last').type('salainen')
204201
})
@@ -248,8 +245,8 @@ The test becomes:
248245
```js
249246
describe('Note app', function() {
250247
// ..
251-
it('user can log in', function() {
252-
cy.contains('log in').click()
248+
it('user can login', function() {
249+
cy.contains('login').click()
253250
cy.get('#username').type('mluukkai') // highlight-line
254251
cy.get('#password').type('salainen') // highlight-line
255252
cy.get('#login-button').click() // highlight-line
@@ -275,7 +272,7 @@ describe('Note app', function() {
275272
// highlight-start
276273
describe('when logged in', function() {
277274
beforeEach(function() {
278-
cy.contains('log in').click()
275+
cy.contains('login').click()
279276
cy.get('input:first').type('mluukkai')
280277
cy.get('input:last').type('salainen')
281278
cy.get('#login-button').click()
@@ -316,8 +313,8 @@ The structure of the tests looks like so:
316313
describe('Note app', function() {
317314
// ...
318315

319-
it('user can log in', function() {
320-
cy.contains('log in').click()
316+
it('user can login', function() {
317+
cy.contains('login').click()
321318
cy.get('#username').type('mluukkai')
322319
cy.get('#password').type('salainen')
323320
cy.get('#login-button').click()
@@ -327,7 +324,7 @@ describe('Note app', function() {
327324

328325
describe('when logged in', function() {
329326
beforeEach(function() {
330-
cy.contains('log in').click()
327+
cy.contains('login').click()
331328
cy.get('input:first').type('mluukkai')
332329
cy.get('input:last').type('salainen')
333330
cy.get('#login-button').click()
@@ -340,7 +337,7 @@ describe('Note app', function() {
340337
})
341338
```
342339

343-
Cypress runs the tests in the order they are in the code. So first it runs <i>user can log in</i>, where the user logs in. Then cypress will run <i>a new note can be created</i> for which a <i>beforeEach</i> block logs in as well.
340+
Cypress runs the tests in the order they are in the code. So first it runs <i>user can login</i>, where the user logs in. Then cypress will run <i>a new note can be created</i> for which a <i>beforeEach</i> block logs in as well.
344341
Why do this? Isn't the user logged in after the first test?
345342
No, because <i>each</i> test starts from zero as far as the browser is concerned.
346343
All changes to the browser's state are reversed after each test.
@@ -506,7 +503,7 @@ describe('Note app', function() {
506503
// ...
507504

508505
it.only('login fails with wrong password', function() {
509-
cy.contains('log in').click()
506+
cy.contains('login').click()
510507
cy.get('#username').type('mluukkai')
511508
cy.get('#password').type('wrong')
512509
cy.get('#login-button').click()
@@ -594,7 +591,7 @@ Let's finish the test so that it also checks that the application does not rende
594591
595592
```js
596593
it('login fails with wrong password', function() {
597-
cy.contains('log in').click()
594+
cy.contains('login').click()
598595
cy.get('#username').type('mluukkai')
599596
cy.get('#password').type('wrong')
600597
cy.get('#login-button').click()
@@ -631,7 +628,7 @@ Currently, we have the following tests:
631628
```js
632629
describe('Note app', function() {
633630
it('user can login', function() {
634-
cy.contains('log in').click()
631+
cy.contains('login').click()
635632
cy.get('#username').type('mluukkai')
636633
cy.get('#password').type('salainen')
637634
cy.get('#login-button').click()
@@ -645,7 +642,7 @@ describe('Note app', function() {
645642

646643
describe('when logged in', function() {
647644
beforeEach(function() {
648-
cy.contains('log in').click()
645+
cy.contains('login').click()
649646
cy.get('input:first').type('mluukkai')
650647
cy.get('input:last').type('salainen')
651648
cy.get('#login-button').click()
@@ -664,7 +661,7 @@ First, we test logging in. Then, in their own describe block, we have a bunch of
664661
As we said above, each test starts from zero! Tests do not start from the state where the previous tests ended.
665662
666663
The Cypress documentation gives us the following advice: [Fully test the login flow – but only once](https://docs.cypress.io/guides/end-to-end-testing/testing-your-app#Fully-test-the-login-flow----but-only-once).
667-
So instead of logging in a user using the form in the <i>beforeEach</i> block, we are going to bypass the UI and do a HTTP request to the backend to log in. The reason for this is that logging in with a HTTP request is much faster than filling out a form.
664+
So instead of logging in a user using the form in the <i>beforeEach</i> block, we are going to bypass the UI and do a HTTP request to the backend to login. The reason for this is that logging in with a HTTP request is much faster than filling out a form.
668665
669666
Our situation is a bit more complicated than in the example in the Cypress documentation because when a user logs in, our application saves their details to the localStorage.
670667
However, Cypress can handle that as well.
@@ -857,7 +854,7 @@ module.exports = defineConfig({
857854
Let's replace all the backend addresses from the tests in the following way
858855
859856
```js
860-
describe('Note ', function() {
857+
describe('Note app', function() {
861858
beforeEach(function() {
862859

863860
cy.request('POST', `${Cypress.env('BACKEND')}/testing/reset`) // highlight-line
@@ -983,7 +980,7 @@ Finally, some notes on how Cypress works and debugging your tests.
983980
Because of the form of the Cypress tests, it gives the impression that they are normal JavaScript code, and we could for example try this:
984981
985982
```js
986-
const button = cy.contains('log in')
983+
const button = cy.contains('login')
987984
button.click()
988985
debugger
989986
cy.contains('logout').click()

0 commit comments

Comments
 (0)