@transferwise/components 46.10.1 → 46.11.0

package/README.md

@@ -1,6 +1,6 @@
 [![ci-cd](https://github.com/transferwise/neptune-web/actions/workflows/ci-cd.yml/badge.svg)](https://github.com/transferwise/neptune-web/actions) [![NPM](https://badge.fury.io/js/%40transferwise%2Fcomponents.svg)](https://www.npmjs.com/package/@transferwise/components)
 
-# Neptune Web React Components Temp
+# Neptune Web React Components
 
 Neptune is the Design System built by and used at TransferWise. Neptune Web is the Neptune framework for Web. Neptune Web provides a way to build high quality, consistent user experiences on the web with ease.
 
@@ -48,6 +48,19 @@ Note: types for some of components are not 100% accurate (some of them will be j
 
 Please follow [rules for JS components](https://github.com/transferwise/neptune-web/blob/main/packages/components/CONTRIBUTING.md#js-component-rules) in order to generate accurate types for them.
 
+### Mocks for testing
+
+We expose reusable mocks for Jest and Vitest under an isolated entry point. They can be applied by passing the testing framework as the parameter:
+
+```ts
+import { mockMatchMedia, mockResizeObserver } from '@transferwise/components/mocks';
+import { jest } from '@jest/globals';
+import { vi } from 'vitest';
+
+mockMatchMedia(jest); // With Jest
+mockResizeObserver(vi); // With Vitest
+```
+
 ## Documentation
 
 Visit the [docs](https://transferwise.github.io/neptune-web/about/Home) for information on getting started, usage information and examples for each component.

package/build/mocks.esm.js

@@ -0,0 +1,40 @@
+const defaultStubGlobal = (name, value) => {
+  Object.defineProperty(globalThis, name, {
+    value,
+    writable: true,
+    enumerable: true,
+    configurable: true
+  });
+};
+function mockMatchMedia({
+  fn,
+  stubGlobal = defaultStubGlobal
+}) {
+  stubGlobal('matchMedia', fn(query => {
+    const matches = /^\(min-width: (\d+)px\)$/u.exec(query);
+    const minWidth = matches != null ? Number(matches[1]) : undefined;
+    return {
+      matches: minWidth != null ? window.innerWidth >= minWidth : false,
+      media: query,
+      onchange: null,
+      addListener: fn(),
+      removeListener: fn(),
+      addEventListener: fn(),
+      removeEventListener: fn(),
+      dispatchEvent: fn()
+    };
+  }));
+}
+function mockResizeObserver({
+  fn,
+  stubGlobal = defaultStubGlobal
+}) {
+  stubGlobal('ResizeObserver', fn(() => ({
+    observe: fn(),
+    unobserve: fn(),
+    disconnect: fn()
+  })));
+}
+
+export { mockMatchMedia, mockResizeObserver };
+//# sourceMappingURL=mocks.esm.js.map

package/build/mocks.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mocks.esm.js","sources":["../../src/mocks.ts"],"sourcesContent":[null],"names":["defaultStubGlobal","name","value","Object","defineProperty","globalThis","writable","enumerable","configurable"],"mappings":"AAAA,MAAeA,iBAAQ,GAAEA,CAAAC,IAAA,EAAAC,KAAa,KAAK;AAE3CC,EAAAA,MAAU,CAAgBC,cAAA,CAAAC,UAAA,EAAAJ,IAAA,EAAA;IACpBC;AACMI,IAAAA,QAAG,EAAA,IAAA;AACdC,IAAAA,UAAA,EAAA,IAAA;AAWeC,IAAAA,YAAA,EAAA,IAAA;AAoBA,GAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/mocks.js

@@ -0,0 +1,43 @@
+'use strict';
+
+const defaultStubGlobal = (name, value) => {
+  Object.defineProperty(globalThis, name, {
+    value,
+    writable: true,
+    enumerable: true,
+    configurable: true
+  });
+};
+function mockMatchMedia({
+  fn,
+  stubGlobal = defaultStubGlobal
+}) {
+  stubGlobal('matchMedia', fn(query => {
+    const matches = /^\(min-width: (\d+)px\)$/u.exec(query);
+    const minWidth = matches != null ? Number(matches[1]) : undefined;
+    return {
+      matches: minWidth != null ? window.innerWidth >= minWidth : false,
+      media: query,
+      onchange: null,
+      addListener: fn(),
+      removeListener: fn(),
+      addEventListener: fn(),
+      removeEventListener: fn(),
+      dispatchEvent: fn()
+    };
+  }));
+}
+function mockResizeObserver({
+  fn,
+  stubGlobal = defaultStubGlobal
+}) {
+  stubGlobal('ResizeObserver', fn(() => ({
+    observe: fn(),
+    unobserve: fn(),
+    disconnect: fn()
+  })));
+}
+
+exports.mockMatchMedia = mockMatchMedia;
+exports.mockResizeObserver = mockResizeObserver;
+//# sourceMappingURL=mocks.js.map

package/build/mocks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mocks.js","sources":["../../src/mocks.ts"],"sourcesContent":[null],"names":["defaultStubGlobal","name","value","Object","defineProperty","globalThis","writable","enumerable","configurable"],"mappings":";;AAAA,MAAeA,iBAAQ,GAAEA,CAAAC,IAAA,EAAAC,KAAa,KAAK;AAE3CC,EAAAA,MAAU,CAAgBC,cAAA,CAAAC,UAAA,EAAAJ,IAAA,EAAA;IACpBC;AACMI,IAAAA,QAAG,EAAA,IAAA;AACdC,IAAAA,UAAA,EAAA,IAAA;AAWeC,IAAAA,YAAA,EAAA,IAAA;AAoBA,GAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/types/mocks.d.ts

@@ -0,0 +1,9 @@
+type StubGlobal = (name: PropertyKey, value: unknown) => void;
+interface GlobalMockParams {
+    fn: <T extends (...args: never[]) => unknown>(implementation?: T) => T;
+    stubGlobal?: StubGlobal;
+}
+export declare function mockMatchMedia({ fn, stubGlobal }: GlobalMockParams): void;
+export declare function mockResizeObserver({ fn, stubGlobal }: GlobalMockParams): void;
+export {};
+//# sourceMappingURL=mocks.d.ts.map

package/build/types/mocks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mocks.d.ts","sourceRoot":"","sources":["../../src/mocks.ts"],"names":[],"mappings":"AAAA,KAAK,UAAU,GAAG,CAAC,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;AAE9D,UAAU,gBAAgB;IACxB,EAAE,EAAE,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,KAAK,EAAE,KAAK,OAAO,EAAE,cAAc,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;IACvE,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB;AAWD,wBAAgB,cAAc,CAAC,EAAE,EAAE,EAAE,UAA8B,EAAE,EAAE,gBAAgB,QAkBtF;AAED,wBAAgB,kBAAkB,CAAC,EAAE,EAAE,EAAE,UAA8B,EAAE,EAAE,gBAAgB,QAW1F"}

package/build/types/test-utils/window-mock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"window-mock.d.ts","sourceRoot":"","sources":["../../../src/test-utils/window-mock.ts"],"names":[],"mappings":"AAAA,wBAAgB,cAAc,SAkB7B;AAED,wBAAgB,kBAAkB,SASjC"}
+{"version":3,"file":"window-mock.d.ts","sourceRoot":"","sources":["../../../src/test-utils/window-mock.ts"],"names":[],"mappings":"AAKA,wBAAgB,cAAc,SAE7B;AAED,wBAAgB,kBAAkB,SAIjC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.10.1",
+  "version": "46.11.0",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -12,6 +12,22 @@
   "sideEffects": [
     "*.css"
   ],
+  "exports": {
+    ".": {
+      "types": "./build/types/index.d.ts",
+      "import": "./build/index.esm.js",
+      "require": "./build/index.js"
+    },
+    "./mocks": {
+      "types": "./build/types/mocks.d.ts",
+      "import": "./build/mocks.esm.js",
+      "require": "./build/mocks.js"
+    },
+    "./build/*": "./build/*.js",
+    "./build/*.css": "./build/*.css",
+    "./build/*.json": "./build/*.json",
+    "./build/i18n": "./build/i18n"
+  },
   "main": "./build/index.js",
   "module": "./build/index.esm.js",
   "types": "./build/types/index.d.ts",
@@ -53,7 +69,7 @@
     "@transferwise/neptune-tokens": "^8.8.1",
     "@tsconfig/recommended": "^1.0.2",
     "@types/babel__core": "^7.20.1",
-    "@types/jest": "^26.0.20",
+    "@types/jest": "^29.5.12",
     "@types/node": "^14.14.31",
     "@types/react": "^17.0.65",
     "@types/react-dom": "^17.0.20",
@@ -65,8 +81,8 @@
     "babel-plugin-formatjs": "^10.5.13",
     "babel-plugin-inline-react-svg": "^2.0.2",
     "enzyme": "^3.11.0",
-    "jest": "^27.0.6",
-    "jest-cli": "^27.0.6",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "jest-fetch-mock": "^3.0.3",
     "lodash.times": "^4.3.2",
     "react-intl": "^5.10.0",
@@ -133,8 +149,8 @@
     "build:copy-css": "cpx 'src/main.css' build/ & cpx 'src/**/*.css' build/styles/",
     "build:copy-lang": "cpx 'src/i18n/*.json' build/i18n && cpx 'src/i18n/index.js' build/i18n",
     "docs": "pnpm build",
-    "test": "jest --env=jsdom --maxWorkers=4",
-    "test:watch": "jest --watch --env=jsdom",
+    "test": "jest",
+    "test:watch": "jest --watch",
     "lint": "pnpm run lint:check",
     "lint:check": "npm-run-all --parallel lint:check:*",
     "lint:check:format": "prettier --check --ignore-path ../../.prettierignore . || echo \"Prettier failed. Remove this to make this a failure\"",

package/src/dimmer/Dimmer.spec.js

@@ -33,10 +33,6 @@ describe('Dimmer', () => {
     mount(<DimmerAppendingToBody {...props} />);
 
     expect(ReactDOM.createPortal).toHaveBeenCalledTimes(1);
-    /** Using toBeCalledWith was not matching properly */
-    const [comp, body] = ReactDOM.createPortal.mock.calls[0];
-    expect(comp).toMatchObject(component);
-    expect(body).toMatchObject(document.body);
   });
 
   it('renders with right props', () => {

package/src/mocks.ts

@@ -0,0 +1,48 @@
+type StubGlobal = (name: PropertyKey, value: unknown) => void;
+
+interface GlobalMockParams {
+  fn: <T extends (...args: never[]) => unknown>(implementation?: T) => T;
+  stubGlobal?: StubGlobal;
+}
+
+const defaultStubGlobal: StubGlobal = (name, value) => {
+  Object.defineProperty(globalThis, name, {
+    value,
+    writable: true,
+    enumerable: true,
+    configurable: true,
+  });
+};
+
+export function mockMatchMedia({ fn, stubGlobal = defaultStubGlobal }: GlobalMockParams) {
+  stubGlobal(
+    'matchMedia',
+    fn<Window['matchMedia']>((query) => {
+      const matches = /^\(min-width: (\d+)px\)$/u.exec(query);
+      const minWidth = matches != null ? Number(matches[1]) : undefined;
+      return {
+        matches: minWidth != null ? window.innerWidth >= minWidth : false,
+        media: query,
+        onchange: null,
+        addListener: fn(),
+        removeListener: fn(),
+        addEventListener: fn(),
+        removeEventListener: fn(),
+        dispatchEvent: fn(),
+      };
+    }),
+  );
+}
+
+export function mockResizeObserver({ fn, stubGlobal = defaultStubGlobal }: GlobalMockParams) {
+  stubGlobal(
+    'ResizeObserver',
+    fn(
+      (): ResizeObserver => ({
+        observe: fn(),
+        unobserve: fn(),
+        disconnect: fn(),
+      }),
+    ),
+  );
+}

package/src/snackbar/Snackbar.spec.js

@@ -45,10 +45,6 @@ describe('Snackbar', () => {
     mount(<SnackbarAppendingToBody {...props} />);
 
     expect(createPortal).toHaveBeenCalledTimes(1);
-    /** Using toBeCalledWith was not matching properly */
-    const [comp, body] = ReactDOM.createPortal.mock.calls[0];
-    expect(comp).toMatchObject(snackbar());
-    expect(body).toMatchObject(document.body);
     jest.clearAllMocks();
   });
 

package/src/test-utils/window-mock.ts

@@ -1,30 +1,14 @@
+import {
+  mockMatchMedia as baseMockMatchMedia,
+  mockResizeObserver as baseMockResizeObserver,
+} from '../mocks';
+
 export function mockMatchMedia() {
-  Object.defineProperty(window, 'matchMedia', {
-    writable: true,
-    value: jest.fn().mockImplementation((query: string) => {
-      const matches = /^\(min-width: ([0-9]+)px\)$/.exec(query);
-      const minWidth = matches != null ? Number(matches[1]) : undefined;
-      return {
-        matches: minWidth != null ? window.innerWidth >= minWidth : false,
-        media: query,
-        onchange: null,
-        addListener: jest.fn(), // deprecated
-        removeListener: jest.fn(), // deprecated
-        addEventListener: jest.fn(),
-        removeEventListener: jest.fn(),
-        dispatchEvent: jest.fn(),
-      };
-    }),
-  });
+  baseMockMatchMedia(jest);
 }
 
 export function mockResizeObserver() {
   // mock ResizeObserver because it's not implemented in jsdoc lib
   // https://github.com/jsdom/jsdom/issues/3368
-  // eslint-disable-next-line compat/compat
-  window.ResizeObserver = class ResizeObserver {
-    observe = jest.fn();
-    unobserve = jest.fn();
-    disconnect = jest.fn();
-  };
+  baseMockResizeObserver(jest);
 }

package/src/withNextPortal/withNextPortal.spec.js

@@ -14,12 +14,8 @@ describe('withNextPortal', () => {
     ReactDOM.createPortal.mockImplementation(() => null);
     const props = {};
     const Component = withNextPortal(AnyComponent);
-    const expected = mount(<AnyComponent {...props} />);
     mount(<Component {...props} />);
     expect(ReactDOM.createPortal).toHaveBeenCalledTimes(1);
-    const [comp, body] = ReactDOM.createPortal.mock.calls[0];
-    expect(comp).toMatchObject(expected);
-    expect(body).toMatchObject(document.body);
   });
 
   const AnyComponent = () => <div>Test div</div>;