From c1e2a8dcc530b20ef65f90cc26857a0a20632dba Mon Sep 17 00:00:00 2001
From: blam <ben@blam.sh>
Date: Tue, 14 Jul 2020 21:16:00 +0200
Subject: [PATCH] docs(adr): Created an ADR for MSW

---
 ...adr007-use-msw-to-mock-service-requests.md | 60 +++++++++++++++++++
 1 file changed, 60 insertions(+)
 create mode 100644 docs/architecture-decisions/adr007-use-msw-to-mock-service-requests.md

diff --git a/docs/architecture-decisions/adr007-use-msw-to-mock-service-requests.md b/docs/architecture-decisions/adr007-use-msw-to-mock-service-requests.md
new file mode 100644
index 0000000000..bdb221cea3
--- /dev/null
+++ b/docs/architecture-decisions/adr007-use-msw-to-mock-service-requests.md
@@ -0,0 +1,60 @@
+# ADR007: Use MSW to mock http requests
+
+## Context
+
+Network request mocking can be a total pain sometimes, in all different types of
+tests, unit tests to e2e tests always have their own implementation of mocking
+these requests. There's been traction in the outer community towards using this
+library to mock network requests by using an express style declaration for
+routes. react-testing-library suggests using this library instead of mocking
+fetch directly wether this be in a browser or in node.
+
+https://github.com/mswjs/msw
+
+## Decision
+
+Moving forward, we have decided that any `fetch` or `XMLHTTPRequest` that
+happens, should be mocked by using `msw`.
+
+Here is an example:
+
+```ts
+import { setupWorker, rest } from 'msw';
+
+const worker = setupWorker(
+  rest.get('*/user/:userId', (req, res, ctx) => {
+    return res(
+      ctx.json({
+        firstName: 'John',
+        lastName: 'Maverick',
+      }),
+    );
+  }),
+);
+
+// Start the Mock Service Worker
+worker.start();
+```
+
+and in a more real life scenario, taken from
+[CatalogClient.test.ts](https://github.com/spotify/backstage/blob/f3245c4f8f0b6b2625c4a6d5d50161b612fb4757/plugins/catalog/src/api/CatalogClient.test.ts)
+
+```ts
+beforeEach(() => {
+  server.use(
+    rest.get(`${mockApiOrigin}${mockBasePath}/entities`, (_, res, ctx) => {
+      return res(ctx.json(defaultResponse));
+    }),
+  );
+});
+
+it('should entities from correct endpoint', async () => {
+  const entities = await client.getEntities();
+  expect(entities).toEqual(defaultResponse);
+});
+```
+
+## Consequences
+
+- A little more code to write
+- Gradually will replace the codebase with `msw`