wikimatze / angular Goto Github PK

View Code? Open in Web Editor NEW

0.0 1.0 0.0 30 KB

TeX 100.00%

angular's People

Contributors

Watchers

angular's Issues

protractor: select multiple elements

      var bidsBeforeDeletion = element.all(by.css('#details-view ul li'));

More reference under https://github.com/angular/protractor/blob/master/docs/locators.md#finding-multiple-elements

protractor: usage of first

Started
WARNING - more than one element found for locator By.cssSelector("#details-view ul li:nth-of-type(1) a small") - the first result will be used
WARNING - more than one element found for locator By.cssSelector("#details-view ul li:nth-of-type(3) a small") - the first result will be used

Lösung: $$('#details-view ul li:nth-of-type(1) a small') und wir können first verwenden: expect(page.elements.firstBidAwardLabel.first().getText()).toEqual('vom 20.04.2016');

Notizen über Module ergänzen

sind logische Container für die Komponenten
erstellen: angular.module('MyHammerLayout', []) => Name des Moduls ist 'MyHammerLayout'; leere Klammern bedeutet keine Dependencies
an Module anhängen
angular.module('MyHammerLayout', []).value().filter() => ich hänge mir alles dran, was ich so brauche
Controller an Modulen ergänzen
angular.module('MyHammerLayout', [])
.controller("index", ["$scope", function($scope)])
ist das Basis-Modul für die Angular app
dies macht man per ngApp directive, die man einfach als ng-app and HTML packt

transclude

Kann verwendet werden, um in einer Direktive Sachen zu ersetzen.

Beispiel: https://docs.angularjs.org/api/ng/directive/ngTransclude

Direktiven Ergänzung

denkweise aus jQuery: immer wenn du was auswählen willst, dann immer per Direktiven
returnen immer Object jedoch mit link und restrict im JS-Object

replace string in angular

.toString().replace(':', '')

Hurray!

protractor click checkbox

      var checkbox = element(by.css('#delete-view > section > .form-group > .checkbox input[type="checkbox"]'));

      checkbox.click().then(function () {
        expect(element(by.model('disabled'))).toBeTruthy();
      });

data-ng-bind-html

directive is a secure way of binding content to an HTML element. When you are letting AngularJS write HTML in your application, you should check the HTML for dangerous code. By including the "angular-santize.js" module in your application you can do so by running the HTML code through the ngSanitize function.

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.2/angular-sanitize.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

    <p ng-bind-html="myText"></p>

</div>

<script>
var app = angular.module("myApp", ['ngSanitize']);
app.controller("myCtrl", function($scope) {
    $scope.myText = "My name is: <h1>John Doe</h1>";
});
</script>

afterAll

afterAll(function () {
step.user.logout();
step.browser.desktop();
});

prortractor: count elements

Works with expect(page.elements.bids.count()).toEqual(3);

Cool Angular Page

http://www.nypl.org/blog/2014/12/03/angularjs-e2e-tests-locations

jasmine: method should not been called

expect(AlertsHelper.add).not.toHaveBeenCalled();

isObject()

Determines if a reference is an Object. Unlike typeof in JavaScript, nulls are not considered to be objects. Note that JavaScript arrays are objects.

typeoof null => "object"
angular.isObject(null) => false.

Testing $sce.trustAsHtml(message);

zum Testen $$unwrapTrustedValue()

toBe und toEqual

toBe ... primitive Typen
toEqual ... Objekt Vergleich!

Testing with translation

http://errors.angularjs.org/1.3.17/$injector/unpr?p0=transFilterProvider%20%3C-%20transFilter

In a directive which uses: $filter('path')('string')

Dann in den beforeEach Block folgendes packen:

beforeEach(function () {
      angular.mock.module('YourApp');
      module(function ($provide) {
        $provide.value('transFilter', function (value) {
          return value;
        });
      });

Check how one can see if a variable is defined

angular.isDefined(response.body.job_owner)

Sichtbarkeit

dafür kann man ngShow und ngHide verwenden => blendet jedoch nur Elemente aus
ngIf kontrolliert die Existenz
- Elemente, die mit ngIf injected werden, haben Ihren eigenen Scope (also wie, wenn man eine zweite
  Controller-directive einbaut) und werden je nachdem entweder im Scope ergänzt oder wieder entfernt

  <body>
    <div ng-app="myApp" ng-controller="myCtrl">
      <div><input type="checkbox" ng-model="firstElementVisible" /> Is first element visible</div>
      <div><input type="checkbox" ng-model="secondElementVisible" /> Is second element visible</div>
      <div ng-show="firstElementVisible">First Element</div>
      <div ng-if="secondElementVisible">Second Element</div>
    </div>
  </body>

  <script>
    angular.module('myApp', [])
    .controller('myCtrl', ["$scope", function($scope) {
      $scope.firstElementVisible = true;
      $scope.secondElementVisible = false;
    }]);
  </script>

Filter

$sce ... Strict Contextual Escaping ---------> macht vieles sicher

Testing: Expected a spy, but got Function.

beforeEach(function () {
      angular.mock.module('MyHammerUserBase');
      angular.mock.inject(function (_AlertsHelper_) {
        AlertsHelper = _AlertsHelper_;
      });

dann greift die Implementierung auf add zurück:

        expect(AlertsHelper.add).toHaveBeenCalledWith('BidFormWarnings', 'danger', {
          translation: 'clientside.mybids.usererrormessages.has_valid_payment_method',
          args: {
            textUrl: 'https://localhost/benutzerkonto/zahlungsdaten/'
          }
        });

Dann braucht man: spyOn(AlertsHelper, 'add'); im beforeEach Block.

protractor: clear inputs

Use clear(), which is a promise (http://stackoverflow.com/questions/29608551/protractor-not-clearing-contents-of-input-field)

Example-Code:

page.elements.bidDescription.clear().then(function () {
            page.elements.bidDescription.sendKeys(string);

            expect(page.elements.bidTextCounterInvalid.getText()).toEqual('Der Text ist 2001 Zeichen zu lang');
          });

Vendor injecting and mocking

beforeEach(function () {
  angular.mock.module('MyHammerUserBase');

  module(function ($provide) {
    $provide.value('transFilter', function (value) {
      return value;
    });
  });

$provide in beforeEach block is the solution.

isDefined()

Helps determine if a value or reference inside the $scope is defined or not. returns a Boolean value, that is, “true” or “false”. It is important when you wish to validate or check if variables or references inside $scope are defined, that is, if they are assigned any value, before actually using it.

Controller Registrierung

ng-controller="Honk as HonkeyTonk" -----> wird nehmen "as" Syntax um nicht im Scope rumzuwuseln

wikimatze / angular Goto Github PK

angular's People

Contributors

Watchers

angular's Issues

Recommend Projects

Recommend Topics

Recommend Org