@verdaccio/ui-components 4.0.0-next-8.2 → 4.0.0-next-8.3

package/vitest/identity.js

@@ -0,0 +1,29 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+let Reflect;
+let idObj;
+
+function checkIsNodeV6OrAbove() {
+  if (typeof process === 'undefined') {
+    return false;
+  }
+
+  return parseInt(process.versions.node.split('.')[0], 10) >= 6;
+}
+
+if (!checkIsNodeV6OrAbove()) {
+  Reflect = require('harmony-reflect');
+}
+
+idObj = new Proxy(
+  {},
+  {
+    get: function getter(target, key) {
+      if (key === '__esModule') {
+        return false;
+      }
+      return key;
+    },
+  }
+);
+
+module.exports = idObj;

package/vitest/react-markdown.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+import { vi } from 'vitest';
+
+// Mock react-markdown globally
+vi.mock('react-markdown', () => ({
+  default: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+}));

package/vitest/server-handlers.ts

@@ -0,0 +1,82 @@
+import fs from 'fs';
+import { rest } from 'msw';
+
+const packagesPayload = require('./api/home-packages.json');
+
+export const handlers = [
+  rest.get('http://localhost:9000/-/verdaccio/data/packages', (req, res, ctx) => {
+    return res(ctx.json(Array(400).fill(packagesPayload)));
+  }),
+
+  rest.get('http://localhost:9000/-/verdaccio/data/sidebar/storybook', (req, res, ctx) => {
+    const { v } = req.params;
+    if (v) {
+      return res(ctx.json(require('./api/storybook-v.json')));
+    } else {
+      return res(ctx.json(require('./api/storybook-sidebar.json')));
+    }
+  }),
+
+  rest.get('http://localhost:9000/-/verdaccio/data/search/*', (req, res, ctx) => {
+    return res(ctx.json(require('./api/search-verdaccio.json')));
+  }),
+
+  rest.get('http://localhost:9000/-/verdaccio/data/package/readme/storybook', (req, res, ctx) => {
+    return res(ctx.text(require('./api/storybook-readme')()));
+  }),
+
+  rest.get('http://localhost:9000/-/verdaccio/data/sidebar/jquery', (req, res, ctx) => {
+    return res(ctx.json(require('./api/jquery-sidebar.json')));
+  }),
+  rest.get('http://localhost:9000/-/verdaccio/data/sidebar/JSONStream', (req, res, ctx) => {
+    return res(ctx.status(401)); // unauthorized
+  }),
+  rest.get('http://localhost:9000/-/verdaccio/data/sidebar/semver', (req, res, ctx) => {
+    return res(ctx.status(500)); // internal server error
+  }),
+  rest.get('http://localhost:9000/-/verdaccio/data/sidebar/kleur', (req, res, ctx) => {
+    return res(ctx.status(404)); // not found
+  }),
+  rest.get('http://localhost:9000/-/verdaccio/data/sidebar/glob', (req, res, ctx) => {
+    return res(ctx.json(require('./api/glob-sidebar.json')));
+  }),
+  rest.get('http://localhost:9000/-/verdaccio/data/package/readme/glob', (req, res, ctx) => {
+    return res(ctx.text('foo glob'));
+  }),
+  rest.get('http://localhost:9000/-/verdaccio/data/sidebar/got', (req, res, ctx) => {
+    return res(ctx.json(require('./api/got-sidebar.json')));
+  }),
+  rest.get('http://localhost:9000/-/verdaccio/data/package/readme/got', (req, res, ctx) => {
+    return res(ctx.text('foo got'));
+  }),
+  rest.get('http://localhost:9000/-/verdaccio/data/package/readme/jquery', (req, res, ctx) => {
+    return res(ctx.text(require('./api/jquery-readme')()));
+  }),
+  rest.get('http://localhost:9000/verdaccio/-/verdaccio-1.0.0.tgz', (req, res, ctx) => {
+    const fileContent = fs.readFileSync('./api/verdaccio-1.0.0.tgz');
+    return res(
+      ctx.status(200),
+      ctx.set('Content-Type', 'application/octet-stream'),
+      ctx.body(fileContent)
+    );
+  }),
+
+  rest.post<{ username: string; password: string }, { token: string; username: string }>(
+    'http://localhost:9000/-/verdaccio/sec/login',
+    // @ts-ignore
+    async (req, res, ctx) => {
+      // @ts-ignore
+      const body = await req.json();
+      if (body.username === 'fail') {
+        return ctx.status(401);
+      }
+
+      return res(
+        ctx.json({
+          username: body.username,
+          token: 'valid token',
+        })
+      );
+    }
+  ),
+];

