good karma: ux patterns and unit testing in angular with karma
TRANSCRIPT
Good Karma:
UX Patterns and Unit Testing in Angular with Karma
Laura Ferguson and Boris Kan @ Create, inc, 2015
http://goo.gl/hurhTR
AngularJS:MVW
http://stackoverflow.com/questions/13329485/mvw-what-does-it-stand-for
http://goo.gl/hurhTR
Why AngularJS?● Open Source Web Application Framework● Maintained by Google & individual developers● Addresses challenges encountered in developing single-
page apps● Embraces Model-View-Controller → Now called MVW● Provides rich internet components● Mobile(ish) friendly & responsive
http://en.wikipedia.org/wiki/AngularJS
http://goo.gl/hurhTR
Bind an element to items in a list, one at a time:
<ul><li ng-repeat="boat in boats">
<span>{{boat.name}}</span></li>
</ul>
*While doable, try not to use ids and classes
UI Patterns in Angular:
Bind an element to a variable in the controller:
<span ng-bind="mobileApp"></span> or <span>{{mobileApp}}</span>
Bind an element by ng-click
<button ng-click="next()"></button>
What is scope? And what is $scope?In Computer Science (cs) a scope may contains a set of variables that may have a specific value when a function is called.
In angular, $scope is the model that contains the values displayed by the view and controlled by the controller.
ex: $scope.model.address = “123 45th St NW DC 20012”;
https://docs.angularjs.org/guide/scope
What is a controller?
Think of a controller as the wizard (as in the wizard of oz) deciding what should happen after the view (the gui/the html) reports a user interaction back to the controller.
Let’s take a closer look...
For Example:.controller('MainController',
['$scope', '$document', '$window', '$rootScope', 'deviceReady', 'getCurrentPosition', 'getWeather',
function ($scope, $document, $window, $rootScope, deviceReady, getCurrentPosition, getWeather) {
$scope.model = { "address": "555 Pennsylvania Ave NW, Washington, DC 20001",
"latitude": 0, "longitude": 0, "walkAddress": "", "googleAddress": "", "currentPosition": "",
"location":"", "weather":"", "markers":"" };
$scope.changeText = function () {
var textElement = document.getElementById("householdIncome");
textElement.innerHTML = 'I am a changed div!';
console.log(textElement.innerHTML);
};
Now let’s make something happen
$scope.walkAddressLookup = function () {
if ($scope.model.address) {
var address = $scope.model.address;
address = address.replace(',', '');
//for walkscore
return address.split(' ').join('-');
}
};
$scope.loadAddresses = function () {
getCurrentPosition(function (position) {
$scope.model.currentPosition = position;
$scope.model.latitude = position.coords.latitude;
$scope.model.longitude = position.coords.longitude;
getWeather(
position.coords.latitude,
position.coords.longitude,
function(location, weather){
$scope.model.location = location;
$scope.model.weather = weather;
});
});
if ($scope.model.address) {
//for walkscore
$scope.model.walkAddress = $scope.walkAddressLookup();
}
};
TestingIsn’t that a backend thing?
Types of testingUnit Testing -- Developer writes small automated tests for each unit of functionality
Quality Assurance testing (Each developer)
Integration Testing & E2E -- All components work together as expected (Lead Developer / UX)
Quality Assurance Testing -- Systematic objective testing of a working release following a thorough
test plan.
Load Testing -- Automated testing of system with simulated users and/or simulated traffic.
Acceptance (Success) Testing -- A knowledgeable user can use the system to complete the intended
tasks
Alpha Testing -- Typical users are given the opportunity to use the system, observed while doing so,
and issues are noted and fixed by an objective observer (QA)
Beta Testing -- A small number of users are given complete access to the system and asked for
feedback periodically.
What is Test Driven Development?● Very short cycles, write tiny tests, and test everything. ● Run a continuous integration server and maintain the integrity of
your tests at all time.● Keeps your code base fully functional.
http://en.wikipedia.org/wiki/Test-driven_development
Why front-end e2e testing?
Practical reasons● Get notified when backend
changes break the gui ● Get notified when “simple” front-
end changes break usability● Get notified when your app
doesn’t work right on some browsers (and hopefully sometime soon on devices)
Or just for better “Cred”● Validation is a good practice.● Earn some ’spect from backend
developers (’sup)● Think big and think ahead.
For Example:it('should have be able to find the title', function() {
var docs = element(by.css('.navbar-brand-center'));expect(docs.getText()).toContain('Good Karma Commutability');
});
Acceptance TestsBest Commute: Show commutability at any location
● Get current location
● Get commuting data for that location
● Show distance to metro, bus, retail(?)
● Show commuting time
What’s Next
1) Write a basic test that fails because no the code doesn’t exist yet.
2) Then make the test pass by writing the code.3) Rinse / Repeat (with new tests)
// spec.jsdescribe('Protractor Demo App', function() {
it('should have a title', function() {browser.get('http://localhost:8000');expect(browser.getTitle()).toEqual('Property Lookup');
});}
Write an E2E TestAcceptance Test: The app should display a title
Pass or Fail? Acceptance Test: user can edit text fieldin your spec.jsit('should be able to edit the text field', function() {
var textArea = element(by.model('areaText'));textArea.sendKeys("Hi", protractor.Key.ENTER);expect(textArea.getAttribute('value')).toContain('Hi!');
});
In your html application<textarea ng-model="'areaText'" readonly><textarea>
It failed! (let’s drown our sorrow with a beer!!!)
the Corrected Code would be:
In your html application<textarea ng-model="'areaText'"><textarea>
Pass or Fail? Acceptance Test: user can edit text fieldin your spec.jsit('should be able to edit the text field', function() {
var textArea = element(by.model('areaText'));textArea.sendKeys("Hi", protractor.Key.ENTER);expect(textArea.getAttribute('value')).toContain('Hi!');
});
In your html application<textarea ng-model="'areaText'"><textarea>
It passed! (let’s celebrate this with a beer!!!)
sip sip sip. Now, on to the next one!
Bind an element to items in a list, one at a time:element(
by.repeater(boat in boats').row(0).column('name') );
<ul><li ng-repeat="boat in boats">
<span>{{boat.name}}</span></li>
</ul>*While doable, try not to use ids and classes
Capturing UI Patterns in Angular in Tests:
Bind an element to a variable in the controller:
element( by.binding('mobileApp') );<span ng-bind="mobileApp"></span> or <span>{{mobileApp}}</span>
Bind an element by ng-clickelement.all(
by.css('ng-click="issue()"]') ).click();<button ng-click="next()"></button>
Hands On:Try the
Example
#1: Build it with Angularhttp://goo.gl/hurhTR//install the requirements -- get node
curl -L https://npmjs.com/install.sh | sh
sudo npm install -g bower yo gulp generator-mobileangularui
sudo npm install -g phonegap
sudo npm install -g ios-deploy
sudo npm install -g ios-sim
bower install --save font-awesome#4.2
//create folders and directories
mkdir mobilephonegap
cd mobilephonegap
http://mobileangularui.com/blog/your-first-phonegap-app-with-mobile-angular-ui/
Try out the working codegit clone https://github.com/CreateIO/propertyLookup.gitgit checkout -b examplegit pull origin examplecordova plugin add org.apache.cordova.geolocationsudo npm installsudo npm install -g bowerbower install//build this and view at localhost:8000gulp
Get the simulator running on ios or android
gulp build
phonegap run ios
//you’ll need the android sdk...
phonegap run android
#3: Test it!basic file structureapp├── src├── www├── testing│ ├── spec.js│ ├── conf.js
- spec.js (where the testing happens.)- conf.js (configuration file. we will generate this together on the next page)
Setup
npm install -g protractor (-g for global install)webdriver-manager update (just to make sure we have the latest version)
In your terminal, enter:gulp
In a new terminal(command + T), enter:webdriver-manager start
In another new terminal, enter:protractor testing/conf.js // this is the relative path to your conf.js file
// conf.jsexports.config = {
seleniumAddress: 'http://localhost:4444/wd/hub',
capabilities: {'browserName': 'chrome'
},
specs: ['spec.js'],
jasmineNodeOpts: {showColors: true
}}
Standard Configuration
More! More!Export your results!npm install jasmine-reporters
Different test suites!suites: {
homepage: 'testings/home/*Spec.js',
login: 'testings/login/*Spec.js'
}
Multiple browsers!{'browserName' : 'chrome'},
{'browserName' : 'firefox’}
Your Turn
Acceptance Test
Best Commute: Show commutability at any location
● Get current location (done)
● Get commuting data for that location (done)
● Show distance to metro, bus, retail(?)
● Show commuting time
Try It!1. Test if the map is displayed2. Substitute in model.googleaddress for lat/long -- does
your test still pass?3. Write a test for displaying a streetview, and then make
the test pass by writing the needed code.
Try It!4. Extra: Move the google maps & streetview code into
factories just like forcast.com, make sure your tests still pass.
5. Extra: Write a test and code to make sure the map doesn’t stretch.
6. Go Full Stack: Hook up a reverse geocoder to go from current location to an address tying the whole app together.
Hands On:Build your
own
//get the build done
yo mobileangularui
gulp build (this will compress your src folder files and build everything in to the www/ folder)
phonegap run ios (this will open the ios simulator to display your app)
* borrow image from: http://mobileangularui.com/blog/your-first-phonegap-app-with-mobile-angular-
ui/
#1: Generate an app
src
├── html
│ └── index.html
├── images
├── js
│ ├── app.js
│ ├── controllers
│ │ └── main_controller.js
│ ├── directives
│ └── services
├── less
│ ├── app.less
│ ├── mixins.less
│ ├── responsive.less
│ └── variables.less
└── templates
├── home.html
└── sidebar.html
t
#2: Get it running!//gulp to test it at localhost:8000
gulp
// to deploy the application
gulp build
//get the simulator running on ios
phonegap run ios (it can be android as well)
// often needed when installing new libraries or downloading code:
sudo npm install
sudo npm install -g bower
bower install
#3: Test it!basic file structureapp├── src├── www├── testing│ ├── spec.js│ ├── conf.js
- spec.js (where the testing happens.)- conf.js (configuration file. we will generate this together on the next page)
Setup
npm install -g protractor (-g for global install)webdriver-manager update (just to make sure we have the latest version)
Google api
https://github.com/google/google-api-nodejs-client
Angular Google Maps
http://angular-ui.github.io/angular-google-maps/#!/
http://angular-ui.github.io/angular-google-maps/#!/demo
Mobile Angular UI
http://mobileangularui.com/blog/your-first-phonegap-app-with-mobile-angular-ui/
Protractor testing Related
http://ramonvictor.github.io/protractor/slides
http://angular.github.io/protractor/#/tutorial
Ionic framework, similiar to the ones we use
http://learn.ionicframework.com/formulas/Protractor/
Who are we?
Create is a real estate information system packed with property data, 3D maps, and tools that empower instant investment decision making.
We gather and display data from public and private sectors to let the user determine the potential of any given properties in any neighborhoods in the district in map layers, 3d buildings, charts, table and other formats. Plus, we have lots of really useful and pretty maps.
Check us out at create.io
Thanks for participating! Say hi to us in the conference and on social media!Email: [email protected] [email protected]: @allenderlaura @borisboryakan
Good Karma:
UX Patterns and Unit Testing in Angular with Karma
Laura Ferguson and Boris Kan @ Create, inc, 2015
http://goo.gl/hurhTR