test(datetime): update naming, screenshot config, remove unnecessary tests

Author: brandyscarney

core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts

@@ -1,48 +1,51 @@
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
-configs().forEach(({ title, screenshot, config }) => {
-  test.describe(title('datetime: ShowDaysOutsideCustomMonth'), () => {
-    test('with custom-grid should not have any visual regressions', async ({ page }) => {
+/**
+ * This behavior does not vary across directions
+ */
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('datetime: show adjacent days'), () => {
+    test('should not have visual regressions', async ({ page }) => {
       await page.goto('/src/components/datetime/test/show-adjacent-days', config);
-      const customGrid = page.locator('#custom-grid');
-      await expect(customGrid).toHaveScreenshot(screenshot(`customGrid-with-adjacent-days`));
+      const datetime = page.locator('#default');
+      await expect(datetime).toHaveScreenshot(screenshot(`datetime-show-adjacent-days`));
     });
 
-    test('should set the first day of the week correctly', async ({ page }) => {
+    test('should not have visual regressions with a custom styled calendar', async ({ page }) => {
       await page.goto('/src/components/datetime/test/show-adjacent-days', config);
-      const customDatetime = page.locator('#custom-calendar-days');
-      await expect(customDatetime).toHaveScreenshot(screenshot(`custom-calendar-with-adjacent-days`));
+      const datetime = page.locator('#custom-calendar-days');
+      await expect(datetime).toHaveScreenshot(screenshot(`datetime-show-adjacent-days-custom-calendar`));
     });
 
-    test('with specific date disabled  should not have any visual regressions', async ({ page }) => {
+    test('should not have visual regressions with specific date disabled', async ({ page }) => {
       await page.goto('/src/components/datetime/test/show-adjacent-days', config);
-      const specificDateDisabled = page.locator('#specificDate');
-      await expect(specificDateDisabled).toHaveScreenshot(screenshot(`specificDate-with-adjacent-days`));
+      const datetime = page.locator('#specificDate');
+      await expect(datetime).toHaveScreenshot(screenshot(`datetime-show-adjacent-days-specific-date-disabled`));
     });
 
-    test('with weekends disabled should not have any visual regressions', async ({ page }) => {
+    test('should not have visual regressions with weekends disabled', async ({ page }) => {
       await page.goto('/src/components/datetime/test/show-adjacent-days', config);
-      const weekendsDisabled = page.locator('#weekends');
-      await expect(weekendsDisabled).toHaveScreenshot(screenshot(`weekendsDisabled-with-adjacent-days`));
+      const datetime = page.locator('#weekends');
+      await expect(datetime).toHaveScreenshot(screenshot(`datetime-show-adjacent-days-weekends-disabled`));
     });
 
-    test('with date range disabled should not have any visual regressions', async ({ page }) => {
+    test('should not have visual regressions with date range disabled', async ({ page }) => {
       await page.goto('/src/components/datetime/test/show-adjacent-days', config);
-      const dateRangeDisabled = page.locator('#dateRange');
-      await expect(dateRangeDisabled).toHaveScreenshot(screenshot(`dateRangeDisabled-with-adjacent-days`));
+      const datetime = page.locator('#dateRange');
+      await expect(datetime).toHaveScreenshot(screenshot(`datetime-show-adjacent-days-date-range-disabled`));
     });
 
-    test('with month disabled should not have any visual regressions', async ({ page }) => {
+    test('should not have visual regressions with month disabled', async ({ page }) => {
       await page.goto('/src/components/datetime/test/show-adjacent-days', config);
-      const monthDisabled = page.locator('#month');
-      await expect(monthDisabled).toHaveScreenshot(screenshot(`monthDisabled-with-adjacent-days`));
+      const datetime = page.locator('#month');
+      await expect(datetime).toHaveScreenshot(screenshot(`datetime-show-adjacent-days-month-disabled`));
     });
 
-    test('with specific display should not have any visual regressions', async ({ page }) => {
+    test('should not have visual regressions with display specified', async ({ page }) => {
       await page.goto('/src/components/datetime/test/show-adjacent-days', config);
-      const display = page.locator('#display');
-      await expect(display).toHaveScreenshot(screenshot(`display-with-adjacent-days`));
+      const datetime = page.locator('#display');
+      await expect(datetime).toHaveScreenshot(screenshot(`datetime-show-adjacent-days-display`));
     });
   });
 });

core/src/components/datetime/test/show-adjacent-days/index.html

@@ -2,7 +2,7 @@
 <html lang="en" dir="ltr">
   <head>
     <meta charset="UTF-8" />
-    <title>Datetime - Custom</title>
+    <title>Datetime - Show Adjacent Days</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
     <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
     <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
@@ -33,47 +33,6 @@
         }
       }
 
-      /*
-        * Custom Datetime Time / Wheel Parts
-        * -------------------------------------------
-        */
-
-      .custom-grid-wheel {
-        --background: rgb(245, 235, 247);
-        --background-rgb: 245, 235, 247;
-      }
-
-      .custom-grid-wheel::part(time-button) {
-        color: rgb(128, 30, 171);
-      }
-
-      .custom-grid-wheel::part(time-button active) {
-        background-color: rgb(248, 215, 255);
-      }
-
-      .custom-grid-wheel {
-        --wheel-highlight-background: rgb(218, 216, 255);
-        --wheel-highlight-border-radius: 16px;
-        --wheel-fade-background-rgb: 245, 235, 247;
-      }
-
-      ion-picker {
-        --highlight-background: rgb(218, 216, 255);
-        --highlight-border-radius: 16px;
-        --fade-background-rgb: 245, 235, 247;
-
-        background-color: rgb(245, 235, 247);
-      }
-      .custom-grid-wheel::part(wheel-item),
-      ion-picker-column-option {
-        color: rgb(255, 134, 154);
-      }
-
-      .custom-grid-wheel::part(wheel-item active),
-      ion-picker-column-option.option-active {
-        color: rgb(128, 30, 171);
-      }
-
       /*
         * Custom Datetime Day Parts
         * -------------------------------------------
@@ -142,46 +101,61 @@
     <ion-app>
       <ion-header translucent="true">
         <ion-toolbar>
-          <ion-title>Datetime - ShowDaysOutsideCustomMonth</ion-title>
+          <ion-title>Datetime - Show Adjacent Days</ion-title>
         </ion-toolbar>
       </ion-header>
       <ion-content class="ion-padding">
         <div class="grid">
           <div class="grid-item">
-            <h2>Grid Style</h2>
-            <ion-datetime id="custom-grid" value="2020-03-14T14:23:00.000Z" class="custom-grid-wheel"></ion-datetime>
+            <h2>Inline Grid</h2>
+            <ion-datetime show-adjacent-days="true" value="2020-03-14T14:23:00.000Z"></ion-datetime>
           </div>
 
           <div class="grid-item">
-            <h2>Grid Style</h2>
-            <ion-datetime id="custom-calendar-days" value="2023-06-15" presentation="date"></ion-datetime>
+            <h2>Inline Grid: Custom Styles</h2>
+            <ion-datetime
+              show-adjacent-days="true"
+              id="custom-calendar-days"
+              value="2023-06-15"
+              presentation="date"
+            ></ion-datetime>
           </div>
         </div>
 
         <div class="grid">
           <div class="grid-item">
             <h2>Disable Specific Date</h2>
-            <ion-datetime id="specificDate" value="2021-10-01" showAdjacentDays="true"></ion-datetime>
+            <ion-datetime
+              show-adjacent-days="true"
+              id="specificDate"
+              value="2021-10-01"
+              showAdjacentDays="true"
+            ></ion-datetime>
           </div>
 
           <div class="grid-item">
             <h2>Disable Weekends</h2>
-            <ion-datetime id="weekends" value="2021-10-01"></ion-datetime>
+            <ion-datetime show-adjacent-days="true" id="weekends" value="2021-10-01"></ion-datetime>
           </div>
 
           <div class="grid-item">
             <h2>Disable Date Range</h2>
-            <ion-datetime id="dateRange" value="2021-10-01"></ion-datetime>
+            <ion-datetime show-adjacent-days="true" id="dateRange" value="2021-10-01"></ion-datetime>
           </div>
 
           <div class="grid-item">
             <h2>Disable Month</h2>
-            <ion-datetime id="month" value="2021-10-01"></ion-datetime>
+            <ion-datetime show-adjacent-days="true" id="month" value="2021-10-01"></ion-datetime>
           </div>
 
           <div class="grid-item">
             <h2>Change firstDayOfWeek</h2>
-            <ion-datetime id="firstDayOfWeek" first-day-of-week="1" value="2022-05-03"></ion-datetime>
+            <ion-datetime
+              show-adjacent-days="true"
+              id="firstDayOfWeek"
+              first-day-of-week="1"
+              value="2022-05-03"
+            ></ion-datetime>
             <button onclick="increase()">Increase firstDayOfWeek</button>
             <div>
               <span>FirstDayOfWeek: <span id="start-of-week">1</span></span>
@@ -202,7 +176,7 @@ <h2>Change firstDayOfWeek</h2>
             <option value="cover">cover</option>
           </select>
           <br /><br />
-          <ion-datetime id="display" value="2022-02-22T16:30:00"></ion-datetime>
+          <ion-datetime show-adjacent-days="true" id="display" value="2022-02-22T16:30:00"></ion-datetime>
         </div>
       </ion-content>
     </ion-app>
@@ -248,8 +222,6 @@ <h2>Change firstDayOfWeek</h2>
 
         return true;
       };
-      customGrid.showAdjacentDays = true;
-      customDatetime.showAdjacentDays = true;
 
       const specificDateDisabled = document.querySelector('#specificDate');
       specificDateDisabled.isDateEnabled = (dateIsoString) => {
@@ -260,7 +232,6 @@ <h2>Change firstDayOfWeek</h2>
         }
         return true;
       };
-      specificDateDisabled.showAdjacentDays = true;
 
       const weekendsDisabled = document.querySelector('#weekends');
       weekendsDisabled.isDateEnabled = (dateIsoString) => {
@@ -271,7 +242,6 @@ <h2>Change firstDayOfWeek</h2>
         }
         return true;
       };
-      weekendsDisabled.showAdjacentDays = true;
 
       const dateRangeDisabled = document.querySelector('#dateRange');
       dateRangeDisabled.isDateEnabled = (dateIsoString) => {
@@ -284,7 +254,6 @@ <h2>Change firstDayOfWeek</h2>
         }
         return true;
       };
-      dateRangeDisabled.showAdjacentDays = true;
 
       const monthDisabled = document.querySelector('#month');
       monthDisabled.isDateEnabled = (dateIsoString) => {
@@ -295,10 +264,8 @@ <h2>Change firstDayOfWeek</h2>
         }
         return true;
       };
-      monthDisabled.showAdjacentDays = true;
 
       const firstDayOfWeek = document.querySelector('#firstDayOfWeek');
-      firstDayOfWeek.showAdjacentDays = true;
       function increase() {
         firstDayOfWeek.firstDayOfWeek = firstDayOfWeek.firstDayOfWeek + 1;
 
@@ -307,7 +274,6 @@ <h2>Change firstDayOfWeek</h2>
       }
 
       const display = document.querySelector('#display');
-      display.showAdjacentDays = true;
 
       const mutationObserver = new MutationObserver(() => {
         window.dispatchEvent(new CustomEvent('ionWorkingPartsDidChange'));