{isLoading ?
:
}
diff --git a/packages/ui-components/src/sections/SideBar/Sidebar.test.tsx b/packages/ui-components/src/sections/SideBar/Sidebar.test.tsx
index e91fe2042..1df5280a0 100644
--- a/packages/ui-components/src/sections/SideBar/Sidebar.test.tsx
+++ b/packages/ui-components/src/sections/SideBar/Sidebar.test.tsx
@@ -1,110 +1,67 @@
-import { rest } from 'msw';
import React from 'react';
import { MemoryRouter } from 'react-router';
-import { server } from '../../../jest/server';
import { VersionProvider } from '../../providers';
import { store } from '../../store';
import { renderWithStore, screen, waitFor } from '../../test/test-react-testing-library';
-import DetailSidebar from './Sidebar';
+import Sidebar from './Sidebar';
-jest.mock('marked');
jest.mock('marked');
jest.mock('marked-highlight');
-const ComponentToBeRendered: React.FC = () => (
+const ComponentSideBar: React.FC = () => (
-
+
);
-// https://stackoverflow.com/a/54010619/308341
-jest.mock('react', () => {
- const React = jest.requireActual('react');
- React.Suspense = ({ children }) => children;
- return React;
-});
-
-const packageMeta = {
- _uplinks: {},
- latest: {
- name: 'verdaccio-ui/local-storage',
- version: '8.0.1-next.1',
- dist: {
- fileCount: 0,
- unpackedSize: 0,
- tarball: 'http://localhost:8080/bootstrap/-/bootstrap-4.3.1.tgz',
- },
- homepage: 'https://verdaccio.org',
- bugs: {
- url: 'https://github.com/verdaccio/monorepo/issues',
- },
- },
-};
-
-// const detailContextValue = {
-// packageName: 'foo',
-// readMe: 'test',
-// isLoading: false,
-// hasNotBeenFound: false,
-// packageMeta: ,
-// };
+const mockPkgName = jest.fn().mockReturnValue('jquery');
jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'), // use actual for all non-hook parts
useParams: () => ({
- package: 'jquery',
+ package: mockPkgName(),
}),
}));
-server.use(
- ...[
- rest.get('http://localhost:9000/-/verdaccio/data/sidebar/jquery', (req, res, ctx) => {
- return res(ctx.json(packageMeta));
- }),
- rest.get('http://localhost:9000/-/verdaccio/data/package/readme/jquery', (req, res, ctx) => {
- return res(ctx.text('foo readme'));
- }),
- ]
-);
-// describe('DetailSidebar', () => {
-test.skip('should render commonjs module icon', async () => {
- const { getByText } = renderWithStore(
, store);
- screen.debug();
- await waitFor(() => expect(getByText('jquery')).toBeInTheDocument());
+describe('Sidebar', () => {
+ afterEach(() => {
+ jest.clearAllMocks();
+ });
+ test('should render titles', async () => {
+ renderWithStore(
, store);
+ await waitFor(() => expect(screen.getByText('jquery')).toBeInTheDocument());
+
+ expect(screen.getByText(`jquery`)).toBeInTheDocument();
+ expect(screen.getByText(`sidebar.detail.latest-version`, { exact: false })).toBeInTheDocument();
+ expect(
+ screen.getByText(`sidebar.detail.published a year ago`, { exact: false })
+ ).toBeInTheDocument();
+ expect(screen.getByText(`sidebar.installation.title`, { exact: false })).toBeInTheDocument();
+ });
+
+ test('should render commonJS', async () => {
+ renderWithStore(
, store);
+
+ await waitFor(() => expect(screen.getByText('jquery')).toBeInTheDocument());
+ expect(screen.getByAltText('commonjs')).toBeInTheDocument();
+ });
+
+ test('should render typescript', async () => {
+ mockPkgName.mockReturnValue('glob');
+ renderWithStore(
, store);
+
+ await waitFor(() => expect(screen.getByText('glob')).toBeInTheDocument());
+ expect(screen.getByAltText('typescript')).toBeInTheDocument();
+ });
+
+ test('should render es modules', async () => {
+ mockPkgName.mockReturnValue('got');
+ renderWithStore(
, store);
+
+ await waitFor(() => expect(screen.getByText('got')).toBeInTheDocument());
+ expect(screen.getByAltText('es6 modules')).toBeInTheDocument();
+ });
});
-
-// test('should render ts module icon', () => {
-// renderWithStore(
-//
,
-// store
-// );
-// expect(screen.getByAltText('typescript')).toBeInTheDocument();
-// });
-
-// test('should render es6 module icon', () => {
-// renderWithStore(
-//
,
-// store
-// );
-// expect(screen.getByAltText('es6 modules')).toBeInTheDocument();
-// });
-// });
diff --git a/packages/ui-components/src/sections/SideBar/Sidebar.tsx b/packages/ui-components/src/sections/SideBar/Sidebar.tsx
index 79d0dab7b..5640a3701 100644
--- a/packages/ui-components/src/sections/SideBar/Sidebar.tsx
+++ b/packages/ui-components/src/sections/SideBar/Sidebar.tsx
@@ -6,25 +6,15 @@ import { Theme } from '../../Theme';
import ActionBar from '../../components/ActionBar';
import Author from '../../components/Author';
import Developers, { DeveloperType } from '../../components/Developers';
+import Dist from '../../components/Distribution';
+import Engines from '../../components/Engines';
import FundButton from '../../components/FundButton';
-import SideBarTittle from '../../components/SideBarTittle';
+import Install from '../../components/Install';
+import Repository from '../../components/Repository';
+import SideBarTitle from '../../components/SideBarTitle';
import { useConfig } from '../../providers';
import { useVersion } from '../../providers';
import { PackageMetaInterface } from '../../types/packageMeta';
-import loadable from '../../utils/loadable';
-
-const Engines = loadable(
- () => import(/* webpackChunkName: "Engines" */ '../../components/Engines')
-);
-const Dist = loadable(
- () => import(/* webpackChunkName: "Distribution" */ '../../components/Distribution')
-);
-const Install = loadable(
- () => import(/* webpackChunkName: "Install" */ '../../components/Install')
-);
-const Repository = loadable(
- () => import(/* webpackChunkName: "Repository" */ '../../components/Repository')
-);
const getModuleType = (manifest: PackageMetaInterface) => {
if (manifest.latest.main) {
@@ -40,14 +30,13 @@ const DetailSidebar: React.FC = () => {
const { configOptions } = useConfig();
const version = packageVersion || packageMeta?.latest.version || '';
const time = packageMeta?.time ? packageMeta.time[version] : '';
-
if (!packageMeta || !packageName) {
return null;
}
return (
- =14', npm: '>=6', yarn: '>=1'}
+ peerDependencies:
+ '@jest/globals': '>= 28'
+ '@types/bun': latest
+ '@types/jest': '>= 28'
+ jest: '>= 28'
+ vitest: '>= 0.32'
+ peerDependenciesMeta:
+ '@jest/globals':
+ optional: true
+ '@types/bun':
+ optional: true
+ '@types/jest':
+ optional: true
+ jest:
+ optional: true
+ vitest:
+ optional: true
+ dependencies:
+ '@adobe/css-tools': 4.3.2
+ '@babel/runtime': 7.23.9
+ '@types/jest': 29.5.11
+ aria-query: 5.1.3
+ chalk: 3.0.0
+ css.escape: 1.5.1
+ dom-accessibility-api: 0.6.3
+ jest: 29.7.0(@types/node@20.11.7)(ts-node@10.9.2)
+ lodash: 4.17.21
+ redent: 3.0.0
+ vitest: 0.34.6
+ dev: true
+
/@testing-library/react@14.1.2(react-dom@18.2.0)(react@18.2.0):
resolution: {integrity: sha512-z4p7DVBTPjKM5qDZ0t5ZjzkpSNb+fZy1u6bzO7kk8oeGagpPCAtgh4cx1syrfp7a+QWkM021jGqjJaxJJnXAZg==}
engines: {node: '>=14'}
@@ -11486,6 +11526,20 @@ packages:
react-dom: 18.2.0(react@18.2.0)
dev: true
+ /@testing-library/react@14.2.1(react-dom@18.2.0)(react@18.2.0):
+ resolution: {integrity: sha512-sGdjws32ai5TLerhvzThYFbpnF9XtL65Cjf+gB0Dhr29BGqK+mAeN7SURSdu+eqgET4ANcWoC7FQpkaiGvBr+A==}
+ engines: {node: '>=14'}
+ peerDependencies:
+ react: ^18.0.0
+ react-dom: ^18.0.0
+ dependencies:
+ '@babel/runtime': 7.23.9
+ '@testing-library/dom': 9.3.4
+ '@types/react-dom': 18.2.18
+ react: 18.2.0
+ react-dom: 18.2.0(react@18.2.0)
+ dev: true
+
/@testing-library/user-event@14.5.2(@testing-library/dom@9.3.4):
resolution: {integrity: sha512-YAh82Wh4TIrxYLmfGcixwD18oIjyC1pFQC2Y01F2lzV2HTMiYrI0nze0FD0ocB//CKS/7jIUgae+adPqxK5yCQ==}
engines: {node: '>=12', npm: '>=6'}
@@ -12097,7 +12151,7 @@ packages:
resolution: {integrity: sha512-bnreXCgus6IIadyHNlN/oI5FfX4dWgvGhOPvpr7zzCYDGAPIfvyIoAozMBINmhmsVuqV0cncejF2y5KC7ScqOg==}
deprecated: This is a stub types definition. @testing-library/jest-dom provides its own type definitions, so you do not need this installed.
dependencies:
- '@testing-library/jest-dom': 6.3.0(@types/jest@29.5.11)(jest@29.7.0)(vitest@0.34.6)
+ '@testing-library/jest-dom': 6.4.2(@types/jest@29.5.11)(jest@29.7.0)(vitest@0.34.6)
transitivePeerDependencies:
- '@jest/globals'
- '@types/bun'
@@ -25721,6 +25775,16 @@ packages:
react: ^16.8.0 || ^17 || ^18
dependencies:
react: 18.2.0
+ dev: false
+
+ /react-hook-form@7.50.1(react@18.2.0):
+ resolution: {integrity: sha512-3PCY82oE0WgeOgUtIr3nYNNtNvqtJ7BZjsbxh6TnYNbXButaD5WpjOmTjdxZfheuHKR68qfeFnEDVYoSSFPMTQ==}
+ engines: {node: '>=12.22.0'}
+ peerDependencies:
+ react: ^16.8.0 || ^17 || ^18
+ dependencies:
+ react: 18.2.0
+ dev: true
/react-hot-loader@4.13.1(@types/react@18.2.48)(react-dom@18.2.0)(react@18.2.0):
resolution: {integrity: sha512-ZlqCfVRqDJmMXTulUGic4lN7Ic1SXgHAFw7y/Jb7t25GBgTR0fYAJ8uY4mrpxjRyWGWmqw77qJQGnYbzCvBU7g==}
@@ -25982,7 +26046,7 @@ packages:
peerDependencies:
react: '>=15'
dependencies:
- '@babel/runtime': 7.23.9
+ '@babel/runtime': 7.21.0
history: 4.10.1
hoist-non-react-statics: 3.3.2
loose-envify: 1.4.0