marko-js / cli

command-line tools for Marko
MIT License
95 stars 36 forks source link

support test file along side single-file componet #53

Closed ironsweet closed 6 years ago

ironsweet commented 6 years ago

This is to extend the #6 further. In short, I'd like to use following organization of files,

/components/mycomponent.marko
/components/mycomponent-test.js

I'm raising this because, per this Pro Tip, markojs seems to encourage use of single file component. So I would like to see test file along side this file too, save another folder, compared to #6.

Let's stretch it further a bit, is it possible to write test inside the single file component, and let bundler to auto-strip the test during production build.

austinkelleher commented 6 years ago

Hey @balzaczyy. Thanks for opening this issue. This is actually already supported by registering a custom test matcher in your marko-cli.js. marko test can take a glob pattern that tells it where it should look for tests, then you can define a custom test matcher inside your marko-cli.js to find the renderer path. Here is a working example of how to accomplish what you want:

CLI Command:

marko test ./components/**/*-test.js

marko-cli.js in the root of your project:

const path = require('path');

module.exports = function (markoCli) {
  markoCli.config.testMatcher = function (file) {
    const testRegExp = /^(?:(.+?)[-.])?(?:spec|test)(?:[-.](server|browser))?[.]/i;
    const basename = path.basename(file);
    const testMatches = testRegExp.exec(basename);

    if (!testMatches) {
      // The file is not a test file
      return false;
    }

    const componentDirectory = path.dirname(file);
    const componentName = path.basename(componentDirectory); // header

    // /components/header.marko
    const rendererPath = `${componentDirectory}/${componentName}.marko`;

    return {
      groupName: testMatches[1],
      env: testMatches[2] || 'browser',
      componentName: componentName,
      rendererPath: rendererPath
    };
  };
};
ironsweet commented 6 years ago

Unfortunately it doesn't work for me. Firstly, the marko-cli.js doesn't seem to be loaded. And I hit following error.

$ marko test ./src/components/**/*-test.js
header-test.js
selection-test.js
Server running at http://localhost:1024
Running "http://localhost:1024" using mocha-phantomjs...
Exiting, closing server...
events.js:182
      throw er; // Unhandled 'error' event
      ^

Error: Render async fragment error (lasso-slot:head). Exception: Error: Failed to walk dependency [require: /Users/zhouyiyan/workspace/marko-doc/src/components/color-picker/components/header-test.js]. Dependency chain: [require: /Users/zhouyiyan/workspace/marko-doc/src/components/color-picker/components/header-test.js]. Cause: Error: Module not found: ./components.marko (from "src/components/color-picker/components" and referenced in "src/components/color-picker/components/header-test.js")
    at module.exports (/Users/zhouyiyan/.config/yarn/global/node_modules/lasso/node_modules/raptor-util/createError.js:7:50)
    at AsyncValue.<anonymous> (/Users/zhouyiyan/.config/yarn/global/node_modules/lasso/lib/dependency-walker.js:141:48)
    at notifyCallbacks (/Users/zhouyiyan/.config/yarn/global/node_modules/raptor-async/AsyncValue.js:76:35)
    at AsyncValue.reject (/Users/zhouyiyan/.config/yarn/global/node_modules/raptor-async/AsyncValue.js:240:9)
    at getDependenciesCallback (/Users/zhouyiyan/.config/yarn/global/node_modules/lasso/lib/dependencies/Dependency.js:373:47)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)
Caused by: Error: Module not found: ./components.marko (from "src/components/color-picker/components" and referenced in "src/components/color-picker/components/header-test.js")
    at handleRequire (/Users/zhouyiyan/.config/yarn/global/node_modules/lasso-require/src/inspect-cache.js:34:23)
    at Array.map (<anonymous>)
    at resolveInspectedRequires (/Users/zhouyiyan/.config/yarn/global/node_modules/lasso-require/src/inspect-cache.js:45:61)
    at inspectCache.get.then (/Users/zhouyiyan/.config/yarn/global/node_modules/lasso-require/src/inspect-cache.js:127:17)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)
    at AsyncStream.error (/Users/zhouyiyan/.config/yarn/global/node_modules/marko/src/runtime/html/AsyncStream.js:411:13)
    at process.nextTick (/Users/zhouyiyan/.config/yarn/global/node_modules/lasso/taglib/slot-tag.js:99:30)
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickCallback (internal/process/next_tick.js:180:9)
Error loading resource http://localhost:1024/ (2). Details: Connection closed
Failed to load the page. Check the url: http://localhost:1024
austinkelleher commented 6 years ago

It's hard to say exactly what is happening without seeing your exact directory structure or a sample project. Perhaps you could create a demo repo with this issue? Thanks.

ironsweet commented 6 years ago

Forgot to copy my repo here. :)

https://github.com/balzaczyy/marko-doc/tree/fix/test/src/components/color-picker/components

ironsweet commented 6 years ago

Great, it works. I hope it can be documented somewhere or integrated into starter, so others can use out-of-the-box.