Test from color-picker-tutorial doesn't work #62

DracotMolver · 2017-10-28T16:14:45Z

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).

The text was updated successfully, but these errors were encountered:

lependu · 2017-10-29T20:15:25Z

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 marko-cli@2.1.2 marko@4.5.6 :

Make sure that all lasso, lasso-*, mocha, chai, etc. dependencies are definied in the package.json devDependencies section. eg.: $ npm i --save-dev ...
Make sure you have a marko-cli.js configuration 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.js for snapshot test (with cheerio) and other unit tests
test.browser.js for 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.

DracotMolver · 2017-10-30T01:56:52Z

Well, I updated marko-cli@2.12 (global) and marko@4.5.6.
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.

lependu · 2017-10-30T08:48:40Z

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

lependu · 2017-11-02T11:52:49Z

I played with it a little bit more. I think the problem is that the marko-starter@2.x.x project has lasso@3.0.0-beta.x dependency. While marko-cli@2.x.x package has lassso@2.x.x dependency.

I think the solution is to add the

 "lasso": "*"

line to the package.json devDependencies section. Updated the example

austinkelleher · 2017-11-02T15:18:20Z

@lependu @DracotMolver This is a bug. I'll get a fix out sometime today. Thanks for reporting this!

DracotMolver · 2017-11-02T15:31:51Z

@lependu thanks for the demo!.
@lependu, thanks a lot for that 👍

DracotMolver changed the title ~~Test from color-picker-tutorila doesn't work~~ Test from color-picker-tutorial doesn't work Oct 28, 2017

austinkelleher added the bug label Nov 2, 2017

austinkelleher self-assigned this Nov 2, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Test from color-picker-tutorial doesn't work #62

Test from color-picker-tutorial doesn't work #62

DracotMolver commented Oct 28, 2017

lependu commented Oct 29, 2017

DracotMolver commented Oct 30, 2017

lependu commented Oct 30, 2017 •

edited

Loading

lependu commented Nov 2, 2017

austinkelleher commented Nov 2, 2017

DracotMolver commented Nov 2, 2017

Test from color-picker-tutorial doesn't work #62

Test from color-picker-tutorial doesn't work #62

Comments

DracotMolver commented Oct 28, 2017

lependu commented Oct 29, 2017

DracotMolver commented Oct 30, 2017

lependu commented Oct 30, 2017 • edited Loading

lependu commented Nov 2, 2017

austinkelleher commented Nov 2, 2017

DracotMolver commented Nov 2, 2017

lependu commented Oct 30, 2017 •

edited

Loading