From 85f71c508e7074cd972817ef1774bf49ac848e2d Mon Sep 17 00:00:00 2001
From: Karan Shah <karan.shah@simplybusiness.co.uk>
Date: Thu, 23 Dec 2021 10:59:22 +0000
Subject: [PATCH] Update ExampleFetchComponent.test.tsx

Signed-off-by: Karan Shah <karan.shah@simplybusiness.co.uk>
---
 .../ExampleFetchComponent.test.tsx            | 101 ++++++++++++++++--
 1 file changed, 94 insertions(+), 7 deletions(-)

diff --git a/plugins/airbrake/src/components/ExampleFetchComponent/ExampleFetchComponent.test.tsx b/plugins/airbrake/src/components/ExampleFetchComponent/ExampleFetchComponent.test.tsx
index 5123bce8ed..a9085d27d6 100644
--- a/plugins/airbrake/src/components/ExampleFetchComponent/ExampleFetchComponent.test.tsx
+++ b/plugins/airbrake/src/components/ExampleFetchComponent/ExampleFetchComponent.test.tsx
@@ -25,16 +25,103 @@ describe('ExampleFetchComponent', () => {
   // Enable sane handlers for network requests
   setupRequestMockHandlers(server);
 
-  // setup mock response
-  beforeEach(() => {
+  it('renders progress bar when loading', async () => {
     server.use(
-      rest.get('https://randomuser.me/*', (_, res, ctx) =>
-        res(ctx.status(200), ctx.delay(2000), ctx.json({})),
-      ),
+      rest.get('https://randomuser.me/*', (_, res, ctx) => {
+        return res(ctx.delay(2000));
+      }),
     );
-  });
-  it('should render', async () => {
+
     const rendered = render(<ExampleFetchComponent />);
     expect(await rendered.findByTestId('progress')).toBeInTheDocument();
   });
+
+  it('renders data when fetch was successful', async () => {
+    server.use(
+      rest.get('https://randomuser.me/*', (_, res, ctx) =>
+        res(
+          ctx.status(200),
+          ctx.json({
+            results: [
+              {
+                gender: 'male',
+                name: {
+                  title: 'Mr',
+                  first: 'Vedat',
+                  last: 'Özbey',
+                },
+                location: {
+                  street: {
+                    number: 7542,
+                    name: 'Filistin Cd',
+                  },
+                  city: 'Elazığ',
+                  state: 'Karaman',
+                  country: 'Turkey',
+                  postcode: 29773,
+                  coordinates: {
+                    latitude: '73.4994',
+                    longitude: '-44.5254',
+                  },
+                  timezone: {
+                    offset: '-8:00',
+                    description: 'Pacific Time (US & Canada)',
+                  },
+                },
+                email: 'vedat.ozbey@example.com',
+                login: {
+                  uuid: 'ff2c94d3-65c9-43f2-97ae-afc39a5d4c1b',
+                  username: 'redtiger713',
+                  password: 'iforget',
+                  salt: 'xuYMm0j2',
+                  md5: '080fefd48bae64a2d3b952898ac3eca6',
+                  sha1: '196b73795ba4529f85fdba815b20ce39cb96a7cc',
+                  sha256:
+                    '870a2ab050f8ce74dc44c4654c91ae94bd9921c4b4b5c4dd308529545f875adf',
+                },
+                dob: {
+                  date: '1996-12-31T19:07:00.102Z',
+                  age: 25,
+                },
+                registered: {
+                  date: '2016-05-21T03:36:41.149Z',
+                  age: 5,
+                },
+                phone: '(563)-838-1728',
+                cell: '(443)-962-7009',
+                id: {
+                  name: '',
+                  value: null,
+                },
+                picture: {
+                  large: 'https://randomuser.me/api/portraits/men/21.jpg',
+                  medium: 'https://randomuser.me/api/portraits/med/men/21.jpg',
+                  thumbnail:
+                    'https://randomuser.me/api/portraits/thumb/men/21.jpg',
+                },
+                nat: 'TR',
+              },
+            ],
+          }),
+        ),
+      ),
+    );
+
+    const rendered = render(<ExampleFetchComponent />);
+    expect(
+      await rendered.findByRole('cell', { name: /Vedat Özbey/i }),
+    ).toBeInTheDocument();
+    expect(await rendered.queryByRole('alert')).not.toBeInTheDocument();
+  });
+
+  it('renders an alert if fetch failed', async () => {
+    server.use(
+      rest.get('https://randomuser.me/*', (_, res, ctx) => {
+        return res(ctx.status(500));
+      }),
+    );
+
+    const rendered = render(<ExampleFetchComponent />);
+    expect(await rendered.findByRole('alert')).toBeInTheDocument();
+  });
 });