feat: added support for <await/> tags

README.md

@@ -26,26 +26,74 @@ In the global JEST object, you can pass a `tester` configuration:
 }
 ```
 
-- shallow - You can turn off shallow rendering by passing `false` here. That way marko won't isolate any component test. _(Default: true)_
+- `shallow` _(default: true)_ - You can turn off shallow rendering by passing `false` here. That way marko won't isolate any component test.
 
 ## Usage
 `marko-tester` returns a function for you to use. Pass a relative path to a marko component file and you will receive a `render` method and `fixtures` method/object. By default this will run JEST SnapShots test for the fixtures of the component.
 
-- `render` is a method that renders a component with a given input and mounts it to `document.body`. The mounted component instance is returned.
+- `render` - a method that renders a component with a given input and mounts it to `document.body`. The mounted component instance is returned.
 
-- `fixtures` is an object by default. It contains all the fixtures that are found within the `__snapshots__` folder for the component. If a `withoutFixtures` option is passed, `fixtures` will also be a function that will run JEST SnapShots test for your fixtures. You will still be able to get any fixture content by the filename: `fixtures[FixtureFileName]`.
+- `fixtures` - an object that contains all fixtures that are found within the `__snapshots__` folder for the component. You can get content of a fixture by specifying a filename: `fixtures[FixtureFileName]`.
 
-### Example
-You can find examples in the `tests` folder. The boilerplate looks like this:
+As a second argument you can pass options object:
+
+- `withoutFixtures` _(default: false)_ - set this to true if you don't want automatic snapshot test execution. At this point `fixtures` will become executable and you will be able to run snapshot test using `fixtures()`.
+
+- `withAwait` _(default: false)_ - if your template has `<await/>` tag in it, you need to set this to true. At this point `render` will become an asynchronous function and you will need to treat it with await.
+
+### Examples
+The boilerplate looks like this:
+
+```
+const { render, fixtures } = require('marko-tester')('../index.marko');
+
+describe('When component is rendered without results', () => {
+  let component;
+
+  beforeEach(() => {
+    component = render(fixtures['without-results']);
+  });
+
+  afterEach(() => {
+    component.destroy();
+  });
+
+  ...your assertions...
+});
+```
+
+Without fixtures:
 
 ```
-const { render } = require('marko-tester')('../index.marko');
+const { render, fixtures } = require('marko-tester')('../index.marko', { withoutFixtures: true });
+
+fixtures();
 
-describe('When component is rendered', () => {
+describe('When component is rendered with records', () => {
   let component;
 
   beforeEach(() => {
-    component = render(fixtures.default);
+    component = render(fixtures.records);
+  });
+
+  afterEach(() => {
+    component.destroy();
+  });
+
+  ...your assertions...
+});
+```
+
+Asynchronous:
+
+```
+const { render, fixtures } = require('marko-tester')('../index.marko', { withAwait: true });
+
+describe('When component is rendered without model', () => {
+  let component;
+
+  beforeEach(async () => {
+    component = await render(fixtures.empty);
   });
 
   afterEach(() => {
@@ -56,8 +104,10 @@ describe('When component is rendered', () => {
 });
 ```
 
+You can find more examples in the `tests` folder.
+
 ## References
-* [Marko](http://markojs.com)
+* [marko](http://markojs.com)
 * [jest](https://jestjs.io)
 
 ## Thanks

src/index.js

@@ -32,7 +32,7 @@ const getFullPath = (componentPath) => {
   return index > -1 && resolve(stack[index].getFileName(), '..', componentPath);
 };
 
-module.exports = (componentPath, { withoutFixtures } = {}) => {
+module.exports = (componentPath, { withoutFixtures, withAwait } = {}) => {
   const fullPath = getFullPath(componentPath);
 
   if (!fullPath) {
@@ -42,25 +42,25 @@ module.exports = (componentPath, { withoutFixtures } = {}) => {
   const render = (input) => {
     /* eslint-disable-next-line global-require, import/no-dynamic-require */
     const component = require(fullPath);
+    const mount = comp => comp.appendTo(document.body).getComponent();
 
     /* eslint-disable-next-line global-require, import/no-unresolved */
     require('marko/components').init();
 
     jest.resetModules();
 
-    return component
-      .renderSync(clone(input))
-      .appendTo(document.body)
-      .getComponent();
+    return withAwait
+      ? component.render(clone(input)).then(mount)
+      : mount(component.renderSync(clone(input)));
   };
   const fixturesPath = getFullPath('__snapshots__');
   const runFixtures = () => {
     /* eslint-disable-next-line no-use-before-define */
     const fixturesEntries = Object.entries(fixtures);
 
     fixturesEntries.forEach(([name, fixture]) => {
-      it(`should render component with ${name} fixture`, () => {
-        const comp = render(clone(fixture));
+      it(`should render component with ${name} fixture`, async () => {
+        const comp = await render(clone(fixture));
         expect(Array.from(document.body.childNodes)).toMatchSnapshot();
         comp.destroy();
       });

tests/components/withAwait/component.js

@@ -0,0 +1,11 @@
+module.exports = {
+  onCreate(input) {
+    this.state = {
+      hidden: input.hidden,
+    };
+  },
+
+  changeInput() {
+    this.state.hidden = true;
+  },
+};

tests/components/withAwait/index.marko

@@ -0,0 +1,15 @@
+<div class="mock-component">
+  <await(res from input)>
+    <h1>${res.title}</h1>
+
+    <button type="button" key="button" on-click('changeInput')>Hello</button>
+
+    <tbody-component attribute=input key="tbody" if(!state.hidden)>
+      <@body>
+        <await(none from {})>
+          body is here
+        </await>
+      </@body>
+    </tbody-component>
+  </await>
+</div>

tests/components/withAwait/test/__snapshots__/default.json

@@ -0,0 +1,4 @@
+{
+  "title": "hello",
+  "i": 0
+}

tests/components/withAwait/test/__snapshots__/hidden.json

@@ -0,0 +1,3 @@
+{
+  "hidden": true
+}

tests/components/withAwait/test/__snapshots__/index.spec.js.snap

@@ -0,0 +1,72 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render component with default fixture 1`] = `
+Array [
+  ,
+  <div
+    class="mock-component"
+  >
+    <h1>
+      hello
+    </h1>
+    <button
+      type="button"
+    >
+      Hello
+    </button>
+    <tbody-component
+      attribute="{\\"title\\":\\"hello\\",\\"i\\":0}"
+    >
+      <at_body>
+        body is here
+      </at_body>
+    </tbody-component>
+  </div>,
+  ,
+]
+`;
+
+exports[`should render component with hidden fixture 1`] = `
+Array [
+  ,
+  <div
+    class="mock-component"
+  >
+    <h1>
+      
+    </h1>
+    <button
+      type="button"
+    >
+      Hello
+    </button>
+  </div>,
+  ,
+]
+`;
+
+exports[`should render component with undefined fixture 1`] = `
+Array [
+  ,
+  <div
+    class="mock-component"
+  >
+    <h1>
+      
+    </h1>
+    <button
+      type="button"
+    >
+      Hello
+    </button>
+    <tbody-component
+      attribute="{}"
+    >
+      <at_body>
+        body is here
+      </at_body>
+    </tbody-component>
+  </div>,
+  ,
+]
+`;

tests/components/withAwait/test/__snapshots__/undefined.js

@@ -0,0 +1 @@
+module.exports = undefined;

tests/components/withAwait/test/index.spec.js

@@ -0,0 +1,17 @@
+const { render, fixtures } = require('../../../../src/index')('../index.marko', { withAwait: true });
+
+describe('When component is rendered', () => {
+  let component;
+
+  beforeEach(async () => {
+    component = await render(fixtures.default);
+  });
+
+  afterEach(() => {
+    component.destroy();
+  });
+
+  it('should process await tags', () => {
+    expect(component.getEl().querySelectorAll('await').length).toBe(0);
+  });
+});