capybara-angular-material 0.0.9 → 0.0.10
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/.gitignore +1 -0
- data/CONTRIBUTING +7 -0
- data/README.md +21 -0
- data/app/js/app.js +57 -6
- data/app/partials/button.html +18 -0
- data/app/partials/checkbox.html +44 -0
- data/app/partials/radio.html +10 -0
- data/app/partials/select.html +20 -0
- data/capybara-angular-material.gemspec +1 -1
- data/index.html +3 -17
- data/lib/capybara/angular/material/rspec.rb +17 -4
- data/package.json +7 -6
- data/spec/features/demos/button_spec.rb +7 -2
- data/spec/features/demos/checkbox_spec.rb +9 -3
- data/spec/features/demos/radio_spec.rb +27 -0
- data/spec/features/demos/select_spec.rb +14 -0
- metadata +8 -3
- data/spec/features/angular_material_spec.rb +0 -7
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: b9ab3aa3628acdc910386639acea589c1bd5a04b
|
4
|
+
data.tar.gz: 36f030f884e82f6176dc80262ec7e87b8b0ab281
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 5adbeb191be30ab9fc9972e932fa0c7e50bb8a5895b378985e13a62243e803c58a49398c8a67740858611c43a0c1025fc58b54ffce749fe4871befecc38ffaa7
|
7
|
+
data.tar.gz: cfc30aa8a18053baa440ca681671fe53d7fab98449869d93c3bc0c4d2c561b13e7d3eda036f0fdf6f53fbbd8b9665235a4f6ffca0997d47dca5a112f26c4d511
|
data/.gitignore
CHANGED
data/CONTRIBUTING
CHANGED
data/README.md
CHANGED
@@ -13,6 +13,8 @@ Add this line to your application's Gemfile:
|
|
13
13
|
|
14
14
|
gem 'capybara-angular-material'
|
15
15
|
|
16
|
+
You'll also need to install Capybara.
|
17
|
+
|
16
18
|
## Usage
|
17
19
|
|
18
20
|
In your spec helper, include the DSL:
|
@@ -40,3 +42,22 @@ have_md_checkbox('Other thing', :checked => true)
|
|
40
42
|
```
|
41
43
|
|
42
44
|
Checked boolean is matched against the `aria-checked` attribute.
|
45
|
+
|
46
|
+
### Buttons
|
47
|
+
|
48
|
+
```
|
49
|
+
have_md_button('Some text')
|
50
|
+
```
|
51
|
+
|
52
|
+
### Radio Button
|
53
|
+
|
54
|
+
```
|
55
|
+
have_md_radio_button('Banana', :checked => true)
|
56
|
+
have_md_radio_button('Banana')
|
57
|
+
```
|
58
|
+
|
59
|
+
### Select
|
60
|
+
|
61
|
+
```
|
62
|
+
have_md_radio_button('Some place holder text')
|
63
|
+
```
|
data/app/js/app.js
CHANGED
@@ -1,9 +1,60 @@
|
|
1
1
|
|
2
|
-
angular.module('app', ['ngMaterial']).
|
3
|
-
$
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
2
|
+
angular.module('app', ['ngMaterial', 'ngRoute']).config(function($routeProvider) {
|
3
|
+
$routeProvider.when('/button', {templateUrl: 'app/partials/button.html', controller: 'buttonCtrl'});
|
4
|
+
$routeProvider.when('/checkbox', {templateUrl: 'app/partials/checkbox.html', controller: 'checkboxCtrl'});
|
5
|
+
$routeProvider.when('/radio', {templateUrl: 'app/partials/radio.html', controller: 'radioCtrl'});
|
6
|
+
$routeProvider.when('/select', {templateUrl: 'app/partials/select.html', controller: 'selectCtrl'});
|
7
|
+
}).controller('appController', function($scope) {
|
8
|
+
}).controller('buttonCtrl', function($scope) {
|
9
|
+
$scope.title1 = 'Button';
|
10
|
+
$scope.title4 = 'Warn';
|
11
|
+
$scope.isDisabled = true;
|
12
|
+
$scope.googleUrl = 'http://google.com';
|
13
|
+
}).controller('checkboxCtrl', function($scope) {
|
14
|
+
$scope.data = {};
|
15
|
+
$scope.data.cb1 = true;
|
16
|
+
$scope.data.cb2 = false;
|
17
|
+
$scope.data.cb3 = false;
|
18
|
+
$scope.data.cb4 = false;
|
19
|
+
$scope.data.cb5 = false;
|
20
|
+
}).controller('radioCtrl', function($scope) {
|
21
|
+
$scope.data = {
|
22
|
+
group1 : 'Banana',
|
23
|
+
group2 : '2',
|
24
|
+
group3 : 'avatar-1'
|
8
25
|
};
|
26
|
+
$scope.avatarData = [{
|
27
|
+
id: "avatars:svg-1",
|
28
|
+
title: 'avatar 1',
|
29
|
+
value: 'avatar-1'
|
30
|
+
},{
|
31
|
+
id: "avatars:svg-2",
|
32
|
+
title: 'avatar 2',
|
33
|
+
value: 'avatar-2'
|
34
|
+
},{
|
35
|
+
id: "avatars:svg-3",
|
36
|
+
title: 'avatar 3',
|
37
|
+
value: 'avatar-3'
|
38
|
+
}];
|
39
|
+
$scope.radioData = [
|
40
|
+
{ label: '1', value: 1 },
|
41
|
+
{ label: '2', value: 2 },
|
42
|
+
{ label: '3', value: '3', isDisabled: true },
|
43
|
+
{ label: '4', value: '4' }
|
44
|
+
];
|
45
|
+
$scope.submit = function() {
|
46
|
+
alert('submit');
|
47
|
+
};
|
48
|
+
$scope.addItem = function() {
|
49
|
+
var r = Math.ceil(Math.random() * 1000);
|
50
|
+
$scope.radioData.push({ label: r, value: r });
|
51
|
+
};
|
52
|
+
$scope.removeItem = function() {
|
53
|
+
$scope.radioData.pop();
|
54
|
+
};
|
55
|
+
}).controller('selectCtrl', function() {
|
56
|
+
this.userState = '';
|
57
|
+
this.states = ('AL AK AZ AR CA CO CT DE FL GA HI ID IL IN IA KS KY LA ME MD MA MI MN MS ' +
|
58
|
+
'MO MT NE NV NH NJ NM NY NC ND OH OK OR PA RI SC SD TN TX UT VT VA WA WV WI ' +
|
59
|
+
'WY').split(' ').map(function (state) { return { abbrev: state }; });
|
9
60
|
});
|
@@ -0,0 +1,18 @@
|
|
1
|
+
<div ng-controller="buttonCtrl">
|
2
|
+
<md-content>
|
3
|
+
<section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
|
4
|
+
<md-button>{{title1}}</md-button>
|
5
|
+
<md-button md-no-ink class="md-primary">Primary (md-noink)</md-button>
|
6
|
+
<md-button ng-disabled="true" class="md-primary">Disabled</md-button>
|
7
|
+
<md-button class="md-warn">{{title4}}</md-button>
|
8
|
+
<div class="label">Flat</div>
|
9
|
+
</section>
|
10
|
+
<section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
|
11
|
+
<md-button class="md-raised">Button</md-button>
|
12
|
+
<md-button class="md-raised md-primary">Primary</md-button>
|
13
|
+
<md-button ng-disabled="true" class="md-raised md-primary">Disabled</md-button>
|
14
|
+
<md-button class="md-raised md-warn">Warn</md-button>
|
15
|
+
<div class="label">Raised</div>
|
16
|
+
</section>
|
17
|
+
</md-content>
|
18
|
+
</div>
|
@@ -0,0 +1,44 @@
|
|
1
|
+
<div ng-controller="checkboxCtrl" class="md-padding">
|
2
|
+
<fieldset class="standard">
|
3
|
+
<legend>Using <code>ng-model</code></legend>
|
4
|
+
<div layout="row" layout-wrap>
|
5
|
+
<div flex="50">
|
6
|
+
<md-checkbox ng-model="data.cb1" aria-label="Checkbox 1">
|
7
|
+
Checkbox 1: {{ data.cb1 }}
|
8
|
+
</md-checkbox>
|
9
|
+
</div>
|
10
|
+
<div flex="50">
|
11
|
+
<md-checkbox
|
12
|
+
ng-model="data.cb2"
|
13
|
+
aria-label="Checkbox 2"
|
14
|
+
ng-true-value="'yup'"
|
15
|
+
ng-false-value="'nope'"
|
16
|
+
class="md-warn md-align-top-left">
|
17
|
+
Checkbox 2 (md-warn) <br/>
|
18
|
+
<span class="ipsum">
|
19
|
+
Duis placerat lectus et justo mollis, nec sodales orci congue. Vestibulum semper non urna ac suscipit.
|
20
|
+
Vestibulum tempor, ligula id laoreet hendrerit, massa augue iaculis magna,
|
21
|
+
sit amet dapibus tortor ligula non nibh.
|
22
|
+
</span>
|
23
|
+
<br/>
|
24
|
+
{{ data.cb2 }}
|
25
|
+
</md-checkbox>
|
26
|
+
</div>
|
27
|
+
<div flex="50">
|
28
|
+
<md-checkbox ng-disabled="true" aria-label="Disabled checkbox" ng-model="data.cb3">
|
29
|
+
Checkbox: Disabled
|
30
|
+
</md-checkbox>
|
31
|
+
</div>
|
32
|
+
<div flex="50">
|
33
|
+
<md-checkbox ng-disabled="true" aria-label="Disabled checked checkbox" ng-model="data.cb4" ng-init="data.cb4=true">
|
34
|
+
Checkbox: Disabled, Checked
|
35
|
+
</md-checkbox>
|
36
|
+
</div>
|
37
|
+
<div flex="50">
|
38
|
+
<md-checkbox md-no-ink aria-label="Checkbox No Ink" ng-model="data.cb5" class="md-primary">
|
39
|
+
Checkbox (md-primary): No Ink
|
40
|
+
</md-checkbox>
|
41
|
+
</div>
|
42
|
+
</div>
|
43
|
+
</fieldset>
|
44
|
+
</div>
|
@@ -0,0 +1,10 @@
|
|
1
|
+
<div>
|
2
|
+
<form ng-submit="submit()" ng-controller="radioCtrl">
|
3
|
+
<p>Selected Value: <span class="radioValue">{{ data.group1 }}</span> </p>
|
4
|
+
<md-radio-group ng-model="data.group1">
|
5
|
+
<md-radio-button value="Apple" class="md-primary">Apple</md-radio-button>
|
6
|
+
<md-radio-button value="Banana"> Banana </md-radio-button>
|
7
|
+
<md-radio-button value="Mango">Mango</md-radio-button>
|
8
|
+
</md-radio-group>
|
9
|
+
</form>
|
10
|
+
</div>
|
@@ -0,0 +1,20 @@
|
|
1
|
+
<div ng-controller="selectCtrl as ctrl" class="md-padding">
|
2
|
+
<div>
|
3
|
+
<div layout="row">
|
4
|
+
<md-input-container>
|
5
|
+
<label>Street Name</label>
|
6
|
+
<input type="text"/>
|
7
|
+
</md-input-container>
|
8
|
+
<md-input-container>
|
9
|
+
<label>City</label>
|
10
|
+
<input type="text"/>
|
11
|
+
</md-input-container>
|
12
|
+
<md-input-container>
|
13
|
+
<label>State</label>
|
14
|
+
<md-select ng-model="ctrl.userState">
|
15
|
+
<md-option ng-repeat="state in ctrl.states" value="{{state.abbrev}}">{{state.abbrev}}</md-option>
|
16
|
+
</md-select>
|
17
|
+
</md-input-container>
|
18
|
+
</div>
|
19
|
+
</div>
|
20
|
+
</div>
|
data/index.html
CHANGED
@@ -6,27 +6,13 @@
|
|
6
6
|
<link rel="stylesheet" href="/node_modules/angular-material/angular-material.min.css">
|
7
7
|
</head>
|
8
8
|
<body ng-app="app">
|
9
|
-
|
10
|
-
<
|
11
|
-
<h1>Capybara Angular Material</h1>
|
12
|
-
|
13
|
-
<md-checkbox ng-model="inputs.checkbox.unchecked.value" aria-label="{{inputs.checkbox.unchecked.name}}">
|
14
|
-
{{inputs.checkbox.unchecked.name}}
|
15
|
-
</md-checkbox>
|
16
|
-
|
17
|
-
<md-checkbox ng-model="inputs.checkbox.checked.value" aria-label="{{inputs.checkbox.checked.name}}">
|
18
|
-
{{inputs.checkbox.checked.name}}
|
19
|
-
</md-checkbox>
|
20
|
-
|
21
|
-
<md-button>
|
22
|
-
Click me
|
23
|
-
</md-button>
|
24
|
-
</form>
|
25
|
-
|
9
|
+
<h1>Capybara Angular Material</h1>
|
10
|
+
<md-content ng-view flex></md-content>
|
26
11
|
<script src="/node_modules/angular/angular.min.js"></script>
|
27
12
|
<script src="/node_modules/angular-material/angular-material.min.js"></script>
|
28
13
|
<script src="/node_modules/angular-animate/angular-animate.min.js"></script>
|
29
14
|
<script src="/node_modules/angular-aria/angular-aria.min.js"></script>
|
15
|
+
<script src="/node_modules/angular-route/angular-route.min.js"></script>
|
30
16
|
<script src="/app/js/app.js"></script>
|
31
17
|
</body>
|
32
18
|
</html>
|
@@ -2,13 +2,26 @@ module Capybara
|
|
2
2
|
module Angular
|
3
3
|
module Material
|
4
4
|
module RSpecMatchers
|
5
|
+
def have_md_button(locator)
|
6
|
+
HaveSelector.new(:xpath, "//button[contains(@class, 'md-button')]/span[normalize-space(text())='#{locator}']")
|
7
|
+
end
|
8
|
+
|
5
9
|
def have_md_checkbox(locator, options={})
|
6
|
-
|
7
|
-
HaveSelector.new(:xpath, "//md-checkbox#{checked}/*/span[normalize-space(text())='#{locator}']", options.reject {|k,v| k == :checked})
|
10
|
+
HaveSelector.new(:xpath, "//md-checkbox#{aria_checked(options)}/*/span[normalize-space(text())='#{locator}']")
|
8
11
|
end
|
9
12
|
|
10
|
-
def
|
11
|
-
HaveSelector.new(:xpath, "//
|
13
|
+
def have_md_radio_button(locator, options={})
|
14
|
+
HaveSelector.new(:xpath, "//md-radio-button#{aria_checked(options)}/*/span[normalize-space(text())='#{locator}']")
|
15
|
+
end
|
16
|
+
|
17
|
+
def have_md_select(locator)
|
18
|
+
HaveSelector.new(:xpath, "//md-select/md-select-value/span[not(@class)][text()='#{locator}']")
|
19
|
+
end
|
20
|
+
|
21
|
+
private
|
22
|
+
|
23
|
+
def aria_checked(options)
|
24
|
+
"[@aria-checked='#{options[:checked].to_s}']" if options.has_key?(:checked)
|
12
25
|
end
|
13
26
|
end
|
14
27
|
end
|
data/package.json
CHANGED
@@ -1,12 +1,13 @@
|
|
1
1
|
{
|
2
|
-
"name": "capybara-angular-material-
|
3
|
-
"version": "0.
|
2
|
+
"name": "capybara-angular-material-fixtures",
|
3
|
+
"version": "0.5.0",
|
4
4
|
"license": "MIT",
|
5
5
|
"repository": "https://github.com/rimian/capybara-angular-material",
|
6
6
|
"devDependencies": {
|
7
|
-
"angular": "^1.4.
|
8
|
-
"angular-animate": "^1.4.
|
9
|
-
"angular-aria": "^1.4.
|
10
|
-
"angular-material": "^0.11.0"
|
7
|
+
"angular": "^1.4.6",
|
8
|
+
"angular-animate": "^1.4.6",
|
9
|
+
"angular-aria": "^1.4.6",
|
10
|
+
"angular-material": "^0.11.0",
|
11
|
+
"angular-route": "^1.4.6"
|
11
12
|
}
|
12
13
|
}
|
@@ -1,8 +1,13 @@
|
|
1
1
|
feature 'Angular Material Demos - Button' do
|
2
|
-
before
|
2
|
+
before do
|
3
|
+
visit('/index.html#/button')
|
4
|
+
expect(page.find('h1')).to have_content 'Capybara Angular Material'
|
5
|
+
end
|
6
|
+
|
7
|
+
it 'has disabled button'
|
3
8
|
|
4
9
|
it 'has a button' do
|
5
|
-
expect(page).to have_md_button('
|
10
|
+
expect(page).to have_md_button('Button')
|
6
11
|
end
|
7
12
|
|
8
13
|
it 'has no button' do
|
@@ -1,9 +1,15 @@
|
|
1
1
|
|
2
2
|
feature 'Angular Material Demos - Checkbox' do
|
3
|
-
let(:checked_locator) { '
|
4
|
-
let(:unchecked_locator) { '
|
3
|
+
let(:checked_locator) { 'Checkbox 1: true' }
|
4
|
+
let(:unchecked_locator) { 'Checkbox (md-primary): No Ink' }
|
5
5
|
|
6
|
-
before
|
6
|
+
before do
|
7
|
+
visit('/index.html#/checkbox')
|
8
|
+
expect(page.find('h1')).to have_content 'Capybara Angular Material'
|
9
|
+
end
|
10
|
+
|
11
|
+
it 'is disabled'
|
12
|
+
it 'is not disabled'
|
7
13
|
|
8
14
|
it 'has no checkbox' do
|
9
15
|
expect(page).not_to have_md_checkbox 'checkbox that does not exist'
|
@@ -0,0 +1,27 @@
|
|
1
|
+
feature 'Angular Material Demos - radio' do
|
2
|
+
before do
|
3
|
+
visit('/index.html#/radio')
|
4
|
+
expect(page.find('h1')).to have_content 'Capybara Angular Material'
|
5
|
+
end
|
6
|
+
|
7
|
+
it 'has no radio button' do
|
8
|
+
expect(page).not_to have_md_radio_button('This button does not exist')
|
9
|
+
expect(page).not_to have_md_radio_button('This button does not exist', :checked => true)
|
10
|
+
expect(page).not_to have_md_radio_button('This button does not exist', :checked => false)
|
11
|
+
end
|
12
|
+
|
13
|
+
it 'has a radio button with content' do
|
14
|
+
expect(page).to have_md_radio_button('Apple')
|
15
|
+
end
|
16
|
+
|
17
|
+
it 'has a radio button with content normalized' do
|
18
|
+
expect(page).to have_md_radio_button('Banana')
|
19
|
+
end
|
20
|
+
|
21
|
+
it 'has a checked radio button' do
|
22
|
+
expect(page).to have_md_radio_button('Banana', :checked => true)
|
23
|
+
expect(page).not_to have_md_radio_button('Banana', :checked => false)
|
24
|
+
end
|
25
|
+
|
26
|
+
it 'has a radio button with value'
|
27
|
+
end
|
@@ -0,0 +1,14 @@
|
|
1
|
+
feature 'Angular Material Demos - select' do
|
2
|
+
before do
|
3
|
+
visit('/index.html#/select')
|
4
|
+
expect(page.find('h1')).to have_content 'Capybara Angular Material'
|
5
|
+
end
|
6
|
+
|
7
|
+
it 'has a select with place holder' do
|
8
|
+
expect(page).to have_md_select('State')
|
9
|
+
end
|
10
|
+
|
11
|
+
it 'has no select' do
|
12
|
+
expect(page).not_to have_md_select('Oh, no!')
|
13
|
+
end
|
14
|
+
end
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: capybara-angular-material
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.0.
|
4
|
+
version: 0.0.10
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Rimian Perkins
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2015-09-
|
11
|
+
date: 2015-09-21 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: capybara
|
@@ -104,15 +104,20 @@ files:
|
|
104
104
|
- LICENSE
|
105
105
|
- README.md
|
106
106
|
- app/js/app.js
|
107
|
+
- app/partials/button.html
|
108
|
+
- app/partials/checkbox.html
|
109
|
+
- app/partials/radio.html
|
110
|
+
- app/partials/select.html
|
107
111
|
- capybara-angular-material.gemspec
|
108
112
|
- config.ru
|
109
113
|
- index.html
|
110
114
|
- lib/capybara/angular/material.rb
|
111
115
|
- lib/capybara/angular/material/rspec.rb
|
112
116
|
- package.json
|
113
|
-
- spec/features/angular_material_spec.rb
|
114
117
|
- spec/features/demos/button_spec.rb
|
115
118
|
- spec/features/demos/checkbox_spec.rb
|
119
|
+
- spec/features/demos/radio_spec.rb
|
120
|
+
- spec/features/demos/select_spec.rb
|
116
121
|
- spec/spec_helper.rb
|
117
122
|
homepage: https://github.com/rimian/capybara-angular-material
|
118
123
|
licenses:
|