mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-08 15:51:16 +08:00
test(select): add single-value test and update existing tests
this adds custom interface options to the basic test
This commit is contained in:
Brandy Carney
@ -38,45 +38,55 @@
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Gaming</ion-label>
|
||||
<ion-select name="gaming" ok-text="Okay" cancel-text="Dismiss">
|
||||
<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-label>Skittles</ion-label>
|
||||
<ion-select id="customSelect" 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>
|
||||
</ion-item>
|
||||
|
||||
</ion-list>
|
||||
|
||||
<ion-list>
|
||||
<ion-list-header>Select - Custom Interface Options</ion-list-header>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Alert</ion-label>
|
||||
<ion-select id="customAlertSelect" interface="alert" multiple="true" placeholder="Select One">
|
||||
<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-label>Date</ion-label>
|
||||
<ion-select placeholder="Month">
|
||||
<ion-select-option value="01">January</ion-select-option>
|
||||
<ion-select-option value="02">February</ion-select-option>
|
||||
<ion-select-option value="03" selected="true">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-label>Popover</ion-label>
|
||||
<ion-select 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>
|
||||
<ion-select placeholder="Year">
|
||||
<ion-select-option>1989</ion-select-option>
|
||||
<ion-select-option>1990</ion-select-option>
|
||||
<ion-select-option>1991</ion-select-option>
|
||||
<ion-select-option>1992</ion-select-option>
|
||||
<ion-select-option>1993</ion-select-option>
|
||||
<ion-select-option selected="true">1994</ion-select-option>
|
||||
<ion-select-option>1995</ion-select-option>
|
||||
<ion-select-option>1996</ion-select-option>
|
||||
<ion-select-option>1997</ion-select-option>
|
||||
<ion-select-option>1998</ion-select-option>
|
||||
<ion-select-option>1999</ion-select-option>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Action Sheet</ion-label>
|
||||
<ion-select id="customActionSheetSelect" 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>
|
||||
|
||||
@ -194,17 +204,6 @@
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Skittles</ion-label>
|
||||
<ion-select name="skittles" multiple="true" ok-text="Okay" cancel-text="Dismiss">
|
||||
<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-item>
|
||||
<ion-label>Disabled</ion-label>
|
||||
<ion-select multiple disabled="true">
|
||||
@ -227,6 +226,31 @@
|
||||
var pets = document.getElementById('pets');
|
||||
pets.value = ['bird', 'dog'];
|
||||
|
||||
var customAlertSelect = document.getElementById('customAlertSelect');
|
||||
var customAlertOptions = {
|
||||
title: 'Pizza Toppings',
|
||||
subTitle: 'Select your toppings',
|
||||
message: '$1.00 per topping',
|
||||
translucent: true
|
||||
};
|
||||
customAlertSelect.interfaceOptions = customAlertOptions;
|
||||
|
||||
var customPopoverSelect = document.getElementById('customPopoverSelect');
|
||||
var customPopoverOptions = {
|
||||
title: 'Pizza Toppings',
|
||||
subTitle: 'Select your toppings',
|
||||
message: '$1.50 charge for every topping'
|
||||
};
|
||||
customPopoverSelect.interfaceOptions = customAlertOptions;
|
||||
|
||||
var customActionSheetSelect = document.getElementById('customActionSheetSelect');
|
||||
var customActionSheetOptions = {
|
||||
title: 'Pizza Toppings',
|
||||
subTitle: 'Select your toppings',
|
||||
message: '$1.50 charge for every topping'
|
||||
};
|
||||
customActionSheetSelect.interfaceOptions = customAlertOptions;
|
||||
|
||||
function toggleBoolean(id, prop) {
|
||||
var el = document.getElementById(id);
|
||||
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
<ion-page>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Select - Multiple Value</ion-title>
|
||||
<ion-title>Select Item: Multiple Value</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
@ -66,7 +66,7 @@
|
||||
<ion-label>Statuses</ion-label>
|
||||
<ion-select id="status" multiple>
|
||||
<ion-select-option value="selected" selected="true">Selected</ion-select-option>
|
||||
<ion-select-option value="default" selected>Default</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>
|
||||
|
||||
27
packages/core/src/components/select/test/single-value/e2e.js
Normal file
27
packages/core/src/components/select/test/single-value/e2e.js
Normal file
@ -0,0 +1,27 @@
|
||||
|
||||
'use strict';
|
||||
|
||||
const { By, until } = require('selenium-webdriver');
|
||||
const { register, Page, platforms } = require('../../../../../scripts/e2e');
|
||||
|
||||
class E2ETestPage extends Page {
|
||||
constructor(driver, platform) {
|
||||
super(driver, `http://localhost:3333/src/components/select/test/single-value?ionicplatform=${platform}`);
|
||||
}
|
||||
|
||||
present(buttonId) {
|
||||
this.navigate();
|
||||
this.driver.findElement(By.id(buttonId)).click();
|
||||
this.driver.wait(until.elementLocated(By.css('.select-wrapper')));
|
||||
return this.driver.wait(until.elementIsVisible(this.driver.findElement(By.css('.select-wrapper'))));
|
||||
}
|
||||
}
|
||||
|
||||
platforms.forEach(platform => {
|
||||
describe('select/single-value', () => {
|
||||
register('should init', driver => {
|
||||
const page = new E2ETestPage(driver, platform);
|
||||
return page.navigate();
|
||||
});
|
||||
});
|
||||
});
|
||||
201
packages/core/src/components/select/test/single-value/index.html
Normal file
201
packages/core/src/components/select/test/single-value/index.html
Normal file
@ -0,0 +1,201 @@
|
||||
<!DOCTYPE html>
|
||||
<html dir="ltr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Select - Single Value</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<script src="/dist/ionic.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<ion-app>
|
||||
<ion-page>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Select Item: Single Value</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content class="outer-content">
|
||||
<ion-list>
|
||||
<ion-item>
|
||||
<ion-label stacked>Gender</ion-label>
|
||||
<ion-select>
|
||||
<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>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 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>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>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>Currency</ion-label>
|
||||
<ion-select id="currency">
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
|
||||
<ion-button>Reset Gender</ion-button>
|
||||
</ion-content>
|
||||
</ion-page>
|
||||
|
||||
<script>
|
||||
var os = document.getElementById('os');
|
||||
os.value = 'win3.1';
|
||||
|
||||
var month = document.getElementById('month');
|
||||
month.value = '12';
|
||||
|
||||
var year = document.getElementById('year');
|
||||
|
||||
var years = [1989, 1990, 1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999];
|
||||
|
||||
for (var i = 0; i < years.length; i++) {
|
||||
var option = document.createElement('ion-select-option');
|
||||
option.value = option.innerHTML = years[i];
|
||||
|
||||
year.appendChild(option);
|
||||
}
|
||||
year.value = 1994;
|
||||
|
||||
var currencies = [
|
||||
{
|
||||
symbol: '$',
|
||||
code: 'USD',
|
||||
name: 'US Dollar'
|
||||
},
|
||||
{
|
||||
symbol: '€',
|
||||
code: 'EUR',
|
||||
name: 'Euro'
|
||||
},
|
||||
{
|
||||
symbol: '£',
|
||||
code: 'FKP',
|
||||
name: 'Falkland Islands Pound'
|
||||
},
|
||||
{
|
||||
symbol: '¢',
|
||||
code: 'GHS',
|
||||
name: 'Ghana Cedi'
|
||||
}
|
||||
];
|
||||
var currency = document.getElementById('currency');
|
||||
|
||||
for (var i = 0; i < currency.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}`;
|
||||
|
||||
currency.appendChild(option);
|
||||
}
|
||||
currency.value = currencies[0];
|
||||
</script>
|
||||
</ion-app>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user