Skip to content

Commit 6289cf1

Browse files
vejolvejol
committed
Update material about Vite proxy
1 parent ca2fd6a commit 6289cf1

File tree

2 files changed

+68
-101
lines changed

2 files changed

+68
-101
lines changed

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

Lines changed: 33 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -157,7 +157,7 @@ The test begins by opening the login form.
157157
describe('Note app', function() {
158158
// ...
159159

160-
it('login form can be opened', function() {
160+
it('user can login', function() {
161161
cy.visit('http://localhost:5173')
162162
cy.contains('button', 'login').click()
163163
})
@@ -181,7 +181,7 @@ describe('Note app', function() {
181181
cy.contains('Note app, Department of Computer Science, University of Helsinki 2025')
182182
})
183183

184-
it('login form can be opened', function() {
184+
it('user can login', function() {
185185
cy.contains('button', 'login').click()
186186
})
187187
})
@@ -503,18 +503,20 @@ describe('Note app', function() {
503503

504504
it('it can be made not important', function () {
505505
cy.contains('another note cypress')
506-
.contains('make not important')
506+
.parent()
507+
.contains('button', 'make not important')
507508
.click()
508509

509510
cy.contains('another note cypress')
510-
.contains('make important')
511+
.parent()
512+
.contains('button', 'make important')
511513
})
512514
})
513515
})
514516
})
515517
```
516518

517-
The first command searches for a component containing the text <i>another note cypress</i>, and then for a <i>make not important</i> button within it. It then clicks the button.
519+
The first command does several things. First, it searches for an element containing the text <i>another note cypress</i>. Then, using the _parent()_ method, it finds the parent element, and from within that, it searches for the <i>make not important</i> button and clicks it.
518520

519521
The second command checks that the text on the button has changed to <i>make important</i>.
520522

@@ -763,6 +765,10 @@ describe('Note app', function() {
763765
// ...
764766

765767
describe('when logged in', function() {
768+
beforeEach(function () {
769+
cy.login({ username: 'mluukkai', password: 'salainen' })
770+
})
771+
766772
it('a new note can be created', function() {
767773
cy.contains('new note').click()
768774
cy.get('input').type('a note created by cypress')
@@ -773,9 +779,11 @@ describe('Note app', function() {
773779

774780
describe('and a note exists', function () {
775781
beforeEach(function () {
782+
// highlight-start
776783
cy.contains('new note').click()
777784
cy.get('input').type('another note cypress')
778785
cy.contains('save').click()
786+
// highlight-end
779787
})
780788

781789
it('it can be made important', function () {
@@ -812,9 +820,7 @@ describe('Note app', function() {
812820
// ...
813821

814822
describe('when logged in', function() {
815-
it('a new note can be created', function() {
816-
// ...
817-
})
823+
// ...
818824

819825
describe('and a note exists', function () {
820826
beforeEach(function () {
@@ -834,7 +840,23 @@ describe('Note app', function() {
834840
})
835841
```
836842
837-
There is one more annoying feature in our tests. The application address <i>http:localhost:5173</i> is hardcoded in many places.
843+
There is one more annoying feature in our tests. The frontend address <i>http://localhost:5173</i> and the backend address <i>http://localhost:3001</i> are hardcoded for tests. Of these, the address of the backend is actually useless, because a proxy has been defined in the Vite configuration of the frontend, which forwards all requests made by the frontend to the address <i>http:localhost:5173/api</i> to the backend:
844+
845+
```js
846+
export default defineConfig({
847+
server: {
848+
proxy: {
849+
'/api': {
850+
target: 'http://localhost:3001',
851+
changeOrigin: true,
852+
},
853+
}
854+
},
855+
// ...
856+
})
857+
```
858+
859+
So we can replace all the addresses in the tests from _http://localhost:3001/api/..._ to _http://localhost:5173/api/..._
838860
839861
Let's define the <i>baseUrl</i> for the application in the Cypress pre-generated [configuration file](https://docs.cypress.io/guides/references/configuration) <i>cypress.config.js</i>:
840862
@@ -850,10 +872,10 @@ module.exports = defineConfig({
850872
})
851873
```
852874
853-
All the commands in the tests use the address of the application
875+
All commands in the tests and in the <i>command.js</i> file that use the application's address
854876
855877
```js
856-
cy.visit('http://localhost:5173' )
878+
cy.visit('http://localhost:5173')
857879
```
858880
859881
can be transformed into
@@ -862,44 +884,6 @@ can be transformed into
862884
cy.visit('')
863885
```
864886
865-
The backend's hardcoded address <i>http://localhost:3001</i> is still in the tests. Cypress [documentation](https://docs.cypress.io/guides/guides/environment-variables) recommends defining other addresses used by the tests as environment variables.
866-
867-
Let's expand the configuration file <i>cypress.config.js</i> as follows:
868-
869-
```js
870-
const { defineConfig } = require("cypress")
871-
872-
module.exports = defineConfig({
873-
e2e: {
874-
setupNodeEvents(on, config) {
875-
},
876-
baseUrl: 'http://localhost:5173',
877-
env: {
878-
BACKEND: 'http://localhost:3001/api' // highlight-line
879-
}
880-
},
881-
})
882-
```
883-
884-
Let's replace all the backend addresses from the tests in the following way
885-
886-
```js
887-
describe('Note app', function() {
888-
beforeEach(function() {
889-
890-
cy.request('POST', `${Cypress.env('BACKEND')}/testing/reset`) // highlight-line
891-
const user = {
892-
name: 'Matti Luukkainen',
893-
username: 'mluukkai',
894-
password: 'secret'
895-
}
896-
cy.request('POST', `${Cypress.env('BACKEND')}/users`, user) // highlight-line
897-
cy.visit('')
898-
})
899-
// ...
900-
})
901-
```
902-
903887
### Changing the importance of a note
904888
905889
Lastly, let's take a look at the test we did for changing the importance of a note.

