feat(navManager): add focusFirstLeft/focusFirstRight and fix navManag…

…er e2e test on Mac
AmadeusITGroup · Jan 23, 2024 · 873ad1d · 873ad1d
1 parent 6fd64e9
commit 873ad1d
Show file tree

Hide file tree

Showing 9 changed files with 214 additions and 175 deletions.
diff --git a/angular/demo/src/app/samples/navmanager/navmanager.route.ts b/angular/demo/src/app/samples/navmanager/navmanager.route.ts
@@ -41,6 +41,8 @@ export class NavmanagerLineComponent {
 			ArrowRight: this.navManager.focusRight,
 			Home: this.navManager.focusFirst,
 			End: this.navManager.focusLast,
+			'Meta+ArrowLeft': this.navManager.focusFirstLeft,
+			'Meta+ArrowRight': this.navManager.focusFirstRight,
 		},
 	};
 }

diff --git a/angular/demo/src/app/samples/navmanager/navmanagerWithSelector.route.ts b/angular/demo/src/app/samples/navmanager/navmanagerWithSelector.route.ts
@@ -27,6 +27,8 @@ export class NavmanagerLineComponent {
 			ArrowRight: this.navManager.focusRight,
 			Home: this.navManager.focusFirst,
 			End: this.navManager.focusLast,
+			'Meta+ArrowLeft': this.navManager.focusFirstLeft,
+			'Meta+ArrowRight': this.navManager.focusFirstRight,
 		},
 		selector: (divElement) => divElement.querySelectorAll('input,span'),
 	};

diff --git a/core/src/services/navManager.spec.ts b/core/src/services/navManager.spec.ts
diff --git a/core/src/services/navManager.ts b/core/src/services/navManager.ts
@@ -200,6 +200,8 @@ export const createNavManager = () => {
 	const focusLast = ({event}: {event?: KeyboardEvent} = {}) => preventDefaultIfRelevant(focusIndex(elementsInDomOrder$().length - 1, -1), event);
 	const focusLeft = (...args: Parameters<typeof focusNext>) => (ancestorDirection() === 'rtl' ? focusNext : focusPrevious)(...args);
 	const focusRight = (...args: Parameters<typeof focusNext>) => (ancestorDirection() === 'rtl' ? focusPrevious : focusNext)(...args);
+	const focusFirstLeft = (...args: Parameters<typeof focusLast>) => (ancestorDirection() === 'rtl' ? focusLast : focusFirst)(...args);
+	const focusFirstRight = (...args: Parameters<typeof focusLast>) => (ancestorDirection() === 'rtl' ? focusFirst : focusLast)(...args);
 
 	const navManager = {
 		elementsInDomOrder$,
@@ -208,6 +210,8 @@ export const createNavManager = () => {
 		focusPrevious,
 		focusNext,
 		focusFirst,
+		focusFirstLeft,
+		focusFirstRight,
 		focusLast,
 		focusLeft,
 		focusRight,

diff --git a/e2e/navmanager/navmanager.e2e-spec.ts b/e2e/navmanager/navmanager.e2e-spec.ts
@@ -34,7 +34,7 @@ for (const sample of ['navmanager', 'navmanagerwithselector']) {
 		];
 
 		for (const {name, backwardKey, forwardKey, getLocator, keyPresses} of useCases) {
-			test(name, async ({page}) => {
+			test(name, async ({page, browserName}) => {
 				const navManagerPO = new NavManagerPO(page);
 				const navManagerLine = new NavManagerLinePO(getLocator(navManagerPO));
 				await navManagerLine.waitLoaded();
@@ -99,21 +99,29 @@ for (const sample of ['navmanager', 'navmanagerwithselector']) {
 					await expect.poll(() => getCaretPosition(page)).toEqual([0, 0]);
 				});
 
-				await test.step('fast forward', async () => {
-					await page.keyboard.press('End');
+				if (process.platform === 'darwin' && browserName === 'firefox' && backwardKey === 'ArrowRight') {
+					// Firefox has a bug with RTL on Mac: Meta+ArrowLeft and Meta+ArrowRight are swapped
+					// skip this test in this case
+					return;
+				}
+				const useMeta = process.platform === 'darwin' && browserName != 'chromium';
+				const fastForwardKey = useMeta ? `Meta+${forwardKey}` : 'End';
+				await test.step(`fast forward (${fastForwardKey})`, async () => {
+					await page.keyboard.press(fastForwardKey);
 					await expect.poll(() => getCaretPosition(page)).toEqual([value.length, value.length]);
 					await expect(currentItem).toBeFocused();
-					await page.keyboard.press('End');
+					await page.keyboard.press(fastForwardKey);
 					currentItem = items[4];
 					await expect(currentItem).toBeFocused();
 					await expect.poll(() => getCaretPosition(page)).toEqual([value.length, value.length]);
 				});
 
-				await test.step('fast backward', async () => {
-					await page.keyboard.press('Home');
+				const fastBackwardKey = useMeta ? `Meta+${backwardKey}` : 'Home';
+				await test.step(`fast backward (${fastBackwardKey})`, async () => {
+					await page.keyboard.press(fastBackwardKey);
 					await expect.poll(() => getCaretPosition(page)).toEqual([0, 0]);
 					await expect(currentItem).toBeFocused();
-					await page.keyboard.press('Home');
+					await page.keyboard.press(fastBackwardKey);
 					currentItem = items[0];
 					await expect(currentItem).toBeFocused();
 					await expect.poll(() => getCaretPosition(page)).toEqual([0, 0]);

diff --git a/react/demo/src/app/samples/navmanager/Navmanager.route.tsx b/react/demo/src/app/samples/navmanager/Navmanager.route.tsx
@@ -12,6 +12,8 @@ const NavmanagerSampleLine = ({text}: {text: string}) => {
 				ArrowRight: navManager.focusRight,
 				Home: navManager.focusFirst,
 				End: navManager.focusLast,
+				'Meta+ArrowLeft': navManager.focusFirstLeft,
+				'Meta+ArrowRight': navManager.focusFirstRight,
 			},
 		}),
 		[navManager],

diff --git a/react/demo/src/app/samples/navmanager/NavmanagerWithSelector.route.tsx b/react/demo/src/app/samples/navmanager/NavmanagerWithSelector.route.tsx
@@ -12,6 +12,8 @@ const NavmanagerSampleLine = ({text}: {text: string}) => {
 				ArrowRight: navManager.focusRight,
 				Home: navManager.focusFirst,
 				End: navManager.focusLast,
+				'Meta+ArrowLeft': navManager.focusFirstLeft,
+				'Meta+ArrowRight': navManager.focusFirstRight,
 			},
 			selector: (divElement) => divElement.querySelectorAll('input,span'),
 		}),

diff --git a/svelte/demo/src/app/samples/navManager/NavManagerLine.svelte b/svelte/demo/src/app/samples/navManager/NavManagerLine.svelte
@@ -2,14 +2,16 @@
 	import type {NavManagerItemConfig} from '@agnos-ui/svelte/services/navManager';
 	import {createNavManager} from '@agnos-ui/svelte/services/navManager';
 
-	const {directive, focusLeft, focusRight, focusFirst, focusLast} = createNavManager();
+	const {directive, focusLeft, focusRight, focusFirst, focusLast, focusFirstLeft, focusFirstRight} = createNavManager();
 
 	const navManagerConfig: NavManagerItemConfig = {
 		keys: {
 			ArrowLeft: focusLeft,
 			ArrowRight: focusRight,
 			Home: focusFirst,
 			End: focusLast,
+			'Meta+ArrowLeft': focusFirstLeft,
+			'Meta+ArrowRight': focusFirstRight,
 		},
 	};
 

diff --git a/svelte/demo/src/app/samples/navManager/NavManagerWithSelectorLine.svelte b/svelte/demo/src/app/samples/navManager/NavManagerWithSelectorLine.svelte
@@ -2,14 +2,16 @@
 	import type {NavManagerItemConfig} from '@agnos-ui/svelte/services/navManager';
 	import {createNavManager} from '@agnos-ui/svelte/services/navManager';
 
-	const {directive, focusLeft, focusRight, focusFirst, focusLast} = createNavManager();
+	const {directive, focusLeft, focusRight, focusFirst, focusLast, focusFirstLeft, focusFirstRight} = createNavManager();
 
 	const navManagerConfig: NavManagerItemConfig = {
 		keys: {
 			ArrowLeft: focusLeft,
 			ArrowRight: focusRight,
 			Home: focusFirst,
 			End: focusLast,
+			'Meta+ArrowLeft': focusFirstLeft,
+			'Meta+ArrowRight': focusFirstRight,
 		},
 		selector: (divElement) => divElement.querySelectorAll('input,span'),
 	};