test(divider): adds new tests for new divider

Author: OS-martacarlos

core/api.txt

@@ -730,6 +730,22 @@ ion-datetime-button,prop,mode,"ios" | "md",undefined,false,false
 ion-datetime-button,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-datetime-button,part,native
 
+ion-divider,shadow
+ion-divider,prop,inset,boolean | undefined,false,false,false
+ion-divider,prop,spacing,"large" | "medium" | "small" | "xlarge" | "xsmall" | "xxlarge" | "xxsmall" | undefined,undefined,false,true
+ion-divider,css-prop,--margin-bottom,ionic
+ion-divider,css-prop,--margin-bottom,ios
+ion-divider,css-prop,--margin-bottom,md
+ion-divider,css-prop,--margin-top,ionic
+ion-divider,css-prop,--margin-top,ios
+ion-divider,css-prop,--margin-top,md
+ion-divider,css-prop,--padding-end,ionic
+ion-divider,css-prop,--padding-end,ios
+ion-divider,css-prop,--padding-end,md
+ion-divider,css-prop,--padding-start,ionic
+ion-divider,css-prop,--padding-start,ios
+ion-divider,css-prop,--padding-start,md
+
 ion-fab,shadow
 ion-fab,prop,activated,boolean,false,false,false
 ion-fab,prop,edge,boolean,false,false,false

core/src/components.d.ts

@@ -1161,8 +1161,14 @@ export namespace Components {
         "theme"?: "ios" | "md" | "ionic";
     }
     interface IonDivider {
+        /**
+          * If `true`, the divider will have horizontal margins By default, it's `false`
+         */
         "inset"?: boolean;
-        "spacing"?: 'xxsmall' | 'xsmall' | 'small' | 'large' | 'xlarge' | 'xxlarge';
+        /**
+          * Set to `"xxsmall"` for the smallest spacing. Set to "xsmall" for a very small spacing. Set to `"small"` for a small spacing. Set to "medium" for a medium spacing. Set to "large" for a large spacing. Set to `"xlarge"` for the largest spacing.  Defaults to `"small"` for the `ionic` theme, undefined for all other themes.
+         */
+        "spacing"?: 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge';
     }
     interface IonFab {
         /**
@@ -6623,8 +6629,14 @@ declare namespace LocalJSX {
         "theme"?: "ios" | "md" | "ionic";
     }
     interface IonDivider {
+        /**
+          * If `true`, the divider will have horizontal margins By default, it's `false`
+         */
         "inset"?: boolean;
-        "spacing"?: 'xxsmall' | 'xsmall' | 'small' | 'large' | 'xlarge' | 'xxlarge';
+        /**
+          * Set to `"xxsmall"` for the smallest spacing. Set to "xsmall" for a very small spacing. Set to `"small"` for a small spacing. Set to "medium" for a medium spacing. Set to "large" for a large spacing. Set to `"xlarge"` for the largest spacing.  Defaults to `"small"` for the `ionic` theme, undefined for all other themes.
+         */
+        "spacing"?: 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge';
     }
     interface IonFab {
         /**

core/src/components/divider/divider.scss

@@ -13,22 +13,23 @@
   --padding-start: 0px;
   --padding-end: 0px;
 
-  padding-right: var(--padding-end);
-  padding-left: calc(var(--padding-start) + var(--ion-safe-area-left, 0px));
-
   display: block;
 
   width: 100%;
+
+  /* stylelint-disable */
+  padding-right: var(--padding-end);
+  padding-left: calc(var(--padding-start) + var(--ion-safe-area-left, 0px));
 }
 
 :host hr {
-  margin-top: var(--margin-top);
-  margin-bottom: var(--margin-bottom);
-
   display: block;
 
   width: 100%;
 
+  margin-top: var(--margin-top);
+  margin-bottom: var(--margin-bottom);
+
   border: none;
   border-top: #{globals.$ion-border-size-025} solid #{globals.$ion-border-default};
 }

core/src/components/divider/divider.tsx

@@ -12,8 +12,7 @@ import { Component, Prop, Host, h } from '@stencil/core';
   shadow: true,
 })
 export class Divider implements ComponentInterface {
-
-    /**
+  /**
    * Set to `"xxsmall"` for the smallest spacing.
    * Set to "xsmall" for a very small spacing.
    * Set to `"small"` for a small spacing.
@@ -25,7 +24,7 @@ export class Divider implements ComponentInterface {
    */
   @Prop({ reflect: true }) spacing?: 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge';
 
-    /**
+  /**
    * If `true`, the divider will have horizontal margins
    * By default, it's `false`
    */
@@ -50,7 +49,8 @@ export class Divider implements ComponentInterface {
           [theme]: true,
           [`divider-space-${spacing}`]: spacing !== undefined,
           [`divider-inset`]: this.inset || false,
-        }}>
+        }}
+      >
         <hr />
       </Host>
     );

core/src/components/divider/test/basic/divider.e2e.ts

@@ -1,78 +1,14 @@
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
-configs().forEach(({ title, screenshot, config }) => {
-  test.describe(title('item-divider: basic'), () => {
-    test('should display an item divider with text', async ({ page }) => {
-      await page.setContent(
-        `
-        <ion-item-divider>
-          <ion-label>Item Divider</ion-label>
-        </ion-item-divider>
-      `,
-        config
-      );
+configs().forEach(({ config, screenshot, title }) => {
+  test.describe(title('divider: rendering'), () => {
+    test('should not have visual regressions', async ({ page }) => {
+      await page.goto('/src/components/divider/test/basic', config);
 
-      const divider = page.locator('ion-item-divider');
-      await expect(divider).toHaveScreenshot(screenshot(`item-divider-text`));
-    });
-
-    test('should display an item divider with a button in the end slot', async ({ page }) => {
-      await page.setContent(
-        `
-        <ion-item-divider>
-          <ion-label>Item Divider</ion-label>
-          <ion-button slot="end">Button</ion-button>
-        </ion-item-divider>
-      `,
-        config
-      );
-
-      const divider = page.locator('ion-item-divider');
-      await expect(divider).toHaveScreenshot(screenshot(`item-divider-button-end`));
-    });
-
-    test('should display an item divider with an icon in the start slot', async ({ page }) => {
-      await page.setContent(
-        `
-        <ion-item-divider>
-          <ion-icon slot="start" name="star"></ion-icon>
-          <ion-label>Item Divider</ion-label>
-        </ion-item-divider>
-      `,
-        config
-      );
-
-      const divider = page.locator('ion-item-divider');
-      await expect(divider).toHaveScreenshot(screenshot(`item-divider-icon-start`));
-    });
-
-    /**
-     * This behavior needs to be tested for all modes & directions
-     * Safe padding should stay on the same side when the direction changes
-     */
-    test('should have safe area padding', async ({ page }) => {
-      await page.setContent(
-        `
-        <style>
-          :root {
-            --ion-safe-area-left: 40px;
-            --ion-safe-area-right: 20px;
-          }
-        </style>
-        <ion-list>
-          <ion-item-divider>
-            <ion-label>Item Divider</ion-label>
-            <ion-button slot="end">Button</ion-button>
-          </ion-item-divider>
-        </ion-list>
-      `,
-        config
-      );
-
-      const list = page.locator('ion-list');
+      await page.setIonViewport();
 
-      await expect(list).toHaveScreenshot(screenshot('item-divider-safe-area'));
+      await expect(page).toHaveScreenshot(screenshot(`divider-basic`));
     });
   });
 });