@verdaccio/ui-components 4.0.0-next-8.5 → 4.0.0-next-8.7

package/src/AppTest/App.stories.tsx

@@ -1,32 +1,89 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { HttpResponse, http } from 'msw';
 import React from 'react';
 import { MemoryRouter } from 'react-router';
 
 import AppRoute from './AppRoute';
 
-export default {
+const meta: Meta<typeof AppRoute> = {
   title: 'App/Main',
+  component: AppRoute,
 };
 
-export const ApplicationStoryBook: any = () => (
-  <MemoryRouter initialEntries={[`/-/web/detail/storybook`]}>
-    <AppRoute />
-  </MemoryRouter>
-);
-
-export const ApplicationJquery: any = () => (
-  <MemoryRouter initialEntries={[`/-/web/detail/jquery`]}>
-    <AppRoute />
-  </MemoryRouter>
-);
-
-export const ApplicationForbidden: any = () => (
-  <MemoryRouter initialEntries={[`/-/web/detail/JSONStream`]}>
-    <AppRoute />
-  </MemoryRouter>
-);
-
-export const ApplicationNotFound: any = () => (
-  <MemoryRouter initialEntries={[`/-/web/detail/kleur`]}>
-    <AppRoute />
-  </MemoryRouter>
-);
+export default meta;
+
+type Story = StoryObj<typeof AppRoute>;
+
+export const ApplicationStoryBook: Story = {
+  render: () => (
+    <MemoryRouter initialEntries={[`/-/web/detail/storybook`]}>
+      <AppRoute />
+    </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 ApplicationJquery: Story = {
+  render: () => (
+    <MemoryRouter initialEntries={[`/-/web/detail/jquery`]}>
+      <AppRoute />
+    </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')());
+        }),
+      ],
+    },
+  },
+};
+
+export const ApplicationForbidden: Story = {
+  render: () => (
+    <MemoryRouter initialEntries={[`/-/web/detail/JSONStream`]}>
+      <AppRoute />
+    </MemoryRouter>
+  ),
+  parameters: {
+    msw: {
+      handlers: [
+        http.get('https://my-registry.org/-/verdaccio/data/sidebar/JSONStream', () => {
+          return new HttpResponse('unauthorized', { status: 401 });
+        }),
+      ],
+    },
+  },
+};
+
+export const ApplicationNotFound: Story = {
+  render: () => (
+    <MemoryRouter initialEntries={[`/-/web/detail/kleur`]}>
+      <AppRoute />
+    </MemoryRouter>
+  ),
+  parameters: {
+    msw: {
+      handlers: [
+        http.get('https://my-registry.org/-/verdaccio/data/sidebar/kleur', () => {
+          return new HttpResponse('unauthorized', { status: 404 });
+        }),
+      ],
+    },
+  },
+};

package/src/AppTest/AppRoute.test.tsx

