I was planning to write tests for the editor. Since there does not exist tests currently in the editor I wanted to discuss regarding the structure of the tests and type of testing required. I did some research and at the moment I came up with the following
Client Testing
Some of the work for client testing has been inspired from the tests written for Navbar component. I plan to use shallow rendering of the components. It is useful to constrain testing a component as a unit, and to ensure that tests aren’t indirectly asserting on behavior of child components.
I did some research regarding testing for redux connected components. I found that testing them without store is better and we can just test the functionality of our component without passing the store .
Each react Component can be tested for the following:-
React Snapshot Testing
Snapshot Testing is a useful testing tool in case we want to be sure that the user interface hasn’t changed. It doesn’t check about the functionality of a component. Components that have fixed UI can have snapshot testing. Snapshots testing is just testing without worrying about logic.
For example for a file node component snapshot testing would look like-
it('renders correctly', () => {
const tree = renderer
.create(<FileNode {...props} />)
.toJSON();
expect(tree).toMatchSnapshot();
});
Testing Props
Behaviour of components can be tested upon changing of certain props. For eg. in fileNode if isSelectedFile is true then appropriate class should be given.
it('it renders file node selected', () => {
const getWrapper = () => shallow(<FileNode {...props} isSelectedFile />);
const filenode = getWrapper();
expect(filenode.exists('.sidebar__file-item--selected')).toEqual(true);
});
Event testing
How will UI respond when certain event occurs. For eg. file should get selected when fileNode is clicked.
it('check selection of file on click', () => {
const getWrapper = () => shallow(<FileNode {...props} isSelectedFile />);
const fileNode = getWrapper();
const nameButton = fileNode.find('.sidebar__file-item-name');
nameButton.simulate('click', { stopPropagation() {} });
expect(fileNode.exists('.sidebar__file-item--selected')).toEqual(true);
});
Testing Reducers
React reducers can be tested using jest. I plan to write tests for all the reducers. To check the assignment of initialState and then functioning of the reducers.
describe('ide reducer', () => {
it('should return the initial state', () => {
expect(ide(undefined, {})).toEqual(initialState);
});
it('should handle START_SKETCH', () => {
const startSketch = {
type: actions.START_SKETCH
};
expect(ide({}, startSketch)).toEqual({ isPlaying: true });
});
Testing State
How does the state of a component responds upon calling of an event.
Server Testing
I plan to write tests for the controller functions. I am not sure how this can be done. One of the possible way is to maintain a test database. Seed it at start of each test and drop it after the test. It will result in each test having same data to test with and test outcome can be determined.
I need reviews and suggestions on the above, along with maybe new tests which can be implemented?
Code can be viewed here.
Thanks for your time!
.