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?