fix: change bundleDependencies to array (#4680)
* fix: change bundleDependencies to array * add changeset * fixed testid
This commit is contained in:
parent
199aea375a
commit
117eb1ca42
|
@ -0,0 +1,7 @@
|
||||||
|
---
|
||||||
|
'@verdaccio/ui-theme': patch
|
||||||
|
'@verdaccio/ui-components': patch
|
||||||
|
'@verdaccio/types': patch
|
||||||
|
---
|
||||||
|
|
||||||
|
fix: change bundleDependencies to array
|
|
@ -123,7 +123,7 @@ export interface Version {
|
||||||
devDependencies?: Dependencies;
|
devDependencies?: Dependencies;
|
||||||
optionalDependencies?: Dependencies;
|
optionalDependencies?: Dependencies;
|
||||||
peerDependenciesMeta?: PeerDependenciesMeta;
|
peerDependenciesMeta?: PeerDependenciesMeta;
|
||||||
bundleDependencies?: Dependencies;
|
bundleDependencies?: string[];
|
||||||
acceptDependencies?: Dependencies;
|
acceptDependencies?: Dependencies;
|
||||||
keywords?: string | string[];
|
keywords?: string | string[];
|
||||||
nodeVersion?: string;
|
nodeVersion?: string;
|
||||||
|
|
|
@ -71,7 +71,8 @@
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"has-no-dependencies": "{{package}} has no dependencies.",
|
"has-no-dependencies": "{{package}} has no dependencies.",
|
||||||
"dependency-block": "{{package}}@{{version}}"
|
"dependency-block": "{{package}}: {{version}}",
|
||||||
|
"dependency-block-bundle": "{{package}}"
|
||||||
},
|
},
|
||||||
"form": {
|
"form": {
|
||||||
"username": "Username",
|
"username": "Username",
|
||||||
|
|
|
@ -71,17 +71,17 @@ const packageMeta = {
|
||||||
shelljs: '^0.7.8',
|
shelljs: '^0.7.8',
|
||||||
'update-notifier': '^2.1.0',
|
'update-notifier': '^2.1.0',
|
||||||
},
|
},
|
||||||
bundleDependencies: {
|
bundleDependencies: [
|
||||||
'styled-components': '5.0.0',
|
'styled-components',
|
||||||
'cross-spawn': '^5.0.1',
|
'cross-spawn',
|
||||||
jscodeshift: '^0.3.30',
|
'jscodeshift',
|
||||||
json5: '^0.5.1',
|
'json5',
|
||||||
'latest-version': '^3.1.0',
|
'latest-version',
|
||||||
'merge-dirs': '^0.2.1',
|
'merge-dirs',
|
||||||
opencollective: '^1.0.3',
|
'opencollective',
|
||||||
shelljs: '^0.7.8',
|
'shelljs',
|
||||||
'update-notifier': '^2.1.0',
|
'update-notifier',
|
||||||
},
|
],
|
||||||
},
|
},
|
||||||
_uplinks: {},
|
_uplinks: {},
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,7 +1,8 @@
|
||||||
import styled from '@emotion/styled';
|
import styled from '@emotion/styled';
|
||||||
|
import Box from '@mui/material/Box';
|
||||||
import Card from '@mui/material/Card';
|
import Card from '@mui/material/Card';
|
||||||
import CardContent from '@mui/material/CardContent';
|
import CardContent from '@mui/material/CardContent';
|
||||||
import React from 'react';
|
import React, { Fragment } from 'react';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
import { Theme } from '../../Theme';
|
import { Theme } from '../../Theme';
|
||||||
|
@ -31,8 +32,8 @@ const Dependencies: React.FC<{ packageMeta: any }> = ({ packageMeta }) => {
|
||||||
dependencies,
|
dependencies,
|
||||||
devDependencies,
|
devDependencies,
|
||||||
peerDependencies,
|
peerDependencies,
|
||||||
bundleDependencies,
|
|
||||||
optionalDependencies,
|
optionalDependencies,
|
||||||
|
bundleDependencies,
|
||||||
};
|
};
|
||||||
const hasDependencies =
|
const hasDependencies =
|
||||||
hasKeys(dependencies) ||
|
hasKeys(dependencies) ||
|
||||||
|
@ -44,20 +45,22 @@ const Dependencies: React.FC<{ packageMeta: any }> = ({ packageMeta }) => {
|
||||||
return (
|
return (
|
||||||
<CardWrap>
|
<CardWrap>
|
||||||
<CardContent>
|
<CardContent>
|
||||||
|
<Box data-testid="dependencies-box" sx={{ m: 2 }}>
|
||||||
{Object.entries(dependencyMap).map(([dependencyType, dependencies]) => {
|
{Object.entries(dependencyMap).map(([dependencyType, dependencies]) => {
|
||||||
if (!dependencies || Object.keys(dependencies).length === 0) {
|
if (!dependencies || Object.keys(dependencies).length === 0) {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
<>
|
<Fragment key={dependencyType}>
|
||||||
<DependencyBlock
|
<DependencyBlock
|
||||||
dependencies={dependencies}
|
dependencies={dependencies}
|
||||||
key={dependencyType}
|
key={dependencyType}
|
||||||
title={dependencyType}
|
title={dependencyType}
|
||||||
/>
|
/>
|
||||||
</>
|
</Fragment>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
|
</Box>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</CardWrap>
|
</CardWrap>
|
||||||
);
|
);
|
||||||
|
|
|
@ -1,22 +1,33 @@
|
||||||
import userEvent from '@testing-library/user-event';
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { MemoryRouter, Route } from 'react-router';
|
import { MemoryRouter, Route } from 'react-router';
|
||||||
|
|
||||||
import { render, screen } from '../../test/test-react-testing-library';
|
import { fireEvent, render, screen } from '../../test/test-react-testing-library';
|
||||||
import { DependencyBlock } from './DependencyBlock';
|
import { DependencyBlock } from './DependencyBlock';
|
||||||
|
|
||||||
|
const mockHistory = jest.fn();
|
||||||
|
|
||||||
|
jest.mock('react-router-dom', () => ({
|
||||||
|
useHistory: () => ({
|
||||||
|
push: mockHistory,
|
||||||
|
}),
|
||||||
|
}));
|
||||||
|
|
||||||
describe('<DependencyBlock /> component', () => {
|
describe('<DependencyBlock /> component', () => {
|
||||||
test('renders dependency block', () => {
|
test('renders dependency block', () => {
|
||||||
render(<DependencyBlock dependencies={{ jquery: '1.0.0' }} title="foo" />);
|
render(<DependencyBlock dependencies={{ jquery: '1.0.0' }} title="foo" />);
|
||||||
|
|
||||||
expect(screen.getByText('foo (1)')).toBeInTheDocument();
|
expect(screen.getByText('foo (1)')).toBeInTheDocument();
|
||||||
expect(screen.getByText('dependencies.dependency-block')).toBeInTheDocument();
|
expect(screen.getByText('dependencies.dependency-block')).toBeInTheDocument();
|
||||||
|
|
||||||
userEvent.click(screen.getByText('dependencies.dependency-block'));
|
|
||||||
});
|
});
|
||||||
|
|
||||||
test.todo('test the click event');
|
test('renders bundleDependencies block', () => {
|
||||||
test.skip('handle change route handler', () => {
|
render(<DependencyBlock dependencies={{ semver: '7.6.0' }} title="bundleDependencies" />);
|
||||||
|
|
||||||
|
expect(screen.getByText('bundleDependencies (1)')).toBeInTheDocument();
|
||||||
|
expect(screen.getByText('dependencies.dependency-block-bundle')).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('handle change of route', async () => {
|
||||||
render(
|
render(
|
||||||
<MemoryRouter
|
<MemoryRouter
|
||||||
initialEntries={[`/-/web/detail/some-dep`, `/-/web/detail/jquery`]}
|
initialEntries={[`/-/web/detail/some-dep`, `/-/web/detail/jquery`]}
|
||||||
|
@ -28,6 +39,8 @@ describe('<DependencyBlock /> component', () => {
|
||||||
</MemoryRouter>
|
</MemoryRouter>
|
||||||
);
|
);
|
||||||
|
|
||||||
userEvent.click(screen.getByTestId('jquery'));
|
fireEvent.click(screen.getByTestId('jquery'));
|
||||||
|
|
||||||
|
await expect(mockHistory).toHaveBeenCalled();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -44,25 +44,38 @@ export const DependencyBlock: React.FC<DependencyBlockProps> = ({ title, depende
|
||||||
history.push(`/-/web/detail/${name}`);
|
history.push(`/-/web/detail/${name}`);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function labelText(title: string, name: string, version: string): string {
|
||||||
|
if (title === 'bundleDependencies') {
|
||||||
|
return t('dependencies.dependency-block-bundle', { package: name });
|
||||||
|
} else {
|
||||||
|
return t('dependencies.dependency-block', { package: name, version });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Box data-testid={title} sx={{ margin: theme.spacing(2) }}>
|
<Box data-testid={title} sx={{ margin: theme.spacing(2) }}>
|
||||||
<StyledText sx={{ marginBottom: theme.spacing(1) }} variant="subtitle1">
|
<StyledText sx={{ marginBottom: theme.spacing(1) }} variant="subtitle1">
|
||||||
{`${title} (${deps.length})`}
|
{`${title} (${deps.length})`}
|
||||||
</StyledText>
|
</StyledText>
|
||||||
<Tags>
|
<Tags>
|
||||||
{deps.map(([name, version]) => (
|
{deps.map(([name, version]: [string, string]) => {
|
||||||
|
// Bundle dependencies are stored as array, for example [ 0: "semver" ]
|
||||||
|
// so the package name arrives here in the version field
|
||||||
|
const packageName = title == 'bundleDependencies' ? version : name;
|
||||||
|
return (
|
||||||
<Tag
|
<Tag
|
||||||
className={'dep-tag'}
|
className={'dep-tag'}
|
||||||
clickable={true}
|
clickable={true}
|
||||||
data-testid={name}
|
data-testid={packageName}
|
||||||
key={name}
|
key={packageName}
|
||||||
label={t('dependencies.dependency-block', { package: name, version })}
|
label={labelText(title, packageName, version)}
|
||||||
// eslint-disable-next-line
|
// eslint-disable-next-line
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
handleClick(name);
|
handleClick(packageName);
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
))}
|
);
|
||||||
|
})}
|
||||||
</Tags>
|
</Tags>
|
||||||
</Box>
|
</Box>
|
||||||
);
|
);
|
||||||
|
|
Loading…
Reference in New Issue