‎src/content/5/fi/osa5e.md‎

Lines changed: 35 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -151,7 +151,7 @@ Aloitetaan kirjautumislomakkeen avaamisella.
151151
describe('Note app', function() {
152152
// ...
153153

154-
it('login form can be opened', function() {
154+
it('user can login', function() {
155155
cy.visit('http://localhost:5173')
156156
cy.contains('button', 'login').click()
157157
})
@@ -175,7 +175,7 @@ describe('Note app', function() {
175175
cy.contains('Note app, Department of Computer Science, University of Helsinki 2025')
176176
})
177177

178-
it('login form can be opened', function() {
178+
it('user can login', function() {
179179
cy.contains('button', 'login').click()
180180
})
181181
})
@@ -467,7 +467,7 @@ const NoteForm = ({ createNote }) => {
467467
}
468468
```
469469

470-
On useita eri tapoja testata asia. Seuraavassa etsitään ensin muistiinpano ja klikataan sen nappia <i>make important</i>. Tämän jälkeen tarkistetaan että muistiinpano sisältää napin <i>make not important</i>.
470+
On useita eri tapoja testata asia. Seuraavassa etsitään ensin muistiinpano ja klikataan sen nappia <i>make not important</i>. Tämän jälkeen tarkistetaan että muistiinpano sisältää napin <i>make important</i>.
471471

472472
```js
473473
describe('Note app', function() {
@@ -483,20 +483,22 @@ describe('Note app', function() {
483483
cy.contains('save').click()
484484
})
485485

486-
it('it can be made important', function () {
486+
it('it can be made not important', function () {
487487
cy.contains('another note cypress')
488-
.contains('make not important')
488+
.parent()
489+
.contains('button', 'make not important')
489490
.click()
490491

491492
cy.contains('another note cypress')
492-
.contains('make important')
493+
.parent()
494+
.contains('button', 'make important')
493495
})
494496
})
495497
})
496498
})
497499
```
498500

499-
Ensimmäinen komento etsii ensin komponentin, missä on teksti <i>another note cypress</i> ja sen sisältä painikkeen <i>make not important</i> ja klikkaa sitä.
501+
Ensimmäinen komento tekee monta eri asiaa. Ensin etsitään elementti, missä on teksti <i>another note cypress</i>. Sen jälkeen metodilla _parent()_ haetaan elementin vanhempi, ja sen sisältä etsitään painike <i>make not important</i> ja klikataan sitä.
500502

501503
Toinen komento varmistaa, että saman napin teksti on vaihtunut muotoon <i>make important</i>.
502504

@@ -728,6 +730,10 @@ describe('Note app', function() {
728730
// ...
729731

730732
describe('when logged in', function() {
733+
beforeEach(function () {
734+
cy.login({ username: 'mluukkai', password: 'salainen' })
735+
})
736+
731737
it('a new note can be created', function() {
732738
cy.contains('new note').click()
733739
cy.get('input').type('a note created by cypress')
@@ -738,9 +744,11 @@ describe('Note app', function() {
738744

739745
describe('and a note exists', function () {
740746
beforeEach(function () {
747+
// highlight-start
741748
cy.contains('new note').click()
742749
cy.get('input').type('another note cypress')
743750
cy.contains('save').click()
751+
// highlight-end
744752
})
745753

746754
it('it can be made important', function () {
@@ -777,9 +785,7 @@ describe('Note app', function() {
777785
// ...
778786

779787
describe('when logged in', function() {
780-
it('a new note can be created', function() {
781-
// ...
782-
})
788+
// ...
783789

784790
describe('and a note exists', function () {
785791
beforeEach(function () {
@@ -799,7 +805,23 @@ describe('Note app', function() {
799805
})
800806
```
801807
802-
Testeissämme on vielä eräs ikävä piirre. Sovelluksen osoite <i>http:localhost:5173</i> on kovakoodattuna moneen kohtaan.
808+
Testeissämme on vielä eräs ikävä piirre. Sovelluksen frontendin osoite <i>http://localhost:5173</i> sekä backendin osoite <i>http://localhost:3001</i> on kovakoodattuna testeihin. Näistä oikeastaan backendin osoite on turha, sillä frontendin Vite-konfiguraatioon on määritelty proxy, joka forwardoi kaikki osoitteeseen <i>http://localhost:5173/api</i> menevät frontendin tekemät pyynnöt backendiin:
809+
810+
```js
811+
export default defineConfig({
812+
server: {
813+
proxy: {
814+
'/api': {
815+
target: 'http://localhost:3001',
816+
changeOrigin: true,
817+
},
818+
}
819+
},
820+
// ...
821+
})
822+
```
823+
824+
Voimme siis korvata testeissä kaikki osoitteet _http://localhost:3001/api/..._ osoitteella _http://localhost:5173/api/..._
803825
804826
Määritellään sovellukselle <i>baseUrl</i> Cypressin valmiiksi generoimaan [konfiguraatiotiedostoon](https://docs.cypress.io/guides/references/configuration) <i>cypress.config.js</i>:
805827
@@ -815,57 +837,18 @@ module.exports = defineConfig({
815837
})
816838
```
817839
818-
Kaikki testeissä olevat sovelluksen osoitetta käyttävät komennot
840+
Kaikki testeissä ja <i>command.js</i>-tiedostossa olevat sovelluksen osoitetta käyttävät komennot
819841
820842
```js
821843
cy.visit('http://localhost:5173')
822844
```
823845
824-
voidaan muuttaa muotoon
846+
voidaan nyt muuttaa muotoon
825847
826848
```js
827849
cy.visit('')
828850
```
829851
830-
Testeihin jää edelleen backendin kovakoodattu osoite <i>http://localhost:3001</i>. Muut testien käyttämät osoitteet Cypressin [dokumentaatio](https://docs.cypress.io/guides/guides/environment-variables) kehoittaa määrittelemään ympäristömuuttujina.
831-
832-
Laajennetaan konfiguraatiotiedostoa <i>cypress.config.js</i> seuraavasti:
833-
834-
```js
835-
const { defineConfig } = require("cypress")
836-
837-
module.exports = defineConfig({
838-
e2e: {
839-
setupNodeEvents(on, config) {
840-
},
841-
baseUrl: 'http://localhost:5173',
842-
},
843-
// highlight-start
844-
env: {
845-
BACKEND: 'http://localhost:3001/api'
846-
}
847-
// highlight-end
848-
})
849-
```
850-
851-
Korvataan testeistä kaikki backendin osoitteet seuraavaan tapaan
852-
853-
```js
854-
describe('Note app', function() {
855-
beforeEach(function() {
856-
cy.visit('')
857-
cy.request('POST', `${Cypress.env('BACKEND')}/testing/reset`) // highlight-line
858-
const user = {
859-
name: 'Matti Luukkainen',
860-
username: 'mluukkai',
861-
password: 'salainen'
862-
}
863-
cy.request('POST', `${Cypress.env('BACKEND')}/users`, user) // highlight-line
864-
})
865-
// ...
866-
})
867-
```
868-
869852
### Muistiinpanon tärkeyden muutos
870853
871854
Tarkastellaan vielä aiemmin tekemäämme testiä, joka varmistaa että muistiinpanon tärkeyttä on mahdollista muuttaa. Muutetaan testin alustuslohkoa siten, että se luo yhden sijaan kolme muistiinpanoa:

0 commit comments

Comments
 (0)