From 04da650728d87b6333903affe91ef2b6cd4d61c4 Mon Sep 17 00:00:00 2001
From: Rohan <45748283+r100-stack@users.noreply.github.com>
Date: Tue, 1 Oct 2024 17:36:30 -0400
Subject: [PATCH 01/10] =?UTF-8?q?=F0=9F=91=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.changeset/beige-lions-swim.md | 5 +++++
.changeset/orange-cats-mix.md | 5 +++++
.../src/core/TransferList/TransferList.tsx | 18 +++++++++++++++---
3 files changed, 25 insertions(+), 3 deletions(-)
create mode 100644 .changeset/beige-lions-swim.md
create mode 100644 .changeset/orange-cats-mix.md
diff --git a/.changeset/beige-lions-swim.md b/.changeset/beige-lions-swim.md
new file mode 100644
index 00000000000..50fd9da4068
--- /dev/null
+++ b/.changeset/beige-lions-swim.md
@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-react': patch
+---
+
+`TransferList.Toolbar` implements the [toolbar pattern](https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/), including the arrow-key navigation functionality.
diff --git a/.changeset/orange-cats-mix.md b/.changeset/orange-cats-mix.md
new file mode 100644
index 00000000000..fc91bbdc95a
--- /dev/null
+++ b/.changeset/orange-cats-mix.md
@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-react': minor
+---
+
+`IconButton`s inside `TransferList.Toolbar` will now show tooltips on the right side by default to avoid obscuring adjacent buttons in the group. This placement can be changed using the `labelProps.placement` prop on the `IconButton`.
diff --git a/packages/itwinui-react/src/core/TransferList/TransferList.tsx b/packages/itwinui-react/src/core/TransferList/TransferList.tsx
index 00b7eb080dd..d6827fb1c9d 100644
--- a/packages/itwinui-react/src/core/TransferList/TransferList.tsx
+++ b/packages/itwinui-react/src/core/TransferList/TransferList.tsx
@@ -16,6 +16,7 @@ import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
import { List } from '../List/List.js';
import { ListItem } from '../List/ListItem.js';
import { Label } from '../Label/Label.js';
+import { ButtonGroup } from '../ButtonGroup/ButtonGroup.js';
// ----------------------------------------------------------------------------
// TransferListComponent
@@ -226,9 +227,20 @@ if (process.env.NODE_ENV === 'development') {
// ----------------------------------------------------------------------------
// TransferList.Toolbar component
-const TransferListToolbar = polymorphic.div('iui-transfer-list-toolbar', {
- role: 'toolbar',
-});
+const TransferListToolbar = React.forwardRef((props, ref) => {
+ const { className, children, ...rest } = props;
+ return (
+
+ {children}
+
+ );
+}) as PolymorphicForwardRefComponent<'div', object>;
if (process.env.NODE_ENV === 'development') {
TransferListToolbar.displayName = 'TransferList.Toolbar';
}
From 4764b5685ff71edd947bf15e85c6090fe48b8358 Mon Sep 17 00:00:00 2001
From: Rohan <45748283+r100-stack@users.noreply.github.com>
Date: Tue, 1 Oct 2024 18:10:31 -0400
Subject: [PATCH 02/10] =?UTF-8?q?e2e=20=F0=9F=A7=AA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
testing/e2e/app/routes/TransferList/route.tsx | 142 ++++++++++++++++++
testing/e2e/app/routes/TransferList/spec.ts | 23 +++
2 files changed, 165 insertions(+)
create mode 100644 testing/e2e/app/routes/TransferList/route.tsx
create mode 100644 testing/e2e/app/routes/TransferList/spec.ts
diff --git a/testing/e2e/app/routes/TransferList/route.tsx b/testing/e2e/app/routes/TransferList/route.tsx
new file mode 100644
index 00000000000..a3233c66591
--- /dev/null
+++ b/testing/e2e/app/routes/TransferList/route.tsx
@@ -0,0 +1,142 @@
+import { IconButton, TransferList } from '@itwin/itwinui-react';
+import {
+ SvgChevronLeft,
+ SvgChevronLeftDouble,
+ SvgChevronRight,
+ SvgChevronRightDouble,
+} from '@itwin/itwinui-icons-react';
+import * as React from 'react';
+
+export default function ButtonGroupTest() {
+ type TransferItemDataType = {
+ name: string;
+ active: boolean;
+ };
+
+ const [optionData, setOptionData] = React.useState([
+ { name: 'Option 1', active: false },
+ { name: 'Option 2', active: false },
+ { name: 'Option 3', active: false },
+ { name: 'Option 4', active: false },
+ { name: 'Option 5', active: false },
+ { name: 'Option 6', active: false },
+ ]);
+
+ const [appliedData, setAppliedData] = React.useState([
+ { name: 'Option 7', active: false },
+ ]);
+
+ const transfer = (
+ fromData: Array,
+ setFromData: React.Dispatch>,
+ setToData: React.Dispatch>,
+ sendAll?: boolean,
+ ) => {
+ setToData((oldToData) => {
+ const newToData = [...oldToData];
+ const newFromData: Array = [];
+ fromData.forEach((item) => {
+ if (sendAll || item.active === true) {
+ const newItem = item;
+ newItem.active = false;
+ newToData.push(newItem);
+ } else {
+ newFromData.push(item);
+ }
+ });
+ setFromData(newFromData);
+ return newToData;
+ });
+ };
+
+ return (
+
+
+
+ {optionData?.map((item, index) => {
+ return (
+ {
+ setOptionData((oldData) => {
+ const newData = [...oldData];
+ const newObject = { ...newData[index] };
+ newObject.active = isActive;
+ newData[index] = newObject;
+ return newData;
+ });
+ }}
+ >
+ {item.name}
+
+ );
+ })}
+
+
+
+ {
+ transfer(optionData, setOptionData, setAppliedData, true);
+ }}
+ >
+
+
+
+ transfer(optionData, setOptionData, setAppliedData, false)
+ }
+ >
+
+
+
+ transfer(appliedData, setAppliedData, setOptionData, false)
+ }
+ >
+
+
+
+ transfer(appliedData, setAppliedData, setOptionData, true)
+ }
+ >
+
+
+
+
+
+ {appliedData.map((item, index) => {
+ return (
+ {
+ setAppliedData((oldData) => {
+ const newData = [...oldData];
+ const newObject = { ...newData[index] };
+ newObject.active = isActive;
+ newData[index] = newObject;
+ return newData;
+ });
+ }}
+ >
+ {item.name}
+
+ );
+ })}
+
+
+
+ );
+}
diff --git a/testing/e2e/app/routes/TransferList/spec.ts b/testing/e2e/app/routes/TransferList/spec.ts
new file mode 100644
index 00000000000..1548cd41c73
--- /dev/null
+++ b/testing/e2e/app/routes/TransferList/spec.ts
@@ -0,0 +1,23 @@
+import { test, expect } from '@playwright/test';
+
+test('should support toolbar keyboard navigation in TransferList.Toolbar', async ({
+ page,
+}) => {
+ await page.goto('/TransferList');
+ const buttons = page.locator('button');
+
+ await page.keyboard.press('Tab');
+
+ await page.keyboard.press('Tab');
+ await expect(buttons.nth(0)).toBeFocused();
+ await page.keyboard.press('ArrowDown');
+ await expect(buttons.nth(1)).toBeFocused();
+ await page.keyboard.press('ArrowDown');
+ await expect(buttons.nth(2)).toBeFocused();
+ await page.keyboard.press('ArrowDown');
+ await expect(buttons.nth(3)).toBeFocused();
+ await page.keyboard.press('ArrowDown');
+ await expect(buttons.nth(0)).toBeFocused();
+ await page.keyboard.press('ArrowUp');
+ await expect(buttons.nth(3)).toBeFocused();
+});
From 11a143fb53c93d4b375a6fc44baa3791761224ab Mon Sep 17 00:00:00 2001
From: Rohan <45748283+r100-stack@users.noreply.github.com>
Date: Tue, 1 Oct 2024 18:33:47 -0400
Subject: [PATCH 03/10] =?UTF-8?q?Images=20=F0=9F=A7=AA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../baseline/TransferList.test.ts-Basic.png | Bin 13552 -> 13740 bytes
.../TransferList.test.ts-With Label.png | Bin 15654 -> 15822 bytes
2 files changed, 0 insertions(+), 0 deletions(-)
mode change 100644 => 100755 apps/react-workshop/cypress-visual-screenshots/baseline/TransferList.test.ts-Basic.png
diff --git a/apps/react-workshop/cypress-visual-screenshots/baseline/TransferList.test.ts-Basic.png b/apps/react-workshop/cypress-visual-screenshots/baseline/TransferList.test.ts-Basic.png
old mode 100644
new mode 100755
index 85c00a332a1896d016827a02a3fe739ac7c71bd4..5c16c4b70f0db3169601485b152c29449a38df14
GIT binary patch
literal 13740
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
N?za3s|L;eB`hSkxf}sEa
diff --git a/apps/react-workshop/cypress-visual-screenshots/baseline/TransferList.test.ts-With Label.png b/apps/react-workshop/cypress-visual-screenshots/baseline/TransferList.test.ts-With Label.png
index 71bf6c53c82a241d3be20921f5f20b395ca4da43..5954f862e2b2f338ef9d7f3ecfb273ddc01df266 100755
GIT binary patch
literal 15822
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
literal 15654
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
Date: Tue, 1 Oct 2024 19:19:35 -0400
Subject: [PATCH 04/10] Bump changeset to minor
---
.changeset/beige-lions-swim.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/.changeset/beige-lions-swim.md b/.changeset/beige-lions-swim.md
index 50fd9da4068..4e2ae41b098 100644
--- a/.changeset/beige-lions-swim.md
+++ b/.changeset/beige-lions-swim.md
@@ -1,5 +1,5 @@
---
-'@itwin/itwinui-react': patch
+'@itwin/itwinui-react': minor
---
`TransferList.Toolbar` implements the [toolbar pattern](https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/), including the arrow-key navigation functionality.
From 08dbfb71faaf91a2c5b30f448a87004beea1d70d Mon Sep 17 00:00:00 2001
From: Rohan <45748283+r100-stack@users.noreply.github.com>
Date: Wed, 2 Oct 2024 11:08:54 -0400
Subject: [PATCH 05/10] patch changesets
---
.changeset/beige-lions-swim.md | 4 ++--
.changeset/orange-cats-mix.md | 2 +-
2 files changed, 3 insertions(+), 3 deletions(-)
diff --git a/.changeset/beige-lions-swim.md b/.changeset/beige-lions-swim.md
index 4e2ae41b098..bb6aba438c6 100644
--- a/.changeset/beige-lions-swim.md
+++ b/.changeset/beige-lions-swim.md
@@ -1,5 +1,5 @@
---
-'@itwin/itwinui-react': minor
+'@itwin/itwinui-react': patch
---
-`TransferList.Toolbar` implements the [toolbar pattern](https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/), including the arrow-key navigation functionality.
+`TransferList.Toolbar` implements the previously missing [toolbar pattern](https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/), including the arrow-key navigation functionality.
diff --git a/.changeset/orange-cats-mix.md b/.changeset/orange-cats-mix.md
index fc91bbdc95a..607aa047fdf 100644
--- a/.changeset/orange-cats-mix.md
+++ b/.changeset/orange-cats-mix.md
@@ -1,5 +1,5 @@
---
-'@itwin/itwinui-react': minor
+'@itwin/itwinui-react': patch
---
`IconButton`s inside `TransferList.Toolbar` will now show tooltips on the right side by default to avoid obscuring adjacent buttons in the group. This placement can be changed using the `labelProps.placement` prop on the `IconButton`.
From 392150924a6ac678f5328e28726229222c06a352 Mon Sep 17 00:00:00 2001
From: Rohan <45748283+r100-stack@users.noreply.github.com>
Date: Wed, 2 Oct 2024 11:17:32 -0400
Subject: [PATCH 06/10] e2e test focus checks. new e2e test.
---
testing/e2e/app/routes/TransferList/spec.ts | 19 +++++++++++++++++++
1 file changed, 19 insertions(+)
diff --git a/testing/e2e/app/routes/TransferList/spec.ts b/testing/e2e/app/routes/TransferList/spec.ts
index 1548cd41c73..d0b2a85c5cc 100644
--- a/testing/e2e/app/routes/TransferList/spec.ts
+++ b/testing/e2e/app/routes/TransferList/spec.ts
@@ -5,8 +5,10 @@ test('should support toolbar keyboard navigation in TransferList.Toolbar', async
}) => {
await page.goto('/TransferList');
const buttons = page.locator('button');
+ const listboxes = page.getByRole('listbox');
await page.keyboard.press('Tab');
+ await expect(listboxes.first()).toBeFocused();
await page.keyboard.press('Tab');
await expect(buttons.nth(0)).toBeFocused();
@@ -21,3 +23,20 @@ test('should support toolbar keyboard navigation in TransferList.Toolbar', async
await page.keyboard.press('ArrowUp');
await expect(buttons.nth(3)).toBeFocused();
});
+
+test('should have only one tab stop in TransferList.Toolbar (toolbar pattern)', async ({
+ page,
+}) => {
+ await page.goto('/TransferList');
+ const buttons = page.locator('button');
+ const listboxes = page.getByRole('listbox');
+
+ await page.keyboard.press('Tab');
+ await expect(listboxes.first()).toBeFocused();
+
+ await page.keyboard.press('Tab');
+ await expect(buttons.first()).toBeFocused();
+
+ await page.keyboard.press('Tab');
+ await expect(listboxes.last()).toBeFocused();
+});
From 3ee1ba6d10c030888e6633e0590c2eb5f09d7479 Mon Sep 17 00:00:00 2001
From: Rohan <45748283+r100-stack@users.noreply.github.com>
Date: Wed, 2 Oct 2024 11:52:21 -0400
Subject: [PATCH 07/10] Better tests
---
.../core/TransferList/TransferList.test.tsx | 18 +++-
testing/e2e/app/routes/TransferList/spec.ts | 90 +++++++++++--------
2 files changed, 71 insertions(+), 37 deletions(-)
diff --git a/packages/itwinui-react/src/core/TransferList/TransferList.test.tsx b/packages/itwinui-react/src/core/TransferList/TransferList.test.tsx
index 3eebb502c10..8946a867469 100644
--- a/packages/itwinui-react/src/core/TransferList/TransferList.test.tsx
+++ b/packages/itwinui-react/src/core/TransferList/TransferList.test.tsx
@@ -40,7 +40,21 @@ it('should render in its most basic state', () => {
});
});
-it('should handle keyboard navigation', () => {
+it('should render Toolbar in its most basic state', () => {
+ const { container } = render(
+
+
+
+
+ ,
+ );
+
+ const toolbar = container.querySelector('.iui-transfer-list-toolbar');
+ expect(toolbar).toBeTruthy();
+ expect(toolbar).toHaveAttribute('role', 'toolbar');
+});
+
+it('should handle keyboard navigation in Listbox', () => {
const { container } = render(
@@ -105,7 +119,7 @@ it('should handle keyboard navigation', () => {
});
});
-it('should handle key presses', async () => {
+it('should handle key presses in Listbox', async () => {
const mockedOnClick = vi.fn();
render(
diff --git a/testing/e2e/app/routes/TransferList/spec.ts b/testing/e2e/app/routes/TransferList/spec.ts
index d0b2a85c5cc..2c26ffd0581 100644
--- a/testing/e2e/app/routes/TransferList/spec.ts
+++ b/testing/e2e/app/routes/TransferList/spec.ts
@@ -1,42 +1,62 @@
import { test, expect } from '@playwright/test';
-test('should support toolbar keyboard navigation in TransferList.Toolbar', async ({
- page,
-}) => {
- await page.goto('/TransferList');
- const buttons = page.locator('button');
- const listboxes = page.getByRole('listbox');
-
- await page.keyboard.press('Tab');
- await expect(listboxes.first()).toBeFocused();
-
- await page.keyboard.press('Tab');
- await expect(buttons.nth(0)).toBeFocused();
- await page.keyboard.press('ArrowDown');
- await expect(buttons.nth(1)).toBeFocused();
- await page.keyboard.press('ArrowDown');
- await expect(buttons.nth(2)).toBeFocused();
- await page.keyboard.press('ArrowDown');
- await expect(buttons.nth(3)).toBeFocused();
- await page.keyboard.press('ArrowDown');
- await expect(buttons.nth(0)).toBeFocused();
- await page.keyboard.press('ArrowUp');
- await expect(buttons.nth(3)).toBeFocused();
-});
+test.describe('toolbar pattern in TransferList.Toolbar', () => {
+ test("should have role='toolbar'", async ({ page }) => {
+ await page.goto('/TransferList');
+ const toolbar = page.getByRole('toolbar');
+ await expect(toolbar).toHaveCount(1);
+ });
+
+ test('should support toolbar arrow-key keyboard navigation', async ({
+ page,
+ }) => {
+ await page.goto('/TransferList');
+ const listboxes = page.getByRole('listbox');
+ const toolbar = page.getByRole('toolbar');
+ const buttons = toolbar.first().locator('button');
+
+ await page.keyboard.press('Tab');
+ await expect(listboxes.first()).toBeFocused();
+
+ await page.keyboard.press('Tab');
+ await expect(buttons.nth(0)).toBeFocused();
+ await page.keyboard.press('ArrowDown');
+ await expect(buttons.nth(1)).toBeFocused();
+ await page.keyboard.press('ArrowDown');
+ await expect(buttons.nth(2)).toBeFocused();
+ await page.keyboard.press('ArrowDown');
+ await expect(buttons.nth(3)).toBeFocused();
+ await page.keyboard.press('ArrowDown');
+ await expect(buttons.nth(0)).toBeFocused();
+ await page.keyboard.press('ArrowUp');
+ await expect(buttons.nth(3)).toBeFocused();
+ });
+
+ test('should have only one tab stop and support Tab/Shift+Tab key navigation', async ({
+ page,
+ }) => {
+ await page.goto('/TransferList');
+ const listboxes = page.getByRole('listbox');
+ const toolbar = page.getByRole('toolbar');
+ const buttons = toolbar.first().locator('button');
+
+ await page.keyboard.press('Tab');
+ await expect(listboxes.first()).toBeFocused();
-test('should have only one tab stop in TransferList.Toolbar (toolbar pattern)', async ({
- page,
-}) => {
- await page.goto('/TransferList');
- const buttons = page.locator('button');
- const listboxes = page.getByRole('listbox');
+ await page.keyboard.press('Tab');
+ await expect(buttons.first()).toBeFocused();
- await page.keyboard.press('Tab');
- await expect(listboxes.first()).toBeFocused();
+ await page.keyboard.press('Tab');
+ await expect(listboxes.last()).toBeFocused();
- await page.keyboard.press('Tab');
- await expect(buttons.first()).toBeFocused();
+ await page.keyboard.down('Shift');
+ await page.keyboard.press('Tab');
+ await page.keyboard.up('Shift');
+ await expect(buttons.first()).toBeFocused();
- await page.keyboard.press('Tab');
- await expect(listboxes.last()).toBeFocused();
+ await page.keyboard.down('Shift');
+ await page.keyboard.press('Tab');
+ await page.keyboard.up('Shift');
+ await expect(listboxes.first()).toBeFocused();
+ });
});
From 5b349c1082269d674279b8287cd2679e55e53c45 Mon Sep 17 00:00:00 2001
From: Rohan <45748283+r100-stack@users.noreply.github.com>
Date: Wed, 2 Oct 2024 11:54:02 -0400
Subject: [PATCH 08/10] Redundant
---
testing/e2e/app/routes/TransferList/spec.ts | 6 ------
1 file changed, 6 deletions(-)
diff --git a/testing/e2e/app/routes/TransferList/spec.ts b/testing/e2e/app/routes/TransferList/spec.ts
index 2c26ffd0581..374faea352e 100644
--- a/testing/e2e/app/routes/TransferList/spec.ts
+++ b/testing/e2e/app/routes/TransferList/spec.ts
@@ -1,12 +1,6 @@
import { test, expect } from '@playwright/test';
test.describe('toolbar pattern in TransferList.Toolbar', () => {
- test("should have role='toolbar'", async ({ page }) => {
- await page.goto('/TransferList');
- const toolbar = page.getByRole('toolbar');
- await expect(toolbar).toHaveCount(1);
- });
-
test('should support toolbar arrow-key keyboard navigation', async ({
page,
}) => {
From 8679651f4ce8fc92445e39dc0024760908ed7695 Mon Sep 17 00:00:00 2001
From: Rohan <45748283+r100-stack@users.noreply.github.com>
Date: Wed, 2 Oct 2024 15:12:35 -0400
Subject: [PATCH 09/10] Reuse example
---
testing/e2e/app/routes/TransferList/route.tsx | 143 +-----------------
1 file changed, 2 insertions(+), 141 deletions(-)
diff --git a/testing/e2e/app/routes/TransferList/route.tsx b/testing/e2e/app/routes/TransferList/route.tsx
index a3233c66591..18f5eee056d 100644
--- a/testing/e2e/app/routes/TransferList/route.tsx
+++ b/testing/e2e/app/routes/TransferList/route.tsx
@@ -1,142 +1,3 @@
-import { IconButton, TransferList } from '@itwin/itwinui-react';
-import {
- SvgChevronLeft,
- SvgChevronLeftDouble,
- SvgChevronRight,
- SvgChevronRightDouble,
-} from '@itwin/itwinui-icons-react';
-import * as React from 'react';
+import { TransferListMainExample } from '../../../../../examples';
-export default function ButtonGroupTest() {
- type TransferItemDataType = {
- name: string;
- active: boolean;
- };
-
- const [optionData, setOptionData] = React.useState([
- { name: 'Option 1', active: false },
- { name: 'Option 2', active: false },
- { name: 'Option 3', active: false },
- { name: 'Option 4', active: false },
- { name: 'Option 5', active: false },
- { name: 'Option 6', active: false },
- ]);
-
- const [appliedData, setAppliedData] = React.useState([
- { name: 'Option 7', active: false },
- ]);
-
- const transfer = (
- fromData: Array,
- setFromData: React.Dispatch>,
- setToData: React.Dispatch>,
- sendAll?: boolean,
- ) => {
- setToData((oldToData) => {
- const newToData = [...oldToData];
- const newFromData: Array = [];
- fromData.forEach((item) => {
- if (sendAll || item.active === true) {
- const newItem = item;
- newItem.active = false;
- newToData.push(newItem);
- } else {
- newFromData.push(item);
- }
- });
- setFromData(newFromData);
- return newToData;
- });
- };
-
- return (
-
-
-
- {optionData?.map((item, index) => {
- return (
- {
- setOptionData((oldData) => {
- const newData = [...oldData];
- const newObject = { ...newData[index] };
- newObject.active = isActive;
- newData[index] = newObject;
- return newData;
- });
- }}
- >
- {item.name}
-
- );
- })}
-
-
-
- {
- transfer(optionData, setOptionData, setAppliedData, true);
- }}
- >
-
-
-
- transfer(optionData, setOptionData, setAppliedData, false)
- }
- >
-
-
-
- transfer(appliedData, setAppliedData, setOptionData, false)
- }
- >
-
-
-
- transfer(appliedData, setAppliedData, setOptionData, true)
- }
- >
-
-
-
-
-
- {appliedData.map((item, index) => {
- return (
- {
- setAppliedData((oldData) => {
- const newData = [...oldData];
- const newObject = { ...newData[index] };
- newObject.active = isActive;
- newData[index] = newObject;
- return newData;
- });
- }}
- >
- {item.name}
-
- );
- })}
-
-
-
- );
-}
+export default TransferListMainExample;
From b7136e51603b629b7378af4374fc9565d208a157 Mon Sep 17 00:00:00 2001
From: Rohan <45748283+r100-stack@users.noreply.github.com>
Date: Thu, 3 Oct 2024 12:42:05 -0400
Subject: [PATCH 10/10] e2e test format improvement
---
testing/e2e/app/routes/TransferList/route.tsx | 6 ++++--
1 file changed, 4 insertions(+), 2 deletions(-)
diff --git a/testing/e2e/app/routes/TransferList/route.tsx b/testing/e2e/app/routes/TransferList/route.tsx
index 18f5eee056d..86185e90fda 100644
--- a/testing/e2e/app/routes/TransferList/route.tsx
+++ b/testing/e2e/app/routes/TransferList/route.tsx
@@ -1,3 +1,5 @@
-import { TransferListMainExample } from '../../../../../examples';
+import { TransferListMainExample } from 'examples';
-export default TransferListMainExample;
+export default function Page() {
+ return ;
+}