TypeScript project

blakeyrat

How do you debug a unit test written using Karma and Chai?

This thing's failed with "operation not supported" in Firefox and I have no idea how to figure out why.

DCoder

This does work:
    xxxEvent.initCustomEvent(
        "xxxdata",
        true,
        false,
        "test"
    );
TypeScript doesn't let you name your params and/or skip optional params? I guess?

That's exactly it. TypeScript doesn't have named parameters and the authors don't plan to add them.

cartman82

@blakeyrat said in TypeScript project:

How do you debug a unit test written using Karma and Chai?
This thing's failed with "operation not supported" in Firefox and I have no idea how to figure out why.

Maybe add debugger; inside the failing unit test?

blakeyrat

@cartman82 I hit the red dot on the sidebar, but I'll give that a try...

EDIT: no go, but I noticed all three browsers the tests run in (IE11, Firefox and Chrome) all give me some error:

IE 11.0.0 (Windows 10 0.0.0) Pointer Tests validates that custom events are processed by xxx FAILED
        NotSupportedError

Firefox 54.0.0 (Windows 10 0.0.0) Pointer Tests validates that custom events are processed by xxx FAILED
        Operation is not supported

IE11 and FF54 give some variation of "not supported" (I have no idea WHICH line specifically is not supported, and without the debugger no way of finding out I guess?

Chrome gives:

Chrome 59.0.3071 (Windows 10 0.0.0) Pointer Tests validates that custom events are processed by xxx FAILED
        Error: Failed to execute 'createEvent' on 'Document': The provided event type ('xxxdata') is invalid.

Which is thankfully more specific, but it also means that Chrome has already (seemingly?) deprecated this method of creating events, which means maybe I'm going back to needing the polyfill installed to make Chrome happy.

BTW Chrome: the whole point of a custom DOM event is I can give it whatever name I fucking want. Saying the name is invalid is gibberish nonsense. If the real error is "Chrome doesn't support that syntax for sending custom DOM events anymore" then fucking say so!

I hate all software.

blakeyrat

Aaaaa this test framework either doesn't bother to rebuild the code when it should, or doesn't do anything to invalidate browser caches.

Because I fixed up there where it says "Pointer tests" to say "Custom Event Tests" and the test framework output still says "Pointer tests". So I might be debugging phantom errors I already fucking fixed.

EDIT: Lookie that, I rebuild as a separate step and now I get new error messages, and these ones are actually actionable:

IE 11.0.0 (Windows 10 0.0.0) Custom Data Tests validates that custom events are processed by xxx FAILED
        TypeError: Object doesn't support property or method 'initCustomEvent'

Chrome 59.0.3071 (Windows 10 0.0.0) Custom Data Tests validates that custom events are processed by xxx FAILED
        TypeError: xxxEvent.initCustomEvent is not a function

Firefox 54.0.0 (Windows 10 0.0.0) Custom Data Tests validates that custom events are processed by xxx FAILED
        xxxEvent.initCustomEvent is not a function

Ok so maybe the guidance that said the createEvent()/initCustomEvent() syntax was deprecated but still works in Firefox and IE11 was wrong. These errors make it seem like none of these browsers support it.

Imagine that! Actionable error messages!

blakeyrat

Firefox docs say to use initCustomEvent(). IE docs say to use initEvent() (same params.)

IE is correct. Firefox is incorrect. initEvent() works in all three browsers this test framework runs the tests in. initCustomEvent() doesn't even work in Firefox itself. Gotta love web dev.

My unit tests are still failing but now for legit reasons.

blakeyrat

export default class CustomData implements IPlugin {
    private eventName = "Custom";

    public activate() {
        // Install DOM handler
        bind(window, "xxxdata", this.customDataHandler);
    }

    private customDataHandler(customEvent: ICustomEvent) {
        doStuff(this.eventName, { detail: customEvent.detail });
    }
}

When customDataHandler fires, this.eventName is undefined... why?

I would say it's the "well you need to do a var that = this thing in your JS because this changes scope, but there's another event handler in this codebase virtually identical to this one, and it has access to this.whatever.

At least I've tracked down the error, but now... WHY!?

blakeyrat

@blakeyrat Ah. The example code was explicitly using .bind() on the event handler to ensure the this namespace was correct. I just missed it.

blakeyrat

Boom. My feature works. The unit tests for my feature works. I am king of all TypeScript.

dkf

@createdtodislikethis said in TypeScript project:

some winapis randomly fail sometimes

It's not random. It's antivirus software locking the file while it scans it.