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

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/Home/Home.stories.tsx

@@ -1,16 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { HttpResponse, http } from 'msw';
 import React from 'react';
 import { MemoryRouter, Route } from 'react-router';
 
 import Home from './Home';
 
-export default {
+type Story = StoryObj<typeof Home>;
+const meta: Meta<typeof Home> = {
   title: 'Sections/Home',
+  component: Home,
 };
 
-export const HomeDefault: any = () => (
-  <MemoryRouter initialEntries={[`/`]}>
-    <Route exact={true} path="/">
-      <Home />
-    </Route>
-  </MemoryRouter>
-);
+export default meta;
+
+export const HomeDefault: Story = {
+  render: () => (
+    <MemoryRouter initialEntries={[`/`]}>
+      <Route exact={true} path="/">
+        <Home />
+      </Route>
+    </MemoryRouter>
+  ),
+  parameters: {
+    msw: {
+      handlers: [
+        http.get('https://my-registry.org/-/verdaccio/data/packages', () => {
+          return HttpResponse.json([...require('../../../vitest/api/home.json')]);
+        }),
+      ],
+    },
+  },
+};

package/src/sections/SideBar/Sidebar.stories.tsx

@@ -1,39 +1,64 @@
+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 DetailSidebar from './Sidebar';
 
-export default {
+const meta: Meta<typeof DetailSidebar> = {
   title: 'Sections/Sidebar',
+  component: DetailSidebar,
 };
 
-export const SidebarLatestPackage: any = () => (
-  <MemoryRouter initialEntries={[`/-/web/detail/storybook`]}>
-    <Route exact={true} path="/-/web/detail/:package">
-      <VersionProvider>
-        <DetailSidebar />
-      </VersionProvider>
-    </Route>
-  </MemoryRouter>
-);
+export default meta;
 
-export const SidebarPackageVersion: any = () => (
-  <MemoryRouter initialEntries={[`/-/web/detail/storybook/v/6.0.26`]}>
-    <Route exact={true} path="/-/web/detail/:package/v/:version">
-      <VersionProvider>
-        <DetailSidebar />
-      </VersionProvider>
-    </Route>
-  </MemoryRouter>
-);
+type Story = StoryObj<typeof DetailSidebar>;
 
-export const SidebarNoFounding: any = () => (
-  <MemoryRouter initialEntries={[`/-/web/detail/jquery`]}>
-    <Route exact={true} path="/-/web/detail/:package">
-      <VersionProvider>
-        <DetailSidebar />
-      </VersionProvider>
-    </Route>
-  </MemoryRouter>
-);
+export const SidebarLatestPackage: Story = {
+  render: () => (
+    <MemoryRouter initialEntries={[`/-/web/detail/storybook`]}>
+      <Route exact={true} path="/-/web/detail/:package">
+        <VersionProvider>
+          <DetailSidebar />
+        </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')());
+        }),
+      ],
+    },
+  },
+};
+
+export const SidebarPackageVersion: Story = {
+  render: () => (
+    <MemoryRouter initialEntries={[`/-/web/detail/storybook/v/6.0.26`]}>
+      <Route exact={true} path="/-/web/detail/:package/v/:version">
+        <VersionProvider>
+          <DetailSidebar />
+        </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')());
+        }),
+      ],
+    },
+  },
+};

package/src/store/api.test.ts

@@ -1,6 +1,6 @@
 import { vi } from 'vitest';
 
