test: re-enable Tab-related e2e tests in Safari

ng-bootstrap · Nov 22, 2023 · 861ec71 · 861ec71
1 parent 99c058e
commit 861ec71
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 25 deletions.
diff --git a/e2e-app/src/app/datepicker/focus/datepicker-focus.e2e-spec.ts b/e2e-app/src/app/datepicker/focus/datepicker-focus.e2e-spec.ts
@@ -118,9 +118,7 @@ test.describe('Datepicker', () => {
 		).toBeFocused();
 	});
 
-	test(`should trap focus inside opened popup (Tab)`, async ({ browserName }) => {
-		test.skip(browserName === 'webkit');
-
+	test(`should trap focus inside opened popup (Tab)`, async () => {
 		await openDatepicker();
 
 		// today -> prev. month -> month -> year -> next month -> today -> ...
@@ -142,9 +140,7 @@ test.describe('Datepicker', () => {
 		await expect(getPage().locator(SELECTOR_DAY(new Date())), `Today's date should be focused`).toBeFocused();
 	});
 
-	test(`should trap focus inside opened popup with (Shift+Tab)`, async ({ browserName }) => {
-		test.skip(browserName === 'webkit');
-
+	test(`should trap focus inside opened popup with (Shift+Tab)`, async () => {
 		await openDatepicker();
 
 		// today -> next month -> year -> month -> prev. month -> today -> ...
@@ -203,8 +199,7 @@ test.describe('Datepicker', () => {
 		await expect(getPage().locator(SELECTOR_DAY(new Date())), `Today's date should stay focused`).toBeFocused();
 	});
 
-	test(`should allow focusing datepicker input`, async ({ browserName }) => {
-		test.skip(browserName === 'webkit');
+	test(`should allow focusing datepicker input`, async () => {
 		await openDatepicker();
 
 		// focus input

diff --git a/e2e-app/src/app/dropdown/focus/dropdown-focus.e2e-spec.ts b/e2e-app/src/app/dropdown/focus/dropdown-focus.e2e-spec.ts
@@ -1,6 +1,6 @@
 import { expect } from '@playwright/test';
 import { isDropdownOpened, openDropdown } from '../dropdown.po';
-import { test, getPage, setPage } from '../../../../baseTest';
+import { getPage, setPage, test } from '../../../../baseTest';
 import { sendKey } from '../../tools.po';
 
 const SELECTOR_DROPDOWN = '[ngbDropdown]';
@@ -144,15 +144,12 @@ test.describe(`Dropdown focus`, () => {
 				await expect(getPage().locator(SELECTOR_DROPDOWN_TOGGLE), `Toggling element should be focused`).toBeFocused();
 			});
 
-			test(`should focus dropdown first item with Tab when dropdown is opened (toggle was focused)`, async ({
-				browserName,
-			}) => {
-				test.skip(browserName === 'webkit');
+			test(`should focus dropdown first item with Tab when dropdown is opened (toggle was focused)`, async () => {
 				await openDropdown('Dropdown should be opened', SELECTOR_DROPDOWN, container === 'body');
 				await expect(getPage().locator(SELECTOR_DROPDOWN_TOGGLE), `Toggling element should be focused`).toBeFocused();
 
 				// Tab -> first
-				await sendKey('Tab');
+				await sendKey('Tab', false);
 				await expect(
 					getPage().locator(SELECTOR_DROPDOWN_ITEM(1)),
 					`first dropdown item should be focused`,
@@ -178,7 +175,7 @@ test.describe(`Dropdown focus`, () => {
 				).toBeFocused();
 
 				// Tab -> another element
-				await sendKey('Tab');
+				await sendKey('Tab', false);
 				expect(await isDropdownOpened(), `Dropdown should be closed`).toBeFalsy();
 			});
 		});

diff --git a/e2e-app/src/app/tools.po.ts b/e2e-app/src/app/tools.po.ts
@@ -7,9 +7,9 @@ import { expect } from '@playwright/test';
  * @param keys list of keys to send
  * https://playwright.dev/docs/api/class-keyboard?_highlight=keyboard#keyboardpresskey-options
  */
-export const sendKey = async (key: string) => {
+export const sendKey = async (key: string, patchSafari = true) => {
 	// Add Alt modifier for Tabs and Safari
-	if (getBrowserName() === 'webkit' && ['Tab', 'Shift+Tab'].includes(key)) {
+	if (getBrowserName() === 'webkit' && ['Tab', 'Shift+Tab'].includes(key) && patchSafari) {
 		key = `Alt+${key}`;
 	}
 	await getPage().keyboard.press(key);

diff --git a/e2e-app/src/app/tooltip/triggers/tooltip-triggers.e2e-spec.ts b/e2e-app/src/app/tooltip/triggers/tooltip-triggers.e2e-spec.ts
@@ -37,9 +37,7 @@ test.describe('Tooltip Triggers', () => {
 		await expectTooltipToBeClosed(`Tooltip should close after clicking the outside element`);
 	});
 
-	test(`should close tooltip on blur`, async ({ browserName }) => {
-		test.skip(browserName === 'webkit');
-
+	test(`should close tooltip on blur`, async () => {
 		await getPage().click('#before');
 
 		await sendKey('Tab');
@@ -49,9 +47,7 @@ test.describe('Tooltip Triggers', () => {
 		await expectTooltipToBeClosed(`Tooltip should close after focusing outside the element`);
 	});
 
-	test(`should not close tooltip on blur after triggering element click`, async ({ browserName }) => {
-		test.skip(browserName === 'webkit');
-
+	test(`should not close tooltip on blur after triggering element click`, async () => {
 		await getPage().click('#before');
 
 		await sendKey('Tab');

diff --git a/e2e-app/src/app/typeahead/focus/typeahead-focus.e2e-spec.ts b/e2e-app/src/app/typeahead/focus/typeahead-focus.e2e-spec.ts
@@ -74,8 +74,7 @@ test.describe('Typeahead', () => {
 			await waitForTypeaheadFocused();
 		});
 
-		test(`should select element on tab`, async ({ browserName }) => {
-			test.skip(browserName === 'webkit');
+		test(`should select element on tab`, async () => {
 			await focusElement(SELECTOR_TYPEAHEAD);
 			await sendKey('Tab');
 			await waitForTypeaheadFocused();