part5 new version

mluukkai · mluukkai · commit ee57a3c01975 · 2024-03-03T18:03:54.000+02:00
diff --git a/src/components/InfoBanner.js b/src/components/InfoBanner.js
@@ -45,9 +45,11 @@ const InfoBanner = ({ visible, onHide }) => {
   return (
     <div style={style}>
       <div style={textStyle}>
+        <p style={{ marginBottom: 20}}>
+          The testing libraries used in part 5 were changed 3rd March 2024. In frontend Vite replaced Jest. For End to end-tests Playwright is the new preferred library.
+        </p>  
         <p>
-          The testing library used in part 4 was changed 13th February 2024 from Jest to Node:test.
-          If you have started with Jest, you may continue. The relevant material is still available, see the "Legacy: testing with Jest"
+          If you have started with Jest or Cypress, you may continue. The relevant material is still available, for Jest, the link is at the top of part 5c and for the Cypress, the link is at the menu at the left.
         </p>
       </div>
       <div style={buttonDiv}>
diff --git a/src/components/layout.js b/src/components/layout.js
@@ -10,7 +10,7 @@ import Footer from './Footer/Footer';
 import PropTypes from 'prop-types';
 import SkipToContent from './SkipToContent/SkipToContent';
 
-const BANNER_TO_KEY = 'part_4_changes';
+const BANNER_TO_KEY = 'part_5_changes';
 
 const Layout = props => {
   const { i18n } = useTranslation();
@@ -23,7 +23,7 @@ const Layout = props => {
   useEffect(() => {
     const key = localStorage.getItem(BANNER_TO_KEY)
     if (!key) {
-      const relevant = window.location.href.includes('osa4') || window.location.href.includes('en/part4')
+      const relevant = window.location.href.includes('osa5') || window.location.href.includes('en/part5')
       setVisible(relevant);
     }
   }, []);
diff --git a/src/content/0/en/part0a.md b/src/content/0/en/part0a.md
@@ -340,8 +340,10 @@ Despite changes *all the submitted exercises remain valid*, and the course can b
 
 Recent major changes
 
-- Parts 1-9 (11th September - 5th October): Create React app replaced with Vite
+- Parts 3-5 (February-March 2024): Libraries used for testing changed
+- Part 10 (February 26, 2024): Library versions updated
 - Part 11 (16th January 2024): Example project dependencies updated
+- Parts 1-2, 6-9 (11th September - 5th October): Create React app replaced with Vite
 
 ### Expanding on a previously completed course
 
diff --git a/src/content/0/fi/osa0a.md b/src/content/0/fi/osa0a.md
@@ -282,8 +282,10 @@ Kurssilla ei ole enää vuosittaisia versiota. Kurssi on siis käynnissä koko a
 Muutoksista huolimatta <i>kaikki jo tehdyt palautukset säilyvät voimassa</i>, eli voit jatkaa kurssia päivityksistä huolimatta normaaliin tapaan.
 
 Viimeaikaisia isompia muutoksia
-- Osat 1-9 (11.9-5.10.2023): Create React app korvattu Vitellä
+- Osat 3-5 (helmi-maaliskuu 2024): Testaukseen käytetyt kirjastot muutettu
+- Osa 10 (26.2.2024): Kirjastoversiot päivitetty
 - Osa 11 (16.1.2024): Esimerkkiprojektin riippuvuudet päivitetty
+- Osat 1-2, 6-9 (11.9-5.10.2023): Create React app korvattu Vitellä
 
 ### Aiemmin suoritetun kurssin täydentäminen
 
diff --git a/src/content/5/en/part5e.md b/src/content/5/en/part5e.md
@@ -17,7 +17,7 @@ E2E library [Cypress](https://www.cypress.io/) has become popular within the las
 
 Let's make some end-to-end tests for our note application.
 
-We begin by installing Cypress to <i>the frontend</i> as a development dependency
+Unlike the backend tests or unit tests done on the React front-end, End to End tests do not need to be located in the same npm project where the code is. Let's make a completely separate project for the E2E tests with the _npm init_ command. Then install Cypress to <i>the new project</i> as a development dependency
 
 ```js
 npm install --save-dev cypress
@@ -29,12 +29,6 @@ and by adding an npm-script to run it:
 {
   // ...
   "scripts": {
-    "dev": "vite --host",  // highlight-line
-    "build": "vite build",
-    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview",
-    "server": "json-server -p3001 --watch db.json",
-    "test": "jest",
     "cypress:open": "cypress open"  // highlight-line
   },
   // ...
@@ -532,8 +526,6 @@ The first command searches for a component containing the text <i>another note c
 
 The second command checks that the text on the button has changed to <i>make important</i>.
 
-The tests and the current frontend code can be found on the [GitHub](https://github.com/fullstack-hy2020/part2-notes-frontend/tree/part5-9) branch <i>part5-9</i>.
-
 ### Failed login test
 
 Let's make a test to ensure that a login attempt fails if the password is wrong.
@@ -1056,8 +1048,7 @@ You can see the HTTP requests done by the tests on the Network tab, and the cons
 
 ![developer console while running cypress](../../images/5/38new.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:
+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:
 
 ```js
   "scripts": {
@@ -1072,7 +1063,7 @@ 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.
 
-Tests are found in [GitHubissa](https://github.com/fullstack-hy2020/notes-e2e-cypress/).
+Tests are found in [GitHub](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>.
 
diff --git a/src/content/5/fi/osa5d.md b/src/content/5/fi/osa5d.md
@@ -7,27 +7,27 @@ lang: fi
 
 <div class="content">
 
-We have done integration tests for the backend that test it as a whole at the app level, and unit tests for the frontend that test individual components.
+Olemme tehneet backendille sitä apin tasolla kokonaisuutena testaavia integraatiotestejä ja frontendille yksittäisiä komponentteja testaavia yksikkötestejä. 
 
-Now let's look at one way of doing <i>End to End (E2E) tests</i> on [the system as a whole](https://en.wikipedia.org/wiki/System_testing).
+Katsotaan nyt erästä tapaa tehdä [järjestelmää kokonaisuutena](https://en.wikipedia.org/wiki/System_testing) tutkivia <i>End to End (E2E) ‑testejä</i>.
 
-E2E testing of web applications takes place using a browser with the help of a library. There are several solutions available, for example [Selenium](http://www.seleniumhq.org/), which enables the automation of tests with almost any browser. Another option is to use the so-called [headless browser](https://en.wikipedia.org/wiki/Headless_browser) i.e. a browser that has no graphical user interface at all. For example, it is possible to run Chrome in Headless mode.
+Web-sovellusten E2E-testaus tapahtuu käyttäen selainta jonkin kirjaston avulla. Ratkaisuja on tarjolla useita, esimerkiksi [Selenium](http://www.seleniumhq.org/), joka mahdollistaa testien automatisoinnin lähes millä tahansa selaimella. Toinen vaihtoehto on käyttää ns. [headless browseria](https://en.wikipedia.org/wiki/Headless_browser) eli selainta, jolla ei ole ollenkaan graafista käyttöliittymää. Esim. Chromea on mahdollista suorittaa Headless-moodissa.
 
-E2E tests are potentially the most useful test category, as they examine the system through the same interface as real users.
+E2E testit ovat potentiaalisesti kaikkein hyödyllisin testikategoria, sillä ne tutkivat järjestelmää saman rajapinnan kautta kuin todelliset käyttäjät.
 
-There are also unpleasant aspects to E2E tests. They are more challenging to configure than unit and integration tests. E2E tests are also typically quite slow, and in larger software their execution time can easily reach minutes or even hours. This is unfortunate for application development, because when coding an application it is very useful to be able to run tests as often as possible for [regressions](https://en.wikipedia.org/wiki/Regression_testing) in the code.
+E2E-testeihin liittyy myös ikäviä puolia. Niiden konfigurointi on haastavampaa kuin yksikkö- ja integraatiotestien. E2E-testit ovat tyypillisesti myös melko hitaita ja isommassa ohjelmistossa niiden suoritusaika voi helposti nousta minuutteihin, tai jopa tunteihin. Tämä on ikävää sovelluskehityksen kannalta, sillä sovellusta koodatessa on erittäin hyödyllistä pystyä suorittamaan testejä mahdollisimman usein koodin [regressioiden](https://en.wikipedia.org/wiki/Regression_testing) varalta. 
 
-The problem is also that the tests performed via the user interface may be unreliable, i.e. in English [flaky](https://hackernoon.com/flaky-tests-a-war-that-never-ends-9aa32fdef359), some of the tests sometimes pass and sometimes not, even if nothing changes in the code.
+Ongelmana on  usein myös se, että käyttöliittymän kautta tehtävät testit saattavat olla epäluotettavia eli englanniksi [flaky](https://hackernoon.com/flaky-tests-a-war-that-never-ends-9aa32fdef359), osa testeistä menee välillä läpi ja välillä ei, vaikka koodissa ei muuttuisi mikään.
 
-At the moment, perhaps the two easiest to use libraries for End to End testing are [Cypress](https://www.cypress.io/) and [Playwright](https://playwright.dev/).
+Tämän hetken kaksi ehkä helppokäyttöisintä kirjastoa End to End -testaukseen ovat [Cypress](https://www.cypress.io/) ja [Playwright](https://playwright.dev/).
 
-From the statistics on the page [npmtrends.com](https://npmtrends.com/cypress-vs-playwright), we see that Cypress, which dominated the market for the last five years, is still the clear number one, but Playwright has started a rapid rise in the second half of 2023:
+Sivun [npmtrends.com](https://npmtrends.com/cypress-vs-playwright) statistiikasta näemme, että viimeiset viisi vuotta markkinaa hallinnut Cypress on edelleen selvä ykkönen, mutta Playwright on lähtenyt nopeaan nousuun vuoden 2023 toisella puolikkaalla:
 
 ![cypress vs playwright in npm trends](../../images/5/cvsp.png)
 
-Cypres has been used on this course for years. Now Playwright is also included as a new addition. You can choose whether to complete the E2E testing part of the course with Cypress or Playrwight. The operating principles of both libraries are very similar, so your choice is not very important. However, Playwright is now the primary recommended E2E library for the course.
+Tällä kurssilla on jo vuosia käytetty Cypresiä. Nyt mukana on uutena myös Playwright. Saat itse valita suoritatko kurssin E2E-testausta käsittelevän osan Cypressillä vai Playrwightillä. Molempien kirjastojen toimintaperiaatteet ovat hyvin samankaltaisia, joten kovin suurta merkitystä valinnallasi ei ole. Playwright on kuitenkin nyt kurssin ensisijaisesti suosittelema E2E-kirjasto.
 
-If your choice is Playwright, go ahead. If you end up using Cypress, go [here](/osa5/end_to_end_testaus_cypress).
+Jos valintasi on Playwright, jatka eteenpäin. Jos päädyt käyttämään Cypressiä, mene [tänne](/osa5/end_to_end_testaus_cypress).
 
 ### Playwright
 
diff --git a/src/content/5/fi/osa5e.md b/src/content/5/fi/osa5e.md
@@ -13,7 +13,9 @@ Jos valintasi on Cypress, jatka eteenpäin. Jos päädyt käyttämään Playwrig
 
 ### Cypress
 
-Aloitetaan asentamalla Cypress <i>frontendin</i> kehitysaikaiseksi riippuvuudeksi
+Toisin kuin React-frontille tehdyt yksikkötestit tai backendin testit, nyt tehtävien End to End -testien ei tarvitse sijaita samassa npm-projektissa missä koodi on. Tehdään E2E-testeille kokonaan oma projekti komennolla _npm init_.
+
+Asennetaan sitten Cypress suorittamalla uuden projektin kehitysaikaiseksi riippuvuudeksi
 
 ```js
 npm install --save-dev cypress
@@ -25,20 +27,12 @@ ja määritellään npm-skripti käynnistämistä varten, ja tehdään myös pie
 {
   // ...
   "scripts": {
-    "dev": "vite --host", // highlight-line
-    "build": "vite build",
-    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview",
-    "server": "json-server -p3001 --watch db.json",
-    "test": "jest",
     "cypress:open": "cypress open"  // highlight-line
   },
   // ...
 }
 ```
 
-Toisin kuin esim. frontendin yksikkötestit, Cypress-testit voidaan sijoittaa joko frontendin tai backendin repositorioon, tai vaikka kokonaan omaan repositorioonsa. 
-
 Cypress-testit olettavat että testattava järjestelmä on käynnissä kun testit suoritetaan, eli toisin kuin esim. backendin integraatiotestit, Cypress-testit <i>eivät käynnistä</i> testattavaa järjestelmää testauksen yhteydessä.
 
 Tehdään <i>backendille</i> npm-skripti, jonka avulla se saadaan käynnistettyä testausmoodissa, eli siten, että <i>NODE\_ENV</i> saa arvon <i>test</i>.
@@ -1013,15 +1007,10 @@ Developer-konsoli on monin tavoin hyödyllinen testejä debugatessa. Network-tab
 
 ![Console-välilehti havainnollistaa testien löytämiä elementtejä.](../../images/5/38new.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ä sovellukselle npm-skripti tätä tarkoitusta varten
+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
 
 ```js
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
-    "eslint": "eslint .",
     "cypress:open": "cypress open",
     "test:e2e": "cypress run" // highlight-line
   },
