Arquivo da categoria: Testes Ágeis

AngularJS – e2e Testing AngularJS Apps with Protractor and SauceLabs

sauce.conf.js

var browsers = require('./browsers'),
    creds = require('./creds');
 
var config = {
    specs: [
        './e2e/**/*.spec.js'
    ],
 
    baseUrl: 'http://localhost:3333',
    allScriptsTimeout: 30000,
    getPageTimeout: 30000,
    jasmineNodeOpts: {
        showColors: true,
        isVerbose: true,
        includeStackTrace: true,
        defaultTimeoutInterval: 300000
    }
};
 
config.baseUrl = 'http://benclinkinbeard.com/demos/ptor';
config.sauceUser = process.env.SAUCE_USERNAME || creds.sauceUser;
config.sauceKey = process.env.SAUCE_ACCESS_KEY || creds.sauceKey;
 
config.multiCapabilities = [
    browsers.chrome,
    browsers.firefox,
    browsers.ie9,
    browsers.ie10,
    browsers.ie11,
    browsers.ios
];
 
exports.config = config;

browsers.js

exports.chrome = {
    name: 'Chrome',
    browserName: 'chrome'
}
 
exports.firefox = {
    name: 'Firefox',
    browserName: 'firefox'
}
 
exports.safari = {
    name: 'Safari',
    browserName: 'safari'
}
 
exports.ie8 = {
    name: 'IE 8',
    browserName: 'internet explorer',
    version: '8.0',
    tags: ['ie']
}
 
exports.ie9 = {
    name: 'IE 9',
    browserName: 'internet explorer',
    version: '9.0',
    tags: ['ie']
}
 
exports.ie10 = {
    name: 'IE 10',
    browserName: 'internet explorer',
    version: '10.0',
    tags: ['ie']
}
 
exports.ie11 = {
    name: 'IE 11',
    browserName: 'internet explorer',
    version: '11.0',
    tags: ['ie']
}
 
// iOS for local or Sauce Labs (via Appium)
exports.ios = {
    name: 'iOS 7 - iPad',
    platformName: 'iOS',
    platformVersion: '7.1',
    deviceName: 'iPad Simulator',
    browserName: 'safari',
    orientation: 'landscape',
    'appium-version': '1.2',
    tags: ['ios']
}

AngularJS – Using Protractor to Test Mobile Safari with Appium

package.json

{
  "name": "multiCapabilities",
  "version": "0.0.0",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "test-e2e": "protractor test/protractor.conf.js",
    "test-e2e-dev": "protractor test/protractor.conf.js --chrome",
    "test-e2e-ios": "protractor test/protractor.conf.js --ios"
  },
  "devDependencies": {
    "appium": "^1.2.0",
    "protractor": "^1.0.0"
  }
}

protractor.conf.js

var browsers = {
  firefox: {
    name: 'Firefox',
    browserName: 'firefox'
  },
  chrome: {
    name: 'Chrome',
    browserName: 'chrome'
  },
  ios: {
    name: 'iOS 7 - iPad',
    platformName: 'iOS',
    platformVersion: '7.1',
    deviceName: 'iPad Simulator',
    browserName: 'Safari',
    orientation: 'landscape'
  }
}
 
var config = {
  specs: [
    './e2e/**/*.spec.js'
  ],
 
  baseUrl: 'http://localhost:3333'
};
 
if (process.argv[3] === '--chrome') {
  config.capabilities = browsers.chrome;
} else if (process.argv[3] === '--ios') {
  config.seleniumAddress = 'http://localhost:4723/wd/hub';
  config.capabilities = browsers.ios;
} else {
  config.multiCapabilities = [
    browsers.firefox,
    browsers.chrome
  ]
}
 
exports.config = config;

AngularJS – Protractor: Running tests on multiple browsers

protractor.conf

var browsers = {
  firefox: {
    name: 'Firefox',
    browserName: 'firefox'
  },
  chrome: {
    name: 'Chrome',
    browserName: 'chrome'
  }
}
 
exports.config = {
  specs: [
    './e2e/**/*.spec.js'
  ],
 
  baseUrl: 'http://localhost:3333'
};
 
if (process.argv[3] === '--chrome') {
  exports.config.capabilities = browsers.chrome;
} else {
  exports.config.multiCapabilities = [
    browsers.firefox,
    browsers.chrome
  ]
}

package.json

{
  "name": "multiCapabilities",
  "version": "0.0.0",
  "dependencies": {
    "protractor": "^1.0.0-rc4"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "test-e2e": "protractor test/protractor.conf.js",
    "test-e2e-dev": "protractor test/protractor.conf.js --chrome"
  }
}

AngularJS – Testing With Protractor Page Objects

index.spec.js

var IndexPage = require('./IndexPage');
 
describe("hello-protractor", function () {
 
  var page = new IndexPage();
 
  beforeEach(function() {
      page.get();
  });
 
  describe("index", function () {
    it("should display the correct title", function () {
      expect(page.getTitle()).toBe('hello protractor');
    });
 
    it("should display the message when button clicked", function () {
      page.clickButton();
 
      expect(page.getMessageText()).toBe('button 1 clicked');
    });
  });
});

IndexPage.js

function IndexPage() {
  this.button = element(by.id('button1'));
  this.message = element(by.binding('messageText'));
 
  this.get = function () {
    browser.get('/#');
  };
 
  this.clickButton = function () {
    this.button.click();
  };
 
  this.getTitle = function () {
    return browser.getTitle();
  };
 
  this.getMessageText = function () {
    return this.message.getText();
  }
}
 
