React

Debugging & Testing

Agenda

  • Generelt
    • Produkt til ide
  • Debugging
    • console.log()
    • Lese log i nettleseren
    • Debugger kommando
      • Breakpoints
  • Testing
    • Generelt testing
    • Jest

Framgangsmåte fra idé til løsning

Løsning i praktisk VS løsning i kode

Tips - Fra ide til produk

  • Kartlegg og noter ned alle funksjonaliteter
  • Prototyp en grafisk løsning (tegn) basert på punktet over
  • Kartlegg alle "scenario-oppgavene"
    • Noter ned hva som trengs i praksis for å løse "scenario-oppgavene"
      • ​Både informasjon og generelt knapper, input bokser, osv. grafisk
      • Tegn en aktivitets diagram
      • Kun fordeler!!!
    • Grupper "scenario-oppgavene" i passende kategorier i forhold til case oppgaven.
    • Sorter de ut i fra avhengigheter.
    • post-it lapper med en spesifikk farge - Grønn?
  • Velg en en gruppe post-it lapper
    • Velg 1 post-it lapp fra gruppen
      • Noter ned hva som trengs av informasjon i koden for løse denne "scenario-oppgavene"/post-it lappen på en separat post-it lapp - Gul farge?
  • Deretter forsøk å kode ut i fra notatene på både grønn og gul post-it lapp.
  • Rally race består av en rally sjåfør og en kartleser, men hva om rally sjåfør skal kjøre alene????

Hvordan koder jeg på jobb?

Debugging

Testing

Testing

  • Hva er testing?
    • "Testing er definert som en aktivitet for å sjekke om de reelle resultatene møtte de forventede resultatene og sikre at systemet er feil fri."
  • Hvorfor tester vi?
    • Finne bugs
    • Møtte systemet de spesifiserte kravene?
    • Identifiserer feil både kode og forretning relatert => $$$
    • Finne ut om man utvikler det rette produktet
  • Test prosedyrer i minde og større faser
  • Hvem tester?
    • Test utvikler - intern vs ekstern aktør
    • Prosjekt ledelsen/leder
    • Utvikleren
    • Slutt bruker

Utviklings livssyklus

  • Testing livssyklus - Generelt
    • Krav analyse
      • Forretnings krav
      • Arkitektur og design krav
      • System og integrasjons krav
      • Hvordan?
    • Test planlegging
    • Test case utvikling
    • Test miljø oppsett
      • Det funker på min maskin!
    • Test eksekvering
      • Test rapport
  • Når? Test-dreven utvikling-Test først

Testing typer

  • Funksjonell testing
    • enhets-, integrasjon-, system-, interface-, regresjon-, bruker akseptanse-, end-to-end-testing
    • ​Manuell og automatiserte tester
    • Hva?
  • ikke-funksjonell testing
    • Dokumentasjons-, installasjons-, sikkerhets-, pålitelighet-, performance-testing
    • ​​Performance-testing:
      • Load-, stress-, utholdenhet-, spike-testing​
    • ​Hvordan?

Testing i kode

Testing i kode

  • JEST => JavaScript testing rammeverk
  • RTL => JavaScript testing verktøy som tilbyr DOM for å teste React komponenter
const parseName = (firsstName, lastName) => {
	return firstName + ' ' + lastName;
};

const testFuncion = () => {
    const expectedNameOutput = 'Ola Nordmann';
    const parsedNameValue = parseName('Ola', 'Nordmann');
    
    if (expectedNameOutput !== parsedNameValue) {
    	throw(parsedNameValue + ' is not the same as ' + expectedNameOutput);
    }
};

Filstruktur

  • Filplassering
    • Valgfritt
    • Egen dedikert mappe med kun tester
      • Følger da samme mappe struktur som komponentene
    • Egne test filer sammen med komponentene
  • Filnavn
    • FilnavnTest.js(x)
    • Filnavn.test.js / Filnavn.test.jsx
      • Samme tanke som komponent filene
      • ​Foretrukket

Testing i kode

  • Inkludert I package.json allerede
    • React-scripts i node_modules

 

 

 

  • App.test.js
{
  "name": "react-demo",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  //...
 
  }

npm run test

Testing i kode

  • Inkludert I package.json allerede
    • React-scripts i node_modules

 

 

 

  • App.test.js
import { render, screen } from '@testing-library/react';
import App from './App';

test('renders learn react link', () => {
  render(<App />);
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});
npm run test

https://jestjs.io/

Testing i kode

  • test() funksjonen tar i mot 3 parametere
    • Navn
    • Funksjon
    • Timeout - optional
      • Spesifiserer hvor lenge den skal vente før den avbryter test. Default er 5 sekunder
    • Legg merke til at test() og expect() ikke er importert
      • Dette er ordnet av create-react-app
      • Begge er metoder fra Jest som create-react-app tilbyr globalt for alle test-filer.
    • Regex
import { render, screen } from '@testing-library/react';
import App from './App';

test('renders learn react link', () => {
  render(<App />);
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});

Testing i kode

  • Grupper test koden ved å bruke => describe() - 2 parametere
    • Navn
    • Én funksjon som inneholder de samlet testene

 

 

  • Annen variant
    • test() === it() 
import { render, screen } from '@testing-library/react';
import App from './App';


describe('App tester', () => {
  test('renders learn react link', () => {
    render(<App />);
    const linkElement = screen.getByText(/learn react/i);
    expect(linkElement).toBeInTheDocument();
  
  it('just a test', () => {
    expect(1+1).toEqual(2);
  })
})

Testing i kode

  • .skip() og .only()
    • test.only() / fit()
    • describe.only() / fit()
    • Tilsvarende med
      • .skip() / xit()

 

  • Nested tests

 

  • 1 test fil = 1 test suit
import { render, screen } from '@testing-library/react';
import App from './App';


describe('App tester', () => {
  describe('Nested App tester', () => {
    //...
  })
})

Vite + testing

  • Oppsett av Jest testing med Vite:
    • https://dev.to/hannahadora/jest-testing-with-vite-and-react-typescript-4bap

Takk for i dag! :)