{"id":13807941,"url":"https://github.com/help-me-mom/ng-mocks","last_synced_at":"2025-05-12T20:49:33.917Z","repository":{"id":37587976,"uuid":"121038641","full_name":"help-me-mom/ng-mocks","owner":"help-me-mom","description":"Angular testing library for mocking components, directives, pipes, services and facilitating TestBed setup","archived":false,"fork":false,"pushed_at":"2025-05-08T03:43:13.000Z","size":350001,"stargazers_count":1118,"open_issues_count":90,"forks_count":93,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-05-08T04:31:57.570Z","etag":null,"topics":["angular","component","directive","enzyme","front-end","frontend","how-to","jasmine","jest","mock","mocking","pipe","provider","service","test","testbed","testing"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/ng-mocks","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/help-me-mom.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":"CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":"satanTime"}},"created_at":"2018-02-10T17:46:16.000Z","updated_at":"2025-05-08T03:43:15.000Z","dependencies_parsed_at":"2022-07-18T06:30:29.709Z","dependency_job_id":"c298de1c-ef3e-45e0-b959-bfff6728cf15","html_url":"https://github.com/help-me-mom/ng-mocks","commit_stats":{"total_commits":9858,"total_committers":30,"mean_commits":328.6,"dds":0.3970379387299655,"last_synced_commit":"c90dbd8aff223e1a54a36fbac2f55c246dc42009"},"previous_names":[],"tags_count":213,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/help-me-mom%2Fng-mocks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/help-me-mom%2Fng-mocks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/help-me-mom%2Fng-mocks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/help-me-mom%2Fng-mocks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/help-me-mom","download_url":"https://codeload.github.com/help-me-mom/ng-mocks/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253002767,"owners_count":21838634,"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","component","directive","enzyme","front-end","frontend","how-to","jasmine","jest","mock","mocking","pipe","provider","service","test","testbed","testing"],"created_at":"2024-08-04T01:01:32.551Z","updated_at":"2025-05-12T20:49:33.887Z","avatar_url":"https://github.com/help-me-mom.png","language":"TypeScript","funding_links":["https://github.com/sponsors/satanTime"],"categories":["TypeScript","Testing"],"sub_categories":["Helpers"],"readme":"[\u003cimg src=\"https://img.shields.io/gitter/room/help-me-mom/ng-mocks\" alt=\"chat on gitter\" width=\"90\" height=\"20\" /\u003e](https://gitter.im/ng-mocks/community)\n[\u003cimg src=\"https://img.shields.io/npm/v/ng-mocks\" alt=\"npm version\" width=\"88\" height=\"20\" /\u003e](https://www.npmjs.com/package/ng-mocks)\n[\u003cimg src=\"https://img.shields.io/circleci/build/github/help-me-mom/ng-mocks/master\" alt=\"build status\" width=\"88\" height=\"20\" /\u003e](https://app.circleci.com/pipelines/github/help-me-mom/ng-mocks?branch=master)\n[\u003cimg src=\"https://img.shields.io/coveralls/github/help-me-mom/ng-mocks/master\" alt=\"coverage status\" width=\"104\" height=\"20\" /\u003e](https://coveralls.io/github/help-me-mom/ng-mocks?branch=master)\n\n# Mock components, services and more out of annoying dependencies for simplification of Angular testing\n\n`ng-mocks` facilitates **Angular testing** and helps to:\n\n- **mock Components**, Directives, Pipes, Modules, Services and Tokens\n- reduce boilerplate in tests\n- access declarations via simple interface\n\nThe current version of the library **has been tested** and **can be used** with:\n\n| angular | ng-mocks | jasmine | jest | ivy | standalone | signals | defer |\n| ------: | :------: | :-----: | :--: | :-: | :--------: | :-----: | :---: |\n|      20 |  latest  |   yes   | yes  | yes |    yes     |   no    |  no   |\n|      19 |  latest  |   yes   | yes  | yes |    yes     |   no    |  no   |\n|      18 |  latest  |   yes   | yes  | yes |    yes     |   no    |  no   |\n|      17 |  latest  |   yes   | yes  | yes |    yes     |   no    |  no   |\n|      16 |  latest  |   yes   | yes  | yes |    yes     |   no    |       |\n|      15 |  latest  |   yes   | yes  | yes |    yes     |         |       |\n|      14 |  latest  |   yes   | yes  | yes |    yes     |         |       |\n|      13 |  latest  |   yes   | yes  | yes |            |         |       |\n|      12 |  latest  |   yes   | yes  | yes |            |         |       |\n|      11 |  latest  |   yes   | yes  | yes |            |         |       |\n|      10 |  latest  |   yes   | yes  | yes |            |         |       |\n|       9 |  latest  |   yes   | yes  | yes |            |         |       |\n|       8 |  latest  |   yes   | yes  |     |            |         |       |\n|       7 |  latest  |   yes   | yes  |     |            |         |       |\n|       6 |  latest  |   yes   | yes  |     |            |         |       |\n|       5 |  latest  |   yes   | yes  |     |            |         |       |\n\n## Important links\n\n- **[Documentation with examples of Angular testing](https://ng-mocks.sudo.eu)**\n- [CHANGELOG](https://github.com/help-me-mom/ng-mocks/blob/master/CHANGELOG.md)\n- [GitHub repo](https://github.com/help-me-mom/ng-mocks)\n- [NPM package](https://www.npmjs.com/package/ng-mocks)\n\n* Live [example on CodeSandbox](https://codesandbox.io/p/sandbox/github/help-me-mom/ng-mocks-sandbox/tree/master/?file=/src/test.spec.ts)\n* Live [example on StackBlitz](https://stackblitz.com/github/help-me-mom/ng-mocks-sandbox?file=src/test.spec.ts)\n\n- [start a discussion on GitHub](https://github.com/help-me-mom/ng-mocks/discussions/new/choose)\n- **[ask a question on Stackoverflow](https://stackoverflow.com/questions/ask?tags=ng-mocks%20angular%20testing%20mocking)**\n- [report an issue on GitHub](https://github.com/help-me-mom/ng-mocks/issues)\n- [chat on gitter](https://gitter.im/ng-mocks/community)\n\n## Very short introduction\n\nGlobal configuration for mocks in `src/test.ts`.\nIn case of jest, `src/setup-jest.ts` / `src/test-setup.ts` should be used.\n\n```ts title=\"src/test.ts\"\n// All methods in mock declarations and providers\n// will be automatically spied on their creation.\n// https://ng-mocks.sudo.eu/extra/auto-spy\nngMocks.autoSpy('jasmine'); // or jest\n\n// ngMocks.defaultMock helps to customize mocks\n// globally. Therefore, we can avoid copy-pasting\n// among tests.\n// https://ng-mocks.sudo.eu/api/ngMocks/defaultMock\nngMocks.defaultMock(AuthService, () =\u003e ({\n  isLoggedIn$: EMPTY,\n  currentUser$: EMPTY,\n}));\n```\n\nAn example of a spec for a profile edit component.\n\n```ts title=\"src/profile.component.spec.ts\"\n// Let's imagine that there is a ProfileComponent\n// and it has 3 text fields: email, firstName,\n// lastName, and a user can edit them.\n// In the following test suite, we would like to\n// cover behavior of the component.\ndescribe('profile:builder', () =\u003e {\n  // Helps to reset customizations after each test.\n  // Alternatively, you can enable\n  // automatic resetting in test.ts.\n  MockInstance.scope();\n\n  // Let's configure TestBed via MockBuilder.\n  // The code below says to mock everything in\n  // ProfileModule except ProfileComponent and\n  // ReactiveFormsModule.\n  beforeEach(() =\u003e {\n    // The result of MockBuilder should be returned.\n    // https://ng-mocks.sudo.eu/api/MockBuilder\n    return MockBuilder(\n      ProfileComponent,\n      ProfileModule,\n    ).keep(ReactiveFormsModule);\n    // // or old fashion way\n    // return TestBed.configureTestingModule({\n    //   imports: [\n    //     MockModule(SharedModule), // mock\n    //     ReactiveFormsModule, // real\n    //   ],\n    //   declarations: [\n    //     ProfileComponent, // real\n    //     MockPipe(CurrencyPipe), // mock\n    //     MockDirective(HoverDirective), // mock\n    //   ],\n    //   providers: [\n    //     MockProvider(AuthService), // mock\n    //   ],\n    // }).compileComponents();\n  });\n\n  // A test to ensure that ProfileComponent\n  // can be created.\n  it('should be created', () =\u003e {\n    // MockRender is an advanced version of\n    // TestBed.createComponent.\n    // It respects all lifecycle hooks,\n    // onPush change detection, and creates a\n    // wrapper component with a template like\n    // \u003capp-root ...allInputs\u003e\u003c/profile\u003e\n    // and renders it.\n    // It also respects all lifecycle hooks.\n    // https://ng-mocks.sudo.eu/api/MockRender\n    const fixture = MockRender(ProfileComponent);\n\n    expect(\n      fixture.point.componentInstance,\n    ).toEqual(assertion.any(ProfileComponent));\n  });\n\n  // A test to ensure that the component listens\n  // on ctrl+s hotkey.\n  it('saves on ctrl+s hot key', () =\u003e {\n    // A fake profile.\n    const profile = {\n      email: 'test2@email.com',\n      firstName: 'testFirst2',\n      lastName: 'testLast2',\n    };\n\n    // A spy to track save calls.\n    // MockInstance helps to configure mock\n    // providers, declarations and modules\n    // before their initialization and usage.\n    // https://ng-mocks.sudo.eu/api/MockInstance\n    const spySave = MockInstance(\n      StorageService,\n      'save',\n      jasmine.createSpy(), // or jest.fn()\n    );\n\n    // Renders \u003cprofile [profile]=\"params.profile\"\u003e\n    // \u003c/profile\u003e.\n    // https://ng-mocks.sudo.eu/api/MockRender\n    const { point } = MockRender(\n      ProfileComponent,\n      { profile }, // bindings\n    );\n\n    // Let's change the value of the form control\n    // for email addresses with a random value.\n    // ngMocks.change finds a related control\n    // value accessor and updates it properly.\n    // https://ng-mocks.sudo.eu/api/ngMocks/change\n    ngMocks.change(\n      '[name=email]', // css selector\n      'test3@em.ail', // an email address\n    );\n\n    // Let's ensure that nothing has been called.\n    expect(spySave).not.toHaveBeenCalled();\n\n    // Let's assume that there is a host listener\n    // for a keyboard combination of ctrl+s,\n    // and we want to trigger it.\n    // ngMocks.trigger helps to emit events via\n    // simple interface.\n    // https://ng-mocks.sudo.eu/api/ngMocks/trigger\n    ngMocks.trigger(point, 'keyup.control.s');\n\n    // The spy should be called with the user\n    // and the random email address.\n    expect(spySave).toHaveBeenCalledWith({\n      email: 'test3@em.ail',\n      firstName: profile.firstName,\n      lastName: profile.lastName,\n    });\n  });\n});\n```\n\nProfit.\n\n## Extra\n\nIf you like `ng-mocks`, please support it:\n\n- [with a star on GitHub](https://github.com/help-me-mom/ng-mocks)\n- [with a tweet](https://twitter.com/intent/tweet?text=Check%20ng-mocks%20package%20%23angular%20%23testing%20%23mocking\u0026url=https%3A%2F%2Fgithub.com%2Fhelp-me-mom%2Fng-mocks)\n\nThank you!\n\nP.S. Feel free to [contact us](https://ng-mocks.sudo.eu/need-help) if you need help.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhelp-me-mom%2Fng-mocks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhelp-me-mom%2Fng-mocks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhelp-me-mom%2Fng-mocks/lists"}