refactor(tests): convert to TypeScript #508
Conversation
mightyiam
force-pushed
the
typescript-tests
branch
from
3564654
to
6c1a83a
Compare
.ecrc
Outdated
| { | ||
| "ignoreDefaults": true, | ||
| "exclude": [ | ||
| "^coverage/", | ||
| "^node_modules/", | ||
| "^es/", | ||
| "^helpers/", | ||
| "^modules/", | ||
| "^test/", | ||
| "^h.d.ts", | ||
| "^h.js", | ||
| "^h.js.map", | ||
| "^hooks.d.ts", | ||
| "^hooks.js", | ||
| "^hooks.js.map", | ||
| "^htmldomapi.d.ts", | ||
| "^htmldomapi.js", | ||
| "^htmldomapi.js.map", | ||
| "^is.d.ts", | ||
| "^is.js", | ||
| "^is.js.map", | ||
| "^jsx.d.ts", | ||
| "^jsx-global.d.ts", | ||
| "^jsx.js", | ||
| "^jsx.js.map", | ||
| "^snabbdom.bundle.d.ts", | ||
| "^snabbdom.bundle.js", | ||
| "^snabbdom.bundle.js.map", | ||
| "^snabbdom.d.ts", | ||
| "^snabbdom.js", | ||
| "^snabbdom.js.map", | ||
| "^thunk.d.ts", | ||
| "^thunk.js", | ||
| "^thunk.js.map", | ||
| "^tovnode.d.ts", | ||
| "^tovnode.js", | ||
| "^tovnode.js.map", | ||
| "^vnode.d.ts", | ||
| "^vnode.js", | ||
| "^vnode.js.map" | ||
| ] | ||
| } |
There was a problem hiding this comment.
This part is just #506.
| @@ -33,6 +33,7 @@ node_modules | |||
| /es/modules/style.d.ts | |||
| /es/modules/style.js | |||
| /es/modules/style.js.map | |||
| /es/test/ | |||
There was a problem hiding this comment.
We have new build artifacts. The tests. They should be ignored along with the rest of the build artifacts. This is from the ES modules build.
| @@ -92,6 +93,7 @@ node_modules | |||
| /modules/style.d.ts | |||
| /modules/style.js | |||
| /modules/style.js.map | |||
| /test/ | |||
There was a problem hiding this comment.
Same as above. This is from the CommonJS build.
| @@ -19,7 +19,7 @@ module.exports = function(config) { | |||
| basePath: '.', | |||
| frameworks: ['mocha', 'karma-typescript'], | |||
| // list of files / patterns to load in the browser | |||
| files: [{pattern: 'src/**/*.ts'}, {pattern: 'test/**/*'}], | |||
| files: [{pattern: 'src/**/*.ts'}], | |||
There was a problem hiding this comment.
The tests are moved to src/test so no two patterns. Just one.
| 'src/**/*.ts': ['karma-typescript'], | ||
| 'test/**/*.{js,ts,tsx}': ['karma-typescript'], | ||
| 'src/**/*.{ts,tsx}': ['karma-typescript'] |
There was a problem hiding this comment.
Only one preprocessor definition, because everything is under src. And there's no .js file anywhere in src.
|
|
||
| var snabbdom = require('../snabbdom'); | ||
| fakeRaf.use(); |
There was a problem hiding this comment.
When using require calls, with whatever karma uses as a module system, this .use() call occurs before the style module is evaluated. But converting this to TypeScript and static imports, the only way to have the .use() call occur before the import, seems to be using dynamic import() call. If we had top-level await then it would have been reasonable. But TypeScript doesn't support that yet.
So I removed this sweet little tool by @paldepind and replaced it with actual calls to the real requestAnimationFrame. See the test below.
| var vnode1 = h('div', {style: {'--myVar': 1}}); | ||
| var vnode2 = h('div', {style: {'--myVar': 2}}); | ||
| var vnode3 = h('div', {style: {'--myVar': 3}}); | ||
| var vnode1 = h('div', {style: {'--myVar': 1 as any}}); | ||
| var vnode2 = h('div', {style: {'--myVar': 2 as any}}); | ||
| var vnode3 = h('div', {style: {'--myVar': 3 as any}}); | ||
| elm = patch(vnode0, vnode1).elm; | ||
| assert.equal(elm.style.getPropertyValue('--myVar'), 1); |
There was a problem hiding this comment.
I wonder why these even use numbers instead of strings.
What I find interesting is that they come out as numbers on the other side, as well.
| fakeRaf.step(); | ||
| fakeRaf.step(); | ||
| assert.equal(elm.style.fontSize, '16px'); | ||
| elm = patch(vnode1, vnode2).elm; | ||
| assert.equal(elm.style.fontSize, '18px'); | ||
| fakeRaf.step(); | ||
| fakeRaf.step(); | ||
| assert.equal(elm.style.fontSize, '20px'); | ||
| requestAnimationFrame(() => { | ||
| requestAnimationFrame(() => { | ||
| assert.equal(elm.style.fontSize, '16px'); | ||
| elm = patch(vnode1, vnode2).elm; | ||
| assert.equal(elm.style.fontSize, '18px'); | ||
| requestAnimationFrame(() => { | ||
| requestAnimationFrame(() => { | ||
| assert.equal(elm.style.fontSize, '20px'); | ||
| done() | ||
| }) | ||
| }) | ||
| }) | ||
| }) |
There was a problem hiding this comment.
I little bit more indented, but works. One thing I don't understand is why it takes two calls to read the change. Anyone?
| @@ -9,6 +9,7 @@ | |||
| "noUnusedLocals": true, | |||
| "jsx": "react", | |||
| "jsxFactory": "jsx", | |||
| "esModuleInterop": true, | |||
There was a problem hiding this comment.
One of the imports required this. I don't even remember. Whatever. Should be on anyway.
| "src/test/attachto.ts", | ||
| "src/test/attributes.ts", | ||
| "src/test/core.ts", | ||
| "src/test/dataset.ts", | ||
| "src/test/eventlisteners.ts", | ||
| "src/test/htmldomapi.ts", | ||
| "src/test/jsx.tsx", | ||
| "src/test/style.ts", | ||
| "src/test/thunk.ts", |
There was a problem hiding this comment.
Hey, TypeScript, please compile these, as well.
|
This should open the door to solving some type issues we have with confidence, because the code changes would be tested in the tests. Because the tests would be TypeScript and not just JavaScript. Forgive my English. It's 4:29 am. |
|
Just as a side note: T-man: Super test manager for JavaScript. (Lightweight.) |
mightyiam
force-pushed
the
typescript-tests
branch
from
6c1a83a
to
a1670f4
Compare
Closes #293.
Fixes #509.