package/vitest/server.ts

@@ -0,0 +1,6 @@
+import { setupServer } from 'msw/node';
+
+import { handlers } from './server-handlers';
+
+const server = setupServer(...handlers);
+export { server };

package/vitest/setup-env.ts

@@ -0,0 +1,33 @@
+import '@testing-library/jest-dom';
+import 'whatwg-fetch';
+
+import { server } from './server';
+
+// Configure the test environment URL
+Object.defineProperty(window, 'location', {
+  writable: true,
+  value: new URL('http://localhost:9000/'),
+});
+
+beforeAll(() => {
+  // Enable debug logging
+  // server.events.on('request:start', (req) => {
+  //   console.log('Request started:', req.url.href);
+  // });
+  // server.events.on('request:match', (req) => {
+  //   console.log('Request matched:', req.url.href);
+  // });
+  // server.events.on('request:unhandled', (req) => {
+  //   console.warn('Unhandled request:', req.url.href);
+  // });
+  // server.events.on('request:end', (req) => {
+  //   console.log('Request completed:', req.url.href);
+  // });
+  server.listen({
+    onUnhandledRequest: 'warn',
+  });
+});
+afterEach(() => server.resetHandlers());
+afterAll(() => {
+  server.close();
+});

package/vitest/setup.ts

@@ -0,0 +1,40 @@
+/**
+ * Setup configuration for Jest
+ * This file includes global settings for the JEST environment.
+ */
+import '@testing-library/jest-dom';
+import 'mutationobserver-shim';
+import { vi } from 'vitest';
+import { Headers, Request, Response, fetch } from 'whatwg-fetch';
+
+// Override the global fetch and related APIs
+global.fetch = fetch;
+global.Headers = Headers;
+global.Request = Request;
+global.Response = Response;
+
+// @ts-ignore : Property '__VERDACCIO_BASENAME_UI_OPTIONS' does not exist on type 'Global'.
+global.__VERDACCIO_BASENAME_UI_OPTIONS = {
+  base: 'http://localhost:9000/',
+  protocol: 'http',
+  host: 'localhost',
+  primaryColor: '#4b5e40',
+  url_prefix: '',
+  darkMode: false,
+  language: 'en-US',
+  uri: 'http://localhost:9000/',
+  pkgManagers: ['pnpm', 'yarn', 'npm'],
+  title: 'Verdaccio Dev UI',
+  scope: '',
+  version: 'v1.0.0',
+};
+
+// mocking few DOM methods
+// @ts-ignore : Property 'document' does not exist on type 'Global'.
+if (global.document) {
+  // @ts-ignore : Type 'Mock<{ selectNodeContents: () => void; }, []>' is not assignable to type '() => Range'.
+  document.createRange = vi.fn((): void => ({
+    selectNodeContents: (): void => {},
+  }));
+  document.execCommand = vi.fn();
+}

package/vitest/unit/components/__mocks__/token.ts

@@ -0,0 +1,33 @@
+/**
+ * Token Utility
+ */
+import dayjs from 'dayjs';
+
+function encodeBase64(string: string) {
+  return Buffer.from(string).toString('base64');
+}
+
+export function generateTokenWithTimeRange(amount = 0) {
+  const payload = {
+    username: 'verdaccio',
+    exp: Number.parseInt(String(dayjs(new Date()).add(amount, 'hour').valueOf() / 1000), 10),
+  };
+  return `xxxxxx.${encodeBase64(JSON.stringify(payload))}.xxxxxx`;
+}
+
+export function generateTokenWithExpirationAsString() {
+  const payload = { username: 'verdaccio', exp: 'I am not a number' };
+  return `xxxxxx.${encodeBase64(JSON.stringify(payload))}.xxxxxx`;
+}
+
+export function generateInvalidToken() {
+  const payload = `invalidtoken`;
+  return `xxxxxx.${encodeBase64(payload)}.xxxxxx`;
+}
+
+export function generateTokenWithOutExpiration() {
+  const payload = {
+    username: 'verdaccio',
+  };
+  return `xxxxxx.${encodeBase64(JSON.stringify(payload))}.xxxxxx`;
+}

