javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-23 05:58:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

test(input): add attributes e2e test

Browse Source
This commit is contained in:
Brandy Carney
2018-02-06 10:17:13 -05:00
parent efbd82f654
commit 74bf588e77
1 changed files with 171 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

171
packages/core/src/components/input/test/attributes/index.html Normal file
View File

@ -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>