Code Coverage

Men först

ESLint: The pluggable linting utility for JavaScript and JSX

Kör alltid med ESLint

ESLint konfigurerar med:

• config-fil: .eslintrc
• fält i package.json: "eslintConfig"

{
  "extends" : [
      "airbnb",               //config
      "prettier"              //config
  ],
  "env": {                    //enable global envs
      "jest": true,
      "browser": true,  
      "es6": true
  },
  "parser": "babel-eslint",   //ES6 features
  "rules" : {
      "react/jsx-filename-extension": [
        1, 
        { "extensions": [".js", ".jsx"] }
      ]
  }
}

• eslint-config-airbnb
• eslint-config-prettier
• eslint-plugin-import
• eslint-plugin-jsx-a11y
• eslint-plugin-react

Osäker på vad du ska använda? Använd min config

ESLint bygger på att man delar configs

Sök på: eslint configs

{
    "extends": "airbnb"
}

Är det någon regel som är störig? Stäng av den

Hur vet vi när vi skrivit tillräckligt med tester?

Svar: genom att räkna alla rader kod som har körts

code coverage eller testtäckning

% av täckta rader

Alla testramverk har inbyggd coverage reporting

Passing Build

💯

Vad indikerar testtäckning?

Låg % : skriv mer tester

Hög % : positivt men säger inte så mycket

100% : du har säkert fuskat

Olika typer av testtäckning

• Overall
• Statements
• Branches
• Functions
• Lines

0% - 100%

function sum(a,b){
  if(isNaN(a) || isNaN(b)){
    throw new Error("Only numbers please");
  }
  return Number(a) + Number(b);
}

it('should add two numbers together', () => {
  expect(sum(5,5)).toBe(10);
})

Alla funktioner är testade, men alla rader och alla branches är inte testade, inte 100%

npm test -- --coverage

it('should throw if not a number', () => {
  expect(() => {
    sum(null, "falafel");
  }).toThrowError("Only numbers please");
})

it('should add two numbers together', () => {
  expect(sum(5,5)).toBe(10);
})

Vi måste testa alla branches, alla alternativa vägar

Vår branch är viktig i det här fallet

Men utan att testa vår branch har vi ändå 75% täckning

Täckningen kan vara missvisande

Testäckning kan nås utan att skriva de tester som behövs

Jag skriver "testvänlig" kod med få rader

=

Färre rader att täcka

=

Högre täckning

I expect a high level of coverage. Sometimes managers require one. There's a subtle difference.

- Brian Marick

Vi kollar testtäckning på föregående repo

Eftermidagen: Nå 100% coverage

https://github.com/FEND16/jest-react-testing-2