@@ -34,13 +34,17 @@ describe('AppRoute', () => {
 
   test('renders VersionPage component for PACKAGE path', async () => {
     act(() => appTest('/-/web/detail/jquery'));
-    await waitFor(() => screen.getByTestId('readme-tab'));
+    await waitFor(() => expect(screen.getByTestId('readme-tab')).toBeInTheDocument(), {
+      timeout: 3000,
+    });
     expect(screen.getByTestId('sidebar')).toBeInTheDocument();
   });
 
   test('renders VersionPage component for PACKAGE VERSION path', async () => {
     act(() => appTest('/-/web/detail/jquery/v/3.6.3'));
-    await waitFor(() => screen.getByTestId('readme-tab'));
+    await waitFor(() => expect(screen.getByTestId('readme-tab')).toBeInTheDocument(), {
+      timeout: 3000,
+    });
     expect(screen.getByTestId('sidebar')).toBeInTheDocument();
   });
 

package/src/Theme/index.ts

@@ -1,4 +1,5 @@
 export * as colors from './colors';
 export { ThemeProvider, useCustomTheme } from './ThemeProvider';
 export { default as StyleBaseline } from './StyleBaseline';
-export { Theme, FontWeight, getTheme } from './theme';
+export { getTheme } from './theme';
+export type { Theme, FontWeight } from './theme';

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/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/index.ts

@@ -1 +1,2 @@
-export { default, PackageInterface } from './Package';
+export { default } from './Package';
+export type { PackageInterface } from './Package';

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/index.ts

@@ -49,8 +49,8 @@ export { default as AppConfigurationProvider } from './providers/AppConfiguratio
 export { default as PersistenceSettingProvider } from './providers/PersistenceSettingProvider';
 
 export * from './providers/AppConfigurationProvider';
-export { TranslatorProvider, useLanguage, LanguageItem } from './providers/TranslatorProvider';
-export * from './providers/TranslatorProvider';
+export { TranslatorProvider, useLanguage } from './providers/TranslatorProvider';
+export type { LanguageItem } from './providers/TranslatorProvider';
 export { VersionProvider } from './providers/VersionProvider';
 export * from './providers/VersionProvider';
 
@@ -61,4 +61,6 @@ export { loadable, Route } from './utils';
 export * from './hooks';
 // others
 export * from './Theme';
-export { store, api, RootState, Dispatch, LoginError, LoginBody, LoginResponse } from './store';
+export { store, api } from './store';
+export type { RootState, Dispatch } from './store';
+export type { LoginError, LoginBody, LoginResponse } from './store/models/login';

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/providers/TranslatorProvider/index.ts

@@ -1 +1,2 @@
-export { default as TranslatorProvider, useLanguage, LanguageItem } from './TranslatorProvider';
+export { default as TranslatorProvider, useLanguage } from './TranslatorProvider';
+export type { LanguageItem } from './TranslatorProvider';

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 });
+        }),
+      ],
+    },
+  },
+};

package/src/sections/Header/Header.stories.tsx

@@ -1,3 +1,5 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { HttpResponse, http } from 'msw';
 import React from 'react';
 import { MemoryRouter, Route } from 'react-router';
 
@@ -5,10 +7,14 @@ import { HeaderInfoDialog } from '../../';
 import { VersionProvider } from '../../providers';
 import Header from './Header';
 
-export default {
+type Story = StoryObj<typeof Header>;
+const meta: Meta<typeof Header> = {
   title: 'Sections/Header',
+  component: Header,
 };
 
+export default meta;
+
 function CustomInfoDialog({ onCloseDialog, title, isOpen }) {
   return (
     <HeaderInfoDialog
@@ -25,12 +31,29 @@ function CustomInfoDialog({ onCloseDialog, title, isOpen }) {
   );
 }
 
-export const HeaderAll: any = () => (
-  <MemoryRouter initialEntries={[`/-/web/detail/storybook`]}>
-    <Route exact={true} path="/-/web/detail/:package">
-      <VersionProvider>
-        <Header HeaderInfoDialog={CustomInfoDialog} />
-      </VersionProvider>
-    </Route>
-  </MemoryRouter>
-);
+export const HeaderAll: Story = {
+  render: () => (
+    <MemoryRouter initialEntries={[`/-/web/detail/storybook`]}>
+      <Route exact={true} path="/-/web/detail/:package">
+        <VersionProvider>
+          <Header HeaderInfoDialog={CustomInfoDialog} />
+        </VersionProvider>
+      </Route>
+    </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/sections/Header/RegistryInfoContent/RegistryInfoContent.tsx

@@ -169,7 +169,7 @@ const RegistryInfoContent: FC<Props> = ({ scope, registryUrl }) => {
             expandIcon={<ExpandMoreIcon />}
             id="panel3a-header"
           >
-            {'pnpm'}
+            <Typography className={classes.heading}>{'pnpm'}</Typography>
           </AccordionSummary>
           <AccordionDetails>
             <CommandContainer data-testid={'tab-content'}>