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

core-components: wrap page stories in test app

Browse Source 
Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
This commit is contained in:
Patrik Oldsberg
2021-10-29 16:46:37 +02:00
parent 687fca4ff7
commit b7958c36db
1 changed files with 36 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/core-components/src/layout/Page/Page.stories.tsx
+36 -46
View File
@@ -20,8 +20,7 @@ import Grid from '@material-ui/core/Grid';
import Link from '@material-ui/core/Link';
import Typography from '@material-ui/core/Typography';
import React, { useState } from 'react';
import { MemoryRouter } from 'react-router';
import { createApp } from '@backstage/core-app-api';
import { wrapInTestApp } from '@backstage/test-utils';
import {
Content,
ContentHeader,
@@ -197,53 +196,44 @@ const ExampleContentHeader = ({ selectedTab }: { selectedTab?: number }) => (
</ContentHeader>
);
const app = createApp({ configLoader: async () => [] });
const AppProvider = app.getProvider();
export const PluginWithData = () => {
const [selectedTab, setSelectedTab] = useState<number>(2);
return (
<AppProvider>
<MemoryRouter>
<div style={{ border: '1px solid #ddd' }}>
<Page themeId="tool">
<ExampleHeader />
<HeaderTabs
selectedIndex={selectedTab}
onChange={index => setSelectedTab(index)}
tabs={tabs.map(({ label }, index) => ({
id: index.toString(),
label,
}))}
/>
<Content>
<ExampleContentHeader selectedTab={selectedTab} />
<DataGrid />
</Content>
</Page>
</div>
</MemoryRouter>
</AppProvider>
);
return wrapInTestApp(() => (
<div style={{ border: '1px solid #ddd' }}>
<Page themeId="tool">
<ExampleHeader />
<HeaderTabs
selectedIndex={selectedTab}
onChange={index => setSelectedTab(index)}
tabs={tabs.map(({ label }, index) => ({
id: index.toString(),
label,
}))}
/>
<Content>
<ExampleContentHeader selectedTab={selectedTab} />
<DataGrid />
</Content>
</Page>
</div>
));
};
export const PluginWithTable = () => {
return (
<AppProvider>
<div style={{ border: '1px solid #ddd' }}>
<Page themeId="tool">
<ExampleHeader />
<Content>
<ExampleContentHeader />
<Table
options={{ paging: true, padding: 'dense' }}
data={generateTestData(10)}
columns={columns}
title="Example Content"
/>
</Content>
</Page>
</div>
</AppProvider>
);
return wrapInTestApp(() => (
<div style={{ border: '1px solid #ddd' }}>
<Page themeId="tool">
<ExampleHeader />
<Content>
<ExampleContentHeader />
<Table
options={{ paging: true, padding: 'dense' }}
data={generateTestData(10)}
columns={columns}
title="Example Content"
/>
</Content>
</Page>
</div>
));
};