1. ホーム
  2. angularjs

[解決済み] templateUrlを使用したAngularJSディレクティブのユニットテスト

2022-08-28 06:54:46

質問

AngularJSを使用しています。

ディレクティブを持つ。

ディレクティブで定義される templateUrl .

ディレクティブはユニットテストが必要です。

現在、Jasmineでユニットテストを行っています。

これは のようなコードを推奨しています。

describe('module: my.module', function () {
    beforeEach(module('my.module'));

    describe('my-directive directive', function () {
        var scope, $compile;
        beforeEach(inject(function (_$rootScope_, _$compile_, $injector) {
            scope = _$rootScope_;
            $compile = _$compile_;
            $httpBackend = $injector.get('$httpBackend');
            $httpBackend.whenGET('path/to/template.html').passThrough();
        }));

        describe('test', function () {
            var element;
            beforeEach(function () {
                element = $compile(
                    '<my-directive></my-directive>')(scope);
                angular.element(document.body).append(element);
            });

            afterEach(function () {
                element.remove();
            });

            it('test', function () {
                expect(element.html()).toBe('asdf');
            });

        });
    });
});

Jasmineでコードを実行する。

エラーが発生する。

TypeError: Object #<Object> has no method 'passThrough'

templateUrlはそのまま読み込む必要があります。

使用できない respond

関連する可能性のある ngMock よりも ngMockE2E を使うようにします。

どのように解決するのですか?

結局やったことは、テンプレートキャッシュを取得して、そこにビューを入れることでした。 ngMockを使わないのはどうしようもない、ということがわかりました。

beforeEach(inject(function(_$rootScope_, _$compile_, $templateCache) {
    $scope = _$rootScope_;
    $compile = _$compile_;
    $templateCache.put('path/to/template.html', '<div>Here goes the template</div>');
}));