AngularJS Protractor tests example

_protractor.spec.js

describe('Sales-new quote form', function () {
    var attachmentListCount = element(by.id('attachment-list-count'));
    var quoteNumber = element(by.model('vm.quoteNumber'));
    var dateOfRFQ = element(by.model('vm.dateOfRFQ'));
    var customer = element(by.model('vm.customer'));
    var customerPartNumber = element(by.model('vm.customerPartNumber'));
    var customerPartNumberRevision = element(by.model('vm.customerPartNumberRevision'));
    var quantity = element(by.model('vm.quantity'));
    var lastSalesOrderDate = element(by.model('vm.lastSalesOrderDate'));
    var lastSalesOrderNumber = element(by.model('vm.lastSalesOrderNumber'));
    var lastSalesOrderNumberRevision = element(by.model('vm.lastSalesOrderNumberRevision'));
    var areRequirementsReviewed = element(by.model('vm.areRequirementsReviewed'));
    var isNewPart = element(by.model('vm.isNewPart'));
    var isNewRevision = element(by.model('vm.isNewRevision'));
    var comments = element(by.model('vm.comments'));
    var submitButton = element(by.id('submit-btn'));
    var resetButton = element(by.id('reset-btn'));
    
    beforeEach(function () {
        browser.get('http://localhost:20293/#');
        browser.get('http://localhost:20293/#/quote');
    });

    describe('on initial load', function () {
        
        it('should be a blank form', function () {
            expect(quoteNumber.getText()).toEqual('');
            expect(dateOfRFQ.getText()).toEqual('');
            expect(customer.getText()).toEqual('');
            expect(customerPartNumber.getText()).toEqual('');
            expect(customerPartNumberRevision.getText()).toEqual('');
            expect(quantity.getText()).toEqual('');
            expect(lastSalesOrderDate.getText()).toEqual('');
            expect(lastSalesOrderNumber.getText()).toEqual('');
            expect(lastSalesOrderNumberRevision.getText()).toEqual('');
            expect(areRequirementsReviewed.getAttribute('checked')).toBeFalsy();
            expect(isNewPart.getAttribute('checked')).toBeFalsy();
            expect(isNewRevision.getAttribute('checked')).toBeFalsy();
            expect(comments.getText()).toEqual('');
        });
        it('should start with no attachments', function () {
            expect(attachmentListCount.getText()).toEqual('0');
        });
        it('should start with submit button disabled', function () {
            expect(submitButton.isEnabled()).toBe(false);
        });
    });

    describe('when reset', function() {
        it('should clear checkboxes', function() {

            // arrange
            areRequirementsReviewed.click();
            isNewPart.click();
            isNewRevision.click();
            expect(areRequirementsReviewed.getAttribute('checked')).toBeTruthy();
            expect(isNewPart.getAttribute('checked')).toBeTruthy();
            expect(isNewRevision.getAttribute('checked')).toBeTruthy();

            // act
            resetButton.click();

            // assert
            expect(areRequirementsReviewed.getAttribute('checked')).toBeFalsy();
            expect(isNewPart.getAttribute('checked')).toBeFalsy();
            expect(isNewRevision.getAttribute('checked')).toBeFalsy();
        });

    });
   
    describe('when form is valid', function() {
        it("should be allowed to submit", function() {
            quoteNumber.sendKeys(1);
            quantity.sendKeys(2);
            dateOfRFQ.sendKeys("8/24/2014");
            lastSalesOrderDate.sendKeys("8/24/2014");

            expect(submitButton.isEnabled()).toBe(true);

        });
    });
});

controller.js

