1. Кузнецов Дмитрий
Как защитить свой ко
д
д
01

2. Как сло
✖ Дать джуниору доступ до репозитория
✖ Сменить окружение
✖ Сменить контент
✖ Не проработанные требования
✖ Противоречивые требования
мать код
02

3. I. Вёрстка
03

4. Иконка
05

5. Текст
Go!
07

6. Длинный текст
Поехали!
11

7. Многострочный текст
Нажмите чтобы
поехать!
Нажмите чтобы
поехать!
13

8. Текст-подсказка
Нажмите чтобы
поехать!
Это кнопка на которую
можно нажимать
17

9. Много букв
Одиннадцатиклас
сница
рентгеноэлектрокардиогра
фическая
19

10. Крестик
Одиннадцатикл
ассница
рентгеноэлектрокардиогра
фическая
23

11. Нет основного текста
рентгеноэлектрокардиогра
фическая
29

12. Всё починено?
31

13. Go! Поехали! Нажмите чтобы
поехать!
Нажмите чтобы
поехать!
Это кнопка на которую
можно нажимать
Одиннадцатикл
ассница
рентгеноэлектрокардиогра
фическая
Одиннадцатикл
ассница
рентгеноэлектрокардиогра
фическая
рентгеноэлектрокардиогра
фическая
37

14. А как надо?
41

15. Графеновая
вёрстка!
43

16. 47

17. 100% регрессия
Go! Поехали! Нажмите чтобы
поехать!
Нажмите чтобы
поехать!
Это кнопка на которую
можно нажимать
Одиннадцатик
лассница
рентгеноэлектрокарди
ографическая
Одиннадцати
классница
рентгеноэлектрокар
диографическая
рентгеноэлектрокар
диографическая
53

18. 59

19. 61

20. 67

21. Защищаем вёрстку:
— Одиннадцатиклассница
— Многострочные тексты
— Пустые строки
— Совмещение макета с вёрсткой (pixel perfect)
— И всё это на одной html странице
71

22. II. +JavaScript
73

23. auth
79

24. А что если...
— Не заполнены поля
— Слишком короткий логин
— Слишком длинный логин
— Логин не существует
— Пароль не подходит
— Бэкенд не отвечает
— Пароль не подходит более 3 раз подряд
— Капча набрана неправильно
— Заполнить и нажать вход
— Следующий слайд пожалуйста
83

25. Ошибка авторизации
— А давайте
напишем DOM-тест!
89

26. DOM-тест
Сколько будет 2 + 2?
Будет 4
Действительно 4!
Запишите формулу Эйлера
--no-verify
Вы правы как никогда!
01.
02.
03.
01.
02.
03.
97

27. А что будет, если мыло занято и пароль
формально не подходит?
$('.login').val('existingName')
$('.pass').val('1')
$('.submit').click()
01.
02.
03.
101

28. Отвечает auth:
$('.pass').hasClass('error') === true
$('.errorMsg').length === 1
$('.errorMsg').text() === 'Ошибка'
01.
02.
03.
103

29. auth.takeResponce
107

30. Асинхронный колбек
$.ajax({
...
callback: function(data) {
auth.takeResponce(data);
}
});
01.
02.
03.
04.
05.
06.
109

31. ...если бэкенд ответит, что пароль
неправильный?
$('.login').val('name')
$('.pass').val('123456')
$('.submit').click()
auth.takeResponce(errorData)
01.
02.
03.
04.
113

32. Отвечает auth:
$('.pass').hasClass('error') === true
$('.errorMsg').length === 1
$('.errorMsg').text() === errorData.msg
01.
02.
03.
127

33. ...бэкент не отвечает 10 секунд?
var clock = sinon.useFakeTimers()
$('.login').val('name')
$('.pass').val('123456')
$('.submit').click()
clock.tick(10 * 1000)
01.
02.
03.
04.
05.
131

34. Отвечает auth:
$('.auth').hasClass('timeout') === true
$('.errorMsg').length === 1
$('.errorMsg').text() === 'Ваш интернет плох'
01.
02.
03.
137

35. $.ajax
139

36. ...нажать на вход при формально правильных
данных?
sinon.spy($, 'ajax')
$('.login').val('name')
$('.pass').val('123456')
$('.submit').click()
01.
02.
03.
04.
149

37. DOM-тесты на
вёрстку
151

38. Горизонтальная резиновость
157

39. Вертикальная резиновость
163

40. Итого
— Проверка DOM элементов и атрибутов
— CSS классов и свойств
— Резиновости
— Таймаутов
— Слежение за методами
— Всё это мы не делаем!
167

41. Как сломать код
✓ Дать джуниору доступ до репозитория графеновая вёрстка
✓ Сменить окружение проверка резиновости
✓ Сменить контент электрокардиографическая одиннадцатиклассница
✓ Не проработанные требования прорабатываем
✓ Противоречивые требования невозможны
173

42. Как это работает у нас

Ctx

Resolve
 
Tests
 
Regression
 
push
 
hooks

179

43. Будь мужиком,
защити свой код!
181

44. Вопросы
191