Test failed : Expected spy init to have been called

[amiceli]

I'm creating an angular application with ui-tinymce.

I tried to test my code, bu that test (same in ui-tinymce source) fail :

 it('should save signature calling Api', function () {
        httpBackend.when('GET', 'api/signature').respond({});
        spyOn(tinymce, 'init');
        compile();
        expect(tinymce.init).toHaveBeenCalled();
    })

And here the full code :

   describe('controllers', function () {
    beforeEach(module('lsi.controllers'));
    beforeEach(module('lsi.services'));
    beforeEach(module('ngResource'));
    beforeEach(module('ui.tinymce'));
    beforeEach(module('oitozero.ngSweetAlert'));

describe('Signature Controller', function () {

    var scope, rootScope, httpBackend, api, $compile, $timeout, element, directiveElement, id;

    beforeEach(function() {
        // throw some garbage in the tinymce cfg to be sure it's getting thru to the directive
        angular.module('ui.tinymce').value('uiTinymceConfig', {tinymce: {bar: 'baz'}});
    });

    beforeEach(inject(function ($rootScope, $controller, $httpBackend, $resource, $http, Api, _$compile_, _$timeout_) {

        scope       = $rootScope.$new();
        rootScope   = $rootScope;
        httpBackend = $httpBackend;
        api         = Api;
        $compile    = _$compile_;
        $timeout    = _$timeout_;

        $controller('SignatureController', {
            $scope: scope,
            Api : Api,
            $http: $http
        });
    }));

    afterEach(function() {
        angular.module('ui.tinymce').value('uiTinymceConfig', {});
        tinymce.remove('textarea');
    });

    function compile() {
        element = $compile('<form><textarea ui-tinymce="{foo: \'bar\', setup: setupFooBar }" data-ng-model="foo"></textarea></form>')(scope);
        angular.element(document.getElementsByTagName('body')[0]).append(element);
        scope.$apply();
        $timeout.flush();
        directiveElement = element.find('textarea');
        id = directiveElement.attr('id');
    }

    it('should initialize an empty signature', function () {
        expect(scope.signature).toEqual({
            name : '',
            content : '',
            client : null
        });
    });

    it('should save signature calling Api', function () {
        httpBackend.when('GET', 'api/signature').respond({});
        spyOn(tinymce, 'init');
        compile();
        expect(tinymce.init).toHaveBeenCalled();
    })
});
});

Thank ! `

[deeg]

Why do you need to add that test to your code? What exactly are you trying to test? It would help if you could add a plunker of how you are using TinyMCE to better understand how you should test it in your code.

I am going to close this issue as I don't believe there is a bug, but I can continue to help you if you comment back here.

[amiceli]

I'm creating a web application with angularJS. I would test that tiny mce is correctly initialized in my controller.

My controller :

angular.module('lsi.controllers', ['ui.tinymce', 'oitozero.ngSweetAlert'])
    .controller('SignatureController', function ($scope, Api, $http, $sce, SweetAlert, $q) {

        $scope.tinymceOptions = {
            setup: function (editor) {
                $scope.editor = editor;
                editor.on("change", function () {
                    $scope.content = $sce.trustAsHtml(editor.getContent());
                });
            },
            inline: false,
            plugins: 'image textcolor colorpicker',
            image_advtab: true,
            menubar: 'file edit format',
            toolbar: 'undo redo | ' +
            'bold italic underline | ' +
            'link hr | ' +
            'alignleft aligncenter alignright | ' +
            'blockquote bullist numlist outdent indent | ' +
            'image | ' +
            'forecolor backcolor gold',
            skin: 'lightgray',
            theme: 'modern'
        };

    });

[deeg]

If I were testing this controller, I would just test that $scope.tinymceOptions is an object and test any values of the configuration on that object that you want to make sure is correct.

I would argue you do not need to test tinymce initializing as part of this controller.

Let me know if you need any more help.

[amiceli]

Tank for your help.

Just another question, how can I test edtir on change event ? In my example to test $scope.content has changed.

[deeg]

Not sure what testing framework you are using, but the general concept I would use is:

• Get a handle on $scope.tinymceOptions
• Call $scope.tinymceOptions.setup(spy) while passing in a spy you make for editor.
• Verify $scope.editor is the spy
• Verify editor.on spy is called with correct arguments
• Then you can get ahold of the second argument of the call to '.on' if you want and call that and verify $scope.content get sets correctly
  • You can have your spy, editor.getContent return a known value so you can test $scope.content

Hope that helps.

[amiceli]

It works, thanks for your help.