Testing NgRX

on YouTube ↗20m

" summary

Uses Cypress to tap the NgRx store in the browser (exposed only when window.cypress is true) so tests can assert last action type and its props and dispatch actions via window.store.invoke dispatch rather than only inspecting the DOM. Example app is a favorite TV show demo (github.comcreate this dot ngrx testing) where page load triggers a shows api get all shows success with four shows and clicking favorite dispatches favorite show clicked then an effect produces favorite show success with the expected show id.

AI-written summary · about

" chapters (8)

1. 0:00Start
2. 0:32Why End-to-End Testing for Ngrx
3. 2:44Testing Approach
4. 4:46Asserting on Ngrx Actions
5. 14:59The Cypress Test Runner in Action
6. 16:39Validating the Favorite Show Clicked Action and Effect
7. 17:37Validate via the Ngrx Store
8. 18:36Resources

" related talks

• 01h 04mRedux for Angular -- Introduction to Ngrx EcosystemMohamed Meligy · NDC Sydney 2018
• 45mReactive Testing Strategies with NgRxBrandon Roberts, Mike Ryan · NGConf 2018
• 28mUsing MockStore in NgRx 8John Crowson · AngularUP 2019
• 41mNgRx Mobile with IonicJesse Sanders · NGConf 2018
• 35mAdvanced NgRx TechniquesJesse Sanders · AngularUP 2019
• 27mngRx the last piece in the Angular architecture puzzleAsim Hussain · NG-NL 2017
• 44mAngular + Redux ... stop, what?Anton Bely · RS Conf 2019
• 37mTesting with MockStore in NgRx 9John Crowson · angularday 2020