added some tweaks

Signed-off-by: npiyush97 <npiyush35@gmail.com>
2023-06-08 15:10:46 +05:30
parent 7554059912
commit 4df4bdb99d
3 changed files with 242 additions and 25 deletions
@@ -1,6 +1,5 @@
 ---
-'example-app': patch
 '@backstage/cli': patch
 ---

-The issue was resolved by removing the API data and replacing it with hardcoded JSON due to non-commercial rights restrictions.
+Updated example component for a newly scaffolded app.
@@ -1,25 +1,19 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { ExampleFetchComponent } from './ExampleFetchComponent';
-import { rest } from 'msw';
-import { setupServer } from 'msw/node';
-import { setupRequestMockHandlers } from '@backstage/test-utils';

 describe('ExampleFetchComponent', () => {
-  const server = setupServer();
-  // Enable sane handlers for network requests
-  setupRequestMockHandlers(server);
+  it('renders the user table', async () => {
+    render(<ExampleFetchComponent />);

-  // setup mock response
-  beforeEach(() => {
-    server.use(
-      rest.get('https://tinyurl.com/fake-data', (_, res, ctx) =>
-        res(ctx.status(200), ctx.delay(2000), ctx.json({})),
-      ),
-    );
+    // Wait for the table to render
+    const table = await screen.findByRole('table');
+    const nationality = screen.getAllByText("GB")
+    // Assert that the table contains the expected user data
+    expect(table).toBeInTheDocument();
+    expect(screen.getByAltText('Carolyn')).toBeInTheDocument();
+    expect(screen.getByText('Carolyn Moore')).toBeInTheDocument();
+    expect(screen.getByText('carolyn.moore@example.com')).toBeInTheDocument();
+    expect(nationality[0]).toBeInTheDocument();
  });
-  it('should render', async () => {
-    await render(<ExampleFetchComponent />);
-    expect(await screen.findByTestId('progress')).toBeInTheDocument();
-  });
-});
+});
@@ -1,9 +1,233 @@
 import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import { Table, TableColumn, Progress, ResponseErrorPanel } from '@backstage/core-components';
-import { fetchApiRef, useApi } from '@backstage/core-plugin-api';
 import useAsync from 'react-use/lib/useAsync';

+export const exampleUsers = {
+  "results": [
+    {
+      "gender": "female",
+      "name": {
+        "title": "Miss",
+        "first": "Carolyn",
+        "last": "Moore"
+      },
+      "email": "carolyn.moore@example.com",
+      "picture": "https://api.dicebear.com/6.x/open-peeps/svg?seed=Carolyn",
+      "nat": "GB"
+    },
+    {
+      "gender": "female",
+      "name": {
+        "title": "Ms",
+        "first": "Esma",
+        "last": "Berberoğlu"
+      },
+      "email": "esma.berberoglu@example.com",
+      "picture": "https://api.dicebear.com/6.x/open-peeps/svg?seed=Esma",
+      "nat": "TR"
+    },
+    {
+      "gender": "female",
+      "name": {
+        "title": "Ms",
+        "first": "Isabella",
+        "last": "Rhodes"
+      },
+      "email": "isabella.rhodes@example.com",
+      "picture": "https://api.dicebear.com/6.x/open-peeps/svg?seed=Isabella",
+      "nat": "GB"
+    },
+    {
+      "gender": "male",
+      "name": {
+        "title": "Mr",
+        "first": "Derrick",
+        "last": "Carter"
+      },
+      "email": "derrick.carter@example.com",
+      "picture": "https://api.dicebear.com/6.x/open-peeps/svg?seed=Derrick",
+      "nat": "IE"
+    },
+    {
+      "gender": "female",
+      "name": {
+        "title": "Miss",
+        "first": "Mattie",
+        "last": "Lambert"
+      },
+      "email": "mattie.lambert@example.com",
+      "picture": "https://api.dicebear.com/6.x/open-peeps/svg?seed=Mattie",
+      "nat": "AU"
+    },
+    {
+      "gender": "male",
+      "name": {
+        "title": "Mr",
+        "first": "Mijat",
+        "last": "Rakić"
+      },
+      "email": "mijat.rakic@example.com",
+      "picture": "https://api.dicebear.com/6.x/open-peeps/svg?seed=Mijat",
+      "nat": "RS"
+    },
+    {
+      "gender": "male",
+      "name": {
+        "title": "Mr",
+        "first": "Javier",
+        "last": "Reid"
+      },
+      "email": "javier.reid@example.com",
+      "picture": "https://api.dicebear.com/6.x/open-peeps/svg?seed=Javier",
+      "nat": "US"
+    },
+    {
+      "gender": "female",
+      "name": {
+        "title": "Ms",
+        "first": "Isabella",
+        "last": "Li"
+      },
+      "email": "isabella.li@example.com",
+      "picture": "https://api.dicebear.com/6.x/open-peeps/svg?seed=Isabella",
+      "nat": "CA"
+    },
+    {
+      "gender": "female",
+      "name": {
+        "title": "Mrs",
+        "first": "Stephanie",
+        "last": "Garrett"
+      },
+      "email": "stephanie.garrett@example.com",
+      "picture": "https://api.dicebear.com/6.x/open-peeps/svg?seed=Stephanie",
+      "nat": "AU"
+    },
+    {
+      "gender": "female",
+      "name": {
+        "title": "Ms",
+        "first": "Antonia",
+        "last": "Núñez"
+      },
+      "email": "antonia.nunez@example.com",
+      "picture": "https://api.dicebear.com/6.x/open-peeps/svg?seed=Antonia",
+      "nat": "ES"
+    },
+    {
+      "gender": "male",
+      "name": {
+        "title": "Mr",
+        "first": "Donald",
+        "last": "Young"
+      },
+      "email": "donald.young@example.com",
+      "picture": "https://api.dicebear.com/6.x/open-peeps/svg?seed=Donald",
+      "nat": "US"
+    },
+    {
+      "gender": "male",
+      "name": {
+        "title": "Mr",
+        "first": "Iegor",
+        "last": "Holodovskiy"
+      },
+      "email": "iegor.holodovskiy@example.com",
+      "picture": "https://api.dicebear.com/6.x/open-peeps/svg?seed=Iegor",
+      "nat": "UA"
+    },
+    {
+      "gender": "female",
+      "name": {
+        "title": "Madame",
+        "first": "Jessica",
+        "last": "David"
+      },
+      "email": "jessica.david@example.com",
+      "picture": "https://api.dicebear.com/6.x/open-peeps/svg?seed=Jessica",
+      "nat": "CH"
+    },
+    {
+      "gender": "female",
+      "name": {
+        "title": "Ms",
+        "first": "Eve",
+        "last": "Martinez"
+      },
+      "email": "eve.martinez@example.com",
+      "picture": "https://api.dicebear.com/6.x/open-peeps/svg?seed=Eve",
+      "nat": "FR"
+    },
+    {
+      "gender": "male",
+      "name": {
+        "title": "Mr",
+        "first": "Caleb",
+        "last": "Silva"
+      },
+      "email": "caleb.silva@example.com",
+      "picture": "https://api.dicebear.com/6.x/open-peeps/svg?seed=Caleb",
+      "nat": "US"
+    },
+    {
+      "gender": "female",
+      "name": {
+        "title": "Miss",
+        "first": "Marcia",
+        "last": "Jenkins"
+      },
+      "email": "marcia.jenkins@example.com",
+      "picture": "https://api.dicebear.com/6.x/open-peeps/svg?seed=Marcia",
+      "nat": "US"
+    },
+    {
+      "gender": "female",
+      "name": {
+        "title": "Mrs",
+        "first": "Mackenzie",
+        "last": "Jones"
+      },
+      "email": "mackenzie.jones@example.com",
+      "picture": "https://api.dicebear.com/6.x/open-peeps/svg?seed=Mackenzie",
+      "nat": "NZ"
+    },
+    {
+      "gender": "male",
+      "name": {
+        "title": "Mr",
+        "first": "Jeremiah",
+        "last": "Gutierrez"
+      },
+      "email": "jeremiah.gutierrez@example.com",
+      "picture": "https://api.dicebear.com/6.x/open-peeps/svg?seed=Jeremiah",
+      "nat": "AU"
+    },
+    {
+      "gender": "female",
+      "name": {
+        "title": "Ms",
+        "first": "Luciara",
+        "last": "Souza"
+      },
+      "email": "luciara.souza@example.com",
+      "picture": "https://api.dicebear.com/6.x/open-peeps/svg?seed=Luciara",
+      "nat": "BR"
+    },
+    {
+      "gender": "male",
+      "name": {
+        "title": "Mr",
+        "first": "Valgi",
+        "last": "da Cunha"
+      },
+      "email": "valgi.dacunha@example.com",
+      "picture": "https://api.dicebear.com/6.x/open-peeps/svg?seed=Valgi",
+      "nat": "BR"
+    }
+  ]
+}
+
 const useStyles = makeStyles({
  avatar: {
    height: 32,
@@ -64,11 +288,11 @@ export const DenseTable = ({ users }: DenseTableProps) => {
 };

 export const ExampleFetchComponent = () => {
-  const { fetch } = useApi(fetchApiRef);
+
  const { value, loading, error } = useAsync(async (): Promise<User[]> => {
-    const response = await fetch('https://tinyurl.com/fake-data');
-    const data = await response.json();
-    return data.results;
+    const response = exampleUsers;
+    const data = response.results;
+    return data;
  }, []);

  if (loading) {