Unit Testing in Angular

Pankaj P. Parkar

Technical Lead

Synerzip Softech India PVT LTD

  • Microsoft MVP (3 times)

  • Opensource Contributor

  • Stackoverflow Topuser for Angular and AngularJS

  • 100k+ reps on Stackoverflow

  • Community Contributor

GitHub @pankajparkar Twitter Follow

About Me!

@pankajparkar

What is testing?

  • Manual Testing
  • Integration Testing
  • Regression Testing
  • Unit Testing

@pankajparkar

What is Unit Testing?

  • Write code to test your code
  • Documentation of your feature 
  • Test the unit

@pankajparkar

What it is not? 

  • doesn't ensures regression testing
  • doesn't ensures 100% bug free software

Why to Unit Test?

  • It saves time
  • Runs faster
  • Precisely help which unit failed
  • help to find hidden bug
  • help you to make better developer
  • Code usage same service

@pankajparkar

Types

BDD

TDD

@pankajparkar

expect($('status').text())
  .toBe('Done'))
expect(component.completed)
  .toBe(true)
  • Completely UI Driven
  • Test particular path / flow
  • Completely focus of code
  • Test small functions

Philosophy

  1. Setup

  2. Spec

    • A - Arrangement
    • A - Act
    • A - Assert
  3. Tear Down
  4. Test Doubles
    • API call
    • Third party dependency
    • Utilities

@pankajparkar

  1. BeforeEach

  2. It

    • A - Arrangement
    • A - Act
    • A - Assert
  3. AfterEach
  4. Fake
    • Spies
    • Mock
    • Stub

General

Jasmine

Code Coverage

Rules

@pankajparkar

  1. Isolation

  2. One test should not be depend on other state

  3. This will make test hard to maintain, if any of it gets change may result in error.

  4. Consider both use cases

    • Positive
    • Negative

  5. Mock / Stub / Spies - Test doubles

Fake / Test Doubles

Source: https://cdn-images-1.medium.com/max/1600/0*snrzYwepyaPu3uC9.png

Red, 

  • Red - Write down spec first
  • Green - Pass the test with minimal work
  • Refactor - Refactor the function incrementally

Green, 

Refactor

@pankajparkar

Spec Runner

Fake / Test Doubles / Dependencies

Spec

Spec

Spec

Spec

Spec

Pass

Pass

Pass

Pass

Failed

Execution

@pankajparkar

Depends How You've used ACID principles in your code

@pankajparkar

Lets code

@pankajparkar

Example (is it testable?)

@pankajparkar

function mergeAndSaveExcelFiles (files) {
   const mergedFile = loadFiles(files)
   return mergedFile;
}

function loadFiles (files) {
   const [file1, file2] = files
   const file1Content = File.load(file1)
   const file2Content = File.load(file2)
   return mergeFiles(file1Content, file2Content)
}

function mergeFiles (file1Content, file2Content) {
   const newMergedFileContent = File.merge(file1Content, file2Content)
   const newFile = File.create('mergeFile.xlsx', newMergedFileContent)
   return newFile
}

@pankajparkar

function mergeAndSaveExcelFiles (files) {
   // load files
   const {file1Content, file2Content} = loadFiles(files)
   // merge files
   const newFileContent = mergeFiles(file1Content, file2Content)
   // save files
   const mergedFile = saveFile('mergeFile.xlsx', newFileContent)
   return mergedFile;
}

function loadFiles (files) {
   const [file1, file2] = files
   const file1Content = File.load(file1)
   const file2Content = File.load(file2)
   return {file1Content, file2Content}
}

function mergeFiles (file1Content, file2Content) {
   const newMergedFileContent = File.merge(file1Content, file2Content)
   return newMergedFileContent;
}

function saveFile(fileName, content) {
   const newFile = File.create(fileName, newMergedFileContent)
   return newFile
}

Refactored

Examples

@pankajparkar

https://github.com/pankajparkar/weather-cast

References

  • https://integralpath.blogs.com/thinkingoutloud/2005/09/principles_of_t.html
  • https://school.hirez.io/courses/take/javascript-unit-testing-theory

@pankajparkar

Q & A

@pankajparkar

Unit Testing in Angular

By Pankaj Parkar

Made with Slides.com

Unit Testing in Angular

  • 1,226

More from Pankaj Parkar