Improve code coverage

[mithi]

Related to #38

Readings and videos

• [x] Writing Better Tests with React Testing Library - Time to React - August 2019
• [x] How to use React Testing Library Tutorial
• [x] Five Things You (Probably) Didn't Know About Testing Library
• [x] Common mistakes with React Testing Library
• [x] Avoid Nesting when you're Testing
• https://istanbul.js.org/
• https://jestjs.io/docs/en/tutorial-react
• [ ] Advanced React Component Mocks https://medium.com/@ericdcobb/advanced-react-component-mocks-with-jest-and-react-testing-library-f1ae8838400b

[mithi]

Partially fixed by: https://github.com/mithi/hexapod/pull/87

(from 58 to 77 percent)

[mithi]

jest.fn()

• https://stackoverflow.com/questions/57643808/what-is-the-difference-between-jest-fn-and-jest-spyon-methods-in-jest
• https://medium.com/@rickhanlonii/understanding-jest-mocks-f0046c68e53c

My simple understanding of these two functions in react/frontend projects is the following:
jest.fn()

    You want to mock a function and really don't care about the original implementation of that function
    Often you just mock the return value
    This is very helpful if you want to remove dependencies to the backend (e.g. when calling backend API) or third party libraries in your tests
    It is also extremly helpful if you want to make real unit tests. You don't care about if certain function that gets called by the unit you test is working properly, because thats not part of it's responsibility.

jest.spyOn()

    The original implementation of the function is relevant for your test, but:
        You want to add your own implementation just for a specific scenario and then reset it again via mockRestore()
        You just want to see if the function was called
        ...
    I think this is especially helpful for integration tests, but not only for them!

Fire Events

• https://testing-library.com/docs/dom-testing-library/api-events

fireEvent.change(getByLabelText(/username/i), { target: { value: 'a' } })

fireEvent(node: HTMLElement, event: Event)

// <button>Submit</button>
const rightClick = { button: 2 }
fireEvent.click(getByText('Submit'), rightClick)
// default `button` property for click events is set to `0` which is a left click.

fireEvent.keyDown(domNode, { key: 'Enter', code: 'Enter' })
fireEvent.keyDown(domNode, { key: 'A', code: 'KeyA' })

[mithi]

App.js

https://codecov.io/gh/mithi/hexapod/src/master/src/App.js

inverse-kinematics

https://codecov.io/gh/mithi/hexapod/src/master/src/components/pages/InverseKinematicsPage.js

• move tx slider, value near label should update
• move all 8 sliders and see if PoseTable angles are updated
• clicking reset will reset all 8 sliders back to zero
• move all the sliders such that it will be in an unstable position, check back if it triggers an alert saying the expected failure message

Leg Patterns

https://codecov.io/gh/mithi/hexapod/src/master/src/components/pages/LegPatternPage.js

• move alpha slider, value near its label should change
• change dimension field tibia to a positive number, value inside the text field should change
• clicking reset in leg patterns widget should reset all 3 sliders back to zero

DimensionsWidget

https://codecov.io/gh/mithi/hexapod/src/master/src/components/DimensionsWidget.js

• Toggle the switch (checkbox) the label should change from 1x to 5x and back
• change dimension field side to a positive number, value inside the text field should change
• change dimension field femur to a negative number, value inside the text field should NOT change
• clicking reset in dimensions widget should reset all dimensions field back to default (100)

ForwardKinematicsPage

https://codecov.io/gh/mithi/hexapod/src/master/src/components/pages/ForwardKinematicsPage.js https://codecov.io/gh/mithi/hexapod/src/master/src/components/pages/LegPoseWidgets.js

• Toggle the switch (checkbox) we should see 18 sliders instead of 18 spin buttons and back
• change the leftMiddle-gamma to a negative number, if in slider mode, the value near its label should change
• change the leftBack-alpha to a non-number character, value inside the text field should NOT change
• clicking the reset button should reset all the values back to default

NumberInputField

https://codecov.io/gh/mithi/hexapod/src/master/src/components/generic/NumberInputField.js

• Move the number input field that doesn't match min, max, step, and nan it should not update it's value and the error should be displayed at the bottom

Vector.js

https://codecov.io/gh/mithi/hexapod/src/master/src/hexapod/Vector.js Unit test toMarkdownString()

[mithi]

Try Cypress