module.exports = IndexPage;

AngularJS – Inject Jasmine Spies With $provide

app.js

var app = angular.module('app', []);
 
app.controller('ProfileCtrl',
    ['$scope', 'ProfileSvc',
        function ($scope,
                  profileSvc) {
 
            $scope.favoriteBooks = profileSvc
                .favoriteBooks();
 
        }]);
 
app.service('ProfileSvc', function () {
    this.favoriteBooks = function () {
        return JSON.parse(
            localStorage.getItem('favoriteBooks')
        );
    };
});

app.spec.js

describe("Providers", function () {
    var $scope,
        controller,
        profileSvcSpy,
        favoriteBooks = ["Lowside of the Road", "Life", "The Grand Pursuit"];
 
    beforeEach(module('app', function($provide) {
        profileSvcSpy = jasmine.createSpyObj("ProfileSvc", ["favoriteBooks"]);
        profileSvcSpy.favoriteBooks.andReturn(favoriteBooks);
 
        $provide.value("ProfileSvc", profileSvcSpy);
    }));
    beforeEach(inject(function($rootScope, $controller) {
        $scope = $rootScope.$new();
        controller = $controller('ProfileCtrl', {$scope: $scope});
    }));
 
    describe("Initialization", function () {
        it("Should call the profileSvc.favoriteBooks with no arguments", function () {
            expect(profileSvcSpy.favoriteBooks).toHaveBeenCalledWith();
        });
 
        it("Should set the $scope.favoriteBooks from the profileService", function () {
            expect($scope.favoriteBooks).toEqual(favoriteBooks);
        });
    });
 
});

AngularJS – Test Simple Binding With Protractor

describe("hello-protractor", function () {
 
  describe("index", function () {
    it("should display the correct title", function () {
      browser.get('/#');
      expect(browser.getTitle()).toBe('hello protractor');
    });
 
    it("should display the message when button clicked", function () {
      var button = element(by.id('button1')),
        message = element(by.binding('messageText'));
 
      button.click();
 
      expect(message.getText()).toBe('button 1 clicked');
    });
  });
});
<div class="row text-center">
    <a class="btn btn-primary"
       id="button1"
       ng-click="updateMessageText('button 1 clicked')">
      Button 1
    </a>
</div>
 
<div class="row h3 text-center">{{ messageText }}</div>

Código fonte das aulas 1 a 12 do curso egghead.oi

– Quando estamos usando o state podemos usar esse recurso:
HTML

<div ui-sref=“/teste”>Url Teste</div>

– Criando um test:
JSSpec

describe(‘filter’, function(){
     beforeEach(module(‘myApp’));
 
     describe(‘reverse’, function() {
          it(’should reverse a string’, inject(function(reverseFilter) {
               expect(reverseFilter(‘ABCD’)).toEqual(‘DCBA’);
               expect(reverseFilter(‘John’)).toEqual(’nhoJ’);
          }))
     })
})

   

– uiRepeat com um filter:
JS

<div ng-app="myApp">
     <div ng-controller="AvengersCtrl as avengersCtrl">
          <input type="text" ng-model="search.$">
          <table>
               <tr ng-repeat="actor in avengersCtrl.avengers.cast | filter:search">
                    <td>{{actor.name}}</td>
                    <td>{{actor.character}}</td>
               </tr>
          </table>
     </div>
</div>

– uiRepeat com filter, limitTo e orderBy:
HTML

<tr ng-repeat="actor in avengers.cast | orderBy:'name' | limitTo:5 | filter:search">

– Diretivas em uma tag só:
HTML

<div ng-app="superhero">
     <div superman flash></div>
</div>

JS

app.directive("superman", function() {
     return {
          restrict: "A",
          link: function() {
               alert("I'm working stronger");
          }
     };
});
 
app.directive("flash", function() {
     return {
          restrict: "A",
          link: function() {
               alert("I'm working faster");
          }
     };
});

AngularJS – Unit Testing Directive Scope Binding

app.js

var app = angular.module("app", []);
 
app.directive("ehSimple", function() {
    return {
        scope: {
            ehSimple: "="
      },
        link: linkFn
    }
 
    function linkFn(scope, element) {
        element.addClass("plain");
 
        element.bind("click", function() {
            scope.clicked = true;
 
            scope.ehSimple.message += " world";
        })
    }
})

directive.spec.js

describe("Hello world", function() {
    var element;
    var $scope;
    beforeEach(module("app"));
    beforeEach(inject(function($compile, $rootScope) {
        $scope = $rootScope;
        $scope.data = {message: "Hello"};
        element = angular.element("<div eh-simple='data'>{{2 + 2}}</div>");
        $compile(element)($rootScope);
    }))
 
    it('should equal 4', function() {
    $scope.$digest();
    expect(element.html()).toBe("4");
  })
 
  describe("ehSimple", function() {
    it("should add a class of plain", function() {
        expect(element.hasClass("plain")).toBe(true);
    })
 
    it("should respond to a click", function() {
        browserTrigger(element, "click");
        expect(element.isolateScope().clicked).toBe(true);
    })
 
    it("should update both scopes on click", function() {
        browserTrigger(element, "click");
        expect(element.isolateScope().ehSimple.message).toBe("Hello world");
    })
  })
})