package/vitest/unit/empty-string.ts

@@ -0,0 +1 @@
+export default 'empty string module';

package/vitest/unit/empty.ts

@@ -0,0 +1 @@
+export default {};

package/vitest/vitestSerializer.ts

@@ -0,0 +1,31 @@
+import { SnapshotSerializer } from 'vitest';
+
+const serializer: SnapshotSerializer = {
+  serialize(val, config, indentation, depth, refs, printer) {
+    for (const className of [...val.classList]) {
+      if (className.startsWith('css-')) {
+        const hashEnd = className.indexOf('-', 4);
+        if (hashEnd >= 0) {
+          val.classList.replace(className, 'makeStyles' + className.substring(hashEnd));
+        } else {
+          val.classList.remove(className);
+        }
+      }
+    }
+    if (!val.classList.length) {
+      val.removeAttribute('class');
+    }
+    return printer(val, config, indentation, depth, refs);
+  },
+  test(val) {
+    return val instanceof Element && [...val.classList].some((name) => name.startsWith('css-'));
+  },
+};
+
+/**
+ * An object snapshot serializer that removes dynamic CSS classes (generated by makeStyle) from DOM elements.
+ *
+ * `css-hash-suffix` is transformed into `makeStyles-suffix`
+ * `css-hash` is removed
+ */
+export default serializer;

package/vitest.config.mjs

@@ -0,0 +1,39 @@
+import react from '@vitejs/plugin-react';
+import path from 'node:path';
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    environment: 'jsdom',
+    globals: true,
+    setupFiles: ['./vitest/setup.ts', './vitest/setup-env.ts'],
+    exclude: ['node_modules', './build/'],
+    snapshotFormat: {
+      escapeString: true,
+      printBasicPrototype: true,
+    },
+    snapshotSerializers: ['./vitest/vitestSerializer.ts'],
+    alias: {
+      // https://github.com/vitest-dev/vitest/issues/5664#issuecomment-2093986338
+      '@emotion/react': path.resolve('node_modules/@emotion/react/dist/emotion-react.cjs.mjs'),
+      '\\.(s?css)$': './vitest/identity.js',
+      '\\.(png)$': './vitest/identity.js',
+      '\\.(svg)$': './vitest/unit/empty.ts',
+      '\\.(jpg)$': './vitest/unit/empty.ts',
+      '\\.(md)$': './vitest/unit/empty-string.ts',
+    },
+  },
+  plugins: [
+    react({
+      babel: {
+        plugins: ['@emotion'],
+      },
+    }),
+  ],
+  resolve: {
+    alias: {
+      'verdaccio-ui/components': path.resolve(__dirname, './src/components'),
+      'verdaccio-ui/utils': path.resolve(__dirname, './src/utils'),
+    },
+  },
+});

package/build/__mocks__/react-markdown.js

@@ -1,18 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = _default;
-var _react = _interopRequireDefault(require("react"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-// eslint-disable
-
-// @ts-ignore
-function _default({
-  children
-}) {
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
-}
-// eslint-enable
-//# sourceMappingURL=react-markdown.js.map

package/build/__mocks__/remark-plugin.js

@@ -1,8 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = _default;
-function _default() {}
-//# sourceMappingURL=remark-plugin.js.map

package/build/src/__mocks__/react-markdown.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-export default function ({ children }: {
-    children: any;
-}): React.JSX.Element;

package/build/src/__mocks__/remark-plugin.d.ts

@@ -1 +0,0 @@
-export default function (): void;

package/src/__mocks__/react-markdown.tsx

@@ -1,8 +0,0 @@
-// eslint-disable
-import React from 'react';
-
-// @ts-ignore
-export default function ({ children }) {
-  return <>{children}</>;
-}
-// eslint-enable

package/src/__mocks__/remark-plugin.ts

@@ -1 +0,0 @@
-export default function () {}