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 1/3] 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`

From 191aa0262f4255aecab058589be9371de6a26047 Mon Sep 17 00:00:00 2001
From: blam <ben@blam.sh>
Date: Wed, 15 Jul 2020 10:02:49 +0200
Subject: [PATCH 2/3] chore(docs): add to doc structure

---
 mkdocs.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/mkdocs.yml b/mkdocs.yml
index 46367873e2..5d688edb52 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -85,6 +85,7 @@ nav:
       - ADR004 - Module Export Structure: 'architecture-decisions/adr004-module-export-structure.md'
       - ADR005 - Catalog Core Entities: 'architecture-decisions/adr005-catalog-core-entities.md'
       - ADR006 - Avoid React.FC and React.SFC: 'architecture-decisions/adr006-avoid-react-fc.md'
+      - ADR007 - Use MSW for Network Request Mocking: 'architecture-decisions/adr007-use-msw-to-mock-service-requests.md'
   - Contribute: '../CONTRIBUTING.md'
   - Support: 'overview/support.md'
   - FAQ: FAQ.md

From 3aaf4f0200e5906b3495b8ee48c5d318d8df5687 Mon Sep 17 00:00:00 2001
From: blam <ben@blam.sh>
Date: Mon, 27 Jul 2020 12:52:11 +0200
Subject: [PATCH 3/3] chore(adr): added adr reference to techocs

---
 docs/README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs/README.md b/docs/README.md
index ee83b24050..c870a144d9 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -87,6 +87,7 @@ better yet, a pull request.
     - [ADR004 - Module Export Structure](architecture-decisions/adr004-module-export-structure.md)
     - [ADR005 - Catalog Core Entities](architecture-decisions/adr005-catalog-core-entities.md)
     - [ADR006 - Avoid React.FC and React.SFC](architecture-decisions/adr006-avoid-react-fc.md)
+    - [ADR007 - Use MSW for Mocking Network Requests](architecture-decisions/adr007-use-msw-to-mock-service-requests.md)
   - [Contribute](../CONTRIBUTING.md)
   - [Support](overview/support.md)
   - [FAQ](FAQ.md)