Changed name for dependencies tabs and added the layers hashes (#110)

Changed name for dependencies tabs and added the digest number for each layer

Signed-off-by: Amelia-Maria Breda <ambreda@cisco.com>
This commit is contained in:
Amelia-Maria Breda 2022-10-10 14:02:44 +01:00 committed by GitHub
parent 9baeb5bba2
commit 2a3320fb64
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 18 additions and 3 deletions

View File

@ -1,4 +1,4 @@
import { render, screen, waitFor } from '@testing-library/react';
import { render, screen, waitFor, fireEvent } from '@testing-library/react';
import { api } from 'api';
import HistoryLayers from 'components/HistoryLayers';
import React from 'react';
@ -49,6 +49,16 @@ describe('Layers page', () => {
await waitFor(() => expect(screen.getAllByText('No Layers')).toHaveLength(1));
});
it('renders hash layers', async () => {
// @ts-ignore
jest.spyOn(api, 'get').mockResolvedValue({ status: 200, data: { data: { Image: { History: mockLayersList } } } });
render(<HistoryLayers name="alpine:latest" />);
expect(await screen.findAllByTestId('hash-typography')).toHaveLength(1);
const openText = screen.getByText(/2:/i);
fireEvent.click(openText);
expect(await screen.findAllByTestId('no-hash-typography')).toHaveLength(1);
});
it("should log an error when data can't be fetched", async () => {
// @ts-ignore
jest.spyOn(api, 'get').mockRejectedValue({ status: 500, data: {} });

View File

@ -197,6 +197,11 @@ function HistoryLayers(props) {
<Typography variant="body1" align="left" className={classes.title} sx={{ backgroundColor: '#F7F7F7' }}>
{historyData[selectedIndex].HistoryDescription?.CreatedBy}
</Typography>
{!historyData[selectedIndex].HistoryDescription?.EmptyLayer ? (
<Typography data-testid="hash-typography">#: {historyData[selectedIndex].Layer?.Digest}</Typography>
) : (
<Typography data-testid="no-hash-typography"></Typography>
)}
</CardContent>
</Card>
)}

View File

@ -236,11 +236,11 @@ function TagDetails() {
<Tab value="Layers" label="Layers" className={classes.tabContent} />
<Tab
value="DependsOn"
label="Depends on"
label="Dependencies"
className={classes.tabContent}
data-testid="dependencies-tab"
/>
<Tab value="IsDependentOn" label="Is dependent on" className={classes.tabContent} />
<Tab value="IsDependentOn" label="Dependants" className={classes.tabContent} />
<Tab value="Vulnerabilities" label="Vulnerabilities" className={classes.tabContent} />
</TabList>
<Grid container>