CODEWITHSUNDEEP
javascriptangularjsjasminebddkarma-jasmine
Piotr Pradzynski
Piotr Pradzynski

Reputation: 4535

How to check if element is visible on AngularJS template?

I have an AngularJS controller and HTML template associated with it. I have a "Save" button within the template. I would like to write a test with Jasmine to check if the button is visible under certain condition.

For directives I tested such things without any problems. But this is not a directive.

How to test such situation when you do not have directive but only controller and HTML template view?

Upvotes: 2

Views: 2435

Answers (1)

Leandro Zubrezki
Leandro Zubrezki

Reputation: 1150

If is not a directive, you should be able to test it just with the controller (it should have a variable that control the state).

If you need to test the template, the recommended thing to do is to create a directive for that piece of functionality and then write the tests.

EDIT: another option is to simulate a directive using ng-include for the template and ng-controller for the controller, and then compiling it using $compile service. Look for examples of testing directives and replace the directive for the mix between ng-include and ng-controller and you will be able to test it.

Example from Angular docs modified.

describe('Unit testing great quotes', function() {

  var $compile, $rootScope;

  // Load the myApp module, which contains the directive
  beforeEach(module('myApp'));

  // Store references to $rootScope and $compile
  // so they are available to all tests in this describe block
  beforeEach(inject(function(_$compile_, _$rootScope_){
    // The injector unwraps the underscores (_) from around the parameter names when matching
    $compile = _$compile_;
    $rootScope = _$rootScope_;
  }));

  it('Replaces the element with the appropriate content', function() {
    // Compile a piece of HTML containing the directive **I replaced the directive for the controller and view template**
    var element = $compile("<div ng-controller="yourController"><div ng-include="yourViewTemplate"></div></div>")($rootScope);
    // fire all the watches, so the scope expression {{1 + 1}} will be evaluated
    $rootScope.$digest();
    // Check that the compiled element contains the templated content
    expect(element.html()).toContain("lidless, wreathed in flame, 2 times");
  });
});

Also, you have no idea how difficult is to write code from the phone haha

Upvotes: 2

Related Questions