From 4df4bdb99dd1ef43904068be2a1929239b24985b Mon Sep 17 00:00:00 2001 From: npiyush97 Date: Thu, 8 Jun 2023 15:10:46 +0530 Subject: [PATCH] added some tweaks Signed-off-by: npiyush97 --- .changeset/cyan-ants-pump.md | 3 +- .../ExampleFetchComponent.test.tsx.hbs | 30 +-- .../ExampleFetchComponent.tsx.hbs | 234 +++++++++++++++++- 3 files changed, 242 insertions(+), 25 deletions(-) diff --git a/.changeset/cyan-ants-pump.md b/.changeset/cyan-ants-pump.md index 8b4e7e003b..ed446cd1cf 100644 --- a/.changeset/cyan-ants-pump.md +++ b/.changeset/cyan-ants-pump.md @@ -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. diff --git a/packages/cli/templates/default-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.test.tsx.hbs b/packages/cli/templates/default-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.test.tsx.hbs index 13a4061949..c1035a8d3c 100644 --- a/packages/cli/templates/default-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.test.tsx.hbs +++ b/packages/cli/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(); - // 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(); - expect(await screen.findByTestId('progress')).toBeInTheDocument(); - }); -}); +}); \ No newline at end of file diff --git a/packages/cli/templates/default-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.tsx.hbs b/packages/cli/templates/default-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.tsx.hbs index d01fd8467a..f728c346d2 100644 --- a/packages/cli/templates/default-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.tsx.hbs +++ b/packages/cli/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, @@ -64,11 +288,11 @@ export const DenseTable = ({ users }: DenseTableProps) => { }; export const ExampleFetchComponent = () => { - const { fetch } = useApi(fetchApiRef); + const { value, loading, error } = useAsync(async (): Promise => { - 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) {