chore(divider): update tests and snapshots

- apply more code review suggetions

Author: OS-martacarlos

core/api.txt

@@ -731,8 +731,8 @@ 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,prop,inset,boolean,false,false,false
+ion-divider,prop,spacing,"large" | "medium" | "small" | "xlarge" | "xsmall" | "xxlarge" | "xxsmall" | undefined,'xxsmall',false,true
 ion-divider,css-prop,--margin-bottom,ionic
 ion-divider,css-prop,--margin-bottom,ios
 ion-divider,css-prop,--margin-bottom,md

core/src/components.d.ts

@@ -1164,9 +1164,9 @@ export namespace Components {
         /**
           * If `true`, the divider will have horizontal margins By default, it's `false`
          */
-        "inset"?: boolean;
+        "inset": boolean;
         /**
-          * 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.
+          * Set to `"xxsmall"` for the smallest spacing. Set to "xsmall" for very small spacing. Set to `"small"` for small spacing. Set to "medium" for medium spacing. Set to "large" for large spacing. Set to `"xlarge"` for the largest spacing.  Defaults to `"xxsmall"`.
          */
         "spacing"?: 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge';
     }
@@ -6634,7 +6634,7 @@ declare namespace LocalJSX {
          */
         "inset"?: boolean;
         /**
-          * 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.
+          * Set to `"xxsmall"` for the smallest spacing. Set to "xsmall" for very small spacing. Set to `"small"` for small spacing. Set to "medium" for medium spacing. Set to "large" for large spacing. Set to `"xlarge"` for the largest spacing.  Defaults to `"xxsmall"`.
          */
         "spacing"?: 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge';
     }

core/src/components/divider/divider.scss

@@ -27,7 +27,7 @@
     padding-right: calc(var(--padding-start) + var(--ion-safe-area-right, 0px));
     padding-left: var(--padding-end);
   }
-  /* stylelint-enable */  
+  /* stylelint-enable */
 }
 
 :host hr {
@@ -45,32 +45,32 @@
 // Divider Spacing
 // --------------------------------------------------
 
-:host(.divider-space-xsmall) {
+:host(.divider-spacing-xsmall) {
   --margin-top: #{globals.$ion-space-200};
   --margin-bottom: #{globals.$ion-space-200};
 }
 
-:host(.divider-space-small) {
+:host(.divider-spacing-small) {
   --margin-top: #{globals.$ion-space-300};
   --margin-bottom: #{globals.$ion-space-300};
 }
 
-:host(.divider-space-medium) {
+:host(.divider-spacing-medium) {
   --margin-top: #{globals.$ion-space-400};
   --margin-bottom: #{globals.$ion-space-400};
 }
 
-:host(.divider-space-large) {
+:host(.divider-spacing-large) {
   --margin-top: #{globals.$ion-space-600};
   --margin-bottom: #{globals.$ion-space-600};
 }
 
-:host(.divider-space-xlarge) {
+:host(.divider-spacing-xlarge) {
   --margin-top: #{globals.$ion-space-800};
   --margin-bottom: #{globals.$ion-space-800};
 }
 
-:host(.divider-space-xxlarge) {
+:host(.divider-spacing-xxlarge) {
   --margin-top: #{globals.$ion-space-1000};
   --margin-bottom: #{globals.$ion-space-1000};
 }

core/src/components/divider/divider.tsx

@@ -22,19 +22,19 @@ export class Divider implements ComponentInterface {
    *
    * Defaults to `"xxsmall"`.
    */
-  @Prop({ reflect: true }) spacing?: 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' = 'xxsmall';
+  @Prop({ reflect: true }) spacing?: 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' =
+    'xxsmall';
 
   /**
    * If `true`, the divider will have horizontal margins
    * By default, it's `false`
    */
-  @Prop() inset?: boolean = false;
-
+  @Prop() inset: boolean = false;
 
   render() {
     const { inset, spacing } = this;
     const theme = getIonTheme(this);
-    
+
     return (
       <Host
         class={{

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

@@ -4,11 +4,37 @@ import { configs, test } from '@utils/test/playwright';
 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);
+      await page.setContent(
+        `
+          <div id="container">
+            top
+            <ion-divider></ion-divider>
+            bottom
+          </div>
+        `,
+        config
+      );
 
-      await page.setIonViewport();
+      const container = page.locator('#container');
 
-      await expect(page).toHaveScreenshot(screenshot(`divider-basic`));
+      await expect(container).toHaveScreenshot(screenshot(`divider-basic-default`));
+    });
+
+    test('should not have visual regressions when inset is enabled', async ({ page }) => {
+      await page.setContent(
+        `
+          <div id="container">
+            top
+            <ion-divider inset="true"></ion-divider>
+            bottom
+          </div>
+        `,
+        config
+      );
+
+      const container = page.locator('#container');
+
+      await expect(container).toHaveScreenshot(screenshot(`divider-basic-inset`));
     });
   });
 });