test(button): ionic theme tests

core/src/components/button/test/clear/button.e2e.ts

@@ -1,14 +1,17 @@
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
-configs().forEach(({ title, config, screenshot }) => {
- test.describe(title('button: clear'), () => {
+/**
+ * Fill="clear" does not render differently based on the direction.
+ */
+configs({ directions: ['ltr'], themes: ['ios', 'md', 'ionic'] }).forEach(({ title, config, screenshot }) => {
+ test.describe(title('button: fill: clear'), () => {
  test('should not have visual regressions', async ({ page }) => {
  await page.goto(`/src/components/button/test/clear`, config);
 
  await page.setIonViewport();
 
- await expect(page).toHaveScreenshot(screenshot(`button-clear`));
+ await expect(page).toHaveScreenshot(screenshot(`button-fill-clear`));
  });
  });
 });

core/src/components/button/test/shape/button.e2e.ts

@@ -0,0 +1,110 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+/**
+ * All content takes up the full width, so RTL has no effect.
+ */
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+ test.describe(title('button: shape'), () => {
+ test.describe('round', () => {
+ test.describe('default', () => {
+ test('should not have visual regressions', async ({ page }) => {
+ await page.goto(`/src/components/button/test/shape`, config);
+
+ await page.setIonViewport();
+
+ const container = page.locator('#default');
+
+ await expect(container).toHaveScreenshot(screenshot(`button-round`));
+ });
+ });
+
+ test.describe('outline', () => {
+ test('should not have visual regressions', async ({ page }) => {
+ await page.goto(`/src/components/button/test/shape`, config);
+
+ await page.setIonViewport();
+
+ const container = page.locator('#outline');
+
+ await expect(container).toHaveScreenshot(screenshot(`button-outline-round`));
+ });
+ });
+
+ test.describe('clear', () => {
+ test('should not have visual regressions', async ({ page }) => {
+ await page.goto(`/src/components/button/test/shape`, config);
+
+ await page.setIonViewport();
+
+ const container = page.locator('#clear');
+
+ await expect(container).toHaveScreenshot(screenshot(`button-clear-round`));
+ });
+ });
+
+ test.describe('color', () => {
+ test('should not have visual regressions', async ({ page }) => {
+ await page.goto(`/src/components/button/test/shape`, config);
+
+ await page.setIonViewport();
+
+ const container = page.locator('#color');
+
+ await expect(container).toHaveScreenshot(screenshot(`button-color-round`));
+ });
+ });
+
+ test.describe('expand', () => {
+ test('should not have visual regressions', async ({ page }) => {
+ await page.goto(`/src/components/button/test/shape`, config);
+
+ await page.setIonViewport();
+
+ const container = page.locator('#expand');
+
+ await expect(container).toHaveScreenshot(screenshot(`button-expand-round`));
+ });
+ });
+ });
+ });
+});
+
+/**
+ * Shape="rectangular" is only available in the Ionic theme.
+ */
+configs({ directions: ['ltr'], themes: ['ionic'] }).forEach(({ title, screenshot, config }) => {
+ test.describe(title('button: shape'), () => {
+ test.describe('rectangular', () => {
+ test('should not have visual regressions', async ({ page }) => {
+ await page.setContent(
+ `
+ <style>
+ ion-button {
+ margin: 8px;
+ }
+ </style>
+ <div id="container">
+ <ion-button shape="rectangular" fill="solid">Rectangular Button, Solid</ion-button>
+ <ion-button class="ion-focused" shape="rectangular" fill="solid">Rectangular Button, Solid, Focused</ion-button>
+ <ion-button class="ion-activated" shape="rectangular" fill="solid">Rectangular Button, Solid, Activated</ion-button>
+
+ <ion-button shape="rectangular" fill="outline">Rectangular Button, Outline</ion-button>
+ <ion-button class="ion-focused" shape="rectangular" fill="outline">Rectangular Button, Outline, Focused</ion-button>
+ <ion-button class="ion-activated" shape="rectangular" fill="outline">Rectangular Button, Outline, Activated</ion-button>
+
+ <ion-button shape="rectangular" fill="clear">Rectangular Button</ion-button>
+ <ion-button class="ion-focused" shape="rectangular" fill="clear">Rectangular Button, Focused</ion-button>
+ <ion-button class="ion-activated" shape="rectangular" fill="clear">Rectangular Button, Activated</ion-button>
+ </div>
+ `,
+ config
+ );
+
+ const container = page.locator('#container');
+
+ await expect(container).toHaveScreenshot(screenshot(`button-shape-rectangular`));
+ });
+ });
+ });
+});

core/src/components/button/test/size/button.e2e.ts

@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
-configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+configs({ directions: ['ltr'], themes: ['ionic', 'md', 'ios'] }).forEach(({ title, screenshot, config }) => {
  test.describe(title('button: size'), () => {
  test('should render small buttons', async ({ page }) => {
  await page.setContent(
@@ -60,3 +60,26 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
  });
  });
 });
+
+/**
+ * The following tests are specific to the Ionic theme and do not depend on the text direction.
+ */
+configs({ directions: ['ltr'], themes: ['ionic'] }).forEach(({ title, screenshot, config }) => {
+ test.describe(title('button: size'), () => {
+ test('should render xsmall buttons', async ({ page }) => {
+ await page.setContent(`<ion-button size="xsmall" fill="solid">X-Small Button</ion-button>`, config);
+
+ const wrapper = page.locator('ion-button');
+
+ await expect(wrapper).toHaveScreenshot(screenshot(`button-size-x-small`));
+ });
+
+ test('should render xlarge buttons', async ({ page }) => {
+ await page.setContent(`<ion-button size="xlarge" fill="solid">X-Large Button</ion-button>`, config);
+
+ const wrapper = page.locator('ion-button');
+
+ await expect(wrapper).toHaveScreenshot(screenshot(`button-size-x-large`));
+ });
+ });
+});