-import api, { handleResponseType } from './api';
+import api, { CustomError, handleResponseType } from './api';
 
 describe('api', () => {
   describe('handleResponseType', () => {
@@ -142,7 +142,9 @@ describe('api', () => {
         })
       );
 
-      await expect(api.request('/resource')).rejects.toThrow(new Error('Unknown error'));
+      const error = new CustomError('Unknown error');
+      error.code = 500;
+      await expect(api.request('/resource')).rejects.toThrow(error);
     });
 
     test('when api returns an error 5.x.x', async () => {

package/src/store/api.ts

@@ -1,6 +1,6 @@
 import storage from './storage';
 
-class CustomError extends Error {
+export class CustomError extends Error {
   // @ts-ignore
   code: number;
 }

package/src/store/models/login.test.ts

@@ -1,20 +1,24 @@
 import { vi } from 'vitest';
 
-// import { generateTokenWithTimeRange } from '../../../jest/unit/components/__mocks__/token';
+import { generateTokenWithTimeRange } from '../../utils/token-generate';
 
 describe('getDefaultUserState', (): void => {
   const username = 'xyz';
 
   beforeEach(() => {
     vi.resetModules();
+    vi.resetAllMocks();
   });
 
   test('should return state with empty user', async () => {
     const token = 'token-xx-xx-xx';
-    vi.doMock('../storage', async (importOriginal) => ({
-      ...(await importOriginal<typeof import('../storage')>()),
-      getItem: (key: string) => (key === 'token' ? token : username),
+
+    vi.doMock('../storage', () => ({
+      default: {
+        getItem: (key: string) => (key === 'token' ? token : username),
+      },
     }));
+
     const Login = await import('./login');
     const { getDefaultUserState } = Login;
     const result = {
@@ -24,19 +28,21 @@ describe('getDefaultUserState', (): void => {
     expect(getDefaultUserState()).toEqual(result);
   });
 
-  // test('should return state with user from storage', async () => {
-  //   const token = generateTokenWithTimeRange(24);
-  //
-  //   vi.doMock('../storage', async (importOriginal) => ({
-  //     ...(await importOriginal<typeof import('../storage')>()),
-  //     getItem: (key: string) => (key === 'token' ? token : username),
-  //   }));
-  //   const Login = await import('./login');
-  //   const { getDefaultUserState } = Login;
-  //   const result = {
-  //     token,
-  //     username,
-  //   };
-  //   expect(getDefaultUserState()).toEqual(result);
-  // });
+  test('should return state with user from storage', async () => {
+    const token = generateTokenWithTimeRange(24);
+
+    vi.doMock('../storage', () => ({
+      default: {
+        getItem: (key: string) => (key === 'token' ? token : username),
+      },
+    }));
+
+    const Login = await import('./login');
+    const { getDefaultUserState } = Login;
+    const result = {
+      token,
+      username,
+    };
+    expect(getDefaultUserState()).toEqual(result);
+  });
 });

package/src/utils/token.test.ts

@@ -1,13 +1,12 @@
 import { vi } from 'vitest';
 
-/* eslint-disable jest/no-mocks-import */
+import { isTokenExpire } from './token';
 import {
   generateInvalidToken,
   generateTokenWithExpirationAsString,
   generateTokenWithOutExpiration,
   generateTokenWithTimeRange,
-} from '../../vitest/unit/components/__mocks__/token';
-import { isTokenExpire } from './token';
+} from './token-generate';
 
 /* eslint-disable no-console */
 console.error = vi.fn();

package/src/utils/url.ts

@@ -45,13 +45,29 @@ export function downloadFile(fileStream: Blob, fileName: string): void {
   fileLink.href = objectURL;
   fileLink.download = fileName;
 
-  // Without appending to an HTML Element, download dialog does not show up on Firefox
-  // https://github.com/verdaccio/ui/issues/119
-  document.documentElement.appendChild(fileLink);
-  fileLink.click();
-  // firefox requires remove the object url
-  setTimeout(() => {
-    URL.revokeObjectURL(objectURL);
-    document.documentElement.removeChild(fileLink);
-  }, 150);
+  // Skip actual download in test environment to avoid JSDOM navigation error
+  // Check if we're in a test environment (JSDOM)
+  const isTestEnvironment =
+    (typeof window !== 'undefined' &&
+      window.navigator &&
+      window.navigator.userAgent &&
+      window.navigator.userAgent.includes('Node.js')) ||
+    window.navigator.userAgent.includes('jsdom');
+
+  if (!isTestEnvironment) {
+    // Without appending to an HTML Element, download dialog does not show up on Firefox
+    // https://github.com/verdaccio/ui/issues/119
+    document.documentElement.appendChild(fileLink);
+    fileLink.click();
+    // firefox requires remove the object url
+    setTimeout(() => {
+      URL.revokeObjectURL(objectURL);
+      document.documentElement.removeChild(fileLink);
+    }, 150);
+  } else {
+    // In test environment, just clean up without triggering navigation
+    setTimeout(() => {
+      URL.revokeObjectURL(objectURL);
+    }, 150);
+  }
 }

package/tsconfig.build.json

@@ -10,10 +10,10 @@
     "rootDir": ".",
     "outDir": "./build",
     "skipLibCheck": true,
-    "jsx": "react"
+    "jsx": "react",
+    "types": ["node", "@testing-library/jest-dom"]
   },
   "include": ["src/**/*", "./src/types/index.d.ts"],
-  "types": ["node", "@testing-library/jest-dom"],
   "typedocOptions": {
     "categoryOrder": ["Model", "Component", "Provider", "*"],
     "defaultCategory": "Component",

package/tsconfig.json

@@ -10,9 +10,10 @@
     "outDir": "./build",
     "preserveSymlinks": true,
     "jsx": "react",
-    "allowJs": true
+    "allowJs": true,
+    "types": ["node", "jest", "@testing-library/jest-dom"]
   },
-  "types": ["node", "jest", "@testing-library/jest-dom"],
+  "include": ["src/**/*", "vitest/**/*", "src/test/**/*"],
   "references": [
     {
       "path": "../core/types"

package/vitest.config.mjs

@@ -7,7 +7,7 @@ export default defineConfig({
     environment: 'jsdom',
     globals: true,
     setupFiles: ['./vitest/setup.ts', './vitest/setup-env.ts'],
-    exclude: ['node_modules', './build/'],
+    exclude: ['**/node_modules/**', '**/build/**'],
     snapshotFormat: {
       escapeString: true,
       printBasicPrototype: true,
@@ -22,6 +22,7 @@ export default defineConfig({
       '\\.(jpg)$': './vitest/unit/empty.ts',
       '\\.(md)$': './vitest/unit/empty-string.ts',
     },
+    testTimeout: 20000,
   },
   plugins: [
     react({