Author and run tests for librarie.js

!Welcome to the librarie.js wiki!

Setup Test framework for librarie.js

Jest is a test framework for writing UI unit tests for React applications. Chai, Enzyme are some of the assertion libraries useful for react testing.

Set up

`$ npm install`
`$ npm install --save-dev jest babel-jest `   
`$ npm install --save-dev ts-jest @types/jest` //To support typescript
`$ >npm install jest -g` // To run single test file.  

Run

Command to run all tests $ npm run test

Command to run single test file $ jest testfile.ts Test files are at folder ./__test__/

Sample Coverage report looks like

Jest test structure:

An example test

Steps:

1. Define a test suite by keyword “describe”.
2. Define a test “it”.
3. Verify results by using “expect”.

describe("sample test", function () {
  it("should add two numbers", function () {
    expect(1 + 2).to.equal(3);
  });
});

Test with Jest + Enzyme

Enzyme API focus on rendering the react component and retrieving specific nodes from the rendered tree. There are different ways to render a component.

UI test with shallow

• Renders only the component under test.
• Dependent components are not rendered,so very useful in writing tests for single unit.

it("should create a LibraryContainer", function () { 
let libContainer = shallow(
      libController.createLibraryContainer(layoutSpecsJson, loadedTypesJson)
    );
expect(libContainer.find('SearchView')).to.have.lengthOf(1);
let libraryItem = libContainer.find('LibraryItem');
expect(libraryItem).to.have.lengthOf(1); } 

UI test with mount

Render the component using enzyme function "mount" as we want to test the nested items. Example test to verify the mouse event expands the library item.

Steps:

1. Define Create libraryItem for unit test.
2. Mouse event is implemented on child item of libraryItem.
3. Access child item to simulate the mouse click using enzyme function simulate.
4. Verify "Props" to test for attributes.
5. Verify "State" for testing events.

it("should create a LibraryContainer", function () {
let libContainer = libController.createLibraryContainer(layoutSpecsJson, loadedTypesJson);
let libraryItem = mount(<LibraryItem libraryContainer={libContainer} data={data} />); 
expect(libraryItem.props().data.showHeader).to.be.true;
expect(libraryItem.props().data.childItems[0].text).to.equal("Child0"); 
let header = libraryItem.find(('div.LibraryItemHeader')).at(0);
expect(header).to.have.lengthOf(1);// verify that there is a header
header.simulate('click');// enzyme function to simulate mouse click
expect(libraryItem.state('expanded')).to.be.true; }

UI Snapshot test

A snapshot test verify that the component works correctly by rendering it with the same data, and comparing the rendered HTML against the saved snapshot

Steps:

1. Define Create libraryItem for unit test.
2. Render the libraryItem using "shallow" since we want to test single component.
3. Create and compare snapshot by adding lines "expect(toJson(libraryItem)).toMatchSnapshot()" The first time test is run it creates a snapshot in "snapshots" folder. When running the test next time it compares new snapshot with the previously saved snapshot. Example test for component library item.

it("Test UI rendering of Library Item", function () {
let data = new ItemData("");
data.text = "TestItem";
data.itemType = "none";
let libContainer = LibraryEntryPoint.CreateLibraryController();
let libraryItem = shallow(<LibraryItem libraryContainer={null} data={data} />); 
expect(libraryItem ).toMatchSnapshot();  
}); 

• File structure of snapshots

  Each test file "file.tsx"a corresponding output file "file.tsx.snap" is created in "snapshots" Multiple snapshots are written into the smae .snap file. Each snapshot in the .snap file starts by statement exports[xxxxxxxxxx`] = ``. Create a separate file "test.tsx" for tests with large snapshot data for easy reviewing of snapshot failures.

• Snapshot content

  An example of snapshot created by shallow rendering is shown below.

exports[`LibraryContainer Test UI rendering of Library Item 1`] = `
<div
  className="LibraryItemContainerNone"
>
  <div
    className="LibraryItemHeader"
    onClick={[Function]}
    onMouseLeave={[Function]}
    onMouseOver={[Function]}
  >
    <img
      className="Arrow"
      onError={[Function]}
      src="test-file-stub"
    />
    <img
      className="LibraryItemIcon"
      onError={[Function]}
      src=""
    />
    <div
      className="LibraryItemText"
    >
      TestItem
    </div>
  </div>
  <div
    className="LibraryItemBodyContainer"
  >
    <div
      className="LibraryItemBodyElements"
    />
  </div>
</div>
`;

• Update failed snapshot

$ npm test -- -u

When a component is modified due to a fix the new snapshot will have the updated output and it will show the snapshot as failed. Check the diff in the console and check if the change is intended.

Snapshot will fail in case of bugs, which are fixed after the code review.