Skip to content

ng-mocks VS Code Snippets

Contents:

Overview

ng-mocks is a testing library which helps with mocking services, components, directives, pipes and modules in tests for Angular applications.

Snippets in Visual Studio Code (VSCode)

Code snippets are templates that make it easier to enter repeating code patterns, such as loops or conditional-statements. VSCode has built-in snippets and also allows you to create your own snippets.

Below are ngmocks snippets we use for different use cases: services, versus components, etc.

{
  // Place your snippets for typescript here. Each snippet is defined under a snippet name and has a prefix, body and
  // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
  // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
  // same ids are connected.
  // Example:
  // "Print to console": {
  //    "prefix": "log",
  //    "body": [
  //        "console.log('$1');",
  //        "$2"
  //    ],
  //    "description": "Log output to console"
  // }
  "Angular Component Spec": {
    "prefix": ["spec-component"],
    "body": [
      "import { MockBuilder, MockRender } from 'ng-mocks';",
      "",
      "describe('${1:component}', () => {",
      "  let component: ${1:component};",
      "",
      "  beforeEach(() => MockBuilder(${1:component}, ${2:module}));",
      "",
      "  beforeEach(() => component = MockRender(${1:component}).point.componentInstance);",
      "",
      "  it('should create', () => {",
      "    expect(component).toBeTruthy();",
      "  });",
      "});"
    ]
  },
  "Angular Service Spec": {
    "prefix": ["spec-service"],
    "body": [
      "import { MockBuilder, MockRender } from 'ng-mocks';",
      "",
      "describe('${1:service}', () => {",
      "  let service: ${1:service};",
      "",
      "  beforeEach(() => MockBuilder(${1:service}, ${2:module}));",
      "",
      "  beforeEach(() => service = TestBed.inject(${1:service}));",
      "",
      "  it('should create', () => {",
      "    expect(service).toBeTruthy();",
      "  });",
      "});"
    ]
  },
  "Jasmine Spy Return Value": {
    "prefix": ["spy-return"],
    "body": ["jasmine.createSpy().and.returnValue({} as ${1:returnType})"]
  },
  "Jasmine Spy Return Async Value": {
    "prefix": ["spy-return-async"],
    "body": ["jasmine.createSpy().and.returnValue(of({} as ${1:returnType}))"]
  },
  "Jasmine Spy No Return Value": {
    "prefix": ["spy"],
    "body": ["jasmine.createSpy()"]
  },
  "TestBed Inject": {
    "prefix": ["testbed"],
    "body": ["TestBed.inject(${1:serviceType})"]
  }
}