From 74bf588e7744f1a0adda116e0a2c83245cce6a7b Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Tue, 6 Feb 2018 10:17:13 -0500
Subject: [PATCH] test(input): add attributes e2e test

---
 .../input/test/attributes/index.html          | 171 ++++++++++++++++++
 1 file changed, 171 insertions(+)
 create mode 100644 packages/core/src/components/input/test/attributes/index.html
diff --git a/packages/core/src/components/input/test/attributes/index.html b/packages/core/src/components/input/test/attributes/index.html
new file mode 100644
index 0000000000..cde5e224ad
--- /dev/null
+++ b/packages/core/src/components/input/test/attributes/index.html
@@ -0,0 +1,171 @@
+<!DOCTYPE html>
+<html dir="ltr">
+<head>
+  <meta charset="UTF-8">
+  <title>Input - Attributes</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>Input - Attributes</ion-title>
+          <ion-buttons slot="end">
+            <ion-button>
+              <ion-icon slot="icon-only" name="menu"></ion-icon>
+            </ion-button>
+          </ion-buttons>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content>
+        <ion-list>
+          <ion-label id="itemless">My Label</ion-label>
+          <ion-input aria-labelledby="itemless"></ion-input>
+
+          <ion-item>
+            <ion-label stacked>Number</ion-label>
+            <ion-input
+              id="input1"
+              type="number"
+              placeholder="Placeholder"
+              value="1234"
+              name="holaa"
+              min="0"
+              max="10000"
+              step="2"
+              autocomplete="on"
+              autocorrect="on"
+              autocapitalize="on"
+              spellcheck="true"
+              maxlength="4"
+              disabled
+              readonly
+            ></ion-input>
+          </ion-item>
+
+          <ion-item id="custom">
+            <ion-label stacked>Text</ion-label>
+            <ion-input
+              id="input2"
+              type="text"
+              placeholder="my placeholder"
+              value="test"
+            ></ion-input>
+          </ion-item>
+
+          <ion-item>
+            <ion-label id="myLabel" stacked>Default</ion-label>
+            <ion-input
+              id="input3"
+              value="inputs"
+              ></ion-input>
+          </ion-item>
+
+          <ion-list>
+            <ion-item>
+              Number Test&nbsp;<span id="numberInputResult"></span>
+            </ion-item>
+            <ion-item>
+              Text Test&nbsp;<span id="textInputResult"></span>
+            </ion-item>
+            <ion-item>
+              Default Test&nbsp;<span id="defaultInputResult"></span>
+            </ion-item>
+          </ion-list>
+
+        </ion-list>
+      </ion-content>
+    </ion-page>
+
+    <script>
+      var numberInput = checkInput('input1');
+      updateResult(numberInput, 'numberInputResult');
+
+      var textInput = checkInput('input2');
+      updateResult(textInput, 'textInputResult');
+
+      var defaultInput = checkInput('input3');
+      updateResult(defaultInput, 'defaultInputResult');
+
+      // Update results of input
+      function updateResult(result, resultId) {
+        var resultEl = document.getElementById(resultId);
+        resultEl.innerHTML = result ? 'passed' : 'FAILED';
+
+        var itemEl = resultEl.closest('ion-item');
+        itemEl.color = result ? 'secondary' : 'danger';
+      }
+
+      function checkInput(id) {
+        var el = document.getElementById(id);
+        var inputEl = el.querySelector('input');
+
+        if (id === 'input1') {
+          return testAttributes(el, inputEl, {
+            id: 'input1',
+            type: 'number',
+            placeholder: 'Placeholder',
+            name: 'holaa',
+            min: '0',
+            max: '10000',
+            step: '2',
+            autocomplete: 'on',
+            autocorrect: 'on',
+            autocapitalize: 'on',
+            spellcheck: 'true',
+            maxLength: '4',
+            'aria-labelledby': 'lbl-0',
+            readonly: true,
+            disabled: true
+          });
+        } else if (id === 'input2') {
+          return testAttributes(el, inputEl, {
+            id: 'input2',
+            type: 'text',
+            placeholder: 'my placeholder',
+            value: 'test',
+            readonly: undefined,
+            disabled: undefined
+          });
+        } else if (id === 'input3') {
+          return testAttributes(el, inputEl, {
+            id: 'input3',
+            type: undefined,
+            value: 'inputs',
+            readonly: undefined,
+            disabled: undefined
+          });
+        }
+        return false;
+      }
+
+      function testAttributes(el, inputEl, attributes) {
+        for (let attr in attributes) {
+          const expected = attributes[attr];
+          const value = el[attr];
+
+          if (expected === null) {
+            if (el.hasAttribute(attr) || value !== '') {
+              console.error(`Element should NOT have "${attr}"`);
+              return false;
+            }
+          } else {
+            if (expected !== value && expected !== el.getAttribute(attr)) {
+              console.error(`Value "${attr}" does not match: ${expected} != ${value}`);
+              return false;
+            }
+          }
+        }
+        return true;
+      }
+
+    </script>
+  </ion-app>
+</body>
+</html>
+
+
+
