test(input-otp): add snapshots

Author: thetaPC

core/src/components/input-otp/test/bottom-content/input-otp.e2e.ts

@@ -1,6 +1,47 @@
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
+/**
+ * Rendering is different across modes
+ */
+configs({ modes: ['ios', 'md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('input-otp: helper text rendering'), () => {
+    test('should not have visual regressions when rendering helper text with no description', async ({ page }) => {
+      await page.setContent(`<ion-input-otp helper-text="Helper text"></ion-input-otp>`, config);
+
+      const bottomEl = page.locator('ion-input-otp');
+      await expect(bottomEl).toHaveScreenshot(screenshot(`input-otp-helper-text-no-description`));
+    });
+    test('should not have visual regressions when rendering helper text with description', async ({ page }) => {
+      await page.setContent(`<ion-input-otp helper-text="Helper text">Description</ion-input-otp>`, config);
+
+      const bottomEl = page.locator('ion-input-otp');
+      await expect(bottomEl).toHaveScreenshot(screenshot(`input-otp-helper-text-description`));
+    });
+  });
+
+  test.describe(title('input: error text rendering'), () => {
+    test('should not have visual regressions when rendering error text with no description', async ({ page }) => {
+      await page.setContent(
+        `<ion-input-otp class="ion-invalid ion-touched" error-text="Error text"></ion-input-otp>`,
+        config
+      );
+
+      const bottomEl = page.locator('ion-input-otp');
+      await expect(bottomEl).toHaveScreenshot(screenshot(`input-otp-error-text-no-description`));
+    });
+    test('should not have visual regressions when rendering error text with description', async ({ page }) => {
+      await page.setContent(
+        `<ion-input-otp class="ion-invalid ion-touched" error-text="Error text">Description</ion-input-otp>`,
+        config
+      );
+
+      const bottomEl = page.locator('ion-input-otp');
+      await expect(bottomEl).toHaveScreenshot(screenshot(`input-otp-error-text-description`));
+    });
+  });
+});
+
 /**
  * Functionality is the same across modes & directions
  */