Skip to content

Commit 7ff4bb4

Browse files
mluukkaimluukkai
committed
moar playwright
1 parent ad9dd68 commit 7ff4bb4

File tree

1 file changed

+78
-90
lines changed

1 file changed

+78
-90
lines changed

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

Lines changed: 78 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -562,7 +562,6 @@ describe('Note app', () => {
562562
await page.getByRole('button', { name: 'new note' }).click()
563563
await page.getByRole('textbox').fill('another note by playwright')
564564
await page.getByRole('button', { name: 'save' }).click()
565-
await expect(await page.getByText('another note by playwright')).toBeVisible()
566565
})
567566

568567
test('it can be made important', async ({ page }) => {
@@ -761,18 +760,18 @@ API:n läpi tapahtuva kirjautuminen tehdään tuttuun tapaan parametrina saatava
761760
762761
Jos ja kun sovellukselle kirjoitetaan lisää testejä, joudutaan kirjautumisen hoitavaa koodia soveltamaan useassa paikassa. Koodi kannattaakin eristää apufunktioksi, joka sijoitetaan esim. tiedostoon _tests/helper.js_:
763762
764-
Komennot määritellään tiedostoon <i>cypress/support/commands.js</i>. Kirjautumisen tekevä komento näyttää seuraavalta:
765-
766763
```js
767764
const loginWith = async (page, request, username, password) => {
768765
const response = await request.post('http://localhost:3001/api/login', {
769766
data: { username, password, }
770767
})
771768

769+
const jsonResponse = await response.json()
770+
772771
await page.evaluate((body) => {
773772
localStorage.setItem('loggedNoteappUser', JSON.stringify(body));
774-
}, await response.json())
775-
773+
}, jsonResponse)
774+
776775
page.reload()
777776
}
778777

@@ -804,143 +803,132 @@ Sama koskee oikeastaan myös uuden muistiinpanon luomista. Sitä varten on olema
804803
describe('Note app', function() {
805804
// ...
806805

807-
describe('when logged in', function() {
808-
it('a new note can be created', function() {
809-
cy.contains('new note').click()
810-
cy.get('input').type('a note created by cypress')
811-
cy.contains('save').click()
812-
813-
cy.contains('a note created by cypress')
806+
describe('when logged in', () => {
807+
test('a new note can be created', async ({ page }) => {
808+
await page.getByRole('button', { name: 'new note' }).click()
809+
await page.getByRole('textbox').fill('a note created by playwright')
810+
await page.getByRole('button', { name: 'save' }).click()
811+
await expect(page.getByText('a note created by playwright')).toBeVisible()
814812
})
815-
816-
describe('and a note exists', function () {
817-
beforeEach(function () {
818-
cy.contains('new note').click()
819-
cy.get('input').type('another note cypress')
820-
cy.contains('save').click()
813+
814+
describe('and a note exists', () => {
815+
beforeEach(async ({ page }) => {
816+
await page.getByRole('button', { name: 'new note' }).click()
817+
await page.getByRole('textbox').fill('another note by playwright')
818+
await page.getByRole('button', { name: 'save' }).click()
821819
})
822-
823-
it('it can be made important', function () {
820+
821+
test('it can be made important', async ({ page }) => {
824822
// ...
825823
})
826824
})
827825
})
828826
})
829827
```
830828
831-
Eristetään myös muistiinpanon lisääminen omaksi komennoksi, joka tekee lisäämisen suoraan HTTP POST:lla:
829+
Eristetään myös muistiinpanon lisääminen omaksi komennoksi, joka tekee lisäämisen suoraan HTTP POST:lla. Tiedosto _tests/helper.js_ laajenee seuraavasti:
832830
833831
```js
834-
Cypress.Commands.add('createNote', ({ content, important }) => {
835-
cy.request({
836-
url: 'http://localhost:3001/api/notes',
837-
method: 'POST',
838-
body: { content, important },
832+
let jsonResponse = null // highlight-line
833+
834+
const loginWith = async (page, request, username, password) => {
835+
const response = await request.post('http://localhost:3001/api/login', {
836+
data: { username, password, }
837+
})
838+
839+
jsonResponse = await response.json()
840+
841+
await page.evaluate((jsonResponse) => {
842+
localStorage.setItem('loggedNoteappUser', JSON.stringify(jsonResponse));
843+
}, jsonResponse)
844+
845+
page.reload()
846+
}
847+
848+
// highlight-start
849+
const createNote = async (page, request, content, important) => {
850+
await request.post('http://localhost:3001/api/notes', {
851+
data: { content, important, },
839852
headers: {
840-
'Authorization': `Bearer ${JSON.parse(localStorage.getItem('loggedNoteappUser')).token}`
853+
'Authorization': `Bearer ${jsonResponse.token}`
841854
}
842855
})
843856

844-
cy.visit('http://localhost:5173')
845-
})
857+
page.reload()
858+
}
859+
// highlight-end
860+
861+
export { loginWith, createNote }
846862
```
847863
848-
Komennon suoritus edellyttää, että käyttäjä on kirjaantuneena sovelluksessa ja käyttäjän tiedot talletettuna sovelluksen localStorageen.
864+
Komennon suoritus edellyttää, että käyttäjä on kirjaantunut sovellukseen API:n kautta.
849865
850866
Testin alustuslohko yksinkertaistuu seuraavasti:
851867
852868
```js
853-
describe('Note app', function() {
869+
describe('Note app', () => {
854870
// ...
855871

856-
describe('when logged in', function() {
857-
it('a new note can be created', function() {
872+
describe('when logged in', () => {
873+
test('a new note can be created', ({ page }) => {
858874
// ...
859875
})
860876

861-
describe('and a note exists', function () {
862-
beforeEach(function () {
863-
// highlight-start
864-
cy.createNote({
865-
content: 'another note cypress',
866-
important: true
867-
})
868-
// highlight-end
877+
describe('and a note exists', () => {
878+
beforeEach(async ({ page, request }) => {
879+
await createNote(page, request, 'another note by playwright', true) // highlight-line
869880
})
870881

871-
it('it can be made important', function () {
882+
test('it can be made important', ({ page }) => {
872883
// ...
873884
})
874885
})
875886
})
876887
})
877888
```
878889
879-
Testeissämme on vielä eräs ikävä piirre. Sovelluksen osoite <i>http:localhost:5173</i> on kovakoodattuna moneen kohtaan.
880-
881-
Määritellään sovellukselle <i>baseUrl</i> Cypressin valmiiksi generoimaan [konfiguraatiotiedostoon](https://docs.cypress.io/guides/references/configuration) <i>cypress.config.js</i>:
890+
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:
882891
883892
```js
884-
const { defineConfig } = require("cypress")
885-
886-
module.exports = defineConfig({
887-
e2e: {
888-
setupNodeEvents(on, config) {
889-
},
890-
baseUrl: 'http://localhost:5173' // highlight-line
893+
export default defineConfig({
894+
server: {
895+
proxy: {
896+
'/api': {
897+
target: 'http://localhost:3001',
898+
changeOrigin: true,
899+
},
900+
}
891901
},
902+
// ...
892903
})
893904
```
894905
895-
Kaikki testeissä olevat sovelluksen osoitetta käyttävät komennot
906+
Voimme siis korvata testeissä kaikki osoitteet _http://localhost:3001/api/..._ osoitteella _http://localhost:5173/api/..._
896907
897-
```js
898-
cy.visit('http://localhost:5173')
899-
```
900-
901-
voidaan muuttaa muotoon
908+
Määrittellään sovellukselle <i>baseUrl</i>:in testien konfiguraatiotiedostoon <i>playwright.config.js</i>:
902909
903910
```js
904-
cy.visit('')
911+
module.exports = defineConfig({
912+
// ...
913+
use: {
914+
baseURL: 'http://localhost:5173',
915+
},
916+
// ...
917+
}
905918
```
906919
907-
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ömuutujina.
908-
909-
Laajennetaan konfiguraatiotiedostoa <i>cypress.config.js</i> seuraavasti:
920+
Kaikki testeissä olevat sovelluksen urlia käyttävät komennot esim.
910921
911922
```js
912-
const { defineConfig } = require("cypress")
913-
914-
module.exports = defineConfig({
915-
e2e: {
916-
setupNodeEvents(on, config) {
917-
},
918-
baseUrl: 'http://localhost:5173',
919-
},
920-
// highlight-start
921-
env: {
922-
BACKEND: 'http://localhost:3001/api'
923-
}
924-
// highlight-end
925-
})
923+
await page.goto('http://localhost:5173')
924+
await page.post('http://localhost:5173/api/tests/reset')
926925
```
927926
928-
Korvataan testeistä kaikki backendin osoitteet seuraavaan tapaan
927+
voidaan muuttaa muotoon
929928
930929
```js
931-
describe('Note ', function() {
932-
beforeEach(function() {
933-
cy.visit('')
934-
cy.request('POST', `${Cypress.env('BACKEND')}/testing/reset`) // highlight-line
935-
const user = {
936-
name: 'Matti Luukkainen',
937-
username: 'mluukkai',
938-
password: 'salainen'
939-
}
940-
cy.request('POST', `${Cypress.env('BACKEND')}/users`, user) // highlight-line
941-
})
942-
// ...
943-
})
930+
await page.goto('/')
931+
await page.post('/api/tests/reset')
944932
```
945933
946934
Testit ja frontendin koodi on kokonaisuudessaan [GitHubissa](https://github.com/fullstack-hy2020/part2-notes-frontend/tree/part5-10), branchissa <i>part5-10</i>.

0 commit comments

Comments
 (0)