cli icon indicating copy to clipboard operation
cli copied to clipboard

Test from color-picker-tutorial doesn't work

Open DracotMolver opened this issue 8 years ago • 6 comments

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

DracotMolver avatar Oct 28 '17 16:10 DracotMolver

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] :

  1. Make sure that all lasso, lasso-*, mocha, chai, etc. dependencies are definied in the package.json devDependencies section. eg.: $ npm i --save-dev ...

  2. Make sure you have a marko-cli.js configuration file in the root directory based on the example in the README.md

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

lependu avatar Oct 29 '17 20:10 lependu

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.

DracotMolver avatar Oct 30 '17 01:10 DracotMolver

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 avatar Oct 30 '17 08:10 lependu

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 avatar Nov 02 '17 11:11 lependu

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

austinkelleher avatar Nov 02 '17 15:11 austinkelleher

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

DracotMolver avatar Nov 02 '17 15:11 DracotMolver