Test from color-picker-tutorial doesn't work
Hi. I'm following the Color picker tutorial and I've got to the test part. I think it might be how the context render the output.
This is how I have my folders structure:
/src
|__/components
|__/color-picker
|__/components
|__/color-picker-header
|__/test
|__test.js
Then, in my test.js file, I have this:
const expect = require('chai').expect;
test('color-picker-header color', function (context) {
const output = context.render({
color: '#000000'
});
expect(output.$('div').attr('style')).to.contain('background-color:#000000');
});
So, running the test, I've got the next error:
AssertionError: object tested must be an array, a map, an object, a set, a string, or a weakset, but undefined given
To see what was happening, I used the html function from Cheerio; the result:
const html = output.$.html();
// <body>[object Object]</body>
I'm not sure, if that output is correct; I mean, if is espected. But, doing the same using output.$('div') I've got initialize(0).
You did not mention which version of marko-cli marko etc do you use.
I spent some time to make it work too, but basically every step is in the README :) Here is what i missed at first glance, maybe it helps:
With [email protected] [email protected] :
-
Make sure that all lasso, lasso-*, mocha, chai, etc. dependencies are definied in the
package.jsondevDependenciessection. eg.:$ npm i --save-dev ... -
Make sure you have a
marko-cli.jsconfiguration file in the root directory based on the example in the README.md -
I think it is a goot idea to separate tests in
-
test.server.jsfor snapshot test (with cheerio) and other unit tests -
test.browser.jsfor browser test with puppeteer to test event handlers
Maybe it worth mention that puppeteer has all kind of issues handling click() events, i could not make it work so far. If someone could point to the right direction i would really appreciate it.
Well, I updated [email protected] (global) and [email protected]. I installed mocha just in case, even if the website said that the package is built on top of mocha.
"devDependencies": {
"chai": "^4.1.2",
"mocha": "^4.0.1"
}
from the README file:
test.js - runs only in the browser // I'm using this
test.server.js or test-server.js - runs only on the server // I tried this one too
test.browser.js or test-browser.js - runs only in the browser
An optional prefix can also be provided for grouping tests:
foo.test.js or foo-test.js
foo.test.server.js or foo-test-server.js
foo.test.browser.js or foo-test-browser.js
So following the rules above, my file name was right. but!, after updated marko-cli and marko, I'm still getting this error: AssertionError: object tested must be an array, a map, an object, a set, a string, or a weakset, but undefined given
If i install marko-cli as a devDependencie, I've got a different error, the next one:
An error occurred while trying to compile template at path "C:\Users\diego\Documents\Marko Projects\color-picker\node_modules\marko-cli\src\commands\
sest\util\browser-tests-runner\page-template.marko". Error(s) in template:
\test\util\browser-tests-runner\page-template.marko". Error(s) in template: b.
1) [node_modules\marko-cli\src\commands\test\util\browser-tests-runner\page-template.marko:1:0] Unrecognized tag: lasso-page - More details: https://githu
b) [node_modules\marko-cli\src\commands\test\util\browser-tests-runner\page-template.marko:8:8] Unrecognized tag: lasso-head - More details: https://github.
Error: An error occurred while trying to compile template at path "C:\Users\diego\Documents\Marko Projects\color-picker\node_modules\marko-cli\src\command
s\test\util\browser-tests-runner\page-template.marko". Error(s) in template: ub
1) [node_modules\marko-cli\src\commands\test\util\browser-tests-runner\page-template.marko:1:0] Unrecognized tag: lasso-page - More details: https://githu
b.com/marko-js/marko/wiki/Error:-Unrecognized-Tag ub
2) [node_modules\marko-cli\src\commands\test\util\browser-tests-runner\page-template.marko:8:8] Unrecognized tag: lasso-head - More details: https://githu
b.com/marko-js/marko/wiki/Error:-Unrecognized-Tag
3) [node_modules\marko-cli\src\commands\test\util\browser-tests-runner\page-template.marko:15:8] Unrecognized tag: lasso-body - More details: https://gith
ub.com/marko-js/marko/wiki/Error:-Unrecognized-Tag
4) [node_modules\marko-cli\src\commands\test\util\browser-tests-runner\page-template.marko:19:8] Unrecognized tag: lasso-slot - More details: https://gith
ub.com/marko-js/marko/wiki/Error:-Unrecognized-Tag
Even doing what the link from the error says, the test doesn't work. [Unrecognized Tag](https://gith ub.com/marko-js/marko/wiki/Error:-Unrecognized-Tag)
Do I have to make the marko-cli.js?, because the README files makes me feel like it is optional.
Yes you have to create marko-cli.js with the content i linked. And you have to add at least lasso lasso-marko lasso-require packages to the devDependencies If you have another lasso plugin installed, you have to add that to.
At least I had to.
Yeah, the README could be explicit.
I work on node:8.8.1-slim (docker) under debian 8.9. If someone more experienced can confirm the needs of the steps above, I am happy to create a PR with updated README
Edit: I created a sample project
I played with it a little bit more. I think the problem is that the [email protected] project has [email protected] dependency. While [email protected] package has [email protected] dependency.
I think the solution is to add the
"lasso": "*"
line to the package.json devDependencies section. Updated the example
@lependu @DracotMolver This is a bug. I'll get a fix out sometime today. Thanks for reporting this!
@lependu thanks for the demo!. @lependu, thanks a lot for that 👍