Lecture 9
Patrik Medveď
Testing
Source: https://twitter.com/aaronabramov_/status/805913874704674816
Test categories
• Unit tests
• Integration tests
• End-to-end tests
TDD
1. Write a test
2. See the test fail
3. Fix the test by adding an implementation
Frameworks
A lot of them, as it happens with JavaScript, e.g.:
• Jasmine
• Mocha + Chai
• Jest
Mostly similar API.
What to Test in a React App?
• Reducers
• Thunk actions
• Utility functions
• Action creators?
• Components?
Dependency Injection
You may know from SOLID.
A bit different in JavaScript due to the lack of proper types. Closure to the rescue!
const stuffs = [];
function getStuff() {
// Whatever implementation
}
function loadStuff() {
const stuff = getStuff();
stuffs.push(stuff);
}
const stuffs = [];
function getStuff() {
// Whatever implementation
}
function loadStuffFactory(dependencies) {
return function () {
const stuff = dependencies.getStuff();
stuffs.push(stuff);
};
}
const loadStuff = loadStuffFactory({ getStuff });
Mocking
Passing a “mock” instead of a real dependency.
Test can check whether the mock was called and the parameters it was called with.
https://facebook.github.io/jest/docs/en/mock-functions.html
Testing Components
How to check the render returned correct elements?
• Relatively normal tests using Enzyme.
• Jest snapshot tests using react-test-renderer.
Rich Text Editor
A text area allowing to format the text and insert inline images etc.
People love it!
Draft.js
• React friendly
• It’s a framework – no built-in features
https://draftjs.org/
Building Own Rich-text Editor
• Formatting
• Decorators
• Entities with custom renderer
• Much more…
https://draftjs.org/docs/overview.html
EditorState
What is it? An Immutable.Record!
• contentState
• Represents the whole content
• Contains blocks
• Block
• key
• type
• text
• characterList – contains metadata for characters
• selectionState
• Contains information about selection
EditorState
What to do with it?
Functions convertToRaw & convertFromRaw for persistence.
https://draftjs.org/docs/api-reference-data-conversion.html
Export to HTML.
https://github.com/sstur/draft-js-utils/tree/master/packages/draft-js-export-html
Editors Based on Draft.js
Foundation for many fully-featured editors
• https://github.com/sstur/react-rte
• https://github.com/draft-js-plugins/draft-js-plugins
Questions?