@transferwise/components 0.0.0-experimental-ae57ad1 → 0.0.0-experimental-d82182c

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-ae57ad1",
+  "version": "0.0.0-experimental-d82182c",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/common/bottomSheet/BottomSheet.test.story.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { Meta, StoryObj } from '@storybook/react-webpack5';
-import { userEvent, within } from 'storybook/test';
+import { fireEvent, within } from 'storybook/test';
 import { lorem100, lorem500 } from '../../test-utils';
 import { Typography } from '../propsValues/typography';
 import Alert from '../../alert';
@@ -29,9 +29,12 @@ type Story = StoryObj<typeof BottomSheet>;
  * This test ensures that when the SelectInput is used within a scrollable page,
  * opening the dropdown does not cause any unwanted scrolling or layout shifts.
  * Expected preview should start with green bar at the top, with yellow section
- * not in the viewport.
+ * not in the viewport. The issue is particularly prominent on iOS Safari.
  *
- * NB: This test is disabled in Chromatic as there's no obvious way to control <html/> element of a snapshot.
+ * NB: This test is disabled in Chromatic as there's no obvious way to control
+ * <html/> element of a snapshot. It's to be primarily used in manual testing
+ * on an actual device or a simulator as it cannot be reproduced with mobile
+ * emulation modes on desktop browsers.
  */
 export const SmoothScrollReset: Story = {
   args: {
@@ -73,7 +76,8 @@ export const SmoothScrollReset: Story = {
     document.documentElement.scrollTop = 400;
     await wait(500);
     const canvas = within(canvasElement);
-    await userEvent.click(canvas.getByRole('button'));
+    // cannot use userEvent.click as it crashes on iOS Safari in the simulator
+    await fireEvent.click(canvas.getByRole('button'));
   },
   render: ({ open, ...args }) => {
     const [isOpen, setIsOpen] = useState(false);

package/src/inputs/SelectInput.test.story.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
-import { fn, type Mock, userEvent, within } from 'storybook/test';
+import { fireEvent, fn, type Mock, within } from 'storybook/test';
 import { allModes } from '../../.storybook/modes';
 import { lorem5, lorem500 } from '../test-utils';
 import { Field } from '../field/Field';
@@ -30,9 +30,12 @@ const wait = async (duration = 500) =>
  * This test ensures that when the SelectInput is used within a scrollable page,
  * opening the dropdown does not cause any unwanted scrolling or layout shifts.
  * Expected preview should start with green bar at the top, with yellow section
- * not in the viewport.
+ * not in the viewport. The issue is particularly prominent on iOS Safari.
  *
- * NB: This test is disabled in Chromatic as there's no obvious way to control <html/> element of a snapshot.
+ * NB: This test is disabled in Chromatic as there's no obvious way to control
+ * <html/> element of a snapshot. It's to be primarily used in manual testing
+ * on an actual device or a simulator as it cannot be reproduced with mobile
+ * emulation modes on desktop browsers.
  */
 export const SmoothScrollReset: Story<string> = {
   args: {
@@ -69,8 +72,8 @@ export const SmoothScrollReset: Story<string> = {
     document.documentElement.scrollTop = 400;
     await wait();
     const canvas = within(canvasElement);
-    const triggerButton = canvas.getByRole('combobox');
-    await userEvent.click(triggerButton);
+    // cannot use userEvent.click as it crashes on iOS Safari in the simulator
+    await fireEvent.click(canvas.getByRole('combobox'));
   },
   globals: {
     viewport: { value: allModes.largeMobile.viewport, isRotated: false },

package/src/moneyInput/MoneyInput.test.story.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
-import { userEvent, within } from 'storybook/test';
+import { within, fireEvent } from 'storybook/test';
 import { allModes } from '../../.storybook/modes';
 import { lorem500 } from '../test-utils';
 import { Field } from '../field/Field';
@@ -54,9 +54,12 @@ const wait = async (duration = 500) =>
  * This test ensures that when the SelectInput is used within a scrollable page,
  * opening the dropdown does not cause any unwanted scrolling or layout shifts.
  * Expected preview should start with green bar at the top, with yellow section
- * not in the viewport.
+ * not in the viewport. The issue is particularly prominent on iOS Safari.
  *
- * NB: This test is disabled in Chromatic as there's no obvious way to control <html/> element of a snapshot.
+ * NB: This test is disabled in Chromatic as there's no obvious way to control
+ * <html/> element of a snapshot. It's to be primarily used in manual testing
+ * on an actual device or a simulator as it cannot be reproduced with mobile
+ * emulation modes on desktop browsers.
  */
 export const SmoothScrollReset: Story = {
   decorators: [
@@ -87,8 +90,8 @@ export const SmoothScrollReset: Story = {
     document.documentElement.scrollTop = 400;
     await wait();
     const canvas = within(canvasElement);
-    const triggerButton = canvas.getByRole('combobox');
-    await userEvent.click(triggerButton);
+    // cannot use userEvent.click as it crashes on iOS Safari in the simulator
+    await fireEvent.click(canvas.getByRole('combobox'));
   },
   globals: {
     viewport: { value: allModes.largeMobile.viewport, isRotated: false },