KraQA #29 - Component level testing of react app, using enzyme

GrandParadePoland
www.grandparade.co.uk
Component level testing of react app,
using enzyme
KraQA – 23.01.2018
Wojciech Czyżycki, Senior QA Engineer
Tomasz Suwaj, QA Engineer
Grand Parade, Central Services FrontEnd Team

Agenda
●Company & Project
○ About GP & WH
●Test approach
○ Agile@Scale transformation
○ Detecting vs Preventing bugs, testing earlier in lifecycle
●Testing in React.JS project
○ Main ideas & tools
○ Enzyme
■ introduction
■ DOMtesting - render, shallow, mount
■ Selectors, find, user actions simulation
○ DDT& Snapshots,
○ Reporting, timing, statistics
●Summary
○ Pros & cons of this solution
GrandParadePoland

Company & Project
GrandParadePoland

GrandParade
● Founded in 2007
● UK: London, PL: Kraków
● Products: apps,websites and commerce
platforms forthe sports,gaming and media
companies
● Acquisitionby WH in 2016
● Number of employees:~ 300
About company - GP
GrandParadePoland

About company - WH
GrandParadePoland
WilliamHill
● Founded in 1934
● Leading betting company
○ Retail
○ Online
■ Sports
■ Gaming
● UK, Gibraltar, Poland, Bulgaria, Italy,
Spain, USA, Australia and the
Philippines
● Number of employees:~16k

About project
• Registration application
• About 20 WH sites on desktop
• Banners, landing pages,promotions
• Bonus actions
• Analytics
• Challenges
• Technologicalconsistency
• Customization by CMS
• Multi-step
• Field order
• Componentversions
• Tests inCucumber/Selenium/Java
GrandParadePoland

Test approach
/GrandParadePoland

Agile@Scale transformation
What are we doing
• Scrum as default managementframework
• Reducing silos and building cross functionalteams
• Productcentred teams
• Putting trust (and responsibility) into teams
• High level of test automation – coverage 80-90% (code and functional)
• CI/CD processimprovements
GrandParadePoland

Test approach - Detecting bugs
Traditionalapproach
• QA silos – weak collaboration
• Late testing – usually after deployon test
environment
• Often lack of time to create automated tests
Results
• Low test code quality (lack of patterns)
• Slow and flaky E2E tests
• Low trust to automated tests results
• More and more manual work
GrandParadePoland

GrandParadePoland

Preventing bugs
Currentapproach
• Environment equippedwith tools for early testing
• QAs work close with developers,shared quality responsibility
• QA tests in dev project,obligatory codereview
• Automated test pipeline on push and merge
Results
• Early bug/inconsistencyidentification
• Better test code quality
• Very fast and stable componenttests
• High functional requirements coverage by automation
• Huge reductionof E2E test
GrandParadePoland
High cost
Low speed
Low cost
High speed
Exploratory
testing

Tools
● JavaScript ES6 + Babel
● Npm, yarn – package managers
● React.js – front-end framework
● Enzyme – testing tool for React.js
● JSDOM – headless browser
● Jest – test runner, assertion library, spy tool, optimized for React.js
● Mocha/Chai/Sinon – tools replaced by Jest
● Gitlab – code management tool, CI pipelines
● Allure – test report generator
GrandParadePoland

Project structure
● Tests in component directory
● Unit, component, integration tests
in the same directory
● Test mocks, helpers, user data
generators, DDT data in separate
common directory
● E2E tests in separate project
GrandParadePoland

Testing in React.JS project
GrandParadePoland

How React works
• Components – Componentis an object that encapsulates part of the app. Reusable and easy to test.
• Reactivity – Elements are rendered after every change
• Virtual DOM(DocumentObject Model) – Abstractequivalent of DOM, used to detect (by comparision) which
elements have changed and need to be re-rendered
• JSX – Allows to pass JS objects into HTML, e.g.
<div>
<ObjectJS />
</ div>
GrandParadePoland

Enzyme – what it is?
Enzyme is a JavaScript Testing utility forReact that makes it easier to render, assert and manipulate your
React Components' output.
Enzyme – Airbnb projectwith more than 200 contributors
Decentdocumentationbut very general, with very basic examples
http://airbnb.io/enzyme/
GrandParadePoland

Enzyme – DOM testing
Shallow
• Don't render children
• Isolated - test cannot affecteach other
• Faster than Mount
Render
• Renders Static HTML structure
• With children
Mount
• Renders full DOM
• Includes the logic of components
• Testcan affecteach other
GrandParadePoland

