paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 35 Packages Projects Releases Wiki Activity

Merge pull request #18142 from npiyush97/fix-17201

Browse Source 
fix-17201
This commit is contained in:
Johan Haals
2023-06-13 13:20:40 +02:00
committed by GitHub
parent 2197872a97 df374c2fc7
commit 4a8318b8f8
3 changed files with 248 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/cyan-ants-pump.md
+5
View File
@@ -0,0 +1,5 @@
---
'@backstage/cli': patch
---
Updated example component for a newly scaffolded app.
packages/cli/templates/default-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.test.tsx.hbs
+12 -18
View File
@@ -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();
});
});
});
packages/cli/templates/default-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.tsx.hbs
+231 -18
View File
@@ -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) {