Skip to content

Commit

Permalink
📝 improve getting started and concept doc
Browse files Browse the repository at this point in the history
  • Loading branch information
FBerthelot committed Dec 9, 2019
1 parent 88c837f commit 62f8c25
Show file tree
Hide file tree
Showing 2 changed files with 30 additions and 35 deletions.
17 changes: 12 additions & 5 deletions website/docs/concept.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,23 @@ title: Documentation

Component-test-utils is an opinionated test framework.

## What is component-test-utils

You have to think component-test-utils as a mock of your favorite framework.
The mock provide to you an extra-api to make test as easy as possible.
If you want to know more about component-test-utils, [read the philosophy part of this documentation.](./philosophy)

## Why should you use it ?

It mocks your favorite framework in a way that allows to write sustainable and functional oriented tests of your components.

Because component-test-utils consider each component as a black box, you won't be able to get access to your components state.
Because component-test-utils consider each component as a black box, you won't be able to access your components state.
It will force you to make assertion on the generated view.

## My Favorite framework is supported ?

- _React_: Yes !
- ... more is coming
## Framework agnostic

Component-test-utils is designed to be framework agnostic. As long as you are building component, component-test-utils should provide to you the API to test it !

That's all at the moment. If you want your framework in this list consider contributing to this project [on github](https://github.com/FBerthelot/component-test-utils) :)
But in the other hand, the project is in an early stage and follow the need of the one that use it.
For now, only `React` is supported. If this API meet a need, then other library will be supported !
48 changes: 18 additions & 30 deletions website/docs/getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,48 +2,36 @@
title: Getting Started
---

## React
As each framework are different, the installation is different for each framework.
After that, the API will be the same, promise !

Start by installing dependencies:
`npm i -D component-test-utils-react` with npm, or `yarn add -D component-test-utils-react` with yarn.

Then, you can test everything work well by executing this test (with jest) :
## React

```jsx
import {shallow} from 'component-test-utils-react';
### Installation

test('component-test-utils-react should work', () => {
const Hello = () => <div>Hello</div>;
const cmp = shallow(<Hello />);
Start by installing dependencies with npm:

expect(cmp.html()).toBe('<div>Hello</div>');
});
```sh
npm i -D component-test-utils-react
```

## Angular
or with yarn:
```sh
yarn add -D component-test-utils-react
```

Start by installing dependencies:
`npm i -D component-test-utils-angular` with npm, or `yarn add -D component-test-utils-angular` with yarn.
### Hello test world with jest

Then, you can test everything work well by executing this test (with jest or jasmine) :
You can test everything work well by executing this test (with jest):

```jsx
import 'core-js/es7/reflect';

import {Component} from '@angular/core';

import shallow from './shallow';
import {shallow} from 'component-test-utils-react';

@Component({
selector: 'component',
template: '<h1>Hello test world</h1>'
})
class MyComponent {}
test('component-test-utils-react should work', () => {
const Hello = () => <div>Hello</div>;
const cmp = shallow(<Hello />);

describe('Angular shallow', () => {
it('should return html', () => {
const cmp = shallow(MyComponent, {debug: true});
expect(cmp.html()).toBe('<h1>Hello test world</h1>');
});
expect(cmp.html()).toBe('<div>Hello</div>');
});
```

0 comments on commit 62f8c25

Please sign in to comment.