前端工程師基本走過軟體測試的世界。

1. 3W1H
Jay Chung(xJkit)
What the hell is software testing?

2. Who am I
Jay Chung (xJkit)
JavaScript developer
Love Everything done by .js and .jsx
GitHub: https://github.com/xJkit

3. 3W1H
Why
Who
What
How

4. Why Test?
UI/UX
Security (Penetration Test)
Boundary Case
Stress Test
Performance Test
…

5. White Box
( )
Code Coverage(statement, branch, function, …)
Black Box
spec

6. Unit Test
Integration Test
System Test
E2E test, Functional test
Acceptance Test

7. TDD (Test-Driven Development)
BDD (Behaviour-Driven Development)
ATDD (Acceptance TDD)
SBE (Spec by Example)
TDD BDD ATDD

8. TDD
Red-Green-Refactor Cycle

9. Red Green Refactor Cycle
TDD
Make a test case fail
Make the code work
Make the code clean

10. BDD
2003 Dan North
QA

11. BDD
Scenarios
Behaviour
Scenario: Some determinable business situation
Given some precondition
And some other precondition
When some action by the actor
And some other action
And yet another action
Then some testable outcome is achieved
And something else we can check happens too

12. ATDD
TDDDiscuss
Distill
Develop
Demo
from user story -> business value
user stories
acceptance
criteria
continuous
integration/delivery
new features

13. Why ATDD?
http://www.marcofolio.net/other/atdd_is_awesome_and_you_should_try_it.html

14. V-Model
Requirements
Functional Specification
High-level Design
Low-Level Design
Coding
Unit Test
Integration Test
System Test
Acceptance Test
Project Manager
Verification Validation

15. TDD -> BDD
Where to start
What to test and what not to test
How much to test in one go
What to call their tests
How to understand why a test fails

16. Unit Test
white box testing
mocked input -> f(x) -> expected output
for a chunk of codes
from programmer perspective
code coverage reporting

17. Integration Test
from user’s perspective
ensure the system is functioning as expected
Integration Test is functional test, but not vice
versa

18. Functional Test
black box test
includes E2E test, Acceptance test, browser
automations
browser/browser-like env
cross browser compatibilities

19. Just say no to more E2E tests
70%
20%
10%
https://testing.googleblog.com/2015/04/just-say-no-to-more-end-to-end-tests.html
Google

20. How
This is just a Javascript developer speaking

21. Mocha
Chai assertion
library
describe ( testing suite)
it ( testing case)
describe/it

22. Mocha

23. Jasmine
assertion
mocks, spies,
stubs

24. Jest
Facebook , Jasmine
Mocha
assertion
snapshots (
)
code coverage reports
mocks, spies, stubs

25. AVA
Futuristic JavaScript test
runner
concurrency
(run in parallel),
snapshot

26. Istanbul
Code coverage reporters

27. Codecov
coverage report + GitHub , travis ci
Chrome GitHub code coverage
https://github.com/appleboy/gin-jwt/pull/38

28. Karma
Test runner for JavaScript
Google
,
E2E.
JSDom Phantom

29. Sinon
Test spies, stubs and mocks for JavaScript.
Mocha + chai + sinon

30. Selenium
A browser automation framework and ecosystem
(WebDriver)
Node.js <=> WebDriver <=> Selenium Server <=> FF/Chrome/IE/Safari

31. Selenium-related
Protractor - E2E test framework for Angular apps
Angular
WebdriverIO - Selenium Syntax, Flexible,
Community.
Nightwatch
Automated testing and continous integration framework
based on node.js and selenium webdriver
test server assertions, tools.

32. Browser Automations
Casper
Navigation scripting and testing utility for PhantomJS and SlimerJS
Phantom(WebKit) Slim(Gecko)
nightmare
Phantom Slim, WebDriver, Electron Electron Extensive
Browser API
Unit Test Mocha + Chai Karma
Electron.
Zombie
Insanely fast, full-stack, headless browser testing using node.js
Headless browser
TestCafe

33. Casper
Navigation scripting and testing utility for
PhantomJS and SlimerJS
Phantom(WebKit) Slim(Gecko)

34. Nightmare
Phantom Slim, WebDriver,
Electron Electron Extensive
Browser API
Unit Test Mocha + Chai
Karma
Electron.

35. Zombie
Insanely fast, full-stack, headless browser
testing using node.js
Headless browser

36. TestCafe
Best tool alternative for Selenium
Automated browser testing for the modern web development stack
UI
UI
dom cheerio

37. Cucumber
BDD automated tests
RD PM
Business Crew: Gherkin
Developer:
JavaScript
BDD Scenario
Given
When
Then

38. Cucumber
Gherkins
Gherkin is the language that Cucumber
understands.
a Business Readable, Domain Specific
Language
Gherkin wiki

39. Cucumber
BDD
Gherkin Scenario

40. Cucumber
BDD
JavaScript Scenario

41. demo
https://github.com/xJkit/hello-integration-test

42. References
Just say no to more E2E tests
An Overview of JavaScript Testing in 2017
JavaScript Testing: Unit vs Functional vs
Integration Tests