javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

tests

Browse Source
This commit is contained in:
Liam DeBeasi
2023-12-01 15:38:09 -05:00
parent 2c773ed0e6
commit 629d862c54
5 changed files with 66 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
core/src/components/picker-column-option/test/picker-column-option.spec.ts Normal file
View File

@@ -0,0 +1,31 @@
import { newSpecPage } from '@stencil/core/testing';
import { PickerColumnOption } from '../picker-column-option';
describe('PickerColumnOption', () => {
it('option should be enabled by default', async () => {
const page = await newSpecPage({
components: [PickerColumnOption],
html: `
<ion-picker-column-option value="a">A</ion-picker-column-option>
`,
});
const pickerColumnOption = page.body.querySelector('ion-picker-column-option')!;
const button = pickerColumnOption.shadowRoot!.querySelector('button')!;
expect(button.hasAttribute('disabled')).toEqual(false);
});
it('disabled option should have disabled button', async () => {
const page = await newSpecPage({
components: [PickerColumnOption],
html: `
<ion-picker-column-option value="a" disabled="true">A</ion-picker-column-option>
`,
});
const pickerColumnOption = page.body.querySelector('ion-picker-column-option')!;
const button = pickerColumnOption.shadowRoot!.querySelector('button')!;
expect(button.hasAttribute('disabled')).toEqual(true);
});
});

16
core/src/components/picker-column/test/basic/index.html
View File

@@ -57,12 +57,18 @@
const items = Array(24)
.fill()
.map((_, i) => ({
text: `${i}`,
value: i,
}));
.forEach((_, i) => {
const option = document.createElement('ion-picker-column-option');
option.value = i;
option.textContent = i;
defaultPickerColumn.items = items;
defaultPickerColumn.appendChild(option);
});
//defaultPickerColumn.value = 11;
defaultPickerColumn.addEventListener('ionChange', (ev) => {
console.log(ev);
})
</script>
</ion-app>
</body>

13
core/src/components/picker-column/test/basic/picker-column.e2e.ts
View File

@@ -10,18 +10,13 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
await page.goto('/src/components/picker-column/test/basic', config);
});
test('should render a picker item for each item', async ({ page }) => {
const columns = page.locator('ion-picker-column .picker-item:not(.picker-item-empty)');
await expect(columns).toHaveCount(24);
});
test('should render 6 empty picker items', async ({ page }) => {
const columns = page.locator('ion-picker-column .picker-item-empty');
await expect(columns).toHaveCount(6);
});
test('should not have an active item when value is not set', async ({ page }) => {
const activeColumn = page.locator('ion-picker-column .picker-item-active');
const activeColumn = page.locator('ion-picker-column .option-active');
await expect(activeColumn).toHaveCount(0);
});
@@ -31,7 +26,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
});
await page.waitForChanges();
const activeColumn = page.locator('ion-picker-column .picker-item-active');
const activeColumn = page.locator('ion-picker-column .option-active');
expect(activeColumn).not.toBeNull();
});
@@ -45,9 +40,9 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
});
await page.waitForChanges();
const activeColumn = page.locator('ion-picker-column .picker-item-active');
const activeColumn = page.locator('ion-picker-column .option-active');
expect(await activeColumn?.innerText()).toEqual('23');
await expect(activeColumn).toHaveJSProperty('value', 23);
});
test('should not emit ionChange when the value is modified externally', async ({ page, skip }) => {

35
core/src/components/picker-column/test/disabled/index.html
View File

@@ -53,31 +53,36 @@
<div class="grid-item">
<h2>Column disabled</h2>
<ion-picker>
<ion-picker-column id="column-disabled" value="11" disabled></ion-picker-column>
<ion-picker-column id="column-disabled" disabled="true"></ion-picker-column>
</ion-picker>
</div>
</div>
</ion-content>
<script>
const halfDisabledPicker = document.getElementById('half-disabled');
const halfDisabledItems = Array(24)
Array(24)
.fill()
.map((_, i) => ({
text: `${i}`,
value: i,
disabled: i % 2 === 0,
}));
halfDisabledPicker.items = halfDisabledItems;
halfDisabledPicker.value = 12;
.forEach((_, i) => {
const option = document.createElement('ion-picker-column-option');
option.value = i;
option.textContent = i;
option.disabled = i % 2 === 0;
halfDisabledPicker.appendChild(option);
});
halfDisabledPicker.value = 4;
const fullDisabledPicker = document.getElementById('column-disabled');
const items = Array(24)
Array(24)
.fill()
.map((_, i) => ({
text: `${i}`,
value: i,
}));
fullDisabledPicker.items = items;
.forEach((_, i) => {
const option = document.createElement('ion-picker-column-option');
option.value = i;
option.textContent = i;
fullDisabledPicker.appendChild(option);
});
fullDisabledPicker.value = 11;
</script>
</ion-app>
</body>

30
core/src/components/picker-column/test/disabled/picker-column.e2e.ts
View File

@@ -1,36 +1,6 @@
import { expect } from '@playwright/test';
import { configs, test } from '@utils/test/playwright';
/**
* This behavior does not vary across directions.
*/
configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
test.describe(title('picker-column: disabled rendering'), () => {
test('should not have visual regressions', async ({ page }) => {
await page.setContent(
`
<ion-picker>
<ion-picker-column value="b"></ion-picker-column>
</ion-picker>
<script>
const column = document.querySelector('ion-picker-column');
column.items = [
{ text: 'A', value: 'a', disabled: true },
{ text: 'B', value: 'b' },
{ text: 'C', value: 'c', disabled: true }
]
</script>
`,
config
);
const picker = page.locator('ion-picker');
await expect(picker).toHaveScreenshot(screenshot(`picker-disabled`));
});
});
});
/**
* This behavior does not vary across modes/directions.
*/