Vladyslav Romanchenko "How to keep high code quality without e2e tests"

1. HOW TO KEEP HIGH CODE
QUALITY WITHOUT E2E TESTS

2. „Vladyslav Romanchenko,
„Senior QA Automation/UI
Developer @Luxoft
„5+ years experience in Test
Automation and
Development
WHO AM I?

3. WHAT DO WE TEST?

4. REQUIREMENTS
„Fast, reliable UI tests
„Test should be used during development
„Tests should run and pass even if BE is down
„Tests should not require much maintenance

5. THE PROBLEMS WE HAD WITH E2E
„No Predictable Data
„Human review of Events
„UI tests are unstable
„Some daemons are running once in 2 minutes

6. SOLUTION
„Use Unit and Integration tests

7. THE RESULTS WE GOT
„Tests are finished in 73 seconds
„Tests are finding errors
„Tests help develop faster

8. MAIN FUNCTIONS OF UI
1. Send correct requests to BE
2. Calculate or prepare data using helper
functions or Redux
3. Correctly render information from BE
4. Respond to user interaction through Event
Listeners

9. TECHNOLOGIES USED
„React
„Redux
„Enzyme/React testing library
„Jest

10. TECHNOLOGY BASICS
What is React?

11. TECHNOLOGY BASICS
React allows to create small reusable
components that contain all the needed HTML,
CSS and JavaScript code (JSX)

12. TECHNOLOGY BASICS

13. TECHNOLOGY BASICS
Redux – Predictable state container for
JavaScript apps

14. TECHNOLOGY BASICS
Important to know about Redux:
„Manages global state for all the application
„Uses pure functions
„State is always immutable
„New state is created using Actions

15. TECHNOLOGY BASICS

16. TECHNOLOGY BASICS
Action is a simple JS object that has type field:

17. TECHNOLOGY BASICS
Reducer is a function that takes state and action
and returns new state:

18. TECHNOLOGY BASICS
Selector is a function that takes state and returns
only parts that are needed. Use ’reselect’ to
memoize selectors:

19. WHAT TO TEST
„Helper Functions
„Action Creators
„Reducer
„Selectors
„Components rendering
„Component event handlers
„Component helper functions (class methods)

20. HOW TO TEST
HELPER FUNCTIONS

21. ASIDE
There are 3 types of functions:
ØPure functions
ØImpure functions
ØClosures

22. ASIDE
Pure functions always return the same result for
the same arguments.

23. ASIDE
Result of Impure functions depends on some
other variable, state or function changes
arguments that are passed to it

24. ASIDE
Closures return function as a result

25. ASIDE
Pure function

26. ASIDE
Impure function

27. ASIDE
Impure function that uses state

28. ASIDE
Closure

29. ASIDE
Closure/Thunk

30. HOW TO TEST

31. HOW TO TEST
Pure function

32. HOW TO TEST
Mock everything to test Impure functions

33. HOW TO TEST
Call functions immediately to test closures

34. HOW TO TEST
ACTION CREATORS/THUNKS

35. ASIDE
Thunk allows to dispatch functions instead of an
actions.
It is used to send requests to BE and create side
effects.

36. ASIDE
Thunk example

37. HOW TO TEST
Simple Action Creator testing steps:
„Mock Store
„Dispatch Action
„Check what Actions were emitted

38. HOW TO TEST
Mock Store

39. HOW TO TEST
Run test

40. HOW TO TEST
Async Action Creators testing steps:
„Mock Store
„Mock Fetch/Async action
„Dispatch Action
„Check what Actions were emitted
„Check how fetch was called

41. HOW TO TEST
Use async to make your tests asynchronous in
order to test requests that are being sent

42. HOW TO TEST
Use await to check the result

43. HOW TO TEST
Mock fetch to check requests
You can do it in config

44. HOW TO TEST
If you are using TypeScript you would need to use
FetchMock interface

45. HOW TO TEST
Now you are ready to mock API responses

46. HOW TO TEST
Don’t forget to run some negative tests

47. HOW TO TEST
Time to check the results

48. HOW TO TEST
Don’t forget await, when checking

49. HOW TO TEST
What to do if there is an error thrown?

50. HOW TO TEST
Use try/catch when you expect error

51. HOW TO TEST
Modify state to check functions that use data
from state

52. HOW TO TEST
Use spys to mock functions

53. HOW TO TEST
REDUCER

54. HOW TO TEST
Steps to test Reducer
„Mock all the needed parts of state
„Prepare resulting state for each action
„Call reducer with mocked state
„Check the result

55. HOW TO TEST
Here is an example

56. HOW TO TEST
Change state directly in expect for simple cases

57. HOW TO TEST
SELECTORS

58. HOW TO TEST
Steps to test selectors
„Mock State or use resultFunc
„Check the output from selector

59. HOW TO TEST
Pass prepared state to selector

60. HOW TO TEST
Prepare expectedResult

61. HOW TO TEST
Call selector with prepared state

62. HOW TO TEST
Use resultFunc if selector takes other selectors as
inputs

63. HOW TO TEST
Use resultFunc if selector takes other selectors as
inputs

64. HOW TO TEST
COMPONENTS RENDERING

65. HOW TO TEST
Steps to test Component
„Use render to render component
„Use getByTestId or getByText to locate elements
„ Use fireEvent to interact with elements

66. HOW TO TEST
Rendering

67. HOW TO TEST
Fire event to check interaction

68. HOW TO TEST
Mock functions to check its parameters

69. WHAT TO DO NEXT
Next steps
„Refactor class methods to separate files
„Implement Visual regression in different
browsers

70. BONUS

71. BONUS
Use debugger and copy(variableName) to
prepare data for tests

72. BONUS
Insert debugger

73. BONUS
Once you reach debugger, an app is going to
pause

74. BONUS
Open console and run `copy` command with
variable name as parameter

75. Q & A