Skip to content

Commit

Permalink
Use html5 oninput instead of onkeyup for native textual inputs
Browse files Browse the repository at this point in the history
This enables people to enter things using the mouse to paste for
example, plus possible other things.

As an aside it also answers my query regarding `fillIn` for testing,
nothing needs to be actually _typed_ anymore! Doh
  • Loading branch information
John Cowen committed Jul 3, 2018
1 parent aa067c0 commit b445df3
Show file tree
Hide file tree
Showing 13 changed files with 48 additions and 15 deletions.
2 changes: 1 addition & 1 deletion ui-v2/app/templates/components/freetext-filter.hbs
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{{!<fieldset>}}
<label class="type-search">
<span>Search</span>
<input type="search" onsearch={{action onchange}} onkeyup={{action onchange}} name="s" value="{{value}}" placeholder="{{placeholder}}" autofocus="autofocus" />
<input type="search" onsearch={{action onchange}} oninput={{action onchange}} name="s" value="{{value}}" placeholder="{{placeholder}}" autofocus="autofocus" />
</label>
{{!</fieldset>}}
6 changes: 3 additions & 3 deletions ui-v2/app/templates/dc/kv/-form.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -3,22 +3,22 @@
{{#if create }}
<label class="type-text{{if item.error.Key ' has-error'}}">
<span>Key or folder</span>
<input autofocus="autofocus" type="text" value={{left-trim item.Key parent.Key}} name="additional" onkeyup={{action 'change'}} placeholder="Key or folder" />
<input autofocus="autofocus" type="text" value={{left-trim item.Key parent.Key}} name="additional" oninput={{action 'change'}} placeholder="Key or folder" />
<em>To create a folder, end a key with <code>/</code></em>
</label>
{{/if}}
{{#if (or (eq (left-trim item.Key parent.Key) '') (not-eq (last item.Key) '/')) }}
<div>
<label class="type-toggle">
<input type="checkbox" name="json" checked={{if json 'checked' }} onchange={{action 'change'}} />
<input type="checkbox" name="json" checked={{if json 'checked' }} oninput={{action 'change'}} />
<span>Code</span>
</label>
<label class="type-text{{if item.error.Value ' has-error'}}">
<span>Value</span>
{{#if json}}
{{ code-editor value=(atob item.Value) onkeyup=(action 'change') }}
{{else}}
<textarea autofocus={{not create}} name="value" onkeyup={{action 'change'}}>{{atob item.Value}}</textarea>
<textarea autofocus={{not create}} name="value" oninput={{action 'change'}}>{{atob item.Value}}</textarea>
{{/if}}
</label>
</div>
Expand Down
4 changes: 2 additions & 2 deletions ui-v2/tests/acceptance/components/acl-filter.feature
Original file line number Diff line number Diff line change
Expand Up @@ -25,12 +25,12 @@ Feature: dc / components /acl filter: Acl Filter

When I click all on the filter
Then I see allIsSelected on the filter
Then I type with yaml
Then I fill in with yaml
---
s: Anonymous Token
---
And I see 1 [Model] model with the name "Anonymous Token"
Then I type with yaml
Then I fill in with yaml
---
s: secret
---
Expand Down
4 changes: 2 additions & 2 deletions ui-v2/tests/acceptance/components/catalog-filter.feature
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ Feature: components / catalog-filter

When I click all on the filter
And I see allIsSelected on the filter
Then I type with yaml
Then I fill in with yaml
---
s: [Model]-0
---
Expand Down Expand Up @@ -75,7 +75,7 @@ Feature: components / catalog-filter
When I click services on the tabs
And I see servicesIsSelected on the tabs

Then I type with yaml
Then I fill in with yaml
---
s: 65535
---
Expand Down
2 changes: 1 addition & 1 deletion ui-v2/tests/acceptance/components/kv-filter.feature
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ Feature: components / kv-filter
dc: dc-1
---
Then the url should be [Url]
Then I type with yaml
Then I fill in with yaml
---
s: [Text]
---
Expand Down
21 changes: 21 additions & 0 deletions ui-v2/tests/acceptance/components/text-input.feature
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
@setupApplicationTest
Feature: Text input
Background:
Given 1 datacenter model with the value "dc-1"
Scenario:
When I visit the [Page] page for yaml
---
dc: dc-1
---
Then the url should be [Url]
Then I fill in with json
---
[Data]
---
Then I see submitIsEnabled
Where:
--------------------------------------------------------------------------------
| Page | Url | Data |
| kv | /dc-1/kv/create | {"additional": "hi", "value": "there"} |
| acl | /dc-1/acls/create | {"name": "hi"} |
--------------------------------------------------------------------------------
2 changes: 1 addition & 1 deletion ui-v2/tests/acceptance/dc/acls/update.feature
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ Feature: dc / acls / update: ACL Update
acl: key
---
Then the url should be /datacenter/acls/key
Then I type with yaml
Then I fill in with yaml
---
name: [Name]
---
Expand Down
2 changes: 1 addition & 1 deletion ui-v2/tests/acceptance/dc/kvs/update.feature
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ Feature: dc / kvs / update: KV Update
kv: [Name]
---
Then the url should be /datacenter/kv/[Name]/edit
Then I type with yaml
Then I fill in with yaml
---
value: [Value]
---
Expand Down
10 changes: 10 additions & 0 deletions ui-v2/tests/acceptance/steps/components/text-input-steps.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import steps from '../steps';

// step definitions that are shared between features should be moved to the
// tests/acceptance/steps/steps.js file

export default function(assert) {
return steps(assert).then('I should find a file', function() {
assert.ok(true, this.step);
});
}
2 changes: 1 addition & 1 deletion ui-v2/tests/acceptance/token-header.feature
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ Feature: token headers
Given 1 datacenter model with the value "datacenter"
When I visit the settings page
Then the url should be /settings
Then I type with yaml
Then I fill in with yaml
---
token: [Token]
---
Expand Down
3 changes: 2 additions & 1 deletion ui-v2/tests/pages/dc/acls/edit.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { create, clickable, triggerable } from 'ember-cli-page-object';
import { create, clickable, triggerable, is } from 'ember-cli-page-object';
import { visitable } from 'consul-ui/tests/lib/page-object/visitable';

export default create({
Expand All @@ -7,4 +7,5 @@ export default create({
// fillIn: fillable('input, textarea, [contenteditable]'),
name: triggerable('keypress', '[name="name"]'),
submit: clickable('[type=submit]'),
submitIsEnabled: is(':not(:disabled)', '[type=submit]'),
});
3 changes: 2 additions & 1 deletion ui-v2/tests/pages/dc/kv/edit.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { create, clickable } from 'ember-cli-page-object';
import { create, clickable, is } from 'ember-cli-page-object';
import { visitable } from 'consul-ui/tests/lib/page-object/visitable';

export default create({
Expand All @@ -7,4 +7,5 @@ export default create({
// fillIn: fillable('input, textarea, [contenteditable]'),
// name: triggerable('keypress', '[name="additional"]'),
submit: clickable('[type=submit]'),
submitIsEnabled: is(':not(:disabled)', '[type=submit]'),
});
2 changes: 1 addition & 1 deletion ui-v2/tests/steps.js
Original file line number Diff line number Diff line change
Expand Up @@ -335,7 +335,7 @@ export default function(assert) {
`Expected to not see ${property} on ${component}`
);
})
.then(['I see $property'], function(property, component) {
.then(['I see $property'], function(property) {
assert.ok(currentPage[property], `Expected to see ${property}`);
})
.then(['I see the text "$text" in "$selector"'], function(text, selector) {
Expand Down

0 comments on commit b445df3

Please sign in to comment.