Verify if a personalized angular directive is able to display or conceal an element

Question

Verify if a personalized angular directive is able to display or conceal an element

I have a custom directive that toggles the visibility of an element based on the value of another service. I attempted to write a test to verify if the directive functions as intended. Initially, I used the ":visible" selector in my test, but it consistently returned false even though the element was supposed to be visible.

it('Should show element if logged', function () {
    element = angular.element('<p hc-auth>Some Text</p>');
    AuthService.Logged = true;
    scope = $rootScope.$new();
    scope.$apply(function () {
        $compile(element)(scope);
    });
    expect(element.is(":visible")).toBeTruthy();
});

After some troubleshooting, I discovered that during testing, the element had zero width and height, even when the display property was set to block. This caused the ":visible" selector to always return false. I modified the test to check against the display property instead, which now accurately tests the element. However, this approach seems overly reliant on specific implementation details related to showing an element.

it('Should show element if logged', function () {
    element = angular.element('<p hc-auth>Some Text</p>');
    AuthService.Logged = true;
    scope = $rootScope.$new();
    scope.$apply(function () {
        $compile(element)(scope);
    });
    expect(element.css('display')).toBe('block');
});

What would be the most effective strategy for handling this scenario?

javascript jquery html css angularjs

Answer 1

Answer №1

I was curious about how angular handles tests for `ngHide` and `ngShow`, so I took a look at their spec file:

it('should show if the expression is a function with no arguments', function() {
  element = jqLite('<div ng-show="exp"></div>');
  element = $compile(element)($scope);
  $scope.exp = function() {};
  $scope.$digest();
  expect(element).toBeShown();
});

It seems pretty straightforward. Initially, I thought they might be using a library like `jquery-jasmine` which has a `toBeHidden` matcher (although it seems they have their own `custom matcher` for visibility:

// Custom Jasmine Matcher
toBeShown: function() {
  this.message = valueFn(
      "Expected element " + (this.isNot ? "" : "not ") + "to have 'ng-hide' class");
  return !isNgElementHidden(this.actual);
}

// The helper from elsewhere in the same file
function isNgElementHidden(element) {
  var hidden = true;
  forEach(angular.element(element), function(element) {
    if ((' '  + (element.getAttribute('class') || '') + ' ').indexOf(' ng-hide ') === -1) {
      hidden = false;
    }
  });
  return hidden;
}

It seems like they're using the presence of an `.ng-hide` class to determine visibility, which may seem like cheating. However, considering that Angular already supports this class name, they probably found it to be the most efficient approach.

If you're working with Angular, you could also leverage the `.ng-hide` class for visibility and create a similar helper.

Edit:

On a side note, utilizing the addition/removal of the `.ng-hide` class for setting visibility can benefit from any existing ngAnimations the user has implemented for that class.

Answer 2

I was curious about how angular handles tests for `ngHide` and `ngShow`, so I took a look at their spec file:

it('should show if the expression is a function with no arguments', function() {
  element = jqLite('<div ng-show="exp"></div>');
  element = $compile(element)($scope);
  $scope.exp = function() {};
  $scope.$digest();
  expect(element).toBeShown();
});

It seems pretty straightforward. Initially, I thought they might be using a library like `jquery-jasmine` which has a `toBeHidden` matcher (although it seems they have their own `custom matcher` for visibility:

// Custom Jasmine Matcher
toBeShown: function() {
  this.message = valueFn(
      "Expected element " + (this.isNot ? "" : "not ") + "to have 'ng-hide' class");
  return !isNgElementHidden(this.actual);
}

// The helper from elsewhere in the same file
function isNgElementHidden(element) {
  var hidden = true;
  forEach(angular.element(element), function(element) {
    if ((' '  + (element.getAttribute('class') || '') + ' ').indexOf(' ng-hide ') === -1) {
      hidden = false;
    }
  });
  return hidden;
}

It seems like they're using the presence of an `.ng-hide` class to determine visibility, which may seem like cheating. However, considering that Angular already supports this class name, they probably found it to be the most efficient approach.

If you're working with Angular, you could also leverage the `.ng-hide` class for visibility and create a similar helper.

Edit:

On a side note, utilizing the addition/removal of the `.ng-hide` class for setting visibility can benefit from any existing ngAnimations the user has implemented for that class.

Answer 3

Answer №2

When it comes to determining if an element is truly visible, the concept of visibility can be subjective and there is no direct CSS selector like :visible that provides a definitive answer.

Here are a couple of approaches you can consider:

Utilize the not method in Jasmine to check for visibility.

For example:
```
expect(element.css('display')).not.toBe('hidden');
```

However, this method may not account for scenarios where an element is technically displayed but not visually accessible due to factors like opacity or being obscured by another element.

Another option is to use getBoundingClientRect() to obtain the element's dimensions and then verify if calling document.elementFromPoint on each corner does not return the expected hidden element.

:

Answer 4

When it comes to determining if an element is truly visible, the concept of visibility can be subjective and there is no direct CSS selector like :visible that provides a definitive answer.

Here are a couple of approaches you can consider:

Utilize the not method in Jasmine to check for visibility.

For example:
```
expect(element.css('display')).not.toBe('hidden');
```

However, this method may not account for scenarios where an element is technically displayed but not visually accessible due to factors like opacity or being obscured by another element.

Another option is to use getBoundingClientRect() to obtain the element's dimensions and then verify if calling document.elementFromPoint on each corner does not return the expected hidden element.

:

Verify if a personalized angular directive is able to display or conceal an element

Answer №1

Answer №2

Similar questions

Show or hide the legend on a highchart dynamically

Discovering the exact latitude and longitude coordinates along a specific route using Google Maps

jQuery/AJAX caching problem

The jQuery script removal functionality originated from the use of ajax

New to Angular: Getting Started with NgModel Binding

Two vertical divs stacked on top of each other, each expanding to the entire height and width of the browser window

Resetting several sticky titles after displaying and hiding elements

Exploring the best practices for loading state from local storage in VueJS/NuxtJS by leveraging the "useLocalStorage" utility

Retrieve the AngularJS scope object by using an alternate scope object as the identifier

Adjusted position of the viewport if the DOM element containing the renderer is not located at the top of the display

Converting JSON to Array: A Step-by-Step Guide

Using inline JavaScript to style an element when clicked

'jQuery' is not recognized as defined, error no-undef

Provide the option to assign values on select options in order to choose specific JSON data

Tips for properly passing data from Ajax to PHP and extracting value from it

Managing multiple JQuery Dialog boxes can be tricky, especially when you can only close one instance at a time

"Utilize PHP and AJAX to dynamically filter records based on selected values from a

How to continuously submit a single form field with Jquery using setInterval?

Adding Proxy-Authorization Header to an ajax request

React - updates to server values do not display in DOM right away