.find()
<input type="text" id="reg-firstName" class="sb-input sb-input--error"
placeholder="" name="firstName" value="">
Supported CSS Selectors
ID element = wrapper.find('#reg-firstName');
Class Name element = wrapper.find('.sb-input');
Atribute element = wrapper.find('[name="firstName"]');
Elementtype element = wrapper.find('input[name="firstName"]');
Contextual element = wrapper.find('input.sb-input');
element = wrapper.find(('#reg-firstName > .sb-input-error');
GrandParadePoland

.find()
Not Supported Selectors
Pseudo Class element = wrapper.find('input:not([disabled])');
Enzyme received a pseudo-class CSS selector ('input:not([disabled])') that it does not currently support
Xpath element = wrapper.find('//*[@id="reg-firstName"]');
Supported getters
elements.first()
elements.last()
elements.at(n) – n-th element
Usage example:
element2 = wrapper.find('.sb-input').at(1)
GrandParadePoland

.simulate()
.simulate('focus')
.simulate('blur')
.simulate('click')
.simulate('change', { target: { value: 'New value' }})
When to use change?
• change dropdownvalue
• check/uncheckcheckbox
When to use click?
• click on button
• click on clickable span
GrandParadePoland

Jest assertions examples
.toBe()
expect(someBoolean).toBe(true);
.toEqual()
expect('chicken').toEqual('chicken');
expect(number).toEqual(5);
.toContain()
expect('fried chicken').toContain('chicken');
.toBeGreaterThan()
expect(100).toBeGreaterThan(99)
GrandParadePoland

Test examples
describe('Username field tests', () => {
beforeEach(() => {
wrapper = mount(
<Component {...props} />
);
});
it('Not a test, just console log',() => {
input = wrapper.find('#reg-firstName');
console.log(input.debug());
});
});
GrandParadePoland
Props Example
const props = {
name: 'username',
hintText:'USERNAME_HINT',
placeholder:'USERNAME_PLACEHOLDER',
...
}

GrandParadePoland
.debug() vs HTML in browser
<input id="reg-username" type="text" className="sb-input"
placeholder= "USERNAME_PLACEHOLDER" name="username” onBlur={[Function]}
onChange={[Function]} onDragStart={[Function]} onDrop={[Function]}
onFocus={[Function]}
value="" />

Test examples
it('Empty value on initial state', () => {
expect(wrapper.find(
'input[name="username"]').value).toEqual('');
});
it('Placeholder is rendered', () => {
expect(wrapper.find('input[name="username"]')
.prop('placeholder'))
.toEqual('USERNAME_PLACEHOLDER');
});
GrandParadePoland
Rendered component (wrapper)
<input
id="reg-username"
type="text"
className="sb-input"
placeholder= "USERNAME_PLACEHOLDER"
name="username"
onBlur={[Function}
onChange={[Function]}
onDragStart={[Function]}
onDrop={[Function]}
onFocus={[Function]}
value="" />

Test examples
it('Username has less then minimum number of characters',() => {
wrapper.find('input[name="username"]')
.simulate('change', { target: { value: 'abcde' } })
.simulate('blur');
expect(wrapper.find('.sb-input-error').text())
.toEqual('USERNAME_ERROR_MIN_LENGTH');
});
it('Username has minimum number of characters',() => {
.simulate('change', { target: { value: 'abcdef' } })
.simulate('blur');
expect(wrapper.find('.sb-input-error').length).toEqual(0);
});
GrandParadePoland

Test examples – cleaning from hardcoded values ☺
it('CSF-38.AC04.02 Validation: negative minimum',() => {
.simulate('change', { target: { value: 'abcde' } })
.simulate('blur');
expect(wrapper.find('.sb-input-error').text())
.toEqual('USERNAME_ERROR_MIN_LENGTH');
});
it(testDesc.acceptance(testDesc.validation(`negative minimum (${fields.username.min
- 1})`), ticket, 'AC04', '02'), () => {
wrapper.find(fields.username.cssSelector)
.simulate('change', { target: { value: getUsers.username.invalidMin } })
.simulate('blur');
verifyError(wrapper, fields.username, baseErrors.min);
});
GrandParadePoland

Data Driven Testing
Recommended tools for Jest
○ jest-in-case
○ Sazerac
Jest-in-case
○ Cases function
○ Data Object
○ Results
○ More than DDT
GrandParadePoland

Snapshot tests – how it works
it('renders correctly', () => {
const tree = renderer.create(<Link page="http://www.facebook.com">Facebook</Link>)
.toJSON();
expect(tree).toMatchSnapshot();
});});
exports[`renders correctly 1`] = `
<a className="normal"
href="http://www.facebook.com"
onMouseEnter={[Function]}
onMouseLeave={[Function]} > Facebook </a>
`;
GrandParadePoland
Test
Snapshot

Snapshot tests
● Easy testing in some cases, typical examples:
○ renders of React.js components
○ other serializable data
● Generated when component is ready (not for TDD)
● Code coverage works with snapshots
● Updated on demand
● Need mocks if data in component changing
● Significantly slower than typical unit and component tests
● Stored in code repository (may increase repo size)
GrandParadePoland

Reporting and timescale
GrandParadePoland

Jest - reporting
Console
IntelliJ and WebStorm
Allure – local HTML reportand Jenkinsplugin
GrandParadePoland

Tests in CI
Gitlab Pipelines
● Automated start (push, merge)
● Easy parallelization
● Bock git actions when tests fail
● Configurable
● Job as code approach
GrandParadePoland

Tests in CI – Jenkins - integration with E2E
Jenkins
● Jobs / Multijob
● Allure plugin
GrandParadePoland

Timescale
Remarks
• execution time from Jenkins jobs, tests run parallel as Jenkins jobs
• Old – Java, cucumber, selenium
• New – JS, unit, component, integration - enzyme, E2E – webdriver.io
GrandParadePoland
Old - E2E New - component
Unit 1 min. 2 min.
Component - 2 min.
Integration 2 min. 1 min.
E2E > 55 min. approx. 10-15 min
Total > 55 min. approx. 10-15 min

How about test pyramid?
GrandParadePoland

Summary
GrandParadePoland

GrandParadePoland
Pros & Cons of our approach
Advantages
• Tests are less time consuming
• Stability of tests are much better
• Automated testing can be started earlier in
software developmentlife cycle
• QAs better understand how software works
internally – more opportunities to create good
test cases
Disadvantages
• Requires good cooperationand help from
developmentteam
• QAs have to adapt to developers’workflow and
projectrules
• Some tools have poordocumentation
• Some features in test tools are not mature yet

Questions?
GrandParadePoland

KraQA #29 - Component level testing of react app, using enzyme

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a KraQA #29 - Component level testing of react app, using enzyme

Similar a KraQA #29 - Component level testing of react app, using enzyme (20)

Más de kraqa

Más de kraqa (20)

Último

Último (20)

KraQA #29 - Component level testing of react app, using enzyme