(function () {
    'use strict';
    var controllerId = 'quote';
    
    angular.module('app')
        .controller(controllerId, ['$scope', '$rootScope', '$window', 'common', 'datacontext', quote]);

    function quote($scope, $rootScope, $window, common, datacontext) {
        var getLogFn = common.logger.getLogFn;
        var log = getLogFn(controllerId);

        // using an explicit call to $scope to reference from the input type='file' onchange event. 
        // Also, using $scope to manually call $apply when 'attachmentList' changes - see addAttachment()
        $scope.addAttachment = addAttachment;
        
        var vm = this;
       
        vm.title = 'Quote';

        vm.removeAttachment = removeAttachment;
        vm.addQuote = addQuote;
        vm.resetForm = resetForm;
        vm.todaysDate = common.todaysDate();
        vm.attachmentList = [];
        vm.attachment = {};
        vm.user = {};
        vm.attachmentListCount = 0;
        vm.isFormValid = false;
        
        activate();
        
       
        function activate() {
            common.activateController([], controllerId)
                .then(function() {
                    log('Activated Quote View');
                    //vm.user = common.user;
                   
                    if (!JSON.parse($window.sessionStorage["qwUser"])) {
                        verifyCurrentUser();
                    } else {
                        vm.user = JSON.parse($window.sessionStorage["qwUser"]);
                    }
                    
                    $scope.$watch('createQuoteForm.$valid', function(newVal) {
                        vm.isFormValid = newVal;
                    });
                });
        }

        function verifyCurrentUser() {
            console.log('verifying current user..');
            return datacontext.getQwUser().then(function(data) {
                vm.user = data;
                console.log(vm.user);
               
            });
        };
       
        function resetForm() {

            vm.quoteNumber = "";
            vm.comments = "";
            vm.customerPartNumber = "";
            vm.customerPartNumberRevision = "";
            vm.quantity = "";
            vm.customer = "";
            vm.lastSalesOrderNumber = "";
            vm.lastSalesOrderNumberRevision = "";
            vm.lastSalesOrderDate = "";
            vm.isNewPart = false;
            vm.isNewRevision = false;
            vm.areRequirementsReviewed= false;
            vm.dateOfRFQ = "";
          
            vm.attachmentList = [];
            vm.attachmentListCount = 0;
            
            vm.quote = vm.previousQuote;
        }
       
        
        // file upload
        var files = [];
        function removeAttachment(attachment) {

            //log('removing attachment: ' + attachment.FileName);
            
            vm.attachmentList.splice(vm.attachmentList.indexOf(attachment), 1);
            vm.attachmentListCount = vm.attachmentList.length;
        }
        function addAttachment(evt) {

            files = evt.target.files; // FileList object

            for (var i = 0, f; f = files[i]; i++) {

                var reader = new FileReader();

                reader.onload = (function (theFile) {
                    return function (e) {

                        $scope.$apply(function () {
                          
                            vm.attachment = {
                                FileAsString: e.target.result,
                                FileName: theFile.name
                                
                            };

                            vm.attachmentList.push(vm.attachment);
                            vm.attachmentListCount = vm.attachmentList.length;
                        });
                    };
                })(f);
                // FileReader 
                reader.readAsDataURL(f);
            }
   
        }
        
       
        function addQuote() {

            if (vm.isFormValid) {


                vm.quote = {
                    QuoteAttachments: vm.attachmentList,
                    QuoteNumber: vm.quoteNumber,
                    QwUserId: vm.user.id,
                    Comments: vm.comments,
                    CustomerPartNumber: vm.customerPartNumber,
                    CustomerPartNumberRevision: vm.customerPartNumberRevision,
                    Quantity: vm.quantity,
                    Customer: vm.customer,
                    LastSalesOrderNumber: vm.lastSalesOrderNumber,
                    LastSalesOrderNumberRevision: vm.lastSalesOrderNumberRevision,
                    LastSalesOrderDate: vm.lastSalesOrderDate,
                    IsNewPart: vm.isNewPart,
                    IsNewRevision: vm.isNewRevision,
                    AreRequirementsReviewed: vm.areRequirementsReviewed,
                    DateOfCreation: vm.todaysDate,
                    DateOfRFQ: vm.dateOfRFQ
                };


                return datacontext.addQuote(vm.quote)
                    .then(function(newQuote) {

                        // save the last quote for restoration purposes
                        vm.previousQuote = angular.copy(vm.quote);

                        resetForm();

                        return log("added successfully", newQuote, true);
                    });
            }
        }
    }
})();

protractor.conf.js

exports.config = {
  allScriptsTimeout: 11000,
  seleniumAddress: 'http://localhost:4444/wd/hub',
  specs: [
    'app/test/e2e/*.js'
  ],

  capabilities: {
    'browserName': 'chrome'
  },

  chromeOnly: true,

  baseUrl: 'http://localhost:9876/',

  framework: 'jasmine',

  jasmineNodeOpts: {
    defaultTimeoutInterval: 30000
  }
};

view.html

<section class="mainbar" data-ng-controller="quote as vm">
    <section class="matter"></section>
    <section id="quote-form">
        <div class="container">

            <div class="col-md-12">
                <div class="widget wviolet">
                    <div data-cc-widget-header="" title="Quote - Preliminary Contract Review"></div>
                    <span style="float: right"><span style="color: #ED8000">Sales Template</span> | Created on: {{vm.todaysDate}}</span>


                    <form name="createQuoteForm" class="user-form">
                        <div class="col-md-12">
                            <div class="col-md-6">
                                <fieldset>
                                    <legend>General</legend>
                                    <div class="field">
                                        <label for="quotenumber">Quote #:</label>
                                        <input name="quotenumber" ng-model="vm.quoteNumber" type="text" title="Please provide a Quote #" required autofocus data-ng-model-options="{debounce:1000}" />
                                        *
                                    </div>
                                    <div class="field" title="Date of RFQ">
                                        <label for="dateOfRFQ">Date:</label>
                                        <input name="dateOfRFQ" data-ng-model="vm.dateOfRFQ" type="date" title="Please provide a Date Of RFQ" required />
                                        *
                                    </div>
                                    <div class="field">
                                        <label for="customer">Customer:</label>
                                        <input type="text" data-ng-model="vm.customer" id="customer" size="20" placeholder="please select..." list="customers" />
                                        *
                                        <datalist id="customers">
                                            <option value="Eagle">
                                            <option value="L3">
                                            <option value="ITT">
                                        </datalist>
                                    </div>
                                    <div class="field">
                                        <label for="customerPartNumber">Customer Part #:</label>
                                        <input type="text" data-ng-model="vm.customerPartNumber" name="customerPartNumber" placeholder="1234" size="20" />
                                        *
                                        <span title="Customer Part Number Revision"><b>Rev:</b>
                                            <input type="text" data-ng-model="vm.customerPartNumberRevision" name="customerPartNumberRevision" placeholder="Revision" size="5" />
                                        </span>

                                    </div>
                                    <div class="field">
                                        <label for="quantity">Quantity:</label>
                                        <input type="number" data-ng-model="vm.quantity"  title="Please provide a quantity" name="quantity" required />
                                        *
                                    </div>
                                    <div class="field">
                                        <label for="last-salesorder-number">Last Sales Order #:</label>
                                        <input type="text" data-ng-model="vm.lastSalesOrderNumber" name="last-salesorder-number" size="20" />
                                        *
                                        <span title="Last Sales Order Revision"><b>Rev:</b>
                                            <input type="text" data-ng-model="vm.lastSalesOrderNumberRevision" name="lastSalesOrderNumberRevision" placeholder="Revision" size="5" /></span>

                                    </div>

                                    <div class="field">
                                        <label for="last-salesorder-date">Last Order Date:</label>
                                        <input type="date" data-ng-model="vm.lastSalesOrderDate" name="last-salesorder-date" required />
                                        *
                                    </div>
                                </fieldset>

                            </div>
                            <div>
                                <fieldset>
                                    <legend>Customer</legend>

                                    <input type="checkbox" data-ng-model="vm.areRequirementsReviewed" name="areRequirementsReviewed" />
                                    Are Quality Requirements Reviewed?
                                    <br />
                                    <input type="checkbox" data-ng-model="vm.isNewPart" name="isNewPart" />
                                    Is this a new Part?
                                    <br />
                                    <input type="checkbox" data-ng-model="vm.isNewRevision" name="isNewRevision" />
                                    Is this a new Revision?
                                    <br />
                                    <br />
                                    <div class="field">
                                        <label for="comments">Comments:</label><br>
                                                                               <textarea data-ng-model="vm.comments" name="comments" rows="6" cols="50" />
                                    </div>
                                </fieldset>

                            </div>
                        </div>

                        <div class="col-md-12">
                            <br />

                            <div class="col-md-6">
                                <fieldset>
                                    <legend>Attachments</legend>
                                    <file-upload></file-upload>
                                </fieldset>

                                <br />

                                <button id="submit-btn" class="btn btn-primary" data-ng-disabled="!createQuoteForm.$valid" data-ng-click="vm.addQuote()">Create Quote</button>
                                <button id="reset-btn" type="reset" data-ng-click="vm.resetForm()" class="btn btn-default">Reset</button>

                            </div>
                            <br />
                            <!--  {{ vm.user | json }}-->
                            <hr />
                            {{vm.previousQuote | json}}
                        </div>
                    </form>

                    <div class="widget-foot">
                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</section>