Skip to content

Commit

Permalink
fix: exposed marko-tester as a function
Browse files Browse the repository at this point in the history
  • Loading branch information
oxala committed Sep 22, 2018
1 parent fdd31f9 commit f41aae7
Show file tree
Hide file tree
Showing 8 changed files with 64 additions and 77 deletions.
7 changes: 3 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -32,18 +32,17 @@ 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)_

## Usage
`marko-tester` exposes a `getComponent` method for you to use. Pass a relative test file path to a marko component and you will receive a `render` method and `fixtures` method/object. By default, `getComponent` will run JEST SnapShot tests for the fixtures of the component.
`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.

- `fixtures` is an object by default. It contains all the fixtures that are found within the fixture folder of this component. If a `withoutFixtures` option is passed to the `getComponent` method, `fixtures` will be a method that will run JEST SnapShot tests for your fixture. You will still be able to get fixture content by the filename: `fixtures[FixtureFileName]`.
- `fixtures` is an object by default. It contains all the fixtures that are found within the fixture folder of this component. If a `withoutFixtures` option is passed, `fixtures` will 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]`.

### Example
You can find examples in the `tests` folder. The boilerplate looks like this:

```
const { getComponent } = require('marko-tester');
const { render } = getComponent('../index.marko');
const { render } = require('marko-tester')('../index.marko');
describe('When component is rendered', () => {
let component;
Expand Down
110 changes: 54 additions & 56 deletions src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -33,75 +33,73 @@ const getFullPath = (componentPath) => {
return index > -1 && resolve(stack[index].getFileName(), '..', componentPath);
};

module.exports = {
getComponent: (componentPath, { withoutFixtures } = {}) => {
const fullPath = getFullPath(componentPath);
module.exports = (componentPath, { withoutFixtures } = {}) => {
const fullPath = getFullPath(componentPath);

if (!fullPath) {
throw new Error(`Cannot find specified component at "${componentPath}".`);
}

function render(input) {
/* eslint-disable-next-line global-require, import/no-dynamic-require */
const component = require(fullPath);
if (!fullPath) {
throw new Error(`Cannot find specified component at "${componentPath}".`);
}

/* eslint-disable-next-line global-require, import/no-unresolved */
require('marko/components').init();
function render(input) {
/* eslint-disable-next-line global-require, import/no-dynamic-require */
const component = require(fullPath);

jest.resetModules();
/* eslint-disable-next-line global-require, import/no-unresolved */
require('marko/components').init();

return component
.renderSync(clone(input))
.appendTo(document.body)
.getComponent();
}
jest.resetModules();

let fixtures = {};
const fixturesPath = getFullPath(global.tester.fixturesDir);
const runFixtures = () => {
if (fixturesPath) {
let fixturesAmount = 0;
return component
.renderSync(clone(input))
.appendTo(document.body)
.getComponent();
}

readdirSync(fixturesPath).forEach((file) => {
const absPath = join(fixturesPath, file);
const extension = extname(absPath);
const testName = basename(absPath).replace(/\.(js|json)$/, '');
let fixtures = {};
const fixturesPath = getFullPath(global.tester.fixturesDir);
const runFixtures = () => {
if (fixturesPath) {
let fixturesAmount = 0;

if (extension === '.js' || extension === '.json') {
fixturesAmount += 1;
readdirSync(fixturesPath).forEach((file) => {
const absPath = join(fixturesPath, file);
const extension = extname(absPath);
const testName = basename(absPath).replace(/\.(js|json)$/, '');

let fixture;
if (extension === '.js' || extension === '.json') {
fixturesAmount += 1;

try {
/* eslint-disable-next-line global-require, import/no-dynamic-require */
fixture = require(absPath);
} catch (error) { /* */ }
let fixture;

fixtures[testName] = fixture || {};
try {
/* eslint-disable-next-line global-require, import/no-dynamic-require */
fixture = require(absPath);
} catch (error) { /* */ }

it(`should render component with ${testName} fixture`, () => {
const comp = render(clone(fixture));
expect(Array.from(document.body.childNodes)).toMatchSnapshot();
comp.destroy();
});
}
});
fixtures[testName] = fixture || {};

if (fixturesAmount === 0) {
throw new Error(`No fixtures where found for component in "${fullPath}".`);
it(`should render component with ${testName} fixture`, () => {
const comp = render(clone(fixture));
expect(Array.from(document.body.childNodes)).toMatchSnapshot();
comp.destroy();
});
}
}
};
});

if (withoutFixtures) {
fixtures = runFixtures;
} else {
runFixtures();
if (fixturesAmount === 0) {
throw new Error(`No fixtures where found for component in "${fullPath}".`);
}
}

return {
fixtures,
render,
};
},
};

if (withoutFixtures) {
fixtures = runFixtures;
} else {
runFixtures();
}

return {
fixtures,
render,
};
};
4 changes: 1 addition & 3 deletions tests/components/component/test/index.spec.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
const { getComponent } = require('../../../../src/index');

const { render, fixtures } = getComponent('../index.marko', { withoutFixtures: true });
const { render, fixtures } = require('../../../../src/index')('../index.marko', { withoutFixtures: true });

fixtures();

Expand Down
4 changes: 1 addition & 3 deletions tests/components/legacy/test/index.spec.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
const { getComponent } = require('../../../../src/index');

const { render, fixtures } = getComponent('../component.js');
const { render, fixtures } = require('../../../../src/index')('../component.js');

beforeEach(() => {
window.alert = jest.fn();
Expand Down
4 changes: 1 addition & 3 deletions tests/components/no-fixtures/test/index.spec.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
const { getComponent } = require('../../../../src/index');

const { render } = getComponent('../index.marko');
const { render } = require('../../../../src/index')('../index.marko');

describe('When component is rendered', () => {
let component;
Expand Down
4 changes: 1 addition & 3 deletions tests/components/tbody-component/test/index.spec.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
const { getComponent } = require('../../../../src/index');

const { render, fixtures } = getComponent('../index.marko');
const { render, fixtures } = require('../../../../src/index')('../index.marko');

describe('When component is rendered', () => {
let component;
Expand Down
4 changes: 1 addition & 3 deletions tests/components/zero-fixtures/test/index.spec.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
const { resolve } = require('path');
const { getComponent } = require('../../../../src/index');

const { fixtures } = getComponent('../index.marko', { withoutFixtures: true });
const { fixtures } = require('../../../../src/index')('../index.marko', { withoutFixtures: true });

it('should throw an error abount empty fixtures folder', () => {
expect(() => fixtures()).toThrowError(`No fixtures where found for component in "${resolve(__dirname, '../index.marko')}".`);
Expand Down
4 changes: 2 additions & 2 deletions tests/no-component/index.spec.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
const { getComponent } = require('../../src/index');
const markoTester = require('../../src/index');

it('should throw an error when no component is found', () => {
expect(() => getComponent('./index.marko')).toThrowError('Cannot find specified component at "./index.marko".');
expect(() => markoTester('./index.marko')).toThrowError('Cannot find specified component at "./index.marko".');
});

0 comments on commit f41aae7

Please sign in to comment.