{"id":21307444,"url":"https://github.com/jdegand/testing-modal","last_synced_at":"2026-05-12T19:12:14.168Z","repository":{"id":193972667,"uuid":"689809381","full_name":"jdegand/testing-modal","owner":"jdegand","description":"Angular Challenges #20 Modal Testing","archived":false,"fork":false,"pushed_at":"2023-10-04T16:38:20.000Z","size":170,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-22T09:12:48.190Z","etag":null,"topics":["angular","angular-challenges","cypress","jest","testing-library"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jdegand.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-09-11T00:20:38.000Z","updated_at":"2023-09-13T00:36:01.000Z","dependencies_parsed_at":"2023-10-04T22:23:20.693Z","dependency_job_id":null,"html_url":"https://github.com/jdegand/testing-modal","commit_stats":null,"previous_names":["jdegand/testing-modal"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdegand%2Ftesting-modal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdegand%2Ftesting-modal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdegand%2Ftesting-modal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdegand%2Ftesting-modal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jdegand","download_url":"https://codeload.github.com/jdegand/testing-modal/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243784103,"owners_count":20347409,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular-challenges","cypress","jest","testing-library"],"created_at":"2024-11-21T16:32:01.932Z","updated_at":"2026-05-12T19:12:14.130Z","avatar_url":"https://github.com/jdegand.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Testing Modal\n\n[Angular Challenges](https://github.com/tomalaforge/angular-challenges) #20 Modal Testing\n\n## Built With\n\n- [Angular](https://angular.io)\n- [Angular CLI](https://github.com/angular/angular-cli) version 16.2.0.\n- [Testing Library Angular](https://testing-library.com/docs/angular-testing-library/intro)\n- [Jest](https://jestjs.io)\n- [Cypress](https://www.cypress.io)\n\n## Directions\n\nThe goal of this challenge is to test dialogs inside your application. Within this program, you will get an error modal if the user doesn't input a name, while a confirmation modal will appear in all other cases. In the confirmation modal, if you click the \"confirm\" button, a message confirming the submission of the form will appear. Otherwise, if the user clicks on \"Cancel\", an error message will be displayed.\n\n## Thoughts\n\n- I didn't include Angular Material animations.  \n- The mat-input apparently has an animation so I had to ignore uncaught exceptions for the Cypress tests to work.\n- I updated `App.config.ts` to include provideAnimations() in the providers array, but the error still persists.  There is a misconfiguration ?     \n- My first thought on how to test a modal was to just use `document.querySelector` to grab the elements of the modal after a click on the button that brings up the modal.\n- Using `document.querySelector` is kind of cheating; you are not using testing library query selectors.  \n- The HTML doesn't provide much that is specific to each element that would make selecting each element easier.  \n- I added data-cy attributes to the buttons because I had difficulty getting the click on the right part of the button.  The buttons have multiple layers and targeting the inner layer prevents clicks from registering.   \n\n## How to Use\n\n```bash \n\ngit clone https://github.com/jdegand/testing-modal.git\n\n# cd into the directory\nnpm install\n\n# Jest \n\nnpm test\n\n# Jest with Coverage\n\nnpm run test:coverage\n\n# Cypress\n\nnpm run cypress:open\n```\n\n## Useful Resources\n\n- [Testing Library](https://testing-library.com/docs/example-react-modal/) - example react modal\n- [Stack Overflow](https://stackoverflow.com/questions/70784317/angular-unit-test-for-modal-popup) - angular unit test for modal popup\n- [Medium](https://lalit-kushwah.medium.com/how-to-write-unit-test-cases-for-the-modal-component-part-3-3-e62a395a97a) - write unit test cases for modal component\n- [YouTube](https://www.youtube.com/watch?v=m3BY6333CKc) - Unit Testing Angular Component With Material Dialog | MatDialog | Jasmine | Karma | With Source Code\n- [Stack Overflow](https://stackoverflow.com/questions/53845493/cypress-uncaught-assertion-error-despite-cy-onuncaughtexception) - cypress uncaught assertion error despite cy on uncaught exception\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjdegand%2Ftesting-modal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjdegand%2Ftesting-modal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjdegand%2Ftesting-modal/lists"}