fix(datetime): clear button is now rendered even if showDefaultButtons is false (#24075)

core/src/components/datetime/datetime.tsx

@@ -980,8 +980,9 @@ export class Datetime implements ComponentInterface {
   }
 
   private renderFooter() {
+    const { showDefaultButtons, showClearButton } = this;
     const hasSlottedButtons = this.el.querySelector('[slot="buttons"]') !== null;
-    if (!hasSlottedButtons && !this.showDefaultButtons) { return; }
+    if (!hasSlottedButtons && !showDefaultButtons && !showClearButton) { return; }
 
     const clearButtonClick = () => {
       this.reset();
@@ -1004,10 +1005,10 @@ export class Datetime implements ComponentInterface {
           }}>
             <slot name="buttons">
               <ion-buttons>
-                <ion-button color={this.color} onClick={() => this.cancel(true)}>{this.cancelText}</ion-button>
+                {showDefaultButtons && <ion-button id="cancel-button" color={this.color} onClick={() => this.cancel(true)}>{this.cancelText}</ion-button>}
                 <div>
-                  {this.showClearButton && <ion-button color={this.color} onClick={() => clearButtonClick()}>{this.clearText}</ion-button>}
+                  {showClearButton && <ion-button id="clear-button" color={this.color} onClick={() => clearButtonClick()}>{this.clearText}</ion-button>}
-                  <ion-button color={this.color} onClick={() => this.confirm(true)}>{this.doneText}</ion-button>
+                  {showDefaultButtons && <ion-button id="confirm-button" color={this.color} onClick={() => this.confirm(true)}>{this.doneText}</ion-button>}
                 </div>
               </ion-buttons>
             </slot>

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

@@ -0,0 +1,87 @@
+import { newE2EPage } from '@stencil/core/testing';
+import { Datetime } from '../../datetime';
+
+describe('Footer', () => {
+  test('should render default buttons', async () => {
+    const page = await newE2EPage({
+      components: [Datetime],
+      html: '<ion-datetime show-default-buttons="true"></ion-datetime>'
+    });
+
+    const cancelButton = await page.find('ion-datetime >>> #cancel-button');
+    expect(cancelButton).toEqualText('Cancel');
+
+    const confirmButton = await page.find('ion-datetime >>> #confirm-button');
+    expect(confirmButton).toEqualText('Done');
+
+    expect(await page.compareScreenshot()).toMatchScreenshot();
+  });
+
+  test('should render clear button', async () => {
+    const page = await newE2EPage({
+      components: [Datetime],
+      html: '<ion-datetime show-clear-button="true"></ion-datetime>'
+    });
+
+    const clearButton = await page.find('ion-datetime >>> #clear-button');
+    expect(clearButton).toEqualText('Clear');
+
+    expect(await page.compareScreenshot()).toMatchScreenshot();
+  });
+
+  test('should render clear and default buttons', async () => {
+    const page = await newE2EPage({
+      components: [Datetime],
+      html: '<ion-datetime show-default-buttons="true" show-clear-button="true"></ion-datetime>'
+    });
+
+    const cancelButton = await page.find('ion-datetime >>> #cancel-button');
+    expect(cancelButton).toEqualText('Cancel');
+
+    const confirmButton = await page.find('ion-datetime >>> #confirm-button');
+    expect(confirmButton).toEqualText('Done');
+
+    const clearButton = await page.find('ion-datetime >>> #clear-button');
+    expect(clearButton).toEqualText('Clear');
+
+    expect(await page.compareScreenshot()).toMatchScreenshot();
+  });
+
+  test('should render custom buttons', async () => {
+    const page = await newE2EPage({
+      components: [Datetime],
+      html: `
+        <ion-datetime show-default-buttons="true" show-clear-button="true">
+          <ion-buttons slot="buttons">
+            <ion-button id="custom-button">Hello!</ion-button>
+          </ion-buttons>
+        </ion-datetime>
+      `
+    });
+
+    const customButton = await page.find('ion-datetime #custom-button');
+    expect(customButton).not.toBeNull();
+
+    expect(await page.compareScreenshot()).toMatchScreenshot();
+  });
+
+  test('should render custom buttons', async () => {
+    const page = await newE2EPage({
+      components: [Datetime],
+      html: `
+        <ion-datetime show-default-buttons="true" show-clear-button="true">
+          <ion-buttons slot="buttons">
+            <ion-button id="custom-button">Hello!</ion-button>
+          </ion-buttons>
+        </ion-datetime>
+      `
+    });
+
+    const customButton = await page.find('ion-datetime #custom-button');
+    expect(customButton).not.toBeNull();
+
+    expect(await page.compareScreenshot()).toMatchScreenshot();
+  });
+});
+
+