javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-16 10:01:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Liam DeBeasi
2021-10-14 14:53:17 -04:00
committed by GitHub
parent 61b99d13bf
commit e3996cfbd5
2 changed files with 92 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
core/src/components/datetime/datetime.tsx
View File

@ -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>}
<ion-button color={this.color} onClick={() => this.confirm(true)}>{this.doneText}</ion-button>
{showClearButton && <ion-button id="clear-button" color={this.color} onClick={() => clearButtonClick()}>{this.clearText}</ion-button>}
{showDefaultButtons && <ion-button id="confirm-button" color={this.color} onClick={() => this.confirm(true)}>{this.doneText}</ion-button>}
</div>
</ion-buttons>
</slot>

87
core/src/components/datetime/test/basic/e2e.ts Normal file
View File

@ -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();
});
});