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.

Transcript

1. Командное тестирование
2. @tolkv @lavcraft @- @esharova
3. • • • не тестировать всем одно и то же по несколько раз сделать так, чтобы тесты увеличивали обозреваемость вашей системы сделать так, чтобы тесты увеличивали обозреваемость вашей системы упростить поддержку кода тестов избавиться от лока на конкретные технологии в тестировании.
4. Командное тестирование
5. Командное тестирование Что же ты такое?
6. Командное тестирование
7. Определение Командное тестирование
8. Определение не найдено Командное тестирование
9. А у вас есть QA?
10. Универсальный процесс компании Фича Код ? Разработка Тестирование
11. А отдел QA?
12. Универсальный процесс компании Фича Код ? Разработка Тестирование
13. ? — и к какому результату это приводит Нет коллективного владения тестами Сложные и «падучие» тесты Долгие регрессы Частые reopen Непрозрачная зависимость тестов и компонент системы Чувствительность к данным Сложность настройки окружения
14. Но QA обеспечивает качество, скажете вы
19. Священная война 3 4 Разработка Тестирование
22. А как вы Проверяете 1. ваши тестовые сценарии на критерий достаточности? 2. покрытие бизнес сценариев тестами на разных уровнях? Следите за 1. дублированием тестов на разных слоях? 2. проблемными местами системы целиком?
24. Как это бывает
25. Как это бывает
26. Как это бывает
27. Командное тестирование Командное тестирование Когда тестирование идет совместно с созданием продукта И каждая роль в команде сфокусирована на обеспечение качества
28. Командное тестирование Командное тестирование Когда тестирование идет совместно с созданием продукта И каждая роль в команде сфокусирована на обеспечение качества Наш тезис
29. Предистория
31. Предистория Как разработчик ...
32. Покупает машину
33. Покупает 3D принтер
34. Итак, машина есть
35. Итак, машина есть, 3D принтер есть
36. Покупает квартиру
37. Ипотека
38. Кирилл и Лена берут Ипотеку!
39. Кирилл и Лена берут Ипотеку! Хочешь ипотеку – сделай
40. Контракт - user story 1. Я как пользователь хочу отправить запрос на ипотеку 2. Я как пользователь хочу узнать одобрена ли мне ипотека 3. Я как пользователь хочу увидеть детали ипотечных предложений
41. Spec By Example — зафиксируем что делать Given: я открыл сервис When: жму «Хочу ипотеку» Then: вижу одобрена мне ипотека или нет Then: вижу предложения от банков
43. Универсальная архитектурная диаграмма
44. Что делаем? UI показа ипотечных предложений API взаимодействия С банками
45. UI показа ипотечных предложений API взаимодействия С банками Что делаем? Ипотека по Cookies!
46. Универсальная архитектурная диаграмма Контракт
47. Контракт – Backend/Frontend { "status": "SUCCESS", "offers": [{ "rate": 10.99, "monthlyPayment": 52000, "term": 20 }, { "rate": 14.5, "monthlyPayment": 20000, "term": 30 }] }
48. Немного теории О чём будем говорить
49. Шкала Тестов Unit Component Test Microservice Test System Test ➯ ➯ ➯ ➯
50. Начнём
51. Frontend
52. $ npx create-react-app team-testing-ui --typescript
53. $ npx create-react-app team-testing-ui --typescript
54. $ 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
55. $ 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!
56. $ npm install --save-dev \ @types/enzyme \ enzyme \ enzyme-adapter-react-16
57. $ npm install --save-dev \ @types/enzyme \ enzyme \ enzyme-adapter-react-16 + @types/enzyme@3.9.1 + enzyme-adapter-react-16@1.13.0 + enzyme@3.9.0 added 3 packages and audited 889529 packages in 14.531s found 0 vulnerabilities
58. $ bat src/setupTests.js 1 │ import { configure } from 'enzyme'; 2 │ import Adapter from 'enzyme-adapter-react-16'; 3 │ 4 │ configure({ adapter: new Adapter() });
59. Время кодить
60. Тем временем...
61. Тем временем... Frontend Backend
62. Backend
63. Откуда берётся backend https://start.spring.io
64. Откуда берётся backend https://start.spring.io
65. Откуда берётся backend https://start.spring.io
66. Или тоже самое в терминале $ 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 .
67. Получили готовый проект
68. Время кодить
69. Нет времени объяснять пора в Production
70. Время кодить
71. Spec By Example — вспомним что делать Given: я открыл сервис When: жму «Хочу ипотеку» Then: вижу одобрена мне ипотека или нет Then: вижу предложения от банков
72. Chrome Capture Cookies
73. Chrome Security launch: { args: [ '--disable-features=NetworkService, '--disable-site-isolation-trials', ] }
74. Chrome Security
75. Cookies is available now!
76. Тест на отправку печенек 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(); });
77. Но...
78. Но Error: Protocol error (Fetch.enable): Fetch domain is only supported with --disable-features=NetworkService
80. Не беда, 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' } ) }) });
81. Время кодить
82. Про 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(); });
83. Про cookie и puppeteer vs selenium
84. Про cookie и puppeteer vs selenium Через преднастроенный proxy тест прокси api.ru
85. Про cookie и puppeteer vs selenium Через преднастроенный proxy тест прокси api.ru Через browser extension тест api.ru extension chrome
86. 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(),"Срок кредита:")]'); });
87. End to End Groovy @Test void 'Кирилл и Лена хотят ипотеку (e2e)'() { given: open 'http://localhost:3000' expect: $ byText("Хочу ипотеку") should(exist) click() $ byText("Ждёмс...") should(exist) $ byText("SUCCESS") should(exist) }
88. Контракт соблюдай, инструменты бери удобные Вывод #2
89. Жизнь после выхода в Production
90. Баги Баги Баги Баги Баги Баги Баги Баги Баги Баги
91. Прод не лежит, он отдыхает
92. Поддержка: Да вы@#$34 опять 2%;№”. E#$@u23Tryu !! Прод не лежит, он отдыхает
93. Поддержка: Да вы@#$34 опять 2%;№”. E#$@u23Tryu !! Разработчик: Какого ?%:@#/ Вы@!#!. Я так ”№?К%”№%” немогу!! Прод не лежит, он отдыхает
94. Поддержка: Да вы@#$34 опять 2%;№”. E#$@u23Tryu !! Разработчик: Какого ?%:@#/ Вы@!#!. Я так ”№?К%”№%” немогу!! Поддержка: У нас @#$34y. Завтра y#$@ будет #$#@% ±!!!! E#$@u23Tryu не объясняете! Разработчик: Ds к?%АП. Как всегда $#%$@, на своём #$#%$#@. Не формулируете! Прод не лежит, он отдыхает
97. В чём причина? Бэк тормозит!
98. В чём причина? Фронт много запросов шлёт!
99. Время кодить
100. network Что случилось Request 1 Request 2 1000ms 1000ms 1000ms ui offer 1 offer 2
101. network Что случилось Request 1 Request 2 1000ms 1000ms 1000ms ui offer 1 offer 2 Моргание предложений
102. network setInterval 1000ms 1000ms 1000ms Request 1 Request 2 Request 2
103. network setTimeout Request 1 Request 2 Request 2 1000ms 1000ms
104. Хорошо знать что ты делаешь и разбираться вокруг Вывод
105. Локально запускать тесты Не грешновато ли?
106. Локально запускать тесты Не грешновато ли? Грешновато!
107. Всё ещё
108. Как понять что не так?
109. Отчёт Gradle
110. Отчёт Maven
111. Отчёт 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.
112. Отчёт Cucumber
113. Как понять что не так? Репортим вместе с Allure
114. Backend
115. Frontend
116. Контракт Allure allure-results/ |- {id1}-testsuite.xml |- {id2}-testsuite.xml or allure-results/ |- {id1}-result.json |- {id2}-result.json
117. Отчёты allure $ allure report # -> generate html #or $ allure serve # -> generate html and open in browser
118. Нужно мёржить репорты!
119. Время кодить
120. Контракт по которому allure мержит тесты 1. Скопировать содержимое всех директорий allure-results/ в одну папку 2. Запустить команду $ allure serve ALL_RESULTS_DIR
121. Отчёты 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/
123. Вспомним про User Story Контракт У нас же был контракт
124. Контракт
125. Контракт соблюдай, инструменты бери удобные Вывод
126. Выводы
127. Выводы 1. Хорошо знать что ты делаешь и разбираться вокруг
128. Переход к 3ому выводу Если процесс тестирования и разработки разорван – то получается тестирование чёрного ящика Это сложнее и не оптимально. Привести в пример кейс с e2e тестом Нарисовать картиночку кто что получил на вход User story -> разраб -> черный ящик(код) -> тестировщик -> месиво e2e тестов
129. Выводы 1. Хорошо знать что ты делаешь и разбираться вокруг 2. Контракт соблюдай, инструменты бери удобные
130. Универсальный процесс компании Фича Код ?
131. Выводы 1. Хорошо знать что ты делаешь и разбираться вокруг 2. Контракт соблюдай, инструменты бери удобные 3. Тестирование непрерывный процесс и оно неотделимо от процесса реализации
132. Выводы 1. Хорошо знать что ты делаешь и разбираться вокруг 2. Контракт соблюдай, инструменты бери удобные 3. Тестирование непрерывный процесс и оно неотделимо от процесса реализации Не плачь – херачь
133. QA 133
134. Ссылки с материалами 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