Quick AngularJs tutorial on how to create and test a ‘domain name’ filter. angularjs , open-source https://octoperf.com/blog/2015/09/08/angularjs-domain-filter/ OctoPerf ZI Les Paluds, 276 Avenue du Douard, 13400 Aubagne, France +334 42 84 12 59 contact@octoperf.com Development 266 2021-01-04

AngularJs domain name filter

OctoPerf is JMeter on steroids!
Schedule a Demo

The Domain Filter Problem

Until now, we used default names such as ‘Untitled VU’ for virtual users created in octoperf, our load testing tool. That’s not very relevant. So we changed it to the domain name of the tested website.

The load tester selects a URL to test, and we need to extract the domain name from it.

A nice trick is to create an hyperlink element <a href="..."/>. Then we can retrieve the hostname, parsed by the browser. So instead of relying on a regex we use the browser built-in URI parsing capabilities. It’s easier and safer.

Here is the filter code:

1
2
3
4
5
6
app.filter('domain', [ function () {
    return function (input) {
        var elements = angular.element('<a href="'+input+'"/>');
        return elements[0].hostname;
    };
}]);

We create a a element using angular.element and then retrieve the domain name using elements[0].hostname. It couldn’t be simpler.

To test it, we simply inject the $filter service and check a couple of URLS:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
describe('domain filter', function () {

    var $filter;

    beforeEach(module('app'));
    beforeEach(inject(function (_$filter_) {
        $filter = _$filter_;
    }));

    it('should filter urls', function () {
        expect($filter('domain')('https://octoperf.com')).toBe('octoperf.com');
        expect($filter('domain')('http://blog.octoperf.com')).toBe('blog.octoperf.com');
    });
});

Note:

This solution may be less optimized than the regex one. In our case we call this filter only once when a virtual user is created from URLs. So this is not a big deal for us. But to display multiple URLs as hostnames, we’d rather create the a element only once (and update its href) or switch back to a regex implementation.

AngularJs domain name filter
Tags:
Share:
Want to become a super load tester?
OctoPerf Superman