capybara-angular-material 0.0.9 → 0.0.10

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: b7986775cc9c16bfb5149fb501ed44388ad193a7
-  data.tar.gz: 0d1dca3d88e4871c62e0824073dff60c9645eb27
+  metadata.gz: b9ab3aa3628acdc910386639acea589c1bd5a04b
+  data.tar.gz: 36f030f884e82f6176dc80262ec7e87b8b0ab281
 SHA512:
-  metadata.gz: abc2add92a9ec4ee7adb12d0498fa284b4a7c0f963aa6f63cedea3b0751615ea9e11363d0aaedfa26b140fe0baa0d3f77e0d994897f900e0850a3d81aee3c72a
-  data.tar.gz: a2bdd9354054482a147eb9529bde35f18433877a7a71b13f1399d6a467c6c62c448681d6a00eb27b1a3d2bd46d1ac20f4aea88927e1e551b82c7b0ec0a4866ce
+  metadata.gz: 5adbeb191be30ab9fc9972e932fa0c7e50bb8a5895b378985e13a62243e803c58a49398c8a67740858611c43a0c1025fc58b54ffce749fe4871befecc38ffaa7
+  data.tar.gz: cfc30aa8a18053baa440ca681671fe53d7fab98449869d93c3bc0c4d2c561b13e7d3eda036f0fdf6f53fbbd8b9665235a4f6ffca0997d47dca5a112f26c4d511

data/.gitignore

@@ -5,3 +5,4 @@
 .ruby-gemset
 .bundle
 node_modules
+capybara-*

data/CONTRIBUTING

@@ -3,3 +3,10 @@
 ## Installing on your local machine
 
 0. `Bundle install`
+0. `npm install`
+
+## Running Development Fixture
+
+```rackup -p8000```
+
+Then browse to localhost:8000 to view the app that rspec tests.

data/README.md

@@ -13,6 +13,8 @@ Add this line to your application's Gemfile:
 
     gem 'capybara-angular-material'
 
+You'll also need to install Capybara.
+
 ## Usage
 
 In your spec helper, include the DSL:
@@ -40,3 +42,22 @@ have_md_checkbox('Other thing', :checked => true)
 ```
 
 Checked boolean is matched against the `aria-checked` attribute.
+
+### Buttons
+
+```
+have_md_button('Some text')
+```
+
+### Radio Button
+
+```
+have_md_radio_button('Banana', :checked => true)
+have_md_radio_button('Banana')
+```
+
+### Select
+
+```
+have_md_radio_button('Some place holder text')
+```

data/app/js/app.js

@@ -1,9 +1,60 @@
 
-angular.module('app', ['ngMaterial']).controller('appController', function($scope) {
-  $scope.inputs = {
-    checkbox: {
-      unchecked: {value: false, name: 'A nice checkbox'},
-      checked:  {value: true, name: 'Woof'}
-    }
+angular.module('app', ['ngMaterial', 'ngRoute']).config(function($routeProvider) {
+  $routeProvider.when('/button', {templateUrl: 'app/partials/button.html', controller: 'buttonCtrl'});
+  $routeProvider.when('/checkbox', {templateUrl: 'app/partials/checkbox.html', controller: 'checkboxCtrl'});
+  $routeProvider.when('/radio', {templateUrl: 'app/partials/radio.html', controller: 'radioCtrl'});
+  $routeProvider.when('/select', {templateUrl: 'app/partials/select.html', controller: 'selectCtrl'});
+}).controller('appController', function($scope) {
+}).controller('buttonCtrl', function($scope) {
+  $scope.title1 = 'Button';
+  $scope.title4 = 'Warn';
+  $scope.isDisabled = true;
+  $scope.googleUrl = 'http://google.com';
+}).controller('checkboxCtrl', function($scope) {
+  $scope.data = {};
+  $scope.data.cb1 = true;
+  $scope.data.cb2 = false;
+  $scope.data.cb3 = false;
+  $scope.data.cb4 = false;
+  $scope.data.cb5 = false;
+}).controller('radioCtrl', function($scope) {
+  $scope.data = {
+    group1 : 'Banana',
+    group2 : '2',
+    group3 : 'avatar-1'
   };
+  $scope.avatarData = [{
+      id: "avatars:svg-1",
+      title: 'avatar 1',
+      value: 'avatar-1'
+    },{
+      id: "avatars:svg-2",
+      title: 'avatar 2',
+      value: 'avatar-2'
+    },{
+      id: "avatars:svg-3",
+      title: 'avatar 3',
+      value: 'avatar-3'
+  }];
+  $scope.radioData = [
+    { label: '1', value: 1 },
+    { label: '2', value: 2 },
+    { label: '3', value: '3', isDisabled: true },
+    { label: '4', value: '4' }
+  ];
+  $scope.submit = function() {
+    alert('submit');
+  };
+  $scope.addItem = function() {
+    var r = Math.ceil(Math.random() * 1000);
+    $scope.radioData.push({ label: r, value: r });
+  };
+  $scope.removeItem = function() {
+    $scope.radioData.pop();
+  };
+}).controller('selectCtrl', function() {
+  this.userState = '';
+  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 ' +
+      '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 ' +
+      'WY').split(' ').map(function (state) { return { abbrev: state }; });
 });

data/app/partials/button.html

@@ -0,0 +1,18 @@
+<div ng-controller="buttonCtrl">
+  <md-content>
+    <section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
+      <md-button>{{title1}}</md-button>
+      <md-button md-no-ink class="md-primary">Primary (md-noink)</md-button>
+      <md-button ng-disabled="true" class="md-primary">Disabled</md-button>
+      <md-button class="md-warn">{{title4}}</md-button>
+      <div class="label">Flat</div>
+    </section>
+    <section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
+      <md-button class="md-raised">Button</md-button>
+      <md-button class="md-raised md-primary">Primary</md-button>
+      <md-button ng-disabled="true" class="md-raised md-primary">Disabled</md-button>
+      <md-button class="md-raised md-warn">Warn</md-button>
+      <div class="label">Raised</div>
+    </section>
+  </md-content>
+</div>

data/app/partials/checkbox.html

@@ -0,0 +1,44 @@
+<div ng-controller="checkboxCtrl" class="md-padding">
+  <fieldset class="standard">
+    <legend>Using <code>ng-model</code></legend>
+    <div layout="row" layout-wrap>
+      <div flex="50">
+        <md-checkbox ng-model="data.cb1" aria-label="Checkbox 1">
+          Checkbox 1: {{ data.cb1 }}
+        </md-checkbox>
+      </div>
+      <div flex="50">
+        <md-checkbox
+            ng-model="data.cb2"
+            aria-label="Checkbox 2"
+            ng-true-value="'yup'"
+            ng-false-value="'nope'"
+            class="md-warn md-align-top-left">
+          Checkbox 2 (md-warn)  <br/>
+          <span class="ipsum">
+            Duis placerat lectus et justo mollis, nec sodales orci congue. Vestibulum semper non urna ac suscipit.
+            Vestibulum tempor, ligula id laoreet hendrerit, massa augue iaculis magna,
+            sit amet dapibus tortor ligula non nibh.
+          </span>
+          <br/>
+          {{ data.cb2 }}
+        </md-checkbox>
+      </div>
+      <div flex="50">
+        <md-checkbox ng-disabled="true" aria-label="Disabled checkbox" ng-model="data.cb3">
+          Checkbox: Disabled
+        </md-checkbox>
+      </div>
+      <div flex="50">
+        <md-checkbox ng-disabled="true" aria-label="Disabled checked checkbox" ng-model="data.cb4" ng-init="data.cb4=true">
+          Checkbox: Disabled, Checked
+        </md-checkbox>
+      </div>
+      <div flex="50">
+        <md-checkbox md-no-ink aria-label="Checkbox No Ink" ng-model="data.cb5" class="md-primary">
+          Checkbox (md-primary): No Ink
+        </md-checkbox>
+      </div>
+    </div>
+  </fieldset>
+</div>

data/app/partials/radio.html

@@ -0,0 +1,10 @@
+<div>
+  <form ng-submit="submit()" ng-controller="radioCtrl">
+    <p>Selected Value: <span class="radioValue">{{ data.group1 }}</span> </p>
+    <md-radio-group ng-model="data.group1">
+      <md-radio-button value="Apple" class="md-primary">Apple</md-radio-button>
+      <md-radio-button value="Banana"> Banana </md-radio-button>
+      <md-radio-button value="Mango">Mango</md-radio-button>
+    </md-radio-group>
+  </form>
+</div>

data/app/partials/select.html

@@ -0,0 +1,20 @@
+<div ng-controller="selectCtrl as ctrl" class="md-padding">
+  <div>
+    <div layout="row">
+      <md-input-container>
+        <label>Street Name</label>
+        <input type="text"/>
+      </md-input-container>
+      <md-input-container>
+        <label>City</label>
+        <input type="text"/>
+      </md-input-container>
+      <md-input-container>
+        <label>State</label>
+        <md-select ng-model="ctrl.userState">
+          <md-option ng-repeat="state in ctrl.states" value="{{state.abbrev}}">{{state.abbrev}}</md-option>
+        </md-select>
+      </md-input-container>
+    </div>
+  </div>
+</div>

data/capybara-angular-material.gemspec

@@ -1,6 +1,6 @@
 Gem::Specification.new do |gem|
   gem.name          = 'capybara-angular-material'
-  gem.version       = '0.0.9'
+  gem.version       = '0.0.10'
   gem.license       = 'MIT'
 
   gem.authors       = ['Rimian Perkins']

data/index.html

@@ -6,27 +6,13 @@
   <link rel="stylesheet" href="/node_modules/angular-material/angular-material.min.css">
 </head>
 <body ng-app="app">
-
-  <form role="form" name="form" ng-controller="appController" novalidate class="md-padding">
-    <h1>Capybara Angular Material</h1>
-
-    <md-checkbox ng-model="inputs.checkbox.unchecked.value" aria-label="{{inputs.checkbox.unchecked.name}}">
-      {{inputs.checkbox.unchecked.name}}
-    </md-checkbox>
-
-    <md-checkbox ng-model="inputs.checkbox.checked.value" aria-label="{{inputs.checkbox.checked.name}}">
-      {{inputs.checkbox.checked.name}}
-    </md-checkbox>
-
-    <md-button>
-      Click me
-    </md-button>
-  </form>
-
+  <h1>Capybara Angular Material</h1>
+  <md-content ng-view flex></md-content>
   <script src="/node_modules/angular/angular.min.js"></script>
   <script src="/node_modules/angular-material/angular-material.min.js"></script>
   <script src="/node_modules/angular-animate/angular-animate.min.js"></script>
   <script src="/node_modules/angular-aria/angular-aria.min.js"></script>
+  <script src="/node_modules/angular-route/angular-route.min.js"></script>
   <script src="/app/js/app.js"></script>
 </body>
 </html>

data/lib/capybara/angular/material/rspec.rb

@@ -2,13 +2,26 @@ module Capybara
   module Angular
     module Material
       module RSpecMatchers
+        def have_md_button(locator)
+          HaveSelector.new(:xpath, "//button[contains(@class, 'md-button')]/span[normalize-space(text())='#{locator}']")
+        end
+
         def have_md_checkbox(locator, options={})
-          checked = "[@aria-checked='#{options[:checked].to_s}']" if options.has_key?(:checked)
-          HaveSelector.new(:xpath, "//md-checkbox#{checked}/*/span[normalize-space(text())='#{locator}']", options.reject {|k,v| k == :checked})
+          HaveSelector.new(:xpath, "//md-checkbox#{aria_checked(options)}/*/span[normalize-space(text())='#{locator}']")
         end
 
-        def have_md_button(locator)
-          HaveSelector.new(:xpath, "//button[contains(@class, 'md-button')]/span[normalize-space(text())='#{locator}']")
+        def have_md_radio_button(locator, options={})
+          HaveSelector.new(:xpath, "//md-radio-button#{aria_checked(options)}/*/span[normalize-space(text())='#{locator}']")
+        end
+
+        def have_md_select(locator)
+          HaveSelector.new(:xpath, "//md-select/md-select-value/span[not(@class)][text()='#{locator}']")
+        end
+
+        private
+
+        def aria_checked(options)
+          "[@aria-checked='#{options[:checked].to_s}']" if options.has_key?(:checked)
         end
       end
     end

data/package.json

@@ -1,12 +1,13 @@
 {
-  "name": "capybara-angular-material-node-packages",
-  "version": "0.1.0",
+  "name": "capybara-angular-material-fixtures",
+  "version": "0.5.0",
   "license": "MIT",
   "repository": "https://github.com/rimian/capybara-angular-material",
   "devDependencies": {
-    "angular": "^1.4.5",
-    "angular-animate": "^1.4.5",
-    "angular-aria": "^1.4.5",
-    "angular-material": "^0.11.0"
+    "angular": "^1.4.6",
+    "angular-animate": "^1.4.6",
+    "angular-aria": "^1.4.6",
+    "angular-material": "^0.11.0",
+    "angular-route": "^1.4.6"
   }
 }

data/spec/features/demos/button_spec.rb

@@ -1,8 +1,13 @@
 feature 'Angular Material Demos - Button' do
-  before { visit('/index.html') }
+  before do
+    visit('/index.html#/button')
+    expect(page.find('h1')).to have_content 'Capybara Angular Material'
+  end
+
+  it 'has disabled button'
 
   it 'has a button' do
-    expect(page).to have_md_button('Click me')
+    expect(page).to have_md_button('Button')
   end
 
   it 'has no button' do

data/spec/features/demos/checkbox_spec.rb

@@ -1,9 +1,15 @@
 
 feature 'Angular Material Demos - Checkbox' do
-  let(:checked_locator) { 'Woof' }
-  let(:unchecked_locator) { 'A nice checkbox' }
+  let(:checked_locator) { 'Checkbox 1: true' }
+  let(:unchecked_locator) { 'Checkbox (md-primary): No Ink' }
 
-  before { visit('/index.html') }
+  before do
+    visit('/index.html#/checkbox')
+    expect(page.find('h1')).to have_content 'Capybara Angular Material'
+  end
+
+  it 'is disabled'
+  it 'is not disabled'
 
   it 'has no checkbox' do
     expect(page).not_to have_md_checkbox 'checkbox that does not exist'

data/spec/features/demos/radio_spec.rb

@@ -0,0 +1,27 @@
+feature 'Angular Material Demos - radio' do
+  before do
+    visit('/index.html#/radio')
+    expect(page.find('h1')).to have_content 'Capybara Angular Material'
+  end
+
+  it 'has no radio button' do
+    expect(page).not_to have_md_radio_button('This button does not exist')
+    expect(page).not_to have_md_radio_button('This button does not exist', :checked => true)
+    expect(page).not_to have_md_radio_button('This button does not exist', :checked => false)
+  end
+
+  it 'has a radio button with content' do
+    expect(page).to have_md_radio_button('Apple')
+  end
+
+  it 'has a radio button with content normalized' do
+    expect(page).to have_md_radio_button('Banana')
+  end
+
+  it 'has a checked radio button' do
+    expect(page).to have_md_radio_button('Banana', :checked => true)
+    expect(page).not_to have_md_radio_button('Banana', :checked => false)
+  end
+
+  it 'has a radio button with value'
+end

data/spec/features/demos/select_spec.rb

@@ -0,0 +1,14 @@
+feature 'Angular Material Demos - select' do
+  before do
+    visit('/index.html#/select')
+    expect(page.find('h1')).to have_content 'Capybara Angular Material'
+  end
+
+  it 'has a select with place holder' do
+    expect(page).to have_md_select('State')
+  end
+
+  it 'has no select' do
+    expect(page).not_to have_md_select('Oh, no!')
+  end
+end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: capybara-angular-material
 version: !ruby/object:Gem::Version
-  version: 0.0.9
+  version: 0.0.10
 platform: ruby
 authors:
 - Rimian Perkins
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2015-09-19 00:00:00.000000000 Z
+date: 2015-09-21 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: capybara
@@ -104,15 +104,20 @@ files:
 - LICENSE
 - README.md
 - app/js/app.js
+- app/partials/button.html
+- app/partials/checkbox.html
+- app/partials/radio.html
+- app/partials/select.html
 - capybara-angular-material.gemspec
 - config.ru
 - index.html
 - lib/capybara/angular/material.rb
 - lib/capybara/angular/material/rspec.rb
 - package.json
-- spec/features/angular_material_spec.rb
 - spec/features/demos/button_spec.rb
 - spec/features/demos/checkbox_spec.rb
+- spec/features/demos/radio_spec.rb
+- spec/features/demos/select_spec.rb
 - spec/spec_helper.rb
 homepage: https://github.com/rimian/capybara-angular-material
 licenses:

data/spec/features/angular_material_spec.rb

@@ -1,7 +0,0 @@
-
-feature 'Angular Material' do
-  scenario 'Loads the page' do
-    visit('/index.html')
-    expect(page.find('h1')).to have_content 'Capybara Angular Material'
-  end
-end