From 09143b07d0b1d8d708a71015b34946b194297ccf Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Wed, 27 Dec 2017 13:07:45 -0500
Subject: [PATCH] test(select): update test to work properly with an object as
 value

also updates to match e2e tests more
---
 .../select/test/multiple-value/index.html     |   8 +-
 .../select/test/single-value/index.html       | 281 +++++++++++-------
 2 files changed, 170 insertions(+), 119 deletions(-)

diff --git a/packages/core/src/components/select/test/multiple-value/index.html b/packages/core/src/components/select/test/multiple-value/index.html
index 55e7e683e2..d21ceafed4 100644
--- a/packages/core/src/components/select/test/multiple-value/index.html
+++ b/packages/core/src/components/select/test/multiple-value/index.html
@@ -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;
           }
diff --git a/packages/core/src/components/select/test/single-value/index.html b/packages/core/src/components/select/test/single-value/index.html
index cfb7da4e90..d78ea676bc 100644
--- a/packages/core/src/components/select/test/single-value/index.html
+++ b/packages/core/src/components/select/test/single-value/index.html
@@ -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>