# @srleecode/ng-msw

> Mock service worker is a great tool. However, while using it I have encountered two main issues

Latest version **0.0.14** (published 2022-08-13) · 0 weekly downloads

## Install

```sh
npm install @srleecode/ng-msw
pnpm add @srleecode/ng-msw
yarn add @srleecode/ng-msw
bun add @srleecode/ng-msw
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.14 |
| Published | 2022-08-13 |
| First published | 2022-03-12 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 94.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | srlee309 |

## Links

- npm: https://www.npmjs.com/package/@srleecode/ng-msw
- npm.io page: https://npm.io/package/@srleecode/ng-msw

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^2.3.0

## Recent versions

- 0.0.14 (latest) — 2022-08-13
- 0.0.13 — 2022-08-13
- 0.0.12 — 2022-08-12
- 0.0.11 — 2022-03-14
- 0.0.10 — 2022-03-14
- 0.0.9 — 2022-03-14
- 0.0.8 — 2022-03-14
- 0.0.7 — 2022-03-14
- 0.0.6 — 2022-03-13
- 0.0.5 — 2022-03-13
- 0.0.4 — 2022-03-12
- 0.0.3 — 2022-03-12
- 0.0.2 — 2022-03-12
- 0.0.1 — 2022-03-12

## README

# @srleecode/ng-msw

# Purpose

Mock service worker is a great tool. However, while using it I have encountered two main issues

- It is verbose. The majority of the mocks I use are simple json responses. This would require the below code in mock service worker

```
 rest.get('/users/:userId', (req, res, ctx) =>
   res(
     ctx.json({
       id: userId,
       firstName: 'John',
       lastName: 'Maverick',
     }),
   )
 ),
```

- It is async. This means if you want to reuse the same mocks in jest unit tests the tests will be more complicated.

# Solution

- `mswDecorator` and `initialize`. These can be used to start the mock service worker with a set of mocks that will be returned. This is to be used in the storybook tests.
- `HttpMockModule`. This loads a Angular interceptor that returns the mocks as observables. Using HttpMockModule makes it easy to use the mocks in jest tests with services.
- Both approaches consume `HttpMock` objects. This allows you to use the same mocks in the storybook tests and the jest service tests. The rest mock service worker example above can be written like this with a `HttpMock` object.

```
{
  url: '/users/:userId',
  response: {
    id: userId,
    firstName: 'John',
    lastName: 'Maverick',
  }
}
```

# Install

- Ensure you have msw setup, i.e. follow https://mswjs.io/docs/getting-started/install
- install the npm package
  `npm install @srleecode/ng-msw --save-dev`
  or
  `yarn add @srleecode/ng-msw --dev`
- add code to start mock service worker with the decorator to load the mocks in storybook .preview.js

```ts
import { initialize } from '@srleecode/ng-msw';

initialize();
export const decorators = [mswDecorator];
```

- Create mock objects

```ts
import { HttpMock, MswRequestHandler } from '@srleecode/ng-msw';

export const MOCKS: (HttpMock | MswRequestHandler)[] = [
  {
    url: '/users/:userId',
    response: {
      id: userId,
      firstName: 'John',
      lastName: 'Maverick',
    },
  },
];
```

- if in storybook add the mocks using a parameter. This paramter can be provided in the Meta which would apply it to all stories in the file, in the preview.js file which would apply it all stories or it can be provided in each story. For example:

```ts
export default {
  component: TestComponent,
  title: 'NgShared/MswMocks/Util',
  decorators: [
    moduleMetadata({
      imports: [TestModule, HttpClientModule, MswModule.forRoot(MOCKS)],
    }),
  ],
  parameters: {
    msw: MOCKS,
  },
} as Meta;
```

If in jest, add the `HttpMockModule`. For example,

```ts
TestBed.configureTestingModule({
  imports: [HttpClientModule, HttpMockModule.forRoot(mocks)],
});
```

# Using Msw directly

Some use cases might not currently be covered using the currently develop functionality. To overcome this you can use normal msw requests in the mocks. Note that these will be ignored when testing in jest with the HttpMockModule, but they will work in storybook with the MswModule.

```ts
import { HttpMock, MswRequestHandler } from '@srleecode/ng-msw';

export const MOCKS: (HttpMock | MswRequestHandler)[] = [
  rest.get('endpoint', (req, res, ctx) =>
    res(
      ctx.json({
        data: 'endpoint',
      })
    )
  ),
];
```

If there is a use case you would like to be supported using the `HttpMock` objects please raise an issue or feel free to raise a pull request.

---
_Source: https://npm.io/package/@srleecode/ng-msw · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._