mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
test(select): update test to work properly with an object as value
also updates to match e2e tests more
This commit is contained in:
Brandy Carney
@@ -72,9 +72,9 @@
|
||||
</ion-item>
|
||||
|
||||
<p aria-hidden="true" padding>
|
||||
<code>toppings: <span id="toppingsResults"></span></code><br>
|
||||
<code>carFeatures: <span id="carFeaturesResults"></span></code><br>
|
||||
<code>pets: <span id="petsResults"></span></code><br>
|
||||
<code>toppings: <span id="toppingsResult"></span></code><br>
|
||||
<code>carFeatures: <span id="carFeaturesResult"></span></code><br>
|
||||
<code>pets: <span id="petsResult"></span></code><br>
|
||||
</p>
|
||||
|
||||
<form>
|
||||
@@ -138,7 +138,7 @@
|
||||
|
||||
function setResults(select) {
|
||||
if (select.id) {
|
||||
var resultsEl = document.getElementById(select.id + 'Results');
|
||||
var resultsEl = document.getElementById(select.id + 'Result');
|
||||
if (resultsEl) {
|
||||
resultsEl.innerHTML = select.value;
|
||||
}
|
||||
|
||||
@@ -16,136 +16,172 @@
|
||||
</ion-header>
|
||||
|
||||
<ion-content class="outer-content">
|
||||
<ion-list>
|
||||
<ion-item>
|
||||
<ion-label stacked>Gender</ion-label>
|
||||
<ion-select id="gender">
|
||||
<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-label stacked>Gender</ion-label>
|
||||
<ion-select id="gender">
|
||||
<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-label>Popover</ion-label>
|
||||
<ion-select interface="popover">
|
||||
<ion-select-option value="select">Select</ion-select-option>
|
||||
<ion-select-option value="action">Action Sheet</ion-select-option>
|
||||
<ion-select-option value="popover">Popover</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Popover</ion-label>
|
||||
<ion-select interface="popover">
|
||||
<ion-select-option value="select">Select</ion-select-option>
|
||||
<ion-select-option value="action">Action Sheet</ion-select-option>
|
||||
<ion-select-option value="popover">Popover</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Gaming</ion-label>
|
||||
<ion-select>
|
||||
<ion-select-option value="nes">NES</ion-select-option>
|
||||
<ion-select-option value="n64">Nintendo64</ion-select-option>
|
||||
<ion-select-option value="ps">PlayStation</ion-select-option>
|
||||
<ion-select-option value="genesis">Sega Genesis</ion-select-option>
|
||||
<ion-select-option value="saturn">Sega Saturn</ion-select-option>
|
||||
<ion-select-option value="snes">SNES</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Gaming</ion-label>
|
||||
<ion-select id="gaming">
|
||||
<ion-select-option value="nes">NES</ion-select-option>
|
||||
<ion-select-option value="n64">Nintendo64</ion-select-option>
|
||||
<ion-select-option value="ps">PlayStation</ion-select-option>
|
||||
<ion-select-option value="genesis">Sega Genesis</ion-select-option>
|
||||
<ion-select-option value="saturn">Sega Saturn</ion-select-option>
|
||||
<ion-select-option value="snes">SNES</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label floating>Operating System</ion-label>
|
||||
<ion-select id="os">
|
||||
<ion-select-option value="dos">DOS</ion-select-option>
|
||||
<ion-select-option value="lunix">Linux</ion-select-option>
|
||||
<ion-select-option value="mac7">Mac OS 7</ion-select-option>
|
||||
<ion-select-option value="mac8">Mac OS 8</ion-select-option>
|
||||
<ion-select-option value="win3.1">Windows 3.1</ion-select-option>
|
||||
<ion-select-option value="win95">Windows 95</ion-select-option>
|
||||
<ion-select-option value="win98">Windows 98</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label floating>Operating System</ion-label>
|
||||
<ion-select id="os">
|
||||
<ion-select-option value="dos">DOS</ion-select-option>
|
||||
<ion-select-option value="lunix">Linux</ion-select-option>
|
||||
<ion-select-option value="mac7">Mac OS 7</ion-select-option>
|
||||
<ion-select-option value="mac8">Mac OS 8</ion-select-option>
|
||||
<ion-select-option value="win3.1">Windows 3.1</ion-select-option>
|
||||
<ion-select-option value="win95">Windows 95</ion-select-option>
|
||||
<ion-select-option value="win98">Windows 98</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Notifications</ion-label>
|
||||
<ion-select>
|
||||
<ion-select-option value="enable">Enable</ion-select-option>
|
||||
<ion-select-option value="mute">Mute</ion-select-option>
|
||||
<ion-select-option value="mute_week">Mute for a week</ion-select-option>
|
||||
<ion-select-option value="mute_year" (ionSelect)="notificationSelect($event)">Mute for a year</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Notifications</ion-label>
|
||||
<ion-select id="notifications">
|
||||
<ion-select-option value="enable">Enable</ion-select-option>
|
||||
<ion-select-option value="mute">Mute</ion-select-option>
|
||||
<ion-select-option value="mute_week">Mute for a week</ion-select-option>
|
||||
<ion-select-option value="mute_year" (ionSelect)="notificationSelect($event)">Mute for a year</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Edit</ion-label>
|
||||
<ion-select>
|
||||
<ion-select-option value="add_reaction">Add Reaction</ion-select-option>
|
||||
<ion-select-option value="copy_text">Copy Text</ion-select-option>
|
||||
<ion-select-option value="share_text">Share Text</ion-select-option>
|
||||
<ion-select-option value="copy_link">Copy Link to Message</ion-select-option>
|
||||
<ion-select-option value="remind_me">Remind Me</ion-select-option>
|
||||
<ion-select-option value="pin_file">Pin File</ion-select-option>
|
||||
<ion-select-option value="star_file">Star File</ion-select-option>
|
||||
<ion-select-option value="mark_unread">Mark Unread</ion-select-option>
|
||||
<ion-select-option value="edit_title">Edit Title</ion-select-option>
|
||||
<ion-select-option value="save_image">Save Image</ion-select-option>
|
||||
<ion-select-option value="copy_image">Copy Image</ion-select-option>
|
||||
<ion-select-option value="delete_file">Delete File</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Edit</ion-label>
|
||||
<ion-select>
|
||||
<ion-select-option value="add_reaction">Add Reaction</ion-select-option>
|
||||
<ion-select-option value="copy_text">Copy Text</ion-select-option>
|
||||
<ion-select-option value="share_text">Share Text</ion-select-option>
|
||||
<ion-select-option value="copy_link">Copy Link to Message</ion-select-option>
|
||||
<ion-select-option value="remind_me">Remind Me</ion-select-option>
|
||||
<ion-select-option value="pin_file">Pin File</ion-select-option>
|
||||
<ion-select-option value="star_file">Star File</ion-select-option>
|
||||
<ion-select-option value="mark_unread">Mark Unread</ion-select-option>
|
||||
<ion-select-option value="edit_title">Edit Title</ion-select-option>
|
||||
<ion-select-option value="save_image">Save Image</ion-select-option>
|
||||
<ion-select-option value="copy_image">Copy Image</ion-select-option>
|
||||
<ion-select-option value="delete_file">Delete File</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Music</ion-label>
|
||||
<ion-select placeholder="Select Music">
|
||||
<ion-select-option>Alice in Chains</ion-select-option>
|
||||
<ion-select-option>Green Day</ion-select-option>
|
||||
<ion-select-option>Nirvana</ion-select-option>
|
||||
<ion-select-option>Pearl Jam</ion-select-option>
|
||||
<ion-select-option>Smashing Pumpkins</ion-select-option>
|
||||
<ion-select-option>Soundgarden</ion-select-option>
|
||||
<ion-select-option (ionSelect)="musicSelect($event)">Stone Temple Pilots</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Music</ion-label>
|
||||
<ion-select id="music" placeholder="Select Music">
|
||||
<ion-select-option>Alice in Chains</ion-select-option>
|
||||
<ion-select-option>Green Day</ion-select-option>
|
||||
<ion-select-option>Nirvana</ion-select-option>
|
||||
<ion-select-option>Pearl Jam</ion-select-option>
|
||||
<ion-select-option>Smashing Pumpkins</ion-select-option>
|
||||
<ion-select-option>Soundgarden</ion-select-option>
|
||||
<ion-select-option (ionSelect)="musicSelect($event)">Stone Temple Pilots</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Date</ion-label>
|
||||
<ion-select id="month">
|
||||
<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 id="year">
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Date</ion-label>
|
||||
<ion-select id="month">
|
||||
<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 id="year">
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Statuses</ion-label>
|
||||
<ion-select>
|
||||
<ion-select-option value="selected" selected>Selected</ion-select-option>
|
||||
<ion-select-option value="default">Default</ion-select-option>
|
||||
<ion-select-option value="disabled" disabled="true">Disabled</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Statuses</ion-label>
|
||||
<ion-select id="status">
|
||||
<ion-select-option value="selected" selected>Selected</ion-select-option>
|
||||
<ion-select-option value="default">Default</ion-select-option>
|
||||
<ion-select-option value="disabled" disabled="true">Disabled</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Currency</ion-label>
|
||||
<ion-select id="currency">
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
<ion-item>
|
||||
<ion-label>Currency</ion-label>
|
||||
<ion-select id="currency">
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
|
||||
<ion-button>Reset Gender</ion-button>
|
||||
<ion-button onclick="resetGender()">Reset Gender</ion-button>
|
||||
|
||||
<p aria-hidden="true" padding>
|
||||
<code>gender: <span id="genderResult"></span></code>
|
||||
<br>
|
||||
<code>gaming: <span id="gamingResult"></span></code>
|
||||
<br>
|
||||
<code>os: <span id="osResult"></span></code>
|
||||
<br>
|
||||
<code>notifications: <span id="notificationsResult"></span></code>
|
||||
<br>
|
||||
<code>music: <span id="musicResult"></span></code>
|
||||
<br>
|
||||
<code>date: <span id="monthResult"></span>/<span id="yearResult"></span></code>
|
||||
<br>
|
||||
<code>status: <span id="statusResult"></span></code>
|
||||
<br>
|
||||
<code>currency: <span id="currencyResult"></span></code>
|
||||
<br>
|
||||
</p>
|
||||
</ion-content>
|
||||
</ion-page>
|
||||
|
||||
<script>
|
||||
let selects = document.querySelectorAll('ion-select');
|
||||
selects.forEach(function(select) {
|
||||
select.addEventListener("ionChange", function() {
|
||||
setResults(select);
|
||||
});
|
||||
});
|
||||
|
||||
function setResults(select) {
|
||||
if (select.id) {
|
||||
var resultsEl = document.getElementById(select.id + 'Result');
|
||||
if (resultsEl) {
|
||||
var value = typeof select.value === 'object' ? JSON.stringify(select.value) : select.value;
|
||||
resultsEl.innerHTML = value;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var os = document.getElementById('os');
|
||||
os.value = 'win3.1';
|
||||
setResults(os);
|
||||
|
||||
var month = document.getElementById('month');
|
||||
month.value = '12';
|
||||
setResults(month);
|
||||
|
||||
var year = document.getElementById('year');
|
||||
|
||||
@@ -158,6 +194,7 @@
|
||||
year.appendChild(option);
|
||||
}
|
||||
year.value = 1994;
|
||||
setResults(year);
|
||||
|
||||
var currencies = [
|
||||
{
|
||||
@@ -183,15 +220,29 @@
|
||||
];
|
||||
var currency = document.getElementById('currency');
|
||||
|
||||
for (var i = 0; i < currency.length; i++) {
|
||||
for (var i = 0; i < currencies.length; i++) {
|
||||
var option = document.createElement('ion-select-option');
|
||||
option.value = currency[i];
|
||||
console.log('value is', option.value);
|
||||
option.innerHTML = `${currency[i].symbol} ${currency[i].code} ${currency[i].name}`;
|
||||
option.value = currencies[i];
|
||||
option.innerHTML = `${currencies[i].symbol} (${currencies[i].code}) ${currencies[i].name}`;
|
||||
|
||||
currency.appendChild(option);
|
||||
}
|
||||
currency.value = currencies[0];
|
||||
currency.selectedText = getCurrencySelectedText();
|
||||
setResults(currency);
|
||||
|
||||
currency.addEventListener('ionChange', function(ev) {
|
||||
currency.selectedText = getCurrencySelectedText();
|
||||
});
|
||||
|
||||
function getCurrencySelectedText() {
|
||||
return currency.value.symbol;
|
||||
}
|
||||
|
||||
function resetGender() {
|
||||
var gender = document.getElementById('gender');
|
||||
gender.value = null;
|
||||
}
|
||||
</script>
|
||||
</ion-app>
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user