mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-10 00:27:41 +08:00
test(select): clean up basic test template (#27507)
Issue number: N/A --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> The `basic` test for `ion-select` contains a lot of content that is either duplicated within the test, duplicated by other tests, or simply not used/needed. Additionally, some select options (notably gender and hair color) are not inclusive. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> Test template cleaned up, and options replaced with less personal ones as needed. Legacy test HTML was intentionally left alone since we'll be removing that in the near future anyway, though I did have to tweak a legacy E2E test since it was visiting the non-legacy page. ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. -->
This commit is contained in:
Amanda Johnston
@ -22,52 +22,65 @@
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content class="outer-content test-content">
|
||||
<ion-content class="test-content">
|
||||
<ion-list>
|
||||
<ion-list-header>
|
||||
<ion-label> Single Value Select </ion-label>
|
||||
<ion-label>Single Value</ion-label>
|
||||
</ion-list-header>
|
||||
|
||||
<ion-item>
|
||||
<ion-select label="Gender" id="gender" placeholder="Select One" class="custom-select">
|
||||
<ion-select-option value="fn">Female</ion-select-option>
|
||||
<ion-select-option value="ml">Male</ion-select-option>
|
||||
<ion-select id="alert-select" label="Alert" placeholder="Select one" interface="alert">
|
||||
<ion-select-option value="apples">Apples</ion-select-option>
|
||||
<ion-select-option value="oranges">Oranges</ion-select-option>
|
||||
<ion-select-option value="pears">Pears</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-select label="Hair Color" id="hairColor" value="brown" ok-text="Okay" cancel-text="Dismiss">
|
||||
<ion-select-option value="brown">Brown</ion-select-option>
|
||||
<ion-select-option value="blonde">Blonde</ion-select-option>
|
||||
<ion-select-option value="black">Black</ion-select-option>
|
||||
<ion-select-option value="red">Red</ion-select-option>
|
||||
<ion-select label="Popover" placeholder="Select one" interface="popover">
|
||||
<ion-select-option value="apples">Apples</ion-select-option>
|
||||
<ion-select-option value="oranges">Oranges</ion-select-option>
|
||||
<ion-select-option value="pears">Pears</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-select label="Skittles" id="skittles" interface="action-sheet" name="skittles">
|
||||
<ion-select-option value="red">Red</ion-select-option>
|
||||
<ion-select-option value="purple">Purple</ion-select-option>
|
||||
<ion-select-option value="yellow">Yellow</ion-select-option>
|
||||
<ion-select-option value="orange">Orange</ion-select-option>
|
||||
<ion-select-option value="green">Green</ion-select-option>
|
||||
<ion-select label="Action Sheet" placeholder="Select one" interface="action-sheet">
|
||||
<ion-select-option value="apples">Apples</ion-select-option>
|
||||
<ion-select-option value="oranges">Oranges</ion-select-option>
|
||||
<ion-select-option value="pears">Pears</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
|
||||
<ion-list>
|
||||
<ion-list-header>
|
||||
<ion-label> Object Values with trackBy </ion-label>
|
||||
<ion-label>Multiple Value Select</ion-label>
|
||||
</ion-list-header>
|
||||
|
||||
<ion-item>
|
||||
<ion-select label="Users" id="objectSelectCompareWith"></ion-select>
|
||||
<ion-select label="Alert" multiple="true" interface="alert">
|
||||
<ion-select-option value="pepperoni">Pepperoni</ion-select-option>
|
||||
<ion-select-option value="bacon">Bacon</ion-select-option>
|
||||
<ion-select-option value="xcheese">Extra Cheese</ion-select-option>
|
||||
<ion-select-option value="mushrooms">Mushrooms</ion-select-option>
|
||||
<ion-select-option value="onions">Onions</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-select label="Popover" multiple="true" interface="popover">
|
||||
<ion-select-option value="bird">Bird</ion-select-option>
|
||||
<ion-select-option value="cat">Cat</ion-select-option>
|
||||
<ion-select-option value="dog">Dog</ion-select-option>
|
||||
<ion-select-option value="honeybadger">Honey Badger</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
|
||||
<ion-list>
|
||||
<ion-list-header>
|
||||
<ion-label> Select - Custom Interface Options </ion-label>
|
||||
<ion-label>Custom Interface Options</ion-label>
|
||||
</ion-list-header>
|
||||
|
||||
<ion-item color="danger">
|
||||
@ -77,27 +90,23 @@
|
||||
value="bacon"
|
||||
interface="alert"
|
||||
multiple="true"
|
||||
placeholder="Select One"
|
||||
placeholder="Select"
|
||||
>
|
||||
<ion-select-option value="pepperoni">Pepperoni</ion-select-option>
|
||||
<ion-select-option value="bacon">Bacon</ion-select-option>
|
||||
<ion-select-option value="olives">Black Olives</ion-select-option>
|
||||
<ion-select-option value="xcheese">Extra Cheese</ion-select-option>
|
||||
<ion-select-option value="peppers">Green Peppers</ion-select-option>
|
||||
<ion-select-option value="mushrooms">Mushrooms</ion-select-option>
|
||||
<ion-select-option value="onions">Onions</ion-select-option>
|
||||
<ion-select-option value="pepperoni">Pepperoni</ion-select-option>
|
||||
<ion-select-option value="pineapple">Pineapple</ion-select-option>
|
||||
<ion-select-option value="sausage">Sausage</ion-select-option>
|
||||
<ion-select-option value="Spinach">Spinach</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
|
||||
<ion-item color="dark">
|
||||
<ion-select label="Popover" id="customPopoverSelect" interface="popover" placeholder="Select One">
|
||||
<ion-select-option value="brown">Brown</ion-select-option>
|
||||
<ion-select-option value="blonde">Blonde</ion-select-option>
|
||||
<ion-select-option value="black">Black</ion-select-option>
|
||||
<ion-select-option value="red">Red</ion-select-option>
|
||||
<ion-select label="Popover" id="customPopoverSelect" interface="popover" placeholder="Select">
|
||||
<ion-select-option value="pepperoni">Pepperoni</ion-select-option>
|
||||
<ion-select-option value="bacon">Bacon</ion-select-option>
|
||||
<ion-select-option value="xcheese">Extra Cheese</ion-select-option>
|
||||
<ion-select-option value="mushrooms">Mushrooms</ion-select-option>
|
||||
<ion-select-option value="onions">Onions</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
|
||||
@ -108,273 +117,17 @@
|
||||
interface="action-sheet"
|
||||
placeholder="Select One"
|
||||
>
|
||||
<ion-select-option value="red">Red</ion-select-option>
|
||||
<ion-select-option value="purple">Purple</ion-select-option>
|
||||
<ion-select-option value="yellow">Yellow</ion-select-option>
|
||||
<ion-select-option value="orange">Orange</ion-select-option>
|
||||
<ion-select-option value="green">Green</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
|
||||
<ion-list>
|
||||
<ion-list-header>
|
||||
<ion-label> Popover Interface Select </ion-label>
|
||||
</ion-list-header>
|
||||
|
||||
<ion-item>
|
||||
<ion-select label="Gender" name="gender" interface="popover">
|
||||
<ion-select-option value="f">Female</ion-select-option>
|
||||
<ion-select-option value="m">Male</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-select label="Favorite Food" name="food" interface="popover" value="steak">
|
||||
<ion-select-option value="steak">Steak</ion-select-option>
|
||||
<ion-select-option value="pizza">Pizza</ion-select-option>
|
||||
<ion-select-option value="tacos">Tacos</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Date</ion-label>
|
||||
<ion-select aria-label="Month" placeholder="Month" value="03" interface="popover">
|
||||
<ion-select-option value="01">January</ion-select-option>
|
||||
<ion-select-option value="02">February</ion-select-option>
|
||||
<ion-select-option value="03">March</ion-select-option>
|
||||
<ion-select-option value="04">April</ion-select-option>
|
||||
<ion-select-option value="05">May</ion-select-option>
|
||||
<ion-select-option value="06">June</ion-select-option>
|
||||
<ion-select-option value="07">July</ion-select-option>
|
||||
<ion-select-option value="08">August</ion-select-option>
|
||||
<ion-select-option value="09">September</ion-select-option>
|
||||
<ion-select-option value="10">October</ion-select-option>
|
||||
<ion-select-option value="11">November</ion-select-option>
|
||||
<ion-select-option value="12">December</ion-select-option>
|
||||
</ion-select>
|
||||
<ion-select aria-label="Year" placeholder="Year" value="94" interface="popover">
|
||||
<ion-select-option value="89">1989</ion-select-option>
|
||||
<ion-select-option value="90">1990</ion-select-option>
|
||||
<ion-select-option value="91">1991</ion-select-option>
|
||||
<ion-select-option value="92">1992</ion-select-option>
|
||||
<ion-select-option value="93">1993</ion-select-option>
|
||||
<ion-select-option value="94">1994</ion-select-option>
|
||||
<ion-select-option value="95">1995</ion-select-option>
|
||||
<ion-select-option value="96">1996</ion-select-option>
|
||||
<ion-select-option value="97">1997</ion-select-option>
|
||||
<ion-select-option value="98">1998</ion-select-option>
|
||||
<ion-select-option value="99">1999</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-select label="Numbers" interface="popover" id="numberPopover">
|
||||
<ion-select-option>0</ion-select-option>
|
||||
<ion-select-option>1</ion-select-option>
|
||||
<ion-select-option>2</ion-select-option>
|
||||
<ion-select-option>3</ion-select-option>
|
||||
<ion-select-option>4</ion-select-option>
|
||||
<ion-select-option>5</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
|
||||
<ion-list>
|
||||
<ion-list-header>
|
||||
<ion-label> Action Sheet Interface Select </ion-label>
|
||||
</ion-list-header>
|
||||
|
||||
<ion-item>
|
||||
<ion-select label="Mute Notifications" name="notifications" interface="action-sheet">
|
||||
<ion-select-option value="mute_15">For 15 Minutes</ion-select-option>
|
||||
<ion-select-option value="mute_1">For 1 Hour</ion-select-option>
|
||||
<ion-select-option value="mute_23">For 24 Hours</ion-select-option>
|
||||
<ion-select-option value="mute_inf">Until I turn it back on</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-select label="Rating" name="rating" interface="action-sheet">
|
||||
<ion-select-option value="1">1 Star</ion-select-option>
|
||||
<ion-select-option value="2">2 Stars</ion-select-option>
|
||||
<ion-select-option value="3">3 Stars</ion-select-option>
|
||||
<ion-select-option value="4">4 Stars</ion-select-option>
|
||||
<ion-select-option value="5">5 Stars</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
|
||||
<ion-list>
|
||||
<ion-list-header>
|
||||
<ion-label> Multiple Value Select </ion-label>
|
||||
</ion-list-header>
|
||||
|
||||
<ion-item>
|
||||
<ion-select label="Toppings" name="toppings" multiple="true" cancel-text="Nah" ok-text="Okay!">
|
||||
<ion-select-option value="pepperoni">Pepperoni</ion-select-option>
|
||||
<ion-select-option value="bacon">Bacon</ion-select-option>
|
||||
<ion-select-option value="olives">Black Olives</ion-select-option>
|
||||
<ion-select-option value="xcheese">Extra Cheese</ion-select-option>
|
||||
<ion-select-option value="peppers">Green Peppers</ion-select-option>
|
||||
<ion-select-option value="mushrooms">Mushrooms</ion-select-option>
|
||||
<ion-select-option value="onions">Onions</ion-select-option>
|
||||
<ion-select-option value="pepperoni">Pepperoni</ion-select-option>
|
||||
<ion-select-option value="pineapple">Pineapple</ion-select-option>
|
||||
<ion-select-option value="sausage">Sausage</ion-select-option>
|
||||
<ion-select-option value="Spinach">Spinach</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-select label="Pets" id="pets" name="pets" multiple="true">
|
||||
<ion-select-option value="bird">Bird</ion-select-option>
|
||||
<ion-select-option value="cat">Cat</ion-select-option>
|
||||
<ion-select-option value="dog">Dog</ion-select-option>
|
||||
<ion-select-option value="honeybadger">Honey Badger</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-select label="Numbers" id="numberSelect" multiple interface="popover">
|
||||
<ion-select-option>0</ion-select-option>
|
||||
<ion-select-option>1</ion-select-option>
|
||||
<ion-select-option>2</ion-select-option>
|
||||
<ion-select-option>3</ion-select-option>
|
||||
<ion-select-option>4</ion-select-option>
|
||||
<ion-select-option>5</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-select label="Toppings" multiple interface="popover">
|
||||
<ion-select-option>Extra cheese</ion-select-option>
|
||||
<ion-select-option>Mushroom</ion-select-option>
|
||||
<ion-select-option>Onion</ion-select-option>
|
||||
<ion-select-option>Pepperoni</ion-select-option>
|
||||
<ion-select-option>Sausage</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-select label="Disabled" multiple value="text" disabled="true">
|
||||
<ion-select-option value="text">Selected Text</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-select label="Stacked" label-placement="stacked">
|
||||
<ion-select-option>Default</ion-select-option>
|
||||
<ion-select-option>Other</ion-select-option>
|
||||
<ion-select-option>N/A</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-select label="Stacked: selected" label-placement="stacked" value="other">
|
||||
<ion-select-option value="default">Default</ion-select-option>
|
||||
<ion-select-option value="other">Other</ion-select-option>
|
||||
<ion-select-option value="na">N/A</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-select label="Floating" label-placement="floating">
|
||||
<ion-select-option>Default</ion-select-option>
|
||||
<ion-select-option>Other</ion-select-option>
|
||||
<ion-select-option>N/A</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-select label="Floating: selected" label-placement="floating" value="default">
|
||||
<ion-select-option value="default">Default</ion-select-option>
|
||||
<ion-select-option value="other">Other</ion-select-option>
|
||||
<ion-select-option value="na">N/A</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
|
||||
<div class="ion-text-center">
|
||||
<ion-button onclick="toggleBoolean('dynamicDisabled', 'disabled')"> Toggle Disabled </ion-button>
|
||||
</div>
|
||||
</ion-content>
|
||||
|
||||
<style>
|
||||
.outer-content {
|
||||
--background: #f2f2f2;
|
||||
}
|
||||
.custom-select {
|
||||
--placeholder-opacity: 0.5;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
let objectOptions = [
|
||||
{
|
||||
id: 1,
|
||||
first: 'Alice',
|
||||
last: 'Smith',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
first: 'Bob',
|
||||
last: 'Davis',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
first: 'Charlie',
|
||||
last: 'Rosenburg',
|
||||
},
|
||||
];
|
||||
|
||||
let compareWithFn = (o1, o2) => {
|
||||
return o1 && o2 ? o1.id === o2.id : o1 === o2;
|
||||
};
|
||||
|
||||
let objectSelectElement = document.getElementById('objectSelectCompareWith');
|
||||
objectSelectElement.compareWith = compareWithFn; // 'id';
|
||||
|
||||
objectOptions.forEach((option, i) => {
|
||||
let selectOption = document.createElement('ion-select-option');
|
||||
selectOption.value = option;
|
||||
selectOption.textContent = option.first + ' ' + option.last;
|
||||
|
||||
objectSelectElement.appendChild(selectOption);
|
||||
});
|
||||
|
||||
objectSelectElement.value = {
|
||||
id: 1,
|
||||
first: 'Alice',
|
||||
last: 'Smith',
|
||||
};
|
||||
|
||||
setTimeout(() => {
|
||||
objectSelectElement.value = {
|
||||
id: 1,
|
||||
first: 'Alice',
|
||||
last: 'Smith',
|
||||
};
|
||||
}, 3000);
|
||||
|
||||
var pets = document.getElementById('pets');
|
||||
pets.value = ['bird', 'dog'];
|
||||
|
||||
const numberSelect = document.getElementById('numberSelect');
|
||||
|
||||
numberSelect.addEventListener('ionChange', (event) => {
|
||||
console.log(event.detail, event.detail.value);
|
||||
});
|
||||
|
||||
const options = numberSelect.getElementsByTagName('ion-select-option');
|
||||
Array.from(options).forEach((option, index) => {
|
||||
option.value = index;
|
||||
});
|
||||
|
||||
const numberPopoverOptions = document.querySelectorAll('#numberPopover ion-select-option');
|
||||
Array.from(numberPopoverOptions).forEach((option, index) => {
|
||||
option.value = index;
|
||||
});
|
||||
|
||||
var customAlertSelect = document.getElementById('customAlertSelect');
|
||||
var customAlertOptions = {
|
||||
header: 'Pizza Toppings',
|
||||
@ -399,13 +152,6 @@
|
||||
message: '$1.50 charge for every topping',
|
||||
};
|
||||
customActionSheetSelect.interfaceOptions = customActionSheetOptions;
|
||||
|
||||
function toggleBoolean(id, prop) {
|
||||
var el = document.getElementById(id);
|
||||
|
||||
var isTrue = el[prop] ? false : true;
|
||||
el[prop] = isTrue;
|
||||
}
|
||||
</script>
|
||||
</ion-app>
|
||||
</body>
|
||||
|
||||
@ -71,9 +71,9 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
|
||||
|
||||
await page.goto('/src/components/select/test/basic', config);
|
||||
|
||||
const select = page.locator('#gender');
|
||||
const select = page.locator('#alert-select');
|
||||
|
||||
await select.evaluate((el: HTMLSelectElement) => {
|
||||
await select.evaluate((el: HTMLIonSelectElement) => {
|
||||
/*
|
||||
* Playwright's click() method attempts to scroll to the handle
|
||||
* to perform the action. That is problematic when the overlay
|
||||
|
||||
@ -64,7 +64,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
|
||||
description: 'https://github.com/ionic-team/ionic-framework/issues/25126',
|
||||
});
|
||||
|
||||
await page.goto('/src/components/select/test/basic', config);
|
||||
await page.goto('/src/components/select/test/legacy/basic', config);
|
||||
|
||||
const select = page.locator('#gender');
|
||||
|
||||
|
||||
Reference in New Issue
Block a user