Refactor for jest and typescript testing

admin/src/components/EditViewRightLinks/index.tsx

@@ -1,5 +1,6 @@
-import { unstable_useDocument } from '@strapi/content-manager/strapi-admin';
 import { useParams } from 'react-router-dom';
+import { unstable_useDocument } from '@strapi/content-manager/strapi-admin';
+
 import { usePreviewButton } from '../../hooks';
 import PreviewButtonGroup from '../PreviewButtonGroup';
 

admin/src/components/ListViewColumn/index.tsx

@@ -1,11 +1,11 @@
+import { useCallback, useMemo } from 'react';
+import { useIntl } from 'react-intl';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+import get from 'lodash/get';
 import { Flex, IconButton, Loader } from '@strapi/design-system';
 import { ExternalLink, Link as LinkIcon } from '@strapi/icons';
-import { UID } from '@strapi/strapi';
+import type { UID } from '@strapi/strapi';
 import { useNotification } from '@strapi/strapi/admin';
-import get from 'lodash/get';
-import { useCallback, useMemo } from 'react';
-import { CopyToClipboard } from 'react-copy-to-clipboard';
-import { useIntl } from 'react-intl';
 
 import { PREVIEW_WINDOW_NAME } from '../../constants';
 import { usePreviewButton } from '../../hooks';

admin/src/components/PreviewButton/index.tsx

@@ -1,7 +1,7 @@
-import { LinkButton } from '@strapi/design-system';
-import { ExternalLink } from '@strapi/icons';
 import { memo, useCallback } from 'react';
 import { useIntl } from 'react-intl';
+import { LinkButton } from '@strapi/design-system';
+import { ExternalLink } from '@strapi/icons';
 
 import type { PreviewButtonStateConfig } from '../../../../server/src/config';
 import { getTrad } from '../../utils';

admin/src/constants.ts

@@ -1,8 +1,9 @@
-import pluginId from './utils/pluginId';
+export const PLUGIN_ID = 'strapi-plugin-preview-button';
+export const PLUGIN_NAME = 'Preview Button';
 
-export const ACTION_RESOLVE_PREVIEW = `${pluginId}/resolve-data`;
-export const ACTION_RESOLVE_CONFIG = `${pluginId}/resolve-config`;
+export const ACTION_RESOLVE_PREVIEW = `${PLUGIN_ID}/resolve-data`;
+export const ACTION_RESOLVE_CONFIG = `${PLUGIN_ID}/resolve-config`;
 
-export const HOOK_BEFORE_BUILD_URL = `plugin/${pluginId}/before-build-url`;
+export const HOOK_BEFORE_BUILD_URL = `plugin/${PLUGIN_ID}/before-build-url`;
 
 export const PREVIEW_WINDOW_NAME = 'StrapiPreview';

admin/src/contentManagerHooks/addPreviewColumn.tsx

@@ -1,8 +1,8 @@
-import { UID } from '@strapi/strapi';
 import get from 'lodash/get';
+import { UID } from '@strapi/strapi';
 
 import { ListViewColumn } from '../components';
-import { pluginId } from '../utils';
+import { PLUGIN_ID } from '../constants';
 
 export interface AddPreviewColumnProps {
   displayedHeaders: {
@@ -34,7 +34,7 @@ export interface AddPreviewColumnProps {
 }
 
 const addPreviewColumn = ({ displayedHeaders, layout }: AddPreviewColumnProps) => {
-  const supportKeys = ['contentType', 'pluginOptions', pluginId, 'listViewColumn'];
+  const supportKeys = ['contentType', 'pluginOptions', PLUGIN_ID, 'listViewColumn'];
   const isSupported = get(layout, supportKeys, false) === true;
 
   // Do nothing if the preview button column is not supported or disabled for this UID.

admin/src/hooks/usePluginConfig.ts

@@ -3,8 +3,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { useAPIErrorHandler, useFetchClient, useNotification } from '@strapi/strapi/admin';
 
 import type { PreviewButtonPluginConfig } from '../../../server/src/config';
-import { ACTION_RESOLVE_CONFIG } from '../constants';
-import { pluginId } from '../utils';
+import { ACTION_RESOLVE_CONFIG, PLUGIN_ID } from '../constants';
 
 export interface UsePluginConfigReturn {
   data: PreviewButtonPluginConfig;
@@ -16,7 +15,7 @@ const usePluginConfig = (): UsePluginConfigReturn => {
   const dispatch = useDispatch();
   const fetchClient = useFetchClient();
   const { toggleNotification } = useNotification();
-  const { config, isLoading } = useSelector((state: any) => state[`${pluginId}_config`]);
+  const { config, isLoading } = useSelector((state: any) => state[`${PLUGIN_ID}_config`]);
 
   useEffect(() => {
     // Do nothing if we have already loaded the data.
@@ -25,7 +24,7 @@ const usePluginConfig = (): UsePluginConfigReturn => {
     }
 
     fetchClient
-      .get(`/${pluginId}/config`)
+      .get(`/${PLUGIN_ID}/config`)
       .then(({ data }: any) => {
         dispatch({
           type: ACTION_RESOLVE_CONFIG,

admin/src/index.ts

@@ -1,8 +1,8 @@
 import { EditViewRightLinks } from './components';
-import { HOOK_BEFORE_BUILD_URL } from './constants';
+import { HOOK_BEFORE_BUILD_URL, PLUGIN_ID, PLUGIN_NAME } from './constants';
 import { addPreviewColumn } from './contentManagerHooks';
 import reducers from './reducers';
-import { pluginId, pluginName, prefixPluginTranslations } from './utils';
+import { prefixPluginTranslations } from './utils';
 
 export default {
   register(app: any) {
@@ -11,14 +11,14 @@ export default {
     app.createHook(HOOK_BEFORE_BUILD_URL);
 
     app.registerPlugin({
-      id: pluginId,
-      name: pluginName,
+      id: PLUGIN_ID,
+      name: PLUGIN_NAME,
     });
   },
 
   bootstrap(app: any) {
     app.getPlugin('content-manager').injectComponent('editView', 'right-links', {
-      name: pluginId,
+      name: PLUGIN_ID,
       Component: EditViewRightLinks,
     });
 

admin/src/reducers/config.ts

@@ -8,7 +8,7 @@ const initialState: PreviewButtonPluginConfig = {
 };
 
 const configReducer = produce((previousState, action) => {
-  let state = previousState ?? initialState;
+  const state = previousState ?? initialState;
 
   switch (action.type) {
     case ACTION_RESOLVE_CONFIG:

admin/src/reducers/index.ts

@@ -1,8 +1,8 @@
-import { pluginId } from '../utils';
+import { PLUGIN_ID } from '../constants';
 import config from './config';
 
 const reducers = {
-  [`${pluginId}_config`]: config,
+  [`${PLUGIN_ID}_config`]: config,
 };
 
 export default reducers;

admin/src/utils/__tests__/getPublishStateConfig.spec.ts → admin/src/utils/__tests__/getPublishStateConfig.test.ts

@@ -1,3 +1,4 @@
+/** @jest-environment jsdom */
 import type { PreviewButtonStateConfig } from '../../../../server/src/config';
 import getPublishStateConfig, { defaultRequiredConfig } from '../getPublishStateConfig';
 
@@ -6,9 +7,8 @@ describe('getPublishStateConfig', () => {
     const data = { slug: 'foobar' };
     const input = { url: 'https://example.com/{slug}' };
     const result = getPublishStateConfig(input, data) as PreviewButtonStateConfig;
-    const requiredKeys = [...Object.keys(defaultRequiredConfig), 'url'];
 
-    expect(Object.keys(result)).toEqual(requiredKeys);
+    expect(Object.keys(result)).toEqual(Object.keys(defaultRequiredConfig));
   });
 
   it('should populate values into the `url` prop', () => {
@@ -19,11 +19,4 @@ describe('getPublishStateConfig', () => {
 
     expect(result.url).toEqual(output);
   });
-
-  it('should return null if params are null', () => {
-    // @ts-expect-error - Intentionally passing null for the test.
-    const result = getPublishStateConfig(null, null);
-
-    expect(result).toBeNull();
-  });
 });

admin/src/utils/__tests__/interpolate.spec.ts → admin/src/utils/__tests__/interpolate.test.ts

@@ -1,3 +1,4 @@
+/** @jest-environment jsdom */
 import interpolate from '../interpolate';
 
 describe('interpolate', () => {

admin/src/utils/__tests__/parseUrl.spec.ts → admin/src/utils/__tests__/parseUrl.test.ts

@@ -1,3 +1,4 @@
+/** @jest-environment jsdom */
 import parseUrl from '../parseUrl';
 
 describe('parseUrl', () => {
@@ -70,9 +71,11 @@ describe('parseUrl', () => {
   });
 
   it('should return null if params are null', () => {
-    // @ts-expect-error - Intentionally passing null for the test.
-    const result = parseUrl(null, null);
+    const config = {
+      url: 'https://www.example.com/{locale}/{slug}',
+    };
+    const result = parseUrl(config, null);
 
-    expect(result).toBeNull();
+    expect(result).toEqual('');
   });
 });

admin/src/utils/__tests__/trimSlashes.spec.ts → admin/src/utils/__tests__/trimSlashes.test.ts

@@ -1,3 +1,4 @@
+/** @jest-environment jsdom */
 import trimSlashes from '../trimSlashes';
 
 describe('trimSlashes', () => {

admin/src/utils/getTrad.ts

@@ -1,5 +1,5 @@
-import pluginId from './pluginId';
+import { PLUGIN_ID } from '../constants';
 
-const getTrad = (id: number | string): string => `${pluginId}.${id}`;
+const getTrad = (id: number | string): string => `${PLUGIN_ID}.${id}`;
 
 export default getTrad;

admin/src/utils/index.ts

@@ -2,7 +2,5 @@ export { default as getPublishStateConfig } from './getPublishStateConfig';
 export { default as getTrad } from './getTrad';
 export { default as interpolate } from './interpolate';
 export { default as parseUrl } from './parseUrl';
-export { default as pluginId } from './pluginId';
-export { default as pluginName } from './pluginName';
 export { default as prefixPluginTranslations } from './prefixPluginTranslations';
 export { default as trimSlashes } from './trimSlashes';

admin/src/utils/interpolate.ts

@@ -2,12 +2,10 @@ const interpolate = (originalStr: string, data: Record<string, any> = {}): strin
   let str = originalStr;
 
   Object.entries(data).forEach(([key, value]: [string, any]) => {
-    // eslint-disable-next-line prefer-regex-literals
     str = str.replace(new RegExp(`{${key}}`, 'g'), value);
   });
 
   // Replace any remaining values with an empty string.
-  // eslint-disable-next-line prefer-regex-literals
   str = str.replace(new RegExp(`{(.*)}`, 'g'), '').trim();
 
   return str;

admin/src/utils/parseUrl.ts

@@ -1,4 +1,4 @@
-import qs from 'qs';
+import * as qs from 'qs';
 
 import type { PreviewButtonStateConfig } from '../../../server/src/config';
 import interpolate from './interpolate';

admin/src/utils/prefixPluginTranslations.ts

@@ -1,10 +1,10 @@
-import pluginId from './pluginId';
+import { PLUGIN_ID } from '../constants';
 
 type TradOptions = Record<string, string>;
 
 const prefixPluginTranslations = (trad: TradOptions): TradOptions => {
   return Object.keys(trad).reduce((acc, current) => {
-    acc[`${pluginId}.${current}`] = trad[current];
+    acc[`${PLUGIN_ID}.${current}`] = trad[current];
 
     return acc;
   }, {} as TradOptions);

admin/tsconfig.build.json

@@ -3,8 +3,8 @@
   "include": ["./src", "./custom.d.ts"],
   "exclude": ["**/*.test.ts", "**/*.test.tsx"],
   "compilerOptions": {
-    "rootDir": "../",
     "baseUrl": ".",
+    "rootDir": "../",
     "outDir": "./dist"
   }
 }

admin/tsconfig.json

@@ -2,7 +2,7 @@
   "extends": "@strapi/typescript-utils/tsconfigs/admin",
   "include": ["./src", "./custom.d.ts"],
   "compilerOptions": {
-    "rootDir": "../",
-    "baseUrl": "."
+    "baseUrl": ".",
+    "rootDir": "../"
   }
 }

package.json

@@ -47,12 +47,26 @@
     "lint": "eslint --fix-dry-run '{admin,server}/**/*.{ts,tsx}'",
     "lint:fix": "eslint --fix '{admin,server}/**/*.{ts,tsx}'",
     "prepare": "husky",
-    "test": "jest --testPathPattern='\\/__tests__\\/.*\\.(?:test|spec)\\.js$' --ci 2>&1",
+    "test": "jest --forceExit --detectOpenHandles",
     "test:ts:back": "run -T tsc -p server/tsconfig.json",
     "verify": "strapi-plugin verify",
     "watch": "strapi-plugin watch",
     "watch:link": "strapi-plugin watch:link"
   },
+  "jest": {
+    "preset": "ts-jest",
+    "transform": {
+      "^.+\\.test\\.{ts,tsx}?$": "ts-jest"
+    },
+    "testPathIgnorePatterns": [
+      "/coverage/",
+      "/dist/",
+      "/node_modules/",
+      "/public/",
+      ".tmp",
+      ".cache"
+    ]
+  },
   "lint-staged": {
     "{admin,server}/**/*.(ts|tsx|json|css|md)": "prettier --check",
     "{admin,server}/**/*.{ts,tsx}": "eslint --fix-dry-run"
@@ -87,20 +101,21 @@
     "@strapi/sdk-plugin": "^5.2.0",
     "@strapi/strapi": "^5.4.0",
     "@strapi/typescript-utils": "^5.4.0",
-    "@swc/core": "^1.9.3",
-    "@swc/jest": "^0.2.37",
     "@types/eslint__js": "^8",
     "@types/jest": "^29",
     "@types/react-copy-to-clipboard": "^5",
     "eslint": "^9",
     "husky": "^9",
     "jest": "^29",
-    "jest-junit": "^16",
+    "jest-environment-jsdom": "^29",
     "lint-staged": "^15",
     "prettier": "^3",
     "react": "^18",
     "react-dom": "^18",
     "react-router-dom": "^6",
+    "sqlite3": "^5",
+    "supertest": "^7",
+    "ts-jest": "^29",
     "typescript": "^5.7.0",
     "typescript-eslint": "^7"
   },

server/src/config.ts

@@ -1,6 +1,6 @@
-import { type UID } from '@strapi/strapi';
-import { errors } from '@strapi/utils';
 import has from 'lodash/has';
+import type { UID } from '@strapi/strapi';
+import { errors } from '@strapi/utils';
 
 export interface PreviewButtonStateConfig {
   url: string;

server/src/constants.ts

@@ -0,0 +1 @@
+export const PLUGIN_ID = 'strapi-plugin-preview-button';