dima117 · April 6, 2018 16:15
diff --git a/package.json b/package.json
 { 
  ...
  "scripts": {
     "test": "mocha-headless-chrome -f tests/test.html"
  },
  ...
 }
diff --git a/test-form.js b/test-form.js
 class SearchForm {

    onClick(e) {
        e.preventDefault();

        let xhr = new XMLHttpRequest();
        
        xhr.open("GET", "http://example.com");
        xhr.send(new FormData(this.form));

        this.form.reset();
    }

    render(parent) {
        this.form = document.createElement('form');
        this.form.innerHTML = 
            `<input type="text" name="query" />
             <input type="button" value="Найти" />`;

        this.input = this.form.querySelector('input[type=text]');
        this.button = this.form.querySelector('input[type=button]');

        this.button.addEventListener('click', this.onClick.bind(this));

        parent.appendChild(this.form);
    }

    destroy() {
        this.form.remove();
    }
 }
diff --git a/test.html b/test.html
 <html>
 <head>
  <meta charset="utf-8">
  <link href="../node_modules/mocha/mocha.css" rel="stylesheet" />

  <script src="../node_modules/mocha/mocha.js"></script>
  <script src="../node_modules/sinon/pkg/sinon.js"></script>
  <script src="../node_modules/chai/chai.js"></script>
  <script>mocha.setup('bdd');</script>
 </head>
 <body>
  <div id="mocha"></div>

  <script src="../src/search-form.js"></script>
  <script src="../tests/test.js"></script>

  <script>mocha.run();</script>
 </body>
 </html>
diff --git a/test.js b/test.js
 const assert = chai.assert;

 describe('форма поиска', function() {
    let searchForm, server;

    beforeEach(function() {
        searchForm = new SearchForm();
        searchForm.render(document.body);

        server = sinon.createFakeServer({
            respondImmediately: true
        });
    });

    afterEach(function () {
        searchForm.destroy();
        server.restore();
    });
 });
diff --git a/test1 b/test1
    it('должна отправлять запрос', function() {
        // подготовка
        searchForm.input.value = 'субботиник';
    
        // действие
        searchForm.button.click();
    
        // проверка
        assert.equal(server.lastRequest.url, 'http://example.com2');
    });
diff --git a/test2 b/test2
    it('должно очищаться после запроса', function() {
        // подготовка
        searchForm.input.value = 'субботиник';
    
        // действие
        searchForm.button.click();
    
        // проверка
        assert.equal(searchForm.input.value, '');
    });
	{
	...
	"scripts": {
	"test": "mocha-headless-chrome -f tests/test.html"
	},
	...
	}
	class SearchForm {

	onClick(e) {
	e.preventDefault();

	let xhr = new XMLHttpRequest();

	xhr.open("GET", "http://example.com");
	xhr.send(new FormData(this.form));

	this.form.reset();
	}

	render(parent) {
	this.form = document.createElement('form');
	this.form.innerHTML =
	`<input type="text" name="query" />
	<input type="button" value="Найти" />`;

	this.input = this.form.querySelector('input[type=text]');
	this.button = this.form.querySelector('input[type=button]');

	this.button.addEventListener('click', this.onClick.bind(this));

	parent.appendChild(this.form);
	}

	destroy() {
	this.form.remove();
	}
	}
	<html>
	<head>
	<meta charset="utf-8">
	<link href="../node_modules/mocha/mocha.css" rel="stylesheet" />

	<script src="../node_modules/mocha/mocha.js"></script>
	<script src="../node_modules/sinon/pkg/sinon.js"></script>
	<script src="../node_modules/chai/chai.js"></script>
	<script>mocha.setup('bdd');</script>
	</head>
	<body>
	<div id="mocha"></div>

	<script src="../src/search-form.js"></script>
	<script src="../tests/test.js"></script>

	<script>mocha.run();</script>
	</body>
	</html>
	const assert = chai.assert;

	describe('форма поиска', function() {
	let searchForm, server;

	beforeEach(function() {
	searchForm = new SearchForm();
	searchForm.render(document.body);

	server = sinon.createFakeServer({
	respondImmediately: true
	});
	});

	afterEach(function () {
	searchForm.destroy();
	server.restore();
	});
	});
	it('должна отправлять запрос', function() {
	// подготовка
	searchForm.input.value = 'субботиник';

	// действие
	searchForm.button.click();

	// проверка
	assert.equal(server.lastRequest.url, 'http://example.com2');
	});
	it('должно очищаться после запроса', function() {
	// подготовка
	searchForm.input.value = 'субботиник';

	// действие
	searchForm.button.click();

	// проверка
	assert.equal(searchForm.input.value, '');
	});