chore(testing): Update util waitForStipeElements to accept a state (#6204)

Author: panteliselef

.changeset/eleven-days-sniff.md

@@ -0,0 +1,5 @@
+---
+'@clerk/testing': patch
+---
+
+Allow for `waitForStripeElements` helper to accept a `state` of `visible` or `hidden`.

integration/tests/pricing-table.test.ts

@@ -309,7 +309,9 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withBilling] })('pricing tabl
       });
       await u.po.checkout.clickPayOrSubscribe();
       await expect(u.po.page.locator('.cl-checkout-root').getByText('The card was declined.').first()).toBeVisible();
-      await u.po.checkout.waitForStipeElements();
+      // It should unmount and remount the payment element
+      await u.po.checkout.waitForStripeElements({ state: 'hidden' });
+      await u.po.checkout.waitForStripeElements({ state: 'visible' });
       await u.po.checkout.fillTestCard();
       await u.po.checkout.clickPayOrSubscribe();
       await expect(u.po.page.locator('.cl-checkout-root').getByText('Payment was successful!')).toBeVisible();

packages/testing/src/playwright/unstable/page-objects/checkout.ts

@@ -28,11 +28,8 @@ export const createCheckoutPageObject = (testArgs: { page: EnhancedPage }) => {
       await frame.getByLabel('Country').selectOption(card.country);
       await frame.getByLabel('ZIP code').fill(card.zip);
     },
-    waitForStipeElements: async () => {
-      return page
-        .frameLocator('iframe[src*="elements-inner-payment"]')
-        .getByLabel('Card number')
-        .waitFor({ state: 'visible' });
+    waitForStripeElements: async ({ state = 'visible' }: { state?: 'visible' | 'hidden' } = {}) => {
+      return page.frameLocator('iframe[src*="elements-inner-payment"]').getByLabel('Card number').waitFor({ state });
     },
     clickPayOrSubscribe: async () => {
       await self.root.getByRole('button', { name: /subscribe|pay\s\$/i }).click();