getContext failing when deployed

[RobbieTheWagner]

I'm not sure if this is an error with this library or the fact I am putting it in a UI Bootstrap modal or what exactly is happening, but everything works flawlessly locally, then when I deploy I get an error with getContext.

The problem is, getElementById('pdf-canvas') does not seem to be working, so the element is not there for some reason. Locally the element is there, but deployed it is not.

Any ideas?

[Elecash]

This is happening to me also unit testing with PhantomJS.

Trying to figure out what's wrong, I would try to PR if I found it.

[simobasso]

Hi @rwwagner90,
can you create an example on jsbin/jsfiddle?

[simobasso]

Hi @Elecash,

can you create an example with your unit test?

[Elecash]

Hi @simobasso

Basically I have a directive that contains ng-pdfand when I execute tests Karma can't run due to an error.

My unit test:

describe('Unit testing documents component', function() {
    var $compile;
    var $rootScope;
    var $routeParams;
    var SAF_CONFIG;
    var element;
    var ctrl;

    beforeEach(module('saf'));

    beforeEach(inject(function($injector){
        $compile = $injector.get("$compile");
        $rootScope = $injector.get("$rootScope");
        $routeParams = $injector.get("$routeParams");
        SAF_CONFIG = $injector.get("SAF_CONFIG");

        $routeParams.docId = "1";

        element = $compile("<saf-document></saf-document>")($rootScope);
        $rootScope.$digest();

        ctrl = element.controller('safDocument');
    }));

    it('Should contains a document viewer', function() {
        expect(element.html()).toContain('<saf-pdf-viewer pdf-url="ctrl.pdfUrl" class="ng-isolate-scope">');
    });

    it('Should get documents on start', function() {
        expect(ctrl.pdfUrl).toBe(SAF_CONFIG.baseUrl + "/documents/1");
    });
});

Error thrown:

PhantomJS 1.9.8 (Mac OS X 0.0.0) Unit testing documents component Should get documents on start FAILED
        TypeError: 'null' is not an object (evaluating 'canvas.getContext')
            at /Applications/MAMP/htdocs/safx-web/resources/dist/libs.js:2862
            at aa (/Applications/MAMP/htdocs/safx-web/resources/dist/libs.js:114)
            at K (/Applications/MAMP/htdocs/safx-web/resources/dist/libs.js:103)
            at /Applications/MAMP/htdocs/safx-web/resources/dist/libs.js:110
            at /Applications/MAMP/htdocs/safx-web/resources/dist/libs.js:160
            at /Applications/MAMP/htdocs/safx-web/resources/dist/libs.js:174
            at /Applications/MAMP/htdocs/safx-web/resources/dist/libs.js:171
            at /Applications/MAMP/htdocs/safx-web/tests/unit/saf-app/comps/documents/documents.spec.js:23
            at e (/Applications/MAMP/htdocs/safx-web/resources/dist/libs.js:80)
            at workFn (/Applications/MAMP/htdocs/safx-web/resources/dist/libs.js:2790)
        TypeError: 'undefined' is not an object (evaluating 'ctrl.init')
            at /Applications/MAMP/htdocs/safx-web/tests/unit/saf-app/comps/documents/documents.spec.js:41

I'm doing some research right now, I will tell you if I find anything.

[simobasso]

@Elecash https://docs.angularjs.org/guide/unit-testing#testing-directives-with-external-templates maybe this help you

[Elecash]

That's not the problem, I already have all my templates with $templateCache.

For the moment I'm just going to disable those tests. So far everything is working, is just those tests. I would try to fix it next week tho.

Anyway, good work with the library, it worked better than other libraries that I've tested 😄

[simobasso]

Thanks!

We wait your pull request!

[simobasso]

@rwwagner90 @Elecash find out!

ng-pdf dirtective use document.getElementById('pdf-canvas').

In Elecash example you compile directive correct but you don't append them to document, then document don't have a node with canvasid.

please (re)view #84 for an example.

Cheers

[Elecash]

At the end I've made my own ng-pdf directive and I don't have any problems now, so feel free to close this issue if is ok for @rwwagner90 too.

[RobbieTheWagner]

@simobasso @Elecash Is the example you are referring to just tests? I am having this issue just using the directive inside of a modal

[simobasso]

@rwwagner90 can you reproduce on jsbin/jsfiddle?

[simobasso]

@rwwagner90 have you seen #12?

[RobbieTheWagner]

@simobasso I have seen that issue. I will create an example for you guys, at some point, but I can't right now.

[RobbieTheWagner]

Can we keep this open until I have a chance to make an example and make sure we get it all sorted out?

[simobasso]

yes, my bad.

I've referenced the issue in a pull request. sorry.

[sayanee]

This issue is more than 3 months old and there hasn't been much activity on it. Closing, but please re-open it with a pull request on the bug 🤗