part 5 to use vite

Author: mluukkai

src/content/5/en/part5.md

@@ -8,7 +8,7 @@ lang: en
 
 In this part we return to the frontend, first looking at different possibilities for testing the React code.  We will also implement token based authentication which will enable users to log in to our application.
 
-<i>Part updated 25th Jan 2023</i>
-- <i>No major changes</i>
+<i>Part updated 17th August 2023</i>
+- <i>Create React App replaced with Vite</i>
 
 </div>

src/content/5/en/part5d.md

@@ -42,16 +42,20 @@ and by adding an npm-script to run it:
 {
   // ...
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
+    "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
   },
   // ...
 }
 ```
 
+We also made a small change to the script that starts the application, without the change Cypress can not access the app.
+
 Unlike the frontend's unit tests, Cypress tests can be in the frontend or the backend repository, or even in their separate repository.
 
 The tests require the tested system to be running. Unlike our backend integration tests, Cypress tests <i>do not start</i> the system when they are run.
@@ -107,7 +111,7 @@ Let us change the test content as follows:
 ```js
 describe('Note app', function() {
   it('front page can be opened', function() {
-    cy.visit('http://localhost:3000')
+    cy.visit('http://localhost:5173')
     cy.contains('Notes')
     cy.contains('Note app, Department of Computer Science, University of Helsinki 2023')
   })
@@ -130,7 +134,7 @@ We could have declared the test using an arrow function
 ```js
 describe('Note app', () => { // highlight-line
   it('front page can be opened', () => { // highlight-line
-    cy.visit('http://localhost:3000')
+    cy.visit('http://localhost:5173')
     cy.contains('Notes')
     cy.contains('Note app, Department of Computer Science, University of Helsinki 2023')
   })
@@ -144,14 +148,14 @@ If <i>cy.contains</i> does not find the text it is searching for, the test does
 ```js
 describe('Note app', function() {
   it('front page can be opened',  function() {
-    cy.visit('http://localhost:3000')
+    cy.visit('http://localhost:5173')
     cy.contains('Notes')
     cy.contains('Note app, Department of Computer Science, University of Helsinki 2023')
   })
 
 // highlight-start
   it('front page contains random text', function() {
-    cy.visit('http://localhost:3000')
+    cy.visit('http://localhost:5173')
     cy.contains('wtf is this app?')
   })
 // highlight-end
@@ -174,28 +178,28 @@ We can get rid of it by installing [eslint-plugin-cypress](https://github.com/cy
 npm install eslint-plugin-cypress --save-dev
 ```
 
-and changing the configuration in <i>.eslintrc.js</i> like so:
+and changing the configuration in <i>.eslintrc.cjs</i> like so:
 
 ```js
 module.exports = {
-    "env": {
-        "browser": true,
-        "es6": true,
-        "jest/globals": true,
-        "cypress/globals": true // highlight-line
-    },
-    "extends": [ 
-      // ...
-    ],
-    "parserOptions": {
-      // ...
-    },
-    "plugins": [
-        "react", "jest", "cypress" // highlight-line
-    ],
-    "rules": {
-      // ...
-    }
+  "env": {
+    browser: true,
+    es2020: true,
+    "jest/globals": true,
+    "cypress/globals": true // highlight-line
+  },
+  "extends": [ 
+    // ...
+  ],
+  "parserOptions": {
+    // ...
+  },
+  "plugins": [
+      "react", "jest", "cypress" // highlight-line
+  ],
+  "rules": {
+    // ...
+  }
 }
 ```
 
@@ -211,22 +215,22 @@ describe('Note app',  function() {
   // ...
 
   it('login form can be opened', function() {
-    cy.visit('http://localhost:3000')
+    cy.visit('http://localhost:5173')
     cy.contains('log in').click()
   })
 })
 ```
 
 The test first searches for the login button by its text and clicks the button with the command [cy.click](https://docs.cypress.io/api/commands/click.html#Syntax).
 
-Both of our tests begin the same way, by opening the page <i><http://localhost:3000></i>, so we should
+Both of our tests begin the same way, by opening the page <i><http://localhost:5173></i>, so we should
 separate the shared part into a <i>beforeEach</i> block run before each test:
 
 ```js
 describe('Note app', function() {
   // highlight-start
   beforeEach(function() {
-    cy.visit('http://localhost:3000')
+    cy.visit('http://localhost:5173')
   })
   // highlight-end
 
@@ -467,7 +471,7 @@ describe('Note app', function() {
     }
     cy.request('POST', 'http://localhost:3001/api/users/', user) 
     // highlight-end
-    cy.visit('http://localhost:3000')
+    cy.visit('http://localhost:5173')
   })
 
   it('front page can be opened', function() {
@@ -716,7 +720,7 @@ First, we test logging in. Then, in their own describe block, we have a bunch of
 
 As we said above, each test starts from zero! Tests do not start from the state where the previous tests ended.
 
-The Cypress documentation gives us the following advice: [Fully test the login flow – but only once!](https://docs.cypress.io/guides/end-to-end-testing/testing-your-app#Fully-test-the-login-flow-but-only-once).
+The Cypress documentation gives us the following advice: [Fully test the login flow – but only once](https://docs.cypress.io/guides/end-to-end-testing/testing-your-app#Fully-test-the-login-flow-but-only-once).
 So instead of logging in a user using the form in the <i>beforeEach</i> block, Cypress recommends that we [bypass the UI](https://docs.cypress.io/guides/getting-started/testing-your-app.html#Bypassing-your-UI) and do an HTTP request to the backend to log in. The reason for this is that logging in with an HTTP request is much faster than filling out a form.
 
 Our situation is a bit more complicated than in the example in the Cypress documentation because when a user logs in, our application saves their details to the localStorage.
@@ -731,7 +735,7 @@ describe('when logged in', function() {
       username: 'mluukkai', password: 'salainen'
     }).then(response => {
       localStorage.setItem('loggedNoteappUser', JSON.stringify(response.body))
-      cy.visit('http://localhost:3000')
+      cy.visit('http://localhost:5173')
     })
     // highlight-end
   })
@@ -760,7 +764,7 @@ Cypress.Commands.add('login', ({ username, password }) => {
     username, password
   }).then(({ body }) => {
     localStorage.setItem('loggedNoteappUser', JSON.stringify(body))
-    cy.visit('http://localhost:3000')
+    cy.visit('http://localhost:5173')
   })
 })
 ```
@@ -826,7 +830,7 @@ Cypress.Commands.add('createNote', ({ content, important }) => {
     }
   })
 
-  cy.visit('http://localhost:3000')
+  cy.visit('http://localhost:5173')
 })
 ```
 
@@ -861,7 +865,7 @@ describe('Note app', function() {
 })
 ```
 
-There is one more annoying feature in our tests. The application address <i>http:localhost:3000</i> is hardcoded in many places.
+There is one more annoying feature in our tests. The application address <i>http:localhost:5173</i> is hardcoded in many places.
 
 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>:
 
@@ -872,15 +876,15 @@ module.exports = defineConfig({
   e2e: {
     setupNodeEvents(on, config) {
     },
-    baseUrl: 'http://localhost:3000' // highlight-line
+    baseUrl: 'http://localhost:5173' // highlight-line
   },
 })
 ```
 
 All the commands in the tests use the address of the application
 
 ```js
-cy.visit('http://localhost:3000' )
+cy.visit('http://localhost:5173' )
 ```
 
 can be transformed into
@@ -900,7 +904,7 @@ module.exports = defineConfig({
   e2e: {
     setupNodeEvents(on, config) {
     },
-    baseUrl: 'http://localhost:3000',
+    baseUrl: 'http://localhost:5173',
   },
   env: {
     BACKEND: 'http://localhost:3001/api' // highlight-line
@@ -1116,7 +1120,7 @@ The structure of the test must be as follows:
 describe('Blog app', function() {
   beforeEach(function() {
     cy.request('POST', 'http://localhost:3003/api/testing/reset')
-    cy.visit('http://localhost:3000')
+    cy.visit('http://localhost:5173')
   })
 
   it('Login form is shown', function() {
@@ -1139,7 +1143,7 @@ describe('Blog app', function() {
   beforeEach(function() {
     cy.request('POST', 'http://localhost:3003/api/testing/reset')
     // create here a user to backend
-    cy.visit('http://localhost:3000')
+    cy.visit('http://localhost:5173')
   })
 
   it('Login form is shown', function() {

src/content/5/fi/osa5.md

@@ -8,7 +8,7 @@ lang: fi
 
 Tässä osassa palataan frontendin pariin, ensin tarkastellaan erilaisia tarjolla olevia mahdollisuuksia React-sovelluksen testaamiseen. Osassa myös toteutetaan frontendiin tokeneihin perustuva autentikaatio, joka mahdollistaa käyttäjien kirjautumisen sovellukseen.
 
-<i>Osa päivitetty 25.1.2023</i>
-- <i>Ei suuria muutoksia</i>
+<i>Osa päivitetty 17.8.2023</i>
+- <i>Create React App korvattu Vitellä</i>
 
 </div>