Wie mache ich Spritzen ein mock-Abhängigkeit in eine eckige Richtlinie mit Jasmin Karma

Habe ich die folgende Richtlinie:

function TopLevelMenuDirective ($userDetails, $configuration) {
    return {
        restrict:'A',
        templateUrl: staticFilesUri + 'templates/TopLevelMenu.Template.html', 
        scope: {
            activeTab: '='
        },
        link: function (scope, element, attributes) {
            var userDetails = $userDetails;
            if ($userDetails) {
                scope.user = {
                    name: userDetails.name ? userDetails.name : 'KoBoForm User',
                    avatar: userDetails.gravatar ? userDetails.gravatar: (staticFilesUri + '/img/avatars/example-photo.jpg')
                };
            } else {
                scope.user = {
                    name: 'KoBoForm User',
                    avatar: staticFilesUri + '/img/avatars/example-photo.jpg'
                }
            }

            scope.sections = $configuration.sections();

            scope.isActive = function (name) {
                return name === scope.activeTab ? 'is-active' : '';
            }
        }
    }
}

Möchte ich verspotte die Abhängigkeiten unit-Tests die unterschiedliche code-Pfade mit bekannten Werten, die von den unit-tests. Ich habe folgende Beispiel-unit-test:

it('should set $scope.user to values passed by $userDetails', 
    inject(function($compile) {
        var element = '<div top-level-menu></div>';
        element = $compile(element)($scope);
        $scope.$apply();

        expect(element.isolateScope().user.name).toBe('test name');
        expect(element.isolateScope().user.avatar).toBe('test avatar');
    }
));

Gibt mir zwei Probleme.

Erstens, weil die Vorlage in einer externen Datei, wenn es lädt, versucht es, um es zu Holen und Fehler heraus, weil die Datei ist nirgends zu finden, was logisch ist, da es in einer Testumgebung und nicht auf einen tatsächlichen server.

Zweitens, es gibt keinen offensichtlichen Weg, Sie zu verspotten die Abhängigkeiten injiziert in die Richtlinie über Ihren Konstruktor. Beim testen von Controllern Sie können die $controller service, aber da Richtlinien instanziiert werden indirekt durch die Erstellung einer html-Tags mit übergeben, Umfang, es gibt keine Möglichkeit zu instanziieren Sie es direkt (z.B. es gibt keine Analog $directive). Dies behindert mich von der Einstellung $userDetails.name und $userDetails.gravatar zu 'test name' und 'test avatar' beziehungsweise.

Wie bekomme ich die Richtlinie richtig kompilieren und laufen mit einer custom $userDetails Abhängigkeit?

InformationsquelleAutor Nicolás Straub | 2013-12-20

17

Laden Sie die Vorlage-Datei, die Sie konfigurieren müssen karma-ng-html2js-preprocessor im karma.

Besuchen Sie zuerst auf dieser Seite und Folgen Sie den Installationsanweisungen. Dann müssen Sie fügen Sie ein paar Einträge in Ihrer karma.config.js Datei:
```
files: [
    'templates/*.html'
],
```
dieser erzählt karma laden Sie alle html-Dateien im Vorlagen-Ordner (wenn Sie Ihre Vorlagen ganz woanders sind, können Sie diese Ordner gibt es).
```
preprocessors: { '**/*.html': 'ng-html2js' },
```
dieser erzählt karma zu übergeben, alle html-Dateien durch die ng-html2js Präprozessor, welcher wandelt diese dann in eckigen Module, legen Sie die Vorlagen in den $templateCache service. Auf diese Weise, wenn $httpBackend Abfragen der "server" für die Vorlage, es wird abgefangen, indem Sie den template-cache und den richtigen html zurückgegeben wird. Alles in Ordnung hier, außer für die Vorlage-URL: es hat entsprechend der templateUrl Eigenschaft, die in der Richtlinie und ng-html2js übergibt den vollständigen Pfad als uri-standardmäßig. Also müssen wir transformieren diesen Wert:
```
ngHtml2JsPreprocessor: {
    cacheIdFromPath: function(filepath) {

        var matches = /^\/(.+\/)*(.+)\.(.+)$/.exec(filepath);

        return 'templates/' + matches[2] + '.' + matches[3];
    }
},
```
dieser erhält filepath auf und gibt Sie über eine regulärer Ausdruck, dass Extrakte der Pfad, Dateiname und extension in ein array. Dann Schreibe 'templates/ zu Dateiname und-Erweiterung, und Sie erhalten die erwarteten uri.

Nachdem all dies getan ist, machen die Vorlage ist eine Frage der laden des Moduls vor dem test wird ausgeführt:
```
beforeEach(module('templates/TopLevelMenu.Template.html'));
```
beachten Sie, module ist ein externer service befindet sich in angular-mocks.js.

zur Injektion eines benutzerdefinierten Dienstes in der Richtlinie müssen Sie das überschreiben der service provider:
```
beforeEach(module(function ($provide) {
    $provide.provider('$userDetails', function () { 
        this.$get = function () {
            return {
                name: 'test name', 
                gravatar: 'test avatar'
            };
        }
    });
}));
```
$provide ist der Dienst, der es ermöglicht Ihre Anbieter. Also, wenn Sie wollen, um zu injizieren, ein mock-Abhängigkeit, die Sie überschreiben die Anbieter hier.

Mit, die code ausführen, bevor Sie Ihren test haben Sie ein mock $userDetails - service, gibt Ihnen vordefinierte strings.

InformationsquelleAutor Nicolás Straub

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.