Testing Router Outlet

Angular Challenges #17 Router Testing

Built With

• Angular
• Angular CLI version 16.2.0.
• Testing Library Angular
• Jest
• Cypress

Thoughts

• Cypress 13 is a mess right now (Sept 2023).
• I think the lazy loading of the search component causes the button to not appear as disabled and prevents the error class from being in the dom on the initial load. Testing-library sees fallback html without either thing being set.
• Thus, you need to do something to get the component to re-render.
• screen.debug() is extremely useful.
• When running the app, you don't have to click the link to show the form like you have to do in cypress.
• There is a weird disconnect between actions necessary for tests but not when you run the app.
• I was tempted to add selectors to the html at points. The selectors I used are mostly generic and a developer possibly would have to change them if the app were to be reworked.
• When using jest with angular, there are issues with using modules. You have to use a different jest.config and add other properties to the tsconfig.spec.json. Even with all the extra boilerplate, I've had problems getting a configuration that works reliably. I think module testing errors could be library-specific.
• With jest tests, you get a warning error - Error: Not implemented: navigation (except hash changes). Need to investigate more.
• It may have been better to vary test queries more but I think the challenge has a compare and contrast element to it. (Testing-Library vs Cypress)

How to Use

git clone https://github.com/jdegand/testing-router-outlet.git

# cd into the directory
npm install

# Jest 

npm test

# Jest with Coverage

npm run test:coverage

# Cypress

npm run cypress:open

Useful Resources

• Blog - this seems to be the inspiration for this challenge
• CodeCraft - routing testing old way
• Github - jest dom toBeDisabled()
• Jest Preset Angular- problems from modules
• Stack Overflow - cannot find module
• Github - Previous render sometimes leaking into next test
• Stack Overflow - best way to test input value in dom testing library or react testing library
• Stack Overflow - how to fix error not implemented navigation except hash changes
• Cypress Docs - angular examples
• Github - angular standalone app.component.cy.ts
• Stack Exchange - check a button is disabled in Cypress
• BrowserStack - cypress test if element exists