Behavior-Driven Development
с помощью Cucumber
Андрей Михайлов (lolmaus)
Frotnend-разработчик в Kaliber5
https://lolma.us
https://github.com/lolmaus
https://kaliber5.de
или как не подавиться огурцом
Слайды в прямом эфире
на вашем устрйостве:
https://goo.gl/7iodWZ
Пирамида потребностей
Пирамида тестов
Acceptance
Integration
Unit
Пирамида тестов
Acceptance
Integration
Unit
$$$
$
Пирамида тестов
Acceptance
Integration
Unit
$$$
$
Правильная пирамида тестов
Unit
Integration
Acceptance
Acceptance-тесты
- Дают гарантии
- Интегрируются в цикл BDD
- Имеют ценность для бизнеса
Behavior-Driven Development
- Не просто усложненный вариант
Test-Driven Development
- Проходит через весь жизенный цикл продукта от планирования до деплоя
- Включает всех членов команды
- Основана на user stories (сценариях)
User stories для регистрации/логина
-
-
анонимный пользователь
Преимущества
сценариев и BDD
- Вскрывается истинный объем фич
- Более реалистичная оценка сроков
- Сценарии выполняют роль ТЗ
- Написаны на человеческом языке
- Служат источником правды для разрешения разногласий
- Разработчикам легко контролировать объем выполнения фич
- Сценарии фокусируются на нуждах пользователей
- Интегрируются с автоматическим тестированием
- Появился 10 лет назад как библиотека поверх RSpec на языке Ruby.
- Развился в полноценную методологию.
- Портирован на многие языки. Есть официальные порты от команды Cucumber и неофициальные аналоги.
- На JS есть официальный CucumberJS и неофициальный Yadda.
Feature: Sign-up and login
Covers various cases related to authentication
Scenario: Anonymous user should be able to visit public area and proceed to login
Given I am not authenticated
When I visit /
Then I should be at /
And I should see a login link
When I click the login link
Then I should be at /login
Scenario: Anonymous user should be redirected to login when vising private area
Given I am not authenticated
When I visit /cabinet
Then I should be at /login
Scenario: Authenticated user should be able to visit private area
Given I am authenticated as a user
When I visit /cabinet
Then I should be at /cabinetsign-up-and-login.feature
синтаксис Gherkin
import {expect} from 'chai';
import waitForSettledState from '../helpers/settled';
export default {
"When I click the Save Button"() {
const button = document.querySelector('button.save');
button.click();
return waitForSettledState();
}
}steps.js
имплементация шагов
"Then there should be a success message"() {
const messages = document.querySelectorAll('.flash-message');
expect(messages).to.have.length(1);
}
}
"Then the success message should have text (.+)"(text) {
const message = document.querySelector('.flash-message');
expect(message).to.have.trimmed.text(text);
}
}
"When I click the $index menu item"(indexZero) {
const menuItems= document.querySelectorAll('.menu-item');
menuItems[indexZero].click();
return waitForSettledState();
}
}// Возвращаем promise для асинхронности
// Выполняем действия
// Делаем проверки
// Принимаем параметры
// Используем макросы
@SetupApplication
Feature: Sign-up and login: authenticated user
Covers various cases related to auth for a regular user
Background:
Given there are records of type User:
-------------------------
| ID | Name | Role |
| alice | Alice | admin |
| bob | Bob | user |
-------------------------
Given I am authenticated as bob
Scenario: Regular user visits [Target URL]
When I visit [Target URL]
Then I should be at [Resulting URL]
And page title should have text [Page Title]
Where:
-------------------------------------------------------------------
| Target URL | Resulting URL | Page Title |
| /cabinet | /cabinet | Cabinet |
| /users | /restricted | You don't have access to this page |
-------------------------------------------------------------------
@Skip
Scenario: Admin user visits [Target URL]sign-up-and-login.feature
синтаксис Gherkin
Преимущества Cucumber
- Separation of concerns
Тесты максимально легко читать
Код не превращается в балласт
- Включение нетехнических сотрудников
в цикл разработки
- Высокое переиспользование шагов
Максимальный DRY
Мгновенное размножение тестов
- Самодисциплина в BDD
- Работодатель счастлив
Программист счастлив
Проблемы Cucumber
- Библиотека имплементаций шагов растет бесконтрольно.
Ориентироваться в ней крайне трудно.
- Каждый шаг — это черный ящик.
- Шаги имеют скрытые зависимости друг от друга.
Выносим "правду" в feature-файлы.
Сидирование базы данных:
Given there are records of type User in the database:
-----------------------------
| id | name | admin |
| "alice" | "Alice" | true |
| "bob" | "Alice" | true |
-----------------------------
Given there are records of type Post in the database:
-----------------------------------------
| id | title | body | pinned | author |
| 1 | "Hi!" | "Pin" | true | @alice |
| 2 | "Aaa" | "A" | | @bob |
| 3 | "Bbb" | "B" | | @bob |
-----------------------------------------
And there are records of type Comment in the database:
--------------------------------------------
| id | body | author | post | parent |
| "1" | "Ololo" | @alice | @2 | |
| "2" | "Trololo" | @bob | | @1 |
--------------------------------------------Выносим "правду" в feature-файлы.
Шаг посещения страницы:
# Before:
When I visit the blog
Then I should be at the blog
# After:
When I visit /blog
Then I should be at /blogВыносим "правду" в feature-файлы.
Взаимодействие с DOM:
<ul data-test-main-menu>
<li data-test-item="home">...</li>
<li data-test-item="products">...</li>
<li data-test-item="pricing">...</li>
</ul>Паттерн "Test Selectors":
Then I should see a [data-test-main-menu]
And there should be 3 [data-test-main-menu] [data-test-menu-item]
When I click [data-test-main-menu] [data-test-menu-item]:nth-child(1)Применяем в шагах:
Используем labels
Main-Menu [data-test-main-menu]1st Main-Menu [data-test-main-menu]:eq(0)the first Main-Menu [data-test-main-menu]:eq(0)first Item in the Main-Menu[data-test-main-menu] [data-test-item]:eq(0)Item(Pricing) in the 2nd Main-Menu[data-test-main-menu]:eq(1) [data-test-item="Pricing"]Выносим "правду" в feature-файлы.
Взаимодействие с DOM:
labelMap.set('Modal-Dialog', '.modal-dialog');
labelMap.set('Primary-Button', '.btn-primary');Алиасы для лэйблов:
Автоматическое преобразование алиасов:
the Primary-Button in the Comment-Edit-Form of the Modal-Dialog.modal-dialog [data-test-comment-edit-form] .primary-buttonПользователю доступно не так много типов действий:
When I click the Save-Button in the Post-Edit-Form
When I type "Hello!" into the Title-Field of the Post-Edit-Form
When I select the 2nd item in the dropdown Sex of the User-Form
When I select the item "Prefer not to tell" in the dropdown Sex of the User-Form
When I move the mouse pointer into the Thumbnail of the 2nd Post
...Then I should see a Post
Then I should NOT see Posts
Then I should see 2 Posts
Then the Title of the 1st Post should be "Hello!"
Then the first Post should have HTML class "pinned"
Then the first Post should HTML attribute "role" with value "article"
...Всем спасибо! ^_^
https://cucumber.io
https://docs.cucumber.io/installation/javascript
https://github.com/acuminous/yadda
https://github.com/kaliber5/ember-cli-yadda-opinionated
Алан Купер "Психбольница в руках пациентов"
Alan Cooper "The Inmates Are Running the Asylum"
Секретный слайд (тс-с-с-с!)
BDD и Cucumber (MoscowJS)
By Andrey Mikhaylov (lolmaus)
BDD и Cucumber (MoscowJS)
или пять способов не подавиться огурцом
