Вы уверены в работоспособности вашего кода?
Какие ваши доказательства?
Тесты это дёшево. У вас просто нет достаточно веcкой причины не писать их.
Настройка окружения это просто. Проще чем настроить вебпак.
Никакого rocket science. Поговорим о том как быстро начать и чтобы это приносило пользу.
JavaScript очень долго использовался для несущественных модификаций веб-страниц. Инструменты для тестирования развивались медленно и не получали нужного внимания.
Сейчас можно с уверенностью сказать, что проблема отсутствия и сложности инструментов устранена.
npm install jest
npm install babel-jest
/* package.json */"scripts": {"test": "jest --coverage"}
/core/__mocks__HTTPClient.jsHTTPClient.js/user/__tests__UserAPI-test.jsUserAPI.js
/* core/UserAPI.js */import HTTPClient from 'core/HTTPClient';export default class Users {create(data) {return HTTPClient.post(...);}retrieve(query) {return HTTPClient.get(...);}}
/* core/__mocks__/HTTPClient.js */export default {get: jest.fn(),post: jest.fn(),};
/* user/__tests__/UserAPI-test.js */jest.mock('core/HTTPClient');import HTTPClient from 'core/HTTPClient';import Users from 'user/UserAPI';describe('Users API', () => {it('should retrieve users', async () => {HTTPClient.get.mockReturnValue(mockData);const usersAPI = new Users();const users = await usersAPI.retrieve();expect(users).toEqual(mockData);});});
npm install protractor
/* protractor.config.js */exports.config = {baseUrl: '<project url>',specs: ['specs/*.spec.js'],/* In case you don't want to mess with Selenium */directConnect: true,onPrepare() {require('babel-register');/* Where we're going, we don't need Angular */browser.ignoreSynchronization = true;},};
/* package.json */"scripts": {"test-e2e": "protractor protractor.config.js"}
Page Object Pattern
When you write tests against a web page, you need to refer to elements within that web page in order to click links and determine what's displayed. However, if you write tests that manipulate the HTML elements directly your tests will be brittle to changes in the UI.
A page object wraps an HTML page, or fragment, with an application-specific API, allowing you to manipulate page elements without digging around in the HTML.
Код element.all(by.css('.label')) о манипуляции HTML элементами.
Код getTodos() о манипуляции данными приложения.
export default class TodosPage {constructor() {this.newTodoInput = by.css('.new-todo');this.todos = by.css('.todo-list .view label');}getTodos() {return element.all(this.todos).map(e => e.getText());}createTodo(text) {return element(this.newTodoInput).sendKeys(text, protractor.Key.ENTER);}}
import TodosPage from './Todos.object';describe('Todos', () => {const todos = new TodosPage();it('should add new todo to the list', async () => {await browser.get('/');await todos.createTodo('Send an email');expect(todos.getTodos()).toContain('Send an email');});});
Ссылка на это слайды — alexeyraspopov.github.io/just-test-it
Спасибо за внимание