Improve consistency in part5e

Author: vejol

src/content/5/en/part5e.md

@@ -503,20 +503,18 @@ describe('Note app', function() {
 
       it('it can be made not important', function () {
         cy.contains('another note cypress')
-          .parent()
           .contains('button', 'make not important')
           .click()
 
         cy.contains('another note cypress')
-          .parent()
           .contains('button', 'make important')
       })
     })
   })
 })
 ```
 
-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.
+The first command does several things. First, it searches for an element containing the text <i>another note cypress</i>. Then, within the found element, it searches for the <i>make not important</i> button and clicks it.
 
 The second command checks that the text on the button has changed to <i>make important</i>.
 
@@ -887,54 +885,61 @@ cy.visit('')
 ### Changing the importance of a note
 
 Lastly, let's take a look at the test we did for changing the importance of a note.
-First, we'll change the beforeEach block so that it creates three notes instead of one:
+First, we'll change the beforeEach block so that it creates three notes instead of one. The tests change as follows:
 
 ```js
-describe('when logged in', function() {
-  describe('and several notes exist', function () {
+describe('when logged in', function () {
+  beforeEach(function () {
+    cy.login({ username: 'mluukkai', password: 'salainen' })
+  })
+
+  it('a new note can be created', function () {
+    cy.contains('new note').click()
+    cy.get('input').type('a note created by cypress')
+    cy.contains('save').click()
+    cy.contains('a note created by cypress')
+  })
+  describe('and several notes exist', function () { // highlight-line
     beforeEach(function () {
-      // highlight-start
-      cy.login({ username: 'mluukkai', password: 'salainen' })
-      cy.createNote({ content: 'first note', important: false })
-      cy.createNote({ content: 'second note', important: false })
-      cy.createNote({ content: 'third note', important: false })
-      // highlight-end
+      cy.createNote({ content: 'first note', important: true }) // highlight-line
+      cy.createNote({ content: 'second note', important: true }) // highlight-line
+      cy.createNote({ content: 'third note', important: true }) // highlight-line
     })
 
-    it('one of those can be made important', function () {
-      cy.contains('second note')
-        .contains('make important')
+    it('one of those can be made non important', function () { // highlight-line
+      cy.contains('second note') // highlight-line
+        .contains('button', 'make not important')
         .click()
 
-      cy.contains('second note')
-        .contains('make not important')
+      cy.contains('second note') // highlight-line
+        .contains('button', 'make important')
     })
   })
 })
 ```
 
 How does the [cy.contains](https://docs.cypress.io/api/commands/contains.html) command actually work?
 
-When we click the _cy.contains('second note')_ command in Cypress [Test Runner](https://docs.cypress.io/guides/core-concepts/cypress-app#Test-Runner), we see that the command searches for the element containing the text <i>second note</i>:
+When we click the _-contains 'second note'_ command in Cypress [Test Runner](https://docs.cypress.io/guides/core-concepts/cypress-app#Test-Runner), we see that the command searches for the element containing the text <i>second note</i>:
 
-![cypress test runner clicking second note](../../images/5/34new.png)
+![cypress test runner clicking second note](../../images/5/34eb.png)
 
-By clicking the next line _.contains('make important')_ we see that the test uses the 'make important' button corresponding to the <i>second note</i>:
+By clicking the next line _-contains 'button, make not important'_ we see that the test uses the <i>make not important</i> button corresponding to the <i>second note</i>:
 
-![cypress test runner clicking make important](../../images/5/35new.png)
+![cypress test runner clicking make important](../../images/5/35a.png)
 
 When chained, the second <i>contains</i> command <i>continues</i> the search from within the component found by the first command.
 
 If we had not chained the commands, and instead write:
 
 ```js
 cy.contains('second note')
-cy.contains('make important').click()
+cy.contains('button', 'make not important').click()
 ```
 
 the result would have been entirely different. The second line of the test would click the button of a wrong note:
 
-![cypress showing error and incorrectly trying to click first button](../../images/5/36new.png)
+![cypress showing error and incorrectly trying to click first button](../../images/5/36.png)
 
 When coding tests, you should check in the test runner that the tests use the right components!
 
@@ -956,15 +961,17 @@ const Note = ({ note, toggleImportance }) => {
 
 Our tests break! As the test runner reveals, _cy.contains('second note')_ now returns the component containing the text, and the button is not in it.
 
-![cypress showing test is broken trying to click make important](../../images/5/37new.png)
+![cypress showing test is broken trying to click make important](../../images/5/37.png)
 
 One way to fix this is the following:
 
 ```js
-it('one of those can be made important', function () {
+it('one of those can be made non important', function () {
   cy.contains('second note').parent().find('button').click()
-  cy.contains('second note').parent().find('button')
-    .should('contain', 'make not important')
+  cy.contains('second note')
+    .parent()
+    .find('button')
+    .should('contain', 'make important')
 })
 ```
 
@@ -978,14 +985,14 @@ Unfortunately, we have some copy-paste in the tests now, because the code for se
 In these kinds of situations, it is possible to use the [as](https://docs.cypress.io/api/commands/as.html) command:
 
 ```js
-it('one of those can be made important', function () {
+it('one of those can be made non important', function () {
   cy.contains('second note').parent().find('button').as('theButton')
   cy.get('@theButton').click()
-  cy.get('@theButton').should('contain', 'make not important')
+  cy.get('@theButton').should('contain', 'make important')
 })
 ```
 
-Now the first line finds the right button and uses <i>as</i> to save it as <i>theButton</i>. The following lines can use the named element with <i>cy.get('@theButton')</i>.
+Now the first line finds the right button and uses <i>as</i> to save it as <i>theButton</i>. The following lines can use the named element with _cy.get('@theButton')_.
 
 ### Running and debugging the tests
 
@@ -1022,7 +1029,7 @@ Stopping the test execution with the debugger is [possible](https://docs.cypress
 The developer console is all sorts of useful when debugging your tests.
 You can see the HTTP requests done by the tests on the Network tab, and the console tab will show you information about your tests:
 
-![developer console while running cypress](../../images/5/38new.png)
+![developer console while running cypress](../../images/5/38.png)
 
 So far we have run our Cypress tests using the graphical test runner. It is also possible to run them [from the command line](https://docs.cypress.io/guides/guides/command-line.html). We just have to add an npm script for it:
 
@@ -1035,9 +1042,9 @@ So far we have run our Cypress tests using the graphical test runner. It is also
 
 Now we can run our tests from the command line with the command <i>npm run test:e2e</i>
 
-![terminal output of running npm e2e tests showing passed](../../images/5/39new.png)
+![terminal output of running npm e2e tests showing passed](../../images/5/39.png)
 
-Note that videos of the test execution will be saved to <i>cypress/videos/</i>, so you should probably git ignore this directory. It is also possible to [turn off](https://docs.cypress.io/guides/guides/screenshots-and-videos#Videos) the making of videos.
+It is also possible to record a video of the test execution in Cypress. Recording a video can be especially useful, for example, when debugging or in a CI/CD pipeline, as the video allows you to easily review what happened in the browser before an error occurred. The feature is disabled by default; instructions for enabling it can be found in the Cypress [documentation](https://docs.cypress.io/guides/guides/screenshots-and-videos#Videos).
 
 Tests are found in [GitHub](https://github.com/fullstack-hy2020/notes-e2e-cypress/).
 

src/content/5/fi/osa5e.md

@@ -485,20 +485,18 @@ describe('Note app', function() {
 
       it('it can be made not important', function () {
         cy.contains('another note cypress')
-          .parent()
           .contains('button', 'make not important')
           .click()
 
         cy.contains('another note cypress')
-          .parent()
           .contains('button', 'make important')
       })
     })
   })
 })
 ```
 
-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ä. 
+Ensimmäinen komento tekee monta eri asiaa. Ensin etsitään elementti, missä on teksti <i>another note cypress</i>. Sitten löydetyn elementin sisältä etsitään painike <i>make not important</i> ja klikataan sitä. 
 
 Toinen komento varmistaa, että saman napin teksti on vaihtunut muotoon <i>make important</i>.
 
@@ -851,54 +849,62 @@ cy.visit('')
 
 ### Muistiinpanon tärkeyden muutos
 
-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:
+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. Testit muuttuvat seuraavasti:
 
 ```js
-describe('when logged in', function() {
-  describe('and several notes exist', function () {
+describe('when logged in', function () {
+  beforeEach(function () {
+    cy.login({ username: 'mluukkai', password: 'salainen' })
+  })
+
+  it('a new note can be created', function () {
+    cy.contains('new note').click()
+    cy.get('input').type('a note created by cypress')
+    cy.contains('save').click()
+    cy.contains('a note created by cypress')
+  })
+  describe('and several notes exist', function () { // highlight-line
     beforeEach(function () {
-      // highlight-start
-      cy.createNote({ content: 'first note', important: false })
-      cy.createNote({ content: 'second note', important: false })
-      cy.createNote({ content: 'third note', important: false })
-      // highlight-end
+      cy.createNote({ content: 'first note', important: true }) // highlight-line
+      cy.createNote({ content: 'second note', important: true }) // highlight-line
+      cy.createNote({ content: 'third note', important: true }) // highlight-line
     })
 
-    it('one of those can be made important', function () {
-      cy.contains('second note')
-        .contains('make important')
+    it('one of those can be made non important', function () { // highlight-line
+      cy.contains('second note') // highlight-line
+        .contains('button', 'make not important')
         .click()
 
-      cy.contains('second note')
-        .contains('make not important')
+      cy.contains('second note') // highlight-line
+        .contains('button', 'make important')
     })
   })
 })
 ```
 
 Miten komento [cy.contains](https://docs.cypress.io/api/commands/contains.html) tarkalleen ottaen toimii?
 
-Kun klikkaamme komentoa _cy.contains('second note')_ Cypressin [test runnerista](https://docs.cypress.io/guides/core-concepts/test-runner.html) nähdään, että komento löytää elementin, jonka sisällä on teksti <i>second note</i>:
+Kun klikkaamme komentoa _-contains 'second note'_, Cypressin [test runnerista](https://docs.cypress.io/guides/core-concepts/test-runner.html) nähdään, että komento löytää elementin, jonka sisällä on teksti <i>second note</i>:
 
-![Klikatessa vasemmalla olevasta testisteppien listasta komentoa, renderöityy oikealle sovelluksen sen hetkinen tila, missä löydetty elementti on merkattuna korostettuna.](../../images/5/34new.png)
+![Klikatessa vasemmalla olevasta testisteppien listasta komentoa, renderöityy oikealle sovelluksen sen hetkinen tila, missä löydetty elementti on merkattuna korostettuna.](../../images/5/34eb.png)
 
-Klikkaamalla seuraavaa riviä _.contains('make important')_, nähdään että löydetään nimenomaan 
+Klikkaamalla seuraavaa riviä _-contains 'button, make not important'_, nähdään että löydetään nimenomaan 
 <i>second note</i>:a vastaava tärkeyden muutoksen tekevä nappi:
 
-![Klikatessa vasemmalla olevasta testisteppien listasta komentoa, korostuu oikealle valintaa vastaava nappi](../../images/5/35new.png)
+![Klikatessa vasemmalla olevasta testisteppien listasta komentoa, korostuu oikealle valintaa vastaava nappi](../../images/5/35a.png)
 
 Peräkkäin ketjutettuna toisena oleva <i>contains</i>-komento siis <i>jatkaa</i> hakua ensimmäisen komennon löytämän komponentin sisältä.
 
 Jos emme ketjuttaisi komentoja, eli olisimme kirjoittaneet 
 
 ```js
 cy.contains('second note')
-cy.contains('make important').click()
+cy.contains('button', 'make not important').click()
 ```
 
 tulos olisi ollut aivan erilainen. Toinen rivi painaisi tässä tapauksessa väärän muistiinpanon nappia: 
 
-![Renderöityy virhe AssertionError: Timed out retrying after 4000ms: Expected to find content 'make not important'.](../../images/5/36new.png)
+![Renderöityy virhe AssertionError: Timed out retrying after 4000ms: Expected to find content 'make not important'.](../../images/5/36.png)
 
 Testejä tehdessä kannattaa siis ehdottomasti varmistaa test runnerista, että testit etsivät niitä elementtejä, joita niiden on tarkoitus tutkia!
 
@@ -920,34 +926,36 @@ const Note = ({ note, toggleImportance }) => {
 
 Testit hajoavat! Kuten test runner paljastaa, komento _cy.contains('second note')_ palauttaakin nyt ainoastaan tekstin sisältävän komponentin, ja nappi on sen ulkopuolella:
 
-![Oikealle puolelle havainnollistuu, että fokus osuu napin sijaan pelkkään tekstiin](../../images/5/37new.png)
+![Oikealle puolelle havainnollistuu, että fokus osuu napin sijaan pelkkään tekstiin](../../images/5/37.png)
 
 Eräs tapa korjata ongelma on seuraavassa:
 
 ```js
-it('other of those can be made important', function () {
+it('one of those can be made non important', function () {
   cy.contains('second note').parent().find('button').click()
-  cy.contains('second note').parent().find('button')
-    .should('contain', 'make not important')
+  cy.contains('second note')
+    .parent()
+    .find('button')
+    .should('contain', 'make important')
 })
 ```
 
-Ensimmäisellä rivillä etsitään komennon [parent](https://docs.cypress.io/api/commands/parent.htm) tekstin <i>second note</i> sisältävän elementin vanhemman alla oleva nappi ja painetaan sitä. Toinen rivi varmistaa, että napin teksti muuttuu.
+Ensimmäisellä rivillä etsitään komennon [parent](https://docs.cypress.io/api/commands/parent.htm) avulla tekstin <i>second note</i> sisältävän elementin vanhemman alla oleva nappi ja painetaan sitä. Toinen rivi varmistaa, että napin teksti muuttuu.
 
 Huomaa, että napin etsimiseen käytetään komentoa [find](https://docs.cypress.io/api/commands/find.html#Syntax). Komento [cy.get](https://docs.cypress.io/api/commands/get.html) ei sovellu tähän tilanteeseen, sillä se etsii elementtejä aina <i>koko</i> sivulta ja palauttaisi nyt kaikki sovelluksen viisi nappia.
 
 Testissä on ikävästi copypastea, sillä rivien alku eli napin etsivä koodi on sama. 
 Tälläisissä tilanteissa on mahdollista hyödyntää komentoa [as](https://docs.cypress.io/api/commands/as.html): 
 
 ```js
-it('other of those can be made important', function () {
+it('one of those can be made non important', function () {
   cy.contains('second note').parent().find('button').as('theButton')
   cy.get('@theButton').click()
-  cy.get('@theButton').should('contain', 'make not important')
+  cy.get('@theButton').should('contain', 'make important')
 })
 ```
 
-Nyt ensimmäinen rivi etsii oikean napin, ja tallentaa sen komennon <i>as</i> avulla nimellä <i>theButton</i>. Seuraavat rivit pääsevät nimettyyn elementtiin käsiksi komennolla <i>cy.get('@theButton')</i>.
+Nyt ensimmäinen rivi etsii oikean napin, ja tallentaa sen komennon <i>as</i> avulla nimellä <i>theButton</i>. Seuraavat rivit pääsevät nimettyyn elementtiin käsiksi komennolla _cy.get('@theButton')_.
 
 ### Testien suoritus ja debuggaaminen
 
@@ -981,7 +989,7 @@ Myös testien suorituksen pysäyttäminen debuggeriin on [mahdollista](https://d
 
 Developer-konsoli on monin tavoin hyödyllinen testejä debugatessa. Network-tabilla näkyvät testattavan sovelluksen tekemät HTTP-pyynnöt, ja console-välilehti kertoo testin komentoihin liittyviä tietoja:
 
-![Console-välilehti havainnollistaa testien löytämiä elementtejä.](../../images/5/38new.png)
+![Console-välilehti havainnollistaa testien löytämiä elementtejä.](../../images/5/38.png)
 
 Olemme toistaiseksi suorittaneet Cypress-testejä ainoastaan graafisen test runnerin kautta. Testit on luonnollisesti mahdollista suorittaa myös [komentoriviltä](https://docs.cypress.io/guides/guides/command-line.html). Lisätään vielä projektiin npm-skripti tätä tarkoitusta varten
 
@@ -994,9 +1002,9 @@ Olemme toistaiseksi suorittaneet Cypress-testejä ainoastaan graafisen test runn
 
 Nyt siis voimme suorittaa Cypress-testit komentoriviltä komennolla <i>npm run test:e2e</i>
 
-![Komennon suoritus tulostaa konsoliin tekstuaalisen raportin joka kertoo 5 läpimenneestä testistä.](../../images/5/39new.png)
+![Komennon suoritus tulostaa konsoliin tekstuaalisen raportin joka kertoo 5 läpimenneestä testistä.](../../images/5/39.png)
 
-Huomaa, että testien suorituksesta tallentuu video hakemistoon <i>cypress/videos/</i>. Tämä hakemisto lienee syytä gitignoroida. Videoiden teko on myös mahdollista ottaa [pois päältä](https://docs.cypress.io/guides/guides/screenshots-and-videos#Videos).
+Cypressissä on mahdollista tallentaa myös video testien suorituksesta. Videon tallentaminen voi olla erityisen hyödyllistä esimerkiksi debugatessa tai CI/CD-putkessa, sillä videosta voi jälkeenpäin tarkastaa helposti, mitä selaimessa tapahtui ennen virhettä. Ominaisuus on oletuksena pois päältä, ohjeet sen käyttöönottoon löytyvät Cypressin [dokumentaatiosta](https://docs.cypress.io/guides/guides/screenshots-and-videos#Videos).
 
 Testien koodin lopullinen versio on kokonaisuudessaan [GitHubissa](https://github.com/fullstack-hy2020/notes-e2e-cypress/).