part 5

Author: mluukkai

src/content/5/en/part5c.md

@@ -5,6 +5,12 @@ letter: c
 lang: en
 ---
 
+<div class="tasks">
+
+The test library used in this part was changed on March 3, 2024 from Jest to Vitest. If you already started this part using Jest, you can see [here](https://github.com/fullstack-hy2020/fullstack-hy2020.github.io/blob/02d8be28b1c9190f48976fbbd2435b63261282df/src/content/5/en/part5c.md) the old content.
+
+</div>
+
 <div class="content">
 
 There are many different ways of testing React applications. Let's take a look at them next.

src/content/5/en/part5d.md

@@ -916,8 +916,6 @@ describe('Note ', function() {
 })
 ```
 
-The tests and the frontend code can be found on the [GitHub](https://github.com/fullstack-hy2020/part2-notes-frontend/tree/part5-10) branch <i>part5-10</i>.
-
 ### Changing the importance of a note
 
 Lastly, let's take a look at the test we did for changing the importance of a note.
@@ -1063,11 +1061,6 @@ It is also possible to run them [from the command line](https://docs.cypress.io/
 
 ```js
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
-    "server": "json-server -p3001 --watch db.json",
     "cypress:open": "cypress open",
     "test:e2e": "cypress run" // highlight-line
   },
@@ -1079,7 +1072,9 @@ Now we can run our tests from the command line with the command <i>npm run test:
 
 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.
 
-The frontend and the test code can be found on the [GitHub](https://github.com/fullstack-hy2020/part2-notes-frontend/tree/part5-11) branch <i>part5-11</i>.
+Tests are found in [GitHubissa](https://github.com/fullstack-hy2020/notes-e2e-cypress/).
+
+Final version of the frontend code can be found on the [GitHub](https://github.com/fullstack-hy2020/part2-notes-frontend/tree/part5-9) branch <i>part5-9</i>.
 
 </div>
 

src/content/5/en/part5e.md

@@ -5,6 +5,12 @@ letter: c
 lang: fi
 ---
 
+<div class="tasks">
+
+Tässä osassa käytetty testikirjasto muutettiin 3.3.2024 Jestistä Vitestiin. Jos ehdit jo aloittaa Jestiä käyttäen, näet [täältä](https://github.com/fullstack-hy2020/fullstack-hy2020.github.io/blob/02d8be28b1c9190f48976fbbd2435b63261282df/src/content/5/fi/osa5c.md) osan vanhan sisällön.
+
+</div>
+
 <div class="content">
 
 Reactilla tehtyjen frontendien testaamiseen on monia tapoja. Aloitetaan niihin tutustuminen nyt.

src/content/5/fi/osa5c.md

@@ -630,8 +630,6 @@ Ensimmäinen komento etsii ensin komponentin, missä on teksti <i>another note b
 
 Toinen komento varmistaa, että saman napin teksti on vaihtunut muotoon <i>make important</i>.
 
-Frontendin tämänhetkinen koodi on kokonaisuudessaan [GitHubissa](https://github.com/fullstack-hy2020/part2-notes-frontend/tree/part5-9), branchissa <i>part5-9</i>.
-
 Testien tämänhetkinen koodi on kokonaisuudessaan [GitHubissa](https://github.com/fullstack-hy2020/notes-e2e/tree/part5-1), branchissa <i>part5-1</i>.
 
 ### Epäonnistuneen kirjautumisen testi
@@ -657,7 +655,7 @@ describe('Note app', () => {
 )}
 ```
 
-Testi siis varmistaa komennon [getByText](https://playwright.dev/docs/api/class-page#page-get-by-text) avulla, että sovellus tulostaa virheilmoituksen.
+Testi siis varmistaa metodin [page.getByText](https://playwright.dev/docs/api/class-page#page-get-by-text) avulla, että sovellus tulostaa virheilmoituksen.
 
 Sovellus renderöi virheilmoituksen CSS-luokan <i>error</i> sisältävään elementtiin:
 
@@ -1207,6 +1205,8 @@ Tarkemmat detaljit löytyvät [API](https://playwright.dev/docs/api/class-playwr
 
 Testien lopullinen versio on kokonaisuudessaan [GitHubissa](https://github.com/fullstack-hy2020/notes-e2e/tree/part5-3), branchissa <i>part5-3</i>.
 
+Frontendin lopullinen koodi on kokonaisuudessaan [GitHubissa](https://github.com/fullstack-hy2020/part2-notes-frontend/tree/part5-9), branchissa <i>part5-9</i>.
+
 </div>
 
 <div class="tasks">

src/content/5/fi/osa5d.md

@@ -513,8 +513,6 @@ Ensimmäinen komento etsii ensin komponentin, missä on teksti <i>another note c
 
 Toinen komento varmistaa, että saman napin teksti on vaihtunut muotoon <i>make important</i>.
 
-Testit ja frontendin tämänhetkinen koodi on kokonaisuudessaan [GitHubissa](https://github.com/fullstack-hy2020/part2-notes-frontend/tree/part5-9), branchissa <i>part5-9</i>.
-
 ### Epäonnistuneen kirjautumisen testi
 
 Tehdään nyt testi joka varmistaa, että kirjautumisyritys epäonnistuu jos salasana on väärä.
@@ -881,8 +879,6 @@ describe('Note ', function() {
 })
 ```
 
-Testit ja frontendin koodi on kokonaisuudessaan [GitHubissa](https://github.com/fullstack-hy2020/part2-notes-frontend/tree/part5-10), branchissa <i>part5-10</i>.
-
 ### 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:
@@ -1037,7 +1033,9 @@ Nyt siis voimme suorittaa Cypress-testit komentoriviltä komennolla <i>npm run t
 
 Huomaa, että testien suorituksesta tallentuu video hakemistoon <i>cypress/videos/</i>, hakemisto lienee syytä gitignoroida. Videoiden teko on myös mahdollista ottaa [pois päältä](https://docs.cypress.io/guides/guides/screenshots-and-videos#Videos).
 
-Testien ja frontendin koodin lopullinen versio on kokonaisuudessaan [GitHubissa](https://github.com/fullstack-hy2020/part2-notes-frontend/tree/part5-11), branchissa <i>part5-11</i>.
+Testien koodin lopullinen versio on kokonaisuudessaan [GitHubissa](https://github.com/fullstack-hy2020/notes-e2e-cypress/).
+
+Frontendin lopullinen koodi on kokonaisuudessaan [GitHubissa](https://github.com/fullstack-hy2020/part2-notes-frontend/tree/part5-9), branchissa <i>part5-9</i>.
 
 </div>