@backstage/cli 0.22.8-next.1 → 0.22.8-next.2

package/templates/default-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.test.tsx.hbs

@@ -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://randomuser.me/*', (_, 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();
-  });
-});
+});

package/templates/default-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.tsx.hbs

@@ -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,
@@ -19,18 +243,8 @@ type User = {
     first: string; // "Duane",
     last: string; // "Reed"
   };
-  location: object; // {street: {number: 5060, name: "Hickory Creek Dr"}, city: "Albany", state: "New South Wales",…}
   email: string; // "duane.reed@example.com"
-  login: object; // {uuid: "4b785022-9a23-4ab9-8a23-cb3fb43969a9", username: "blackdog796", password: "patch",…}
-  dob: object; // {date: "1983-06-22T12:30:23.016Z", age: 37}
-  registered: object; // {date: "2006-06-13T18:48:28.037Z", age: 14}
-  phone: string; // "07-2154-5651"
-  cell: string; // "0405-592-879"
-  id: {
-    name: string; // "TFN",
-    value: string; // "796260432"
-  };
-  picture: { medium: string }; // {medium: "https://randomuser.me/api/portraits/men/95.jpg",…}
+  picture: string; // "https://api.dicebear.com/6.x/open-peeps/svg?seed=Duane"
   nat: string; // "AU"
 };
 
@@ -52,7 +266,7 @@ export const DenseTable = ({ users }: DenseTableProps) => {
     return {
       avatar: (
         <img
-          src={user.picture.medium}
+          src={user.picture}
           className={classes.avatar}
           alt={user.name.first}
         />
@@ -65,7 +279,7 @@ export const DenseTable = ({ users }: DenseTableProps) => {
 
   return (
     <Table
-      title="Example User List (fetching data from randomuser.me)"
+      title="Example User List"
       options=\{{ search: false, paging: false }}
       columns={columns}
       data={data}
@@ -74,11 +288,10 @@ 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://randomuser.me/api/?results=20');
-    const data = await response.json();
-    return data.results;
+    // Would use fetch in a real world example
+    return exampleUsers.results;
   }, []);
 
   if (loading) {