Lecture 6
§Vít Svoboda


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 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?
§
§