From 389595de3b529ea11f91e669ed84231f91c7cf4c Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Fri, 10 Mar 2023 15:00:05 -0500
Subject: [PATCH] test(ripple-effect): enable ripple effect test (#26928)

---
 .../test/basic/ripple-effect.e2e.ts           | 23 +++++++++----------
 1 file changed, 11 insertions(+), 12 deletions(-)

diff --git a/core/src/components/ripple-effect/test/basic/ripple-effect.e2e.ts b/core/src/components/ripple-effect/test/basic/ripple-effect.e2e.ts
index 6806369909..033bff3ce7 100644
--- a/core/src/components/ripple-effect/test/basic/ripple-effect.e2e.ts
+++ b/core/src/components/ripple-effect/test/basic/ripple-effect.e2e.ts
@@ -2,8 +2,12 @@ import { expect } from '@playwright/test';
 import type { E2EPage } from '@utils/test/playwright';
 import { test } from '@utils/test/playwright';
 
-// TODO FW-3081
-test.describe.skip('ripple-effect: basic', () => {
+test.describe('ripple-effect: basic', () => {
+  test.beforeEach(async ({ skip }) => {
+    skip.rtl();
+    skip.mode('ios');
+  });
+
   test('should add .ion-activated when pressed', async ({ page }) => {
     await verifyRippleEffect(page, '#small-btn');
     await verifyRippleEffect(page, '#large-btn');
@@ -14,7 +18,7 @@ test.describe.skip('ripple-effect: basic', () => {
 
   test.describe('ripple effect with nested ion-button', () => {
     test('should add .ion-activated when the block is pressed', async ({ page }) => {
-      await page.goto(`/src/components/ripple-effect/test/basic?ionic:_testing=false&ionic:mode=md`);
+      await page.goto('/src/components/ripple-effect/test/basic?ionic:_testing=false');
 
       const el = page.locator('#ripple-with-button');
 
@@ -30,9 +34,7 @@ test.describe.skip('ripple-effect: basic', () => {
       // Waits for the ripple effect to be added
       await page.waitForSelector('.ion-activated');
 
-      const elHandle = await el.elementHandle();
-      const classes = await elHandle?.evaluate((el) => el.classList.value);
-      expect(classes).toMatch(/ion-activated/);
+      await expect(el).toHaveClass(/ion-activated/);
     });
 
     test('should add .ion-activated when the button is pressed', async ({ page }) => {
@@ -42,7 +44,7 @@ test.describe.skip('ripple-effect: basic', () => {
 });
 
 const verifyRippleEffect = async (page: E2EPage, selector: string) => {
-  await page.goto(`/src/components/ripple-effect/test/basic?ionic:_testing=false&ionic:mode=md`);
+  await page.goto('/src/components/ripple-effect/test/basic?ionic:_testing=false');
 
   const el = page.locator(selector);
 
@@ -55,10 +57,7 @@ const verifyRippleEffect = async (page: E2EPage, selector: string) => {
     await page.mouse.down();
   }
 
-  // Waits for the ripple effect to be added
-  await page.waitForSelector(`${selector}.ion-activated`);
+  await page.waitForSelector('.ion-activated');
 
-  const elHandle = await el.elementHandle();
-  const classes = await elHandle?.evaluate((el) => el.classList.value);
-  expect(classes).toMatch(/ion-activated/);
+  await expect(el).toHaveClass(/ion-activated/);
 };