{"id":25591390,"url":"https://github.com/bobbyg603/ng-testing-tips-ng-mocks","last_synced_at":"2026-05-14T22:32:47.066Z","repository":{"id":180445328,"uuid":"607289897","full_name":"bobbyg603/ng-testing-tips-ng-mocks","owner":"bobbyg603","description":"Companion repo with ng-mocks examples","archived":false,"fork":false,"pushed_at":"2023-03-19T22:44:00.000Z","size":240,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-11-10T22:16:30.749Z","etag":null,"topics":["angular","how-to","mocking","ng-mocks","testing","tutorial"],"latest_commit_sha":null,"homepage":"https://bobbyg603.medium.com/angular-testing-tips-ng-mocks-7d9300443a9c","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/bobbyg603.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-02-27T17:41:25.000Z","updated_at":"2025-07-24T14:36:59.000Z","dependencies_parsed_at":null,"dependency_job_id":"de33b4cd-366c-49fb-9a40-a2cd0caf9f75","html_url":"https://github.com/bobbyg603/ng-testing-tips-ng-mocks","commit_stats":null,"previous_names":["bobbyg603/ng-testing-tips-ng-mocks"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/bobbyg603/ng-testing-tips-ng-mocks","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bobbyg603%2Fng-testing-tips-ng-mocks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bobbyg603%2Fng-testing-tips-ng-mocks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bobbyg603%2Fng-testing-tips-ng-mocks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bobbyg603%2Fng-testing-tips-ng-mocks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bobbyg603","download_url":"https://codeload.github.com/bobbyg603/ng-testing-tips-ng-mocks/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bobbyg603%2Fng-testing-tips-ng-mocks/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33045580,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-13T13:14:54.681Z","status":"online","status_checked_at":"2026-05-14T02:00:06.663Z","response_time":57,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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","how-to","mocking","ng-mocks","testing","tutorial"],"created_at":"2025-02-21T09:51:15.525Z","updated_at":"2026-05-14T22:32:47.048Z","avatar_url":"https://github.com/bobbyg603.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![angular-testing-tips-ng-mocks](https://user-images.githubusercontent.com/2646053/226212437-86be77b1-4700-493a-9a2b-05ec0841f8a6.png)\n\n# Angular Testing Tips: Ng-Mocks\n\nThis repo demonstrates how to use the [ng-mocks](https://ng-mocks.sudo.eu/) and [jasmine-auto-spies](https://www.npmjs.com/package/jasmine-auto-spies) to write better Angular unit tests. A companion article for this repo can be found on Medium.\n\n## Steps 🥾\n\nClone or fork this repo\n\n```bash\ngit clone https://github.com/bobbyg603/ng-testing-tips-ng-mocks\n```\n\nInstall the dependencies\n\n```bash\ncd ng-testing-tips-ng-mocks \u0026\u0026 npm i \n```\n\nRun the sample application\n\n```bash\nnpm run start\n```\n\nRun the tests\n\n```bash\nnpm test\n```\n\n## Examples 🧑‍🏫\n\nUsing [MockComponent](https://ng-mocks.sudo.eu/api/MockComponent), we can easily declare fake components with all the propert `inputs` and `outputs` and use them in our tests.\n\n[app.component.spec.ts@536ef8d](https://github.com/bobbyg603/ng-testing-tips-ng-mocks/blob/536ef8d19be9be22a3e0b267ec315ea27cd49ba1/src/app/app.component.spec.ts#L32C8-L36)\n```ts\ndeclarations: [\n  AppComponent,\n  MockComponent(FormComponent),\n  MockComponent(CardComponent)\n],\n```\n\nDeclaring mocked providers is also easy to do with the help of MockProvider.\n\n[app.component.spec.ts@536ef8d](https://github.com/bobbyg603/ng-testing-tips-ng-mocks/blob/536ef8d19be9be22a3e0b267ec315ea27cd49ba1/src/app/app.component.spec.ts#L37-L39)\n```ts\nproviders: [\n  MockProvider(DogService, dogService)\n]\n```\n\nDitto for [MockModule](https://ng-mocks.sudo.eu/api/MockProvider).\n\n[app.component.spec.ts@536ef8d](https://github.com/bobbyg603/ng-testing-tips-ng-mocks/blob/536ef8d19be9be22a3e0b267ec315ea27cd49ba1/src/app/app.component.spec.ts#L27-L31)\n```ts\nimports: [\n  MockModule(FontAwesomeModule),\n  MockModule(MatProgressSpinnerModule),\n  MockModule(MatToolbarModule)\n],\n```\n\nWe can actually forgo all this noise by using [MockBuilder](https://ng-mocks.sudo.eu/api/MockBuilder).\n\n[app.component.ts](https://github.com/bobbyg603/ng-testing-tips-ng-mocks/blob/578b2d7602b3eb17fb749c918033514e7665af3b/src/app/app.component.spec.ts#L30-L37)\n```ts\nawait MockBuilder(AppComponent, AppModule)\n  .mock(FontAwesomeModule)\n  .mock(MatProgressSpinnerModule)\n  .mock(MatToolbarModule)\n  .mock(CardComponent)\n  .mock(DialogComponent)\n  .mock(FormComponent)\n  .provide({ provide: DogService, useValue: dogService });\n```\n\n[MockRender](https://ng-mocks.sudo.eu/api/MockRender) can be used as a drop in replacement for TestBed, and is super helpful for rendering custom templates and testing directives. For more information on `MockRender` see the companion article.\n\nWe can use [find](https://ng-mocks.sudo.eu/api/ngMocks/find), [findAll](https://ng-mocks.sudo.eu/api/ngMocks/findAll), [detectChanges](https://ng-mocks.sudo.eu/api/MockRender#testing-changedetectionstrategyonpush), [componentInstance](https://angular.io/guide/testing-components-basics#componentfixture), [nativeElement](https://angular.io/guide/testing-components-basics#nativeelement), and [querySelector](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector) to help us run expectations against child component [inputs and outputs](https://angular.io/guide/inputs-outputs).\n\n[app.component.ts](https://github.com/bobbyg603/ng-testing-tips-ng-mocks/blob/578b2d7602b3eb17fb749c918033514e7665af3b/src/app/app.component.spec.ts#L88-L137)\n```ts\ndescribe('template', () =\u003e {\n  beforeEach(() =\u003e {\n    rendered.detectChanges();\n    cardComponents = ngMocks.findAll(CardComponent).map(c =\u003e c.componentInstance);\n    formComponent = ngMocks.find\u003cFormComponent\u003e('app-form').componentInstance;\n  });\n\n  it('should render title', () =\u003e {\n    expect(rendered.nativeElement.querySelector('span.title')?.textContent).toMatch(app.title);\n  });\n\n  it('should pass breed to form', () =\u003e {\n    expect(formComponent.breed).toBe(app.breed);\n  });\n\n  it('should pass breeds to form', () =\u003e {\n    expect(formComponent.breeds).toBe(breeds);\n  });\n\n  it('should pass count to form', () =\u003e {\n    expect(formComponent.count).toBe(app.count);\n  });\n\n  it('should create card for each dog', () =\u003e {\n    dogs.forEach(dog =\u003e {\n      expect(cardComponents.find(c =\u003e c.imgSrc === dog)).toBeTruthy();\n    });\n  });\n\n  it('should show spinner when loading', () =\u003e {\n    rendered.componentInstance.loading$ = of(true);\n    rendered.detectChanges();\n    expect(ngMocks.find(MatProgressSpinner)).toBeTruthy();\n  });\n\n  it('should not show spinner when not loading', () =\u003e {\n    rendered.componentInstance.loading$ = of(false);\n    rendered.detectChanges();\n    expect(ngMocks.findAll(MatProgressSpinner).length).toBe(0);\n  });\n\n  it('should call onFormChange when form component raises formChange event', () =\u003e {\n    const event = { breed: 'affenpinscher', count: 3 };\n    const spy = spyOn(rendered.componentInstance, 'onFormChange');\n\n    formComponent.formChange.emit(event);\n\n    expect(spy).toHaveBeenCalledWith(event);\n  });\n});\n```\n\nIf you found this repo valuable please subscribe to [@bobbyg603 on Medium](https://medium.com/@bobbyg603) for more Angular tips and tricks. \n\nThanks for reading! \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbobbyg603%2Fng-testing-tips-ng-mocks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbobbyg603%2Fng-testing-tips-ng-mocks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbobbyg603%2Fng-testing-tips-ng-mocks/lists"}