Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Team Testing Heisenbug 2019

Team Testing Heisenbug 2019

Conference link — https://heisenbug-piter.ru/en/2019/spb/talks/2in1stqnxglqv5izpjexxq/

A Rascal-Monkey
Donkey
Billy Goat
And klunky Bear

Set out to play a Project.
They found some Rust, Java, JS, and, of course, .NET.
They struck their keyboards, and typed with all their heart.
No luck.

In this talk, we'll discuss how to combine tools and testing approaches in order to:

not to test one and the same things multiple times;
use tests to make your system more easy to observe;
ease test code support;
stop locking ourselves into specific testing technologies.
We'll explore a real-life example of testing of related services, show how code and tests evolve in system components, and even manage to get an end-to-end report on them. We'll see how correct and optimal is the end result and discuss strategies of testing systems with associated program organization units.

Kirill Tolkachev

May 18, 2019
Tweet

More Decks by Kirill Tolkachev

Other Decks in Technology

Transcript

  1. Командное
    тестирование

    View full-size slide

  2. @tolkv
    @lavcraft
    @-
    @esharova

    View full-size slide




  3. не тестировать всем одно и то же по несколько
    раз
    сделать так, чтобы тесты увеличивали
    обозреваемость вашей системы
    сделать так, чтобы тесты увеличивали обозреваемость
    вашей системы упростить поддержку кода тестов
    избавиться от лока на конкретные технологии в
    тестировании.

    View full-size slide

  4. Командное
    тестирование

    View full-size slide

  5. Командное
    тестирование
    Что же ты такое?

    View full-size slide

  6. Командное
    тестирование

    View full-size slide

  7. Определение
    Командное
    тестирование

    View full-size slide

  8. Определение
    не найдено
    Командное
    тестирование

    View full-size slide

  9. А у вас есть QA?

    View full-size slide

  10. Универсальный процесс компании
    Фича Код
    ?
    Разработка Тестирование

    View full-size slide

  11. А отдел QA?

    View full-size slide

  12. Универсальный процесс компании
    Фича Код
    ?
    Разработка Тестирование

    View full-size slide

  13. ? — и к какому результату это приводит
    Нет коллективного
    владения тестами
    Сложные и
    «падучие» тесты
    Долгие регрессы
    Частые reopen
    Непрозрачная
    зависимость тестов и
    компонент системы
    Чувствительность
    к данным
    Сложность
    настройки окружения

    View full-size slide

  14. Но QA
    обеспечивает
    качество, скажете вы

    View full-size slide

  15. Священная война
    3
    4
    Разработка Тестирование

    View full-size slide

  16. А как вы
    Проверяете
    1. ваши тестовые сценарии на критерий достаточности?
    2. покрытие бизнес сценариев тестами на разных уровнях?
    Следите за
    1. дублированием тестов на разных слоях?
    2. проблемными местами системы целиком?

    View full-size slide

  17. Как это бывает

    View full-size slide

  18. Как это бывает

    View full-size slide

  19. Как это бывает

    View full-size slide

  20. Командное
    тестирование
    Командное тестирование
    Когда тестирование идет совместно с созданием
    продукта
    И каждая роль в команде сфокусирована на
    обеспечение качества

    View full-size slide

  21. Командное
    тестирование
    Командное тестирование
    Когда тестирование идет совместно с созданием
    продукта
    И каждая роль в команде сфокусирована на
    обеспечение качества
    Наш тезис

    View full-size slide

  22. Предистория

    View full-size slide

  23. Предистория
    Как разработчик ...

    View full-size slide

  24. Покупает машину

    View full-size slide

  25. Покупает 3D принтер

    View full-size slide

  26. Итак, машина есть

    View full-size slide

  27. Итак, машина есть, 3D принтер есть

    View full-size slide

  28. Покупает квартиру

    View full-size slide

  29. Ипотека

    View full-size slide

  30. Кирилл и Лена
    берут Ипотеку!

    View full-size slide

  31. Кирилл и Лена
    берут Ипотеку!
    Хочешь ипотеку – сделай

    View full-size slide

  32. Контракт - user story
    1. Я как пользователь хочу отправить запрос на ипотеку
    2. Я как пользователь хочу узнать одобрена ли мне ипотека
    3. Я как пользователь хочу увидеть детали ипотечных предложений

    View full-size slide

  33. Spec By Example — зафиксируем что делать
    Given: я открыл сервис
    When: жму «Хочу ипотеку»
    Then: вижу одобрена мне ипотека или нет
    Then: вижу предложения от банков

    View full-size slide

  34. Универсальная архитектурная диаграмма

    View full-size slide

  35. Что делаем?
    UI показа ипотечных
    предложений
    API взаимодействия
    С банками

    View full-size slide

  36. UI показа ипотечных
    предложений
    API взаимодействия
    С банками
    Что делаем? Ипотека по Cookies!

    View full-size slide

  37. Универсальная архитектурная диаграмма
    Контракт

    View full-size slide

  38. Контракт – Backend/Frontend
    {
    "status": "SUCCESS",
    "offers": [{
    "rate": 10.99,
    "monthlyPayment": 52000,
    "term": 20
    }, {
    "rate": 14.5,
    "monthlyPayment": 20000,
    "term": 30
    }]
    }

    View full-size slide

  39. Немного теории
    О чём будем говорить

    View full-size slide

  40. Шкала Тестов
    Unit
    Component Test
    Microservice Test
    System Test




    View full-size slide

  41. Начнём

    View full-size slide

  42. $ npx create-react-app team-testing-ui --typescript

    View full-size slide

  43. $ npx create-react-app team-testing-ui --typescript

    View full-size slide

  44. $ npx create-react-app team-testing-ui --typescript
    Creating a new React app in team-testing-ui.
    Installing packages. This might take a couple of
    minutes.
    Installing react, react-dom, and react-scripts...
    yarn add v1.10.1
    [1/4] Resolving packages...
    [2/4] Fetching packages...
    [3/4] Linking dependencies...
    [####################--------------------] 19782/37337

    View full-size slide

  45. $ npx create-react-app team-testing-ui --typescript
    Creating a new React app in team-testing-ui.
    Installing packages. This might take a couple of
    minutes.
    Installing react, react-dom, and react-scripts...
    yarn add v1.10.1
    [1/4] Resolving packages...
    [2/4] Fetching packages...
    [3/4] Linking dependencies...
    [####################--------------------] 19782/37337

    Happy hacking!

    View full-size slide

  46. $ npm install --save-dev \
    @types/enzyme \
    enzyme \
    enzyme-adapter-react-16

    View full-size slide

  47. $ npm install --save-dev \
    @types/enzyme \
    enzyme \
    enzyme-adapter-react-16
    + @types/[email protected]
    + [email protected]
    + [email protected]
    added 3 packages and audited 889529 packages in 14.531s
    found 0 vulnerabilities

    View full-size slide

  48. $ bat src/setupTests.js
    1 │ import { configure } from 'enzyme';
    2 │ import Adapter from 'enzyme-adapter-react-16';
    3 │
    4 │ configure({ adapter: new Adapter() });

    View full-size slide

  49. Время кодить

    View full-size slide

  50. Тем временем...

    View full-size slide

  51. Тем временем...
    Frontend Backend

    View full-size slide

  52. Откуда берётся backend https://start.spring.io

    View full-size slide

  53. Откуда берётся backend https://start.spring.io

    View full-size slide

  54. Откуда берётся backend https://start.spring.io

    View full-size slide

  55. Или тоже самое в терминале
    $ http start.spring.io/starter.zip \
    name==team-testing-api \
    packageName==ru.team.testing \
    type==gradle-project \
    dependencies==lombok,web -d
    $ unzip demo.zip
    $ idea .

    View full-size slide

  56. Получили
    готовый проект

    View full-size slide

  57. Время кодить

    View full-size slide

  58. Нет времени объяснять
    пора в Production

    View full-size slide

  59. Время кодить

    View full-size slide

  60. Spec By Example — вспомним что делать
    Given: я открыл сервис
    When: жму «Хочу ипотеку»
    Then: вижу одобрена мне ипотека или нет
    Then: вижу предложения от банков

    View full-size slide

  61. Chrome Capture Cookies

    View full-size slide

  62. Chrome Security
    launch: {
    args: [
    '--disable-features=NetworkService,
    '--disable-site-isolation-trials',
    ]
    }

    View full-size slide

  63. Chrome Security

    View full-size slide

  64. Cookies is available now!

    View full-size slide

  65. Тест на отправку печенек
    it('проверяем что печеньки отправляются', async (done) => {
    await page.goto('http://demo.ru:3000');
    await page.setRequestInterception
    (true);
    await page.setCookie({name: 'печенька', value: 'пятачок'});
    page.on('request', request => {
    if (interceptedRequest.url().endsWith('/offers')) {
    expect(request.headers()['cookie']).toContain('печенька');
    request.continue(); done();
    }
    });
    const button = await page.waitForXPath('//*[text()="Хочу ипотеку"]');
    await button.click();
    });

    View full-size slide

  66. Но
    Error: Protocol error (Fetch.enable):
    Fetch domain is only supported with
    --disable-features=NetworkService

    View full-size slide

  67. Не беда, Unit тесты спешат на помощь
    it('должен быть выставлен флаг отправки печенек', () => {
    jest.spyOn(global, 'fetch')
    .mockImplementation(() => Promise.resolve({
    json: jest.fn()
    }));
    return fetchDecisionStatus().then(value => {
    expect(fetch).toHaveBeenCalledWith(
    'http://demo.ru:8080/offers',
    { method: 'GET', credentials: 'include' }
    )
    })
    });

    View full-size slide

  68. Время кодить

    View full-size slide

  69. Про cookie и puppeteer
    it('проверяем что куки отправляются', async (done) => {
    await page.goto('http://demo.ru:3000');
    await page.setRequestInterception (true);
    await page.setCookie({name: 'userId', value: 'пятачок'});
    page.on('request', interceptedRequest => {
    if (interceptedRequest. url().endsWith('/offers')) {
    expect(interceptedRequest. headers()['cookie']).toContain('userId');
    interceptedRequest. continue();
    done();
    }
    });
    const button = await page.waitForXPath('//*[text()="Хочу ипотеку"]');
    await button.click();
    });

    View full-size slide

  70. Про cookie и puppeteer vs selenium

    View full-size slide

  71. Про cookie и puppeteer vs selenium
    Через преднастроенный proxy
    тест прокси api.ru

    View full-size slide

  72. Про cookie и puppeteer vs selenium
    Через преднастроенный proxy
    тест прокси api.ru
    Через browser extension
    тест
    api.ru
    extension
    chrome

    View full-size slide

  73. End to End JS
    it('Кирилл и Лена хотят ипотеку (e2e)', async () => {
    await page.goto('http://localhost:3000');
    await (await page.waitForXPath(
    '//*[text()="Хочу ипотеку"]'
    ).click();
    await page.waitForXPath('//*[text()="Ждёмс..."]');
    await page.waitForXPath('//*[text()="SUCCESS"]');
    await page.waitForXPath('//*[contains(text(),"Срок
    кредита:")]');
    });

    View full-size slide

  74. End to End Groovy
    @Test
    void 'Кирилл и Лена хотят ипотеку (e2e)'() {
    given:
    open 'http://localhost:3000'
    expect:
    $ byText("Хочу ипотеку") should(exist) click()
    $ byText("Ждёмс...") should(exist)
    $ byText("SUCCESS") should(exist)
    }

    View full-size slide

  75. Контракт соблюдай, инструменты бери удобные
    Вывод #2

    View full-size slide

  76. Жизнь после выхода в Production

    View full-size slide

  77. Баги
    Баги
    Баги
    Баги
    Баги
    Баги
    Баги
    Баги
    Баги
    Баги

    View full-size slide

  78. Прод не лежит, он отдыхает

    View full-size slide

  79. Поддержка:
    Да вы@#$34 опять 2%;№”. E#$@u23Tryu !!
    Прод не лежит, он отдыхает

    View full-size slide

  80. Поддержка:
    Да вы@#$34 опять 2%;№”. E#$@u23Tryu !!
    Разработчик:
    Какого ?%:@#/ Вы@!#!. Я так ”№?К%”№%” немогу!!
    Прод не лежит, он отдыхает

    View full-size slide

  81. Поддержка:
    Да вы@#$34 опять 2%;№”. E#$@u23Tryu !!
    Разработчик:
    Какого ?%:@#/ Вы@!#!. Я так ”№?К%”№%” немогу!!
    Поддержка:
    У нас @#$34y. Завтра y#$@ будет #$#@% ±!!!! E#$@u23Tryu не объясняете!
    Разработчик:
    Ds к?%АП. Как всегда $#%$@, на своём #$#%$#@. Не формулируете!
    Прод не лежит, он отдыхает

    View full-size slide

  82. В чём причина?
    Бэк тормозит!

    View full-size slide

  83. В чём причина?
    Фронт много запросов шлёт!

    View full-size slide

  84. Время кодить

    View full-size slide

  85. network
    Что случилось
    Request 1 Request 2
    1000ms 1000ms 1000ms
    ui offer 1 offer 2

    View full-size slide

  86. network
    Что случилось
    Request 1 Request 2
    1000ms 1000ms 1000ms
    ui offer 1 offer 2
    Моргание предложений

    View full-size slide

  87. network
    setInterval
    1000ms 1000ms 1000ms
    Request 1 Request 2 Request 2

    View full-size slide

  88. network
    setTimeout
    Request 1 Request 2 Request 2
    1000ms 1000ms

    View full-size slide

  89. Хорошо знать что ты делаешь и разбираться вокруг
    Вывод

    View full-size slide

  90. Локально
    запускать тесты
    Не грешновато ли?

    View full-size slide

  91. Локально
    запускать тесты
    Не грешновато ли?
    Грешновато!

    View full-size slide

  92. Всё ещё

    View full-size slide

  93. Как понять что не так?

    View full-size slide

  94. Отчёт Gradle

    View full-size slide

  95. Отчёт Maven

    View full-size slide

  96. Отчёт Jest
    PASS src/decision.test.tsx
    ...
    PASS src/offer.test.tsx
    -----------------|----------|----------|----------|----------|-------------------|
    File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s |
    -----------------|----------|----------|----------|----------|-------------------|
    All files | 79.31 | 93.33 | 75 | 79.31 | |
    App.tsx | 90 | 100 | 75 | 90 | 31 |
    api-decision.ts | 0 | 100 | 0 | 0 | 27,28 |
    decision.tsx | 100 | 75 | 100 | 100 | 21 |
    index.tsx | 0 | 100 | 100 | 0 | 6 |
    offer.tsx | 100 | 100 | 100 | 100 | |
    poller.tsx | 80 | 100 | 83.33 | 80 | 16,17 |
    -----------------|----------|----------|----------|----------|-------------------|
    Test Suites: 4 passed, 4 total
    Tests: 11 passed, 11 total
    Time: 3.282s
    Ran all test suites.

    View full-size slide

  97. Отчёт Cucumber

    View full-size slide

  98. Как понять что не так?
    Репортим вместе с Allure

    View full-size slide

  99. Контракт Allure
    allure-results/
    |- {id1}-testsuite.xml
    |- {id2}-testsuite.xml
    or
    allure-results/
    |- {id1}-result.json
    |- {id2}-result.json

    View full-size slide

  100. Отчёты allure
    $ allure report # -> generate html
    #or
    $ allure serve # -> generate html and open in browser

    View full-size slide

  101. Нужно мёржить
    репорты!

    View full-size slide

  102. Время кодить

    View full-size slide

  103. Контракт по которому allure мержит тесты
    1. Скопировать содержимое всех директорий allure-results/ в одну
    папку
    2. Запустить команду $ allure serve ALL_RESULTS_DIR

    View full-size slide

  104. Отчёты allure
    $ mkdir -p results
    $ cp -rf team-testing-ui/allure-results/* results/
    $ cp -rf team-testing-api/allure-results/* results/
    $ cp -rf team-testing-e2e/allure-results/* results/
    $ allure serve results/

    View full-size slide

  105. Вспомним про User Story
    Контракт
    У нас же был контракт

    View full-size slide

  106. Контракт

    View full-size slide

  107. Контракт соблюдай, инструменты бери удобные
    Вывод

    View full-size slide

  108. Выводы

    View full-size slide

  109. Выводы
    1. Хорошо знать что ты делаешь и разбираться вокруг

    View full-size slide

  110. Переход к 3ому выводу
    Если процесс тестирования и разработки разорван – то получается
    тестирование чёрного ящика
    Это сложнее и не оптимально. Привести в пример кейс с e2e тестом
    Нарисовать картиночку кто что получил на вход
    User story -> разраб -> черный ящик(код) -> тестировщик -> месиво e2e
    тестов

    View full-size slide

  111. Выводы
    1. Хорошо знать что ты делаешь и разбираться вокруг
    2. Контракт соблюдай, инструменты бери удобные

    View full-size slide

  112. Универсальный процесс компании
    Фича Код
    ?

    View full-size slide

  113. Выводы
    1. Хорошо знать что ты делаешь и разбираться вокруг
    2. Контракт соблюдай, инструменты бери удобные
    3. Тестирование непрерывный процесс
    и оно неотделимо от процесса реализации

    View full-size slide

  114. Выводы
    1. Хорошо знать что ты делаешь и разбираться вокруг
    2. Контракт соблюдай, инструменты бери удобные
    3. Тестирование непрерывный процесс
    и оно неотделимо от процесса реализации
    Не плачь – херачь

    View full-size slide

  115. Ссылки с материалами
    1. Spec By Example
    2. code team-testing-api
    3. code team-testing-ui
    4. code team-testing-e2e
    5. TDD By Example Kent Beck

    View full-size slide