Angular Challenges #28 Checkbox Testing
- Angular
- Angular CLI version 16.2.0.
This is the perfect example to get started with Testing Library.
You will need to only check if the button gets enabled when clicking on the checkbox
You can look into debug function to get full power of Testing Library like:
- logRoles(...);
- screen.debug(); // you can pass a element as input
- screen.logTestingPlaygroundURL(); // you can pass a element as input
- You can add @testing-library to an angular app with karma and jasmine and it will work without extra configuration.
- However, @testing-library/user-event appears to have issues.
- userEvent may have an await bug. See Github for more.
- fireEvent works no problem with same code structure.
- I can't get userEvent to work.
- I did not double install @testing-library/dom.
- I tried invoking view.detectChanges() after the click to no avail. (const view = await render(appComponent))
- I also tried wrapping the click event with waitFor but that failed as well.
- So I decided to install jest and remove karma and jasmine.
- I think testing with jest is easier anyway as you don't have to cast to HTMLButtonElement with jest.
- jasmine doesn't have a toBeEnabled() equivalent ?
- I didn't have to rewrite tests after the switch and it seems to work fine.
- I will try to mix user-event with testing-library, karma and jasmine in the future.
Property 'toBeChecked' does not exist on type 'JestMatchers<HTMLElement>'error when trying to use toBeChecked(). Need to add more dependencies for jest to fully work ?- Added @tesing-library/jest-dom and made other adjustments -> very flaky -> it initially worked until it errored out with no tests being run
- Something could be off. Angular's official support for jest can't come soon enough. Google needs to do a total overhaul of this. As of now, it is a minefield of nagging issues. Packages also need to be more explicit about if types are necessary or not.
- See Github for more.
- ng test won't work -> need to use npm test.
- YouTube - Angular with testing-library
- Stack Overflow - how to unit test the checkbox in angular2
- Github - testing library angular examples
- Stack Overflow - userEvent click does not work
- Github - user event issues
- Testing Library Docs - ecosystem jasmine dom
- Medium - angular unit testing with jest -> error -> ts-node should be dev dependency
- Github - toBeChecked() issues