@verdaccio/ui-components 4.0.0-next-8.4 → 4.0.0-next-8.6

package/src/components/ActionBar/ActionBar.test.tsx

@@ -1,7 +1,14 @@
 import React from 'react';
 
+import { cleanupDownloadMocks, setupDownloadMocks } from '../../../vitest/vitestHelpers';
 import { store } from '../../store/store';
-import { cleanup, fireEvent, renderWithStore, screen } from '../../test/test-react-testing-library';
+import {
+  cleanup,
+  fireEvent,
+  renderWithStore,
+  screen,
+  waitFor,
+} from '../../test/test-react-testing-library';
 import ActionBar from './ActionBar';
 
 const defaultPackageMeta = {
@@ -21,25 +28,37 @@ const defaultPackageMeta = {
   },
 };
 
+beforeAll(() => {
+  setupDownloadMocks();
+});
+
+afterAll(() => {
+  cleanupDownloadMocks();
+});
+
 describe('<ActionBar /> component', () => {
   afterEach(() => {
     cleanup();
   });
 
-  test('should render the component in default state', () => {
+  test('should render the component in default state', async () => {
     renderWithStore(<ActionBar packageMeta={defaultPackageMeta} />, store);
-    expect(screen.getByTestId('download-tarball-btn')).toBeInTheDocument();
-    expect(screen.getByTestId('BugReportIcon')).toBeInTheDocument();
-    expect(screen.getByTestId('HomeIcon')).toBeInTheDocument();
+    await waitFor(() => {
+      expect(screen.getByTestId('download-tarball-btn')).toBeInTheDocument();
+      expect(screen.getByTestId('BugReportIcon')).toBeInTheDocument();
+      expect(screen.getByTestId('HomeIcon')).toBeInTheDocument();
+    });
   });
 
-  test('should not render if data is missing', () => {
+  test('should not render if data is missing', async () => {
     // @ts-ignore - testing with missing data
     renderWithStore(<ActionBar packageMeta={undefined} />, store);
-    expect(screen.queryByTestId('HomeIcon')).toBeNull();
+    await waitFor(() => {
+      expect(screen.queryByTestId('HomeIcon')).toBeNull();
+    });
   });
 
-  test('when there is no action bar data', () => {
+  test('when there is no action bar data', async () => {
     const packageMeta = {
       ...defaultPackageMeta,
       latest: {
@@ -54,60 +73,80 @@ describe('<ActionBar /> component', () => {
     };
 
     renderWithStore(<ActionBar packageMeta={packageMeta} />, store);
-    expect(screen.queryByTestId('download-tarball-btn')).not.toBeInTheDocument();
-    expect(screen.queryByTestId('BugReportIcon')).not.toBeInTheDocument();
-    expect(screen.queryByTestId('HomeIcon')).not.toBeInTheDocument();
+    await waitFor(() => {
+      expect(screen.queryByTestId('download-tarball-btn')).not.toBeInTheDocument();
+      expect(screen.queryByTestId('BugReportIcon')).not.toBeInTheDocument();
+      expect(screen.queryByTestId('HomeIcon')).not.toBeInTheDocument();
+    });
   });
 
-  test('when there is a button to download a tarball', () => {
+  test('when there is a button to download a tarball', async () => {
     renderWithStore(<ActionBar packageMeta={defaultPackageMeta} />, store);
-    expect(screen.getByLabelText('action-bar-action.download-tarball')).toBeTruthy();
+    await waitFor(() => {
+      expect(screen.getByLabelText('action-bar-action.download-tarball')).toBeTruthy();
+    });
   });
 
-  test('when button to download is disabled', () => {
+  test('when button to download is disabled', async () => {
     renderWithStore(
       <ActionBar packageMeta={defaultPackageMeta} showDownloadTarball={false} />,
       store
     );
-    expect(screen.queryByTestId('download-tarball-btn')).not.toBeInTheDocument();
+    await waitFor(() => {
+      expect(screen.queryByTestId('download-tarball-btn')).not.toBeInTheDocument();
+    });
   });
 
-  test('when there is a button to raw manifest', () => {
+  test('when there is a button to raw manifest', async () => {
     renderWithStore(<ActionBar packageMeta={defaultPackageMeta} showRaw={true} />, store);
-    expect(screen.getByLabelText('action-bar-action.raw')).toBeTruthy();
+    await waitFor(() => {
+      expect(screen.getByLabelText('action-bar-action.raw')).toBeTruthy();
+    });
   });
 
   test('when click button to raw manifest open a dialog with viewer', async () => {
     renderWithStore(<ActionBar packageMeta={defaultPackageMeta} showRaw={true} />, store);
-    expect(screen.queryByTestId('rawViewer--dialog')).toBeFalsy();
+    await waitFor(() => {
+      expect(screen.queryByTestId('rawViewer--dialog')).toBeFalsy();
+    });
 
     fireEvent.click(screen.getByLabelText('action-bar-action.raw'));
-    await screen.findByTestId('rawViewer--dialog');
+    await waitFor(() => {
+      expect(screen.getByTestId('rawViewer--dialog')).toBeInTheDocument();
+    });
 
     fireEvent.click(screen.getByTestId('close-raw-viewer'));
-    await screen.getByLabelText('action-bar-action.raw');
-
-    expect(screen.queryByTestId('rawViewer--dialog')).toBeFalsy();
+    await waitFor(() => {
+      expect(screen.queryByTestId('rawViewer--dialog')).toBeFalsy();
+    });
   });
 
-  test('should not display download tarball button', () => {
+  test('should not display download tarball button', async () => {
     renderWithStore(<ActionBar packageMeta={defaultPackageMeta} showRaw={false} />, store);
-    expect(screen.queryByLabelText('Download tarball')).toBeFalsy();
+    await waitFor(() => {
+      expect(screen.queryByLabelText('Download tarball')).toBeFalsy();
+    });
   });
 
   test('when click button to download ', async () => {
     renderWithStore(<ActionBar packageMeta={defaultPackageMeta} showRaw={false} />, store);
     fireEvent.click(screen.getByTestId('download-tarball-btn'));
-    await store.getState().loading.models.download;
+    await waitFor(() => {
+      expect(store.getState().loading.models.download).toBe(true);
+    });
   });
 
-  test('should not display show raw button', () => {
+  test('should not display show raw button', async () => {
     renderWithStore(<ActionBar packageMeta={defaultPackageMeta} showRaw={false} />, store);
-    expect(screen.queryByLabelText('action-bar-action.raw')).toBeFalsy();
+    await waitFor(() => {
+      expect(screen.queryByLabelText('action-bar-action.raw')).toBeFalsy();
+    });
   });
 
-  test('when there is a button to open an issue', () => {
+  test('when there is a button to open an issue', async () => {
     renderWithStore(<ActionBar packageMeta={defaultPackageMeta} />, store);
-    expect(screen.getByTestId('BugReportIcon')).toBeInTheDocument();
+    await waitFor(() => {
+      expect(screen.getByTestId('BugReportIcon')).toBeInTheDocument();
+    });
   });
 });

package/src/components/Author/Author.stories.tsx

@@ -35,7 +35,7 @@ export const AuthorAll: any = () => (
   />
 );
 
-export const NoDAuthor: any = () => (
+export const NoAuthor: any = () => (
   <Author
     packageMeta={{
       latest: {

package/src/components/Engines/Engines.stories.tsx

@@ -6,12 +6,14 @@ export default {
   title: 'Components/Sidebar/Engines',
 };
 
-export const EnginesNpmNode: any = () => (
+export const EnginesAll: any = () => (
   <Engines
     packageMeta={{
       latest: {
         engines: {
-          node: '>= 0.1.98',
+          node: '>= 18',
+          pnpm: '>7',
+          yarn: '>3',
           npm: '>3',
         },
       },
@@ -19,51 +21,49 @@ export const EnginesNpmNode: any = () => (
   />
 );
 
-export const EnginesNode: any = () => (
+export const EnginesNpmNode: any = () => (
   <Engines
     packageMeta={{
       latest: {
         engines: {
-          node: '>= 18',
+          node: '>= 0.1.98',
+          npm: '>3',
         },
       },
     }}
   />
 );
 
-export const EnginesYarn: any = () => (
+export const EnginesNode: any = () => (
   <Engines
     packageMeta={{
       latest: {
         engines: {
-          yarn: '>3',
+          node: '>= 18',
         },
       },
     }}
   />
 );
 
-export const EnginesPnpm: any = () => (
+export const EnginesYarn: any = () => (
   <Engines
     packageMeta={{
       latest: {
         engines: {
-          pnpm: '>7',
+          yarn: '>3',
         },
       },
     }}
   />
 );
 
-export const EnginesAll: any = () => (
+export const EnginesPnpm: any = () => (
   <Engines
     packageMeta={{
       latest: {
         engines: {
-          node: '>= 18',
           pnpm: '>7',
-          yarn: '>3',
-          npm: '>3',
         },
       },
     }}

package/src/components/Help/Help.tsx

@@ -40,7 +40,7 @@ const Help: React.FC = () => {
           t('help.second-step'),
           t('help.second-step-command-line', { registryUrl })
         )}
-        <Typography variant="body2">{t('help.third-step')}</Typography>
+        <Typography variant="body1">{t('help.third-step')}</Typography>
       </CardContent>
       <CardActions>
         <Button color="primary" href="https://verdaccio.org/docs/cli-registry" size="small">

package/src/components/Package/Package.test.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { MemoryRouter } from 'react-router';
 
 import { store } from '../../';
+import { cleanupDownloadMocks, setupDownloadMocks } from '../../../vitest/vitestHelpers';
 import {
   cleanup,
   fireEvent,
@@ -34,6 +35,14 @@ const props = {
   keywords: ['verdaccio-core'],
 };
 
+beforeAll(() => {
+  setupDownloadMocks();
+});
+
+afterAll(() => {
+  cleanupDownloadMocks();
+});
+
 describe('<Package /> component', () => {
   afterEach(() => {
     cleanup();

package/src/components/Package/styles.ts

@@ -71,8 +71,7 @@ export const GridRightAligned = styled(Grid)({
 
 export const Wrapper = styled(List)<{ theme?: Theme }>(({ theme }) => ({
   '&:hover': {
-    backgroundColor:
-      theme.palette.mode == 'dark' ? theme.palette.secondary.main : theme.palette.greyLight2,
+    backgroundColor: theme.palette.action.hover,
   },
 }));
 

package/src/components/Readme/Readme.spec.tsx

@@ -7,8 +7,8 @@ describe('<Readme /> component', () => {
   beforeEach(cleanup);
 
   test('should load the component in default state', () => {
-    const wrapper = render(<Readme description="test" />);
-    expect(wrapper).toMatchSnapshot();
+    const { getByText } = render(<Readme description="test" />);
+    expect(getByText('test')).toBeInTheDocument();
   });
 
   test('should dangerously set html', () => {

package/src/components/Readme/utils.ts

@@ -1,4 +1,4 @@
-import * as DOMPurify from 'dompurify';
+import DOMPurify from 'dompurify';
 import { Marked } from 'marked';
 import { markedHighlight } from 'marked-highlight';
 
@@ -22,5 +22,5 @@ marked.setOptions({
 
 export function parseReadme(readme: string): string | void {
   const html = marked.parse(readme);
-  return DOMPurify.sanitize(html);
+  return DOMPurify.sanitize(html as string);
 }

package/src/components/Search/Search.stories.tsx

@@ -1,15 +1,22 @@
 /* eslint-disable verdaccio/jsx-spread */
 import Box from '@mui/material/Box';
+import type { Meta, StoryObj } from '@storybook/react';
+import { HttpResponse, http } from 'msw';
 import React from 'react';
 import { MemoryRouter } from 'react-router';
 
+import Home from '../../sections/Home';
 import Search from './Search';
 
-export default {
+type Story = StoryObj<typeof Search>;
+const meta: Meta<typeof Search> = {
   title: 'Components/Header/Search',
+  component: Home,
 };
 
-export const SearchByQuery = {
+export default meta;
+
+export const SearchByQuery: Story = {
   render: (args) => (
     <MemoryRouter initialEntries={[`/-/web/detail/storybook`]}>
       <Box
@@ -27,4 +34,19 @@ export const SearchByQuery = {
       </Box>
     </MemoryRouter>
   ),
+  parameters: {
+    msw: {
+      handlers: [
+        http.get('https://my-registry.org/-/verdaccio/data/sidebar/storybook', () => {
+          return HttpResponse.json(require('../../../vitest/api/storybook-sidebar.json'));
+        }),
+        http.get('https://my-registry.org/-/verdaccio/data/package/readme/storybook', () => {
+          return HttpResponse.json(require('../../../vitest/api/storybook-readme')());
+        }),
+        http.get('https://my-registry.org/-/verdaccio/data/search/*', () => {
+          return HttpResponse.json(require('../../../vitest/api/search-verdaccio.json'));
+        }),
+      ],
+    },
+  },
 };

package/src/components/Search/Search.tsx

@@ -118,6 +118,8 @@ const Search: React.FC<RouteComponentProps> = ({ history }) => {
   };
 
   const renderOption = (props, option) => {
+    const { key, ...otherProps } = props;
+
     if (searchRemote) {
       const item: SearchResultWeb = option.package;
       const isPrivate = option?.verdaccioPrivate;
@@ -125,7 +127,8 @@ const Search: React.FC<RouteComponentProps> = ({ history }) => {
       const isRemote = !isCached && !isPrivate;
       return (
         <SearchItem
-          {...props}
+          key={key}
+          {...otherProps}
           description={item?.description}
           isCached={isCached}
           isPrivate={isPrivate}
@@ -137,7 +140,8 @@ const Search: React.FC<RouteComponentProps> = ({ history }) => {
     } else {
       return (
         <SearchItem
-          {...props}
+          key={key}
+          {...otherProps}
           description={option?.description}
           name={option?.name}
           version={option?.version}
@@ -161,4 +165,4 @@ const Search: React.FC<RouteComponentProps> = ({ history }) => {
   );
 };
 
-export default withRouter(Search);
+export default withRouter(Search as any);

package/src/components/Versions/HistoryList.tsx

@@ -39,7 +39,11 @@ const VersionsHistoryList: React.FC<Props> = ({ versions, packageName, time }) =
   return (
     <List dense={true}>
       {Object.keys(listVersions)
-        .reverse()
+        .sort((a, b) => {
+          const timeA = time[a] ? new Date(time[a]).getTime() : 0;
+          const timeB = time[b] ? new Date(time[b]).getTime() : 0;
+          return timeB - timeA;
+        })
         .map((version) => (
           <ListItem
             className="version-item"
@@ -48,7 +52,11 @@ const VersionsHistoryList: React.FC<Props> = ({ versions, packageName, time }) =
             sx={{ pr: 0 }}
           >
             <Link to={`${Route.DETAIL}${packageName}/v/${version}`} variant="outline">
-              <ListItemText disableTypography={false} primary={version}></ListItemText>
+              <ListItemText
+                data-testid={`version-list-link`}
+                disableTypography={false}
+                primary={version}
+              />
             </Link>
             {typeof versions[version]?.deprecated === 'string' ? (
               <Chip

package/src/components/Versions/Versions.test.tsx

@@ -7,6 +7,7 @@ import { fireEvent, render, screen } from '../../test/test-react-testing-library
 import Versions, { Props } from './Versions';
 import data from './__partials__/data.json';
 import dataDeprecated from './__partials__/deprecated-versions.json';
+import dataUnsorted from './__partials__/unsorted-versions.json';
 
 const VersionsComponent: React.FC<Props> = (props) => (
   <MemoryRouter>
@@ -68,5 +69,15 @@ describe('<Version /> component', () => {
     expect(screen.getByText('0.0.1')).toBeInTheDocument();
   });
 
+  test('should render versions sorted by timestamp in descending order', () => {
+    render(<VersionsComponent packageMeta={dataUnsorted} packageName={'dummy'} />);
+
+    const versionElements = screen.getAllByTestId('version-list-link');
+    const versions = versionElements.map((el) => el.textContent);
+
+    // Expected order based on timestamps in unsorted-versions.json:
+    expect(versions).toEqual(['1.0.1', '1.0.0', '0.1.1', '0.1.0']);
+  });
+
   test.todo('should click on version link');
 });

package/src/components/Versions/__partials__/unsorted-versions.json

@@ -0,0 +1,37 @@
+{
+  "versions": {
+    "1.0.0": {
+      "name": "dummy",
+      "version": "1.0.0"
+    },
+    "0.1.0": {
+      "name": "dummy",
+      "version": "0.1.0"
+    },
+    "0.1.1": {
+      "name": "dummy",
+      "version": "0.1.1"
+    },
+    "1.0.1": {
+      "name": "dummy",
+      "version": "1.0.1"
+    }
+  },
+  "time": {
+    "created": "2012-02-19T21:35:53.514Z",
+    "modified": "2024-11-21T06:32:43.761Z",
+    "1.0.0": "2025-01-10T14:55:23.763Z",
+    "0.1.0": "2012-02-19T21:35:54.455Z",
+    "0.1.1": "2012-02-20T06:12:03.403Z",
+    "1.0.1": "2025-01-10T15:11:36.318Z"
+  },
+  "users": {},
+  "dist-tags": {
+    "latest": "1.0.1"
+  },
+  "_id": "dummy",
+  "latest": {
+    "name": "dummy",
+    "version": "1.0.1"
+  }
+}

package/src/layouts/Version/Version.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import { HttpResponse, http } from 'msw';
 import React from 'react';
 import { MemoryRouter, Route } from 'react-router';
 
@@ -11,6 +12,7 @@ const meta: Meta<typeof VersionLayout> = {
 };
 
 export default meta;
+
 type Story = StoryObj<typeof VersionLayout>;
 
 export const Primary: Story = {
@@ -26,6 +28,18 @@ export const Primary: Story = {
       </MemoryRouter>
     );
   },
+  parameters: {
+    msw: {
+      handlers: [
+        http.get('https://my-registry.org/-/verdaccio/data/sidebar/storybook', () => {
+          return HttpResponse.json(require('../../../vitest/api/storybook-sidebar.json'));
+        }),
+        http.get('https://my-registry.org/-/verdaccio/data/package/readme/storybook', () => {
+          return HttpResponse.json(require('../../../vitest/api/storybook-readme')());
+        }),
+      ],
+    },
+  },
 };
 
 export const jQuery: Story = {
@@ -41,4 +55,16 @@ export const jQuery: Story = {
       </MemoryRouter>
     );
   },
+  parameters: {
+    msw: {
+      handlers: [
+        http.get('https://my-registry.org/-/verdaccio/data/sidebar/jquery', () => {
+          return HttpResponse.json(require('../../../vitest/api/jquery-sidebar.json'));
+        }),
+        http.get('https://my-registry.org/-/verdaccio/data/package/readme/jquery', () => {
+          return HttpResponse.json(require('../../../vitest/api/jquery-readme')());
+        }),
+      ],
+    },
+  },
 };

package/src/sections/Detail/Detail.stories.tsx

@@ -1,25 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { HttpResponse, http } from 'msw';
 import React from 'react';
 import { MemoryRouter, Route } from 'react-router';
 
 import { VersionProvider } from '../../providers';
 import Detail from './Detail';
 
-export default {
+const meta: Meta<typeof Detail> = {
   title: 'Sections/Detail',
+  component: Detail,
 };
 
-export const DetailStorybook: any = () => (
-  <MemoryRouter initialEntries={[`/-/web/detail/storybook`]}>
-    <Route exact={true} path="/-/web/detail/:package">
-      <VersionProvider>
-        <Detail />
-      </VersionProvider>
-    </Route>
-  </MemoryRouter>
-);
+export default meta;
 
-export const DetailJquery: any = () => (
-  <MemoryRouter initialEntries={[`/-/web/detail/jquery`]}>
+type Story = StoryObj<typeof Detail>;
+const getDetailApp = (url: string) => (
+  <MemoryRouter initialEntries={[url]}>
     <Route exact={true} path="/-/web/detail/:package">
       <VersionProvider>
         <Detail />
@@ -28,12 +24,47 @@ export const DetailJquery: any = () => (
   </MemoryRouter>
 );
 
-export const DetailForbidden: any = () => (
-  <MemoryRouter initialEntries={[`/-/web/detail/JSONStream`]}>
-    <Route exact={true} path="/-/web/detail/:package">
-      <VersionProvider>
-        <Detail />
-      </VersionProvider>
-    </Route>
-  </MemoryRouter>
-);
+export const DetailStorybook: Story = {
+  render: () => getDetailApp(`/-/web/detail/storybook`),
+  parameters: {
+    msw: {
+      handlers: [
+        http.get('https://my-registry.org/-/verdaccio/data/sidebar/storybook', () => {
+          return HttpResponse.json(require('../../../vitest/api/storybook-sidebar.json'));
+        }),
+        http.get('https://my-registry.org/-/verdaccio/data/package/readme/storybook', () => {
+          return HttpResponse.json(require('../../../vitest/api/storybook-readme')());
+        }),
+      ],
+    },
+  },
+};
+
+export const DetailJquery: Story = {
+  render: () => getDetailApp(`/-/web/detail/jquery`),
+  parameters: {
+    msw: {
+      handlers: [
+        http.get('https://my-registry.org/-/verdaccio/data/sidebar/jquery', () => {
+          return HttpResponse.json(require('../../../vitest/api/jquery-sidebar.json'));
+        }),
+        http.get('https://my-registry.org/-/verdaccio/data/package/readme/jquery', () => {
+          return HttpResponse.json(require('../../../vitest/api/jquery-readme')());
+        }),
+      ],
+    },
+  },
+};
+
+export const DetailForbidden: Story = {
+  render: () => getDetailApp(`/-/web/detail/JSONStream`),
+  parameters: {
+    msw: {
+      handlers: [
+        http.get('https://my-registry.org/-/verdaccio/data/sidebar/JSONStream', () => {
+          return new HttpResponse('unauthorized', { status: 401 });
+        }),
+      ],
+    },
+  },
+};