add tests

BenOsodrac · BenOsodrac · commit 45637ec46a52 · 2025-02-25T14:43:56.000Z
diff --git a/core/src/components/badge/test/hint/badge.e2e.ts b/core/src/components/badge/test/hint/badge.e2e.ts
@@ -0,0 +1,14 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs({ modes: ['md', 'ios', 'ionic-md'] }).forEach(({ config, screenshot, title }) => {
+  test.describe(title('badge: hint'), () => {
+    test('should not have visual regressions', async ({ page }) => {
+      await page.goto('/src/components/badge/test/hint', config);
+
+      await page.setIonViewport();
+
+      await expect(page).toHaveScreenshot(screenshot(`badge-hint`));
+    });
+  });
+});
diff --git a/core/src/components/badge/test/hint/index.html b/core/src/components/badge/test/hint/index.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Badge - Hint</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Badge - Hint</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content id="content">
+        <ion-list>
+          <ion-list-header>
+            <ion-label> Badge Empty </ion-label>
+          </ion-list-header>
+          <ion-item>
+            <ion-label>Badge small</ion-label>
+            <ion-badge color="primary" size="small"></ion-badge>
+          </ion-item>
+          <ion-item>
+            <ion-label>Badge Medium</ion-label>
+            <ion-badge color="danger" size="medium"></ion-badge>
+          </ion-item>
+          <ion-item>
+            <ion-label>Badge Large</ion-label>
+            <ion-badge color="warning" size="large"></ion-badge>
+          </ion-item>
+        </ion-list>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
