e2e tests

Author: peakchen90

README.md

@@ -1,12 +1,11 @@
 # babel-plugin-react-directives
-A babel plugin that provides some directives for react, similar to directive of vue.
+A babel plugin that provides some directives for react(JSX), similar to directive of vue.
 
 
 [![Travis (.org) branch](https://img.shields.io/travis/peakchen90/babel-plugin-react-directives/master.svg)](https://travis-ci.org/peakchen90/babel-plugin-react-directives)
 [![Codecov](https://img.shields.io/codecov/c/github/peakchen90/babel-plugin-react-directives.svg)](https://codecov.io/gh/peakchen90/babel-plugin-react-directives)
 [![npm](https://img.shields.io/npm/v/babel-plugin-react-directives.svg)](https://www.npmjs.com/package/babel-plugin-react-directives)
 [![GitHub](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/peakchen90/babel-plugin-react-directives/blob/master/LICENSE)
-[![npm](https://img.shields.io/npm/dt/babel-plugin-react-directives.svg)](https://www.npmjs.com/package/babel-plugin-react-directives)
 
 
 ## Usage

test/e2e/specs/Todo.js

@@ -0,0 +1,54 @@
+/* eslint-disable max-classes-per-file, react/prop-types */
+/* eslint-disable no-undef, no-unused-vars */
+
+import React from 'react';
+
+export default class Todo extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      searchText: '',
+      list: []
+    };
+  }
+
+  onAdd() {
+    const { list, searchText } = this.state;
+    this.setState((prevState) => ({
+      list: list.concat(searchText)
+    }));
+  }
+
+  onRemove(index) {
+    const { list } = this.state;
+    this.setState({
+      list: list.filter((_, i) => i !== index)
+    });
+  }
+
+  render() {
+    const { searchText, list } = this.state;
+
+    return (
+      <div>
+        <input className="input" type="text" x-model={searchText}/>
+        <button className="add" onClick={this.onAdd.bind(this)}>Add</button>
+        <button x-show={list.length > 0} className="clear">Clear</button>
+
+        <ul className="todo-list">
+          <li
+            x-for={(item, index) in list}
+            x-if={!searchText || item.indexOf(searchText) !== -1}
+            key={item}
+            className="todo-item"
+          >
+            <div>
+              <span className="todo-text">{item}</span>
+              <a className="remove" onClick={this.onRemove.bind(this, index)}>remove</a>
+            </div>
+          </li>
+        </ul>
+      </div>
+    );
+  }
+}

test/e2e/specs/for.test.js

@@ -2,21 +2,12 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import { DemoFor } from './Demo';
 
-describe('for', () => {
+describe('directive: for', () => {
   test('traverse list', () => {
     const list = [
-      {
-        id: 'a',
-        name: 'Alice'
-      },
-      {
-        id: 'b',
-        name: 'Bob'
-      },
-      {
-        id: 'c',
-        name: 'Cindy'
-      }
+      { id: 'a', name: 'Alice' },
+      { id: 'b', name: 'Bob' },
+      { id: 'c', name: 'Cindy' }
     ];
 
     const wrapper = shallow(<DemoFor list={list}/>);

test/e2e/specs/if.test.js

@@ -3,7 +3,7 @@ import { shallow } from 'enzyme';
 import { setStatePromisify } from '../util';
 import { DemoIf } from './Demo';
 
-describe('if & else-if & else', () => {
+describe('directive: if & else-if & else', () => {
   const wrapper = shallow(<DemoIf/>);
 
   test('if', async () => {

test/e2e/specs/model.test.js

@@ -2,30 +2,24 @@ import React from 'react';
 import { mount } from 'enzyme';
 import { DemoModel1, DemoModel2, DemoModel3 } from './Demo';
 
-describe('model', () => {
+describe('directive: model', () => {
   test('in class', () => {
     const wrapper = mount(<DemoModel1/>);
-    wrapper.find('input').simulate('change', {
-      target: { value: 'new value' }
-    });
+    wrapper.find('input').simulate('change', { target: { value: 'new value' } });
     expect(wrapper.find('.text').text()).toBe('new value');
     expect(wrapper.find('.extra').text()).toBe('B');
   });
 
   test('use hook', () => {
     const wrapper = mount(<DemoModel2/>);
-    wrapper.find('input').simulate('change', {
-      target: { value: 'new value' }
-    });
+    wrapper.find('input').simulate('change', { target: { value: 'new value' } });
     expect(wrapper.find('.text').text()).toBe('new value');
     expect(wrapper.find('.extra').text()).toBe('foo');
   });
 
   test('custom onChange event', () => {
     const wrapper = mount(<DemoModel3/>);
-    wrapper.find('input').simulate('change', {
-      target: { value: 'custom value' }
-    });
+    wrapper.find('input').simulate('change', { target: { value: 'custom value' } });
     expect(wrapper.find('.text').text()).toBe('custom value');
   });
 });

test/e2e/specs/show.test.js

@@ -3,7 +3,7 @@ import { shallow } from 'enzyme';
 import { setStatePromisify } from '../util';
 import { DemoShow } from './Demo';
 
-describe('show', () => {
+describe('directive: show', () => {
   const wrapper = shallow(<DemoShow/>);
 
   test('show', async () => {

test/e2e/specs/todo.test.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { mount } from 'enzyme';
+// import { setStatePromisify } from '../util';
+import Todo from './Todo';
+
+describe('Todo Component', () => {
+  const wrapper = mount(<Todo/>);
+
+  test('add todo', () => {
+    wrapper.find('.input').simulate('change', { target: { value: 'First Todo' } });
+    wrapper.find('.add').simulate('click');
+    expect(wrapper.find('.todo-item .todo-text').at(0).text()).toBe('First Todo');
+    expect(wrapper.find('.clear').prop('style').display).toBe(undefined);
+  });
+
+  test('search todo', () => {
+    wrapper.find('.input').simulate('change', { target: { value: 'Second Todo' } });
+    wrapper.find('.add').simulate('click');
+
+    wrapper.find('.input').simulate('change', { target: { value: 'First' } });
+    expect(wrapper.find('.todo-item .todo-text').length).toBe(1);
+    expect(wrapper.find('.todo-item .todo-text').at(0).text()).toBe('First Todo');
+  });
+
+  test('clear todo', () => {
+    wrapper.find('.input').simulate('change', { target: { value: '' } });
+    expect(wrapper.find('.todo-item .todo-text').length).toBe(2);
+
+    wrapper.find('.todo-item .remove').at(0).simulate('click');
+    expect(wrapper.find('.todo-item .todo-text').length).toBe(1);
+
+    wrapper.find('.todo-item .remove').at(0).simulate('click');
+    expect(wrapper.find('.todo-item .todo-text').length).toBe(0);
+    expect(wrapper.find('.clear').prop('style').display).toBe('none');
+  });
+});

test/e2e/util.js

@@ -9,3 +9,14 @@ export function setStatePromisify(wrapper, val) {
     wrapper.setState(val, resolve);
   });
 }
+
+/**
+ * 等待
+ * @param ms
+ * @return {Promise<unknown>}
+ */
+export function sleep(ms) {
+  return new Promise((resolve) => {
+    setTimeout(resolve, ms);
+  });
+}