Download - Как защитить свой код
Кузнецов Дмитрий
Как защитить свой код01
Как сло
✖ Дать джуниору доступ до репозитория
✖ Сменить окружение
✖ Сменить контент
✖ Не проработанные требования
✖ Противоречивые требования
мать код
02
I. Вёрстка
03
Иконка04
Текст
Go!05
Длинный текст
Поехали!
06
Многострочный текст
Нажмите чтобыпоехать!Нажмите чтобыпоехать!
07
Текст-подсказка
Нажмите чтобыпоехать!Это кнопка на которуюможно нажимать
08
Много букв
Одиннадцатиклассницарентгеноэлектрокардиографическая
09
Крестик
Одиннадцатиклассницарентгеноэлектрокардиографическая
10
Нет основного текста
рентгеноэлектрокардиографическая
11
Сколько мы
сломали?
12
Go! Поехали! Нажмите чтобыпоехать!
Нажмите чтобыпоехать!Это кнопка на которуюможно нажимать
Одиннадцатиклассницарентгеноэлектрокардиографическая
Одиннадцатиклассницарентгеноэлектрокардиографическая
рентгеноэлектрокардиографическая
13
А как надо?
14
Графеновая
вёрстка!
15
100% регрессия
Go! Поехали! Нажмите чтобыпоехать!
Нажмите чтобыпоехать!Это кнопка на которуюможно нажимать
Одиннадцатиклассницарентгеноэлектрокардиографическая
Одиннадцатиклассницарентгеноэлектрокардиографическая
рентгеноэлектрокардиографическая
16
17
18
19
Защищаем вёрстку:
— Одиннадцатиклассница
— Многострочные тексты
— Пустые строки
— Совмещение макета с вёрсткой (pixel perfect)
— И всё это на одной html странице
20
II. +JavaScript
21
auth22
А что если...
— Не заполнены поля
— Слишком короткий логин
— Слишком длинный логин
— Логин не существует
— Пароль не подходит
— Бэкенд не отвечает
— Пароль не подходит более 3 раз подряд
— Капча набрана неправильно
— Заполнить и нажать вход
— Следующий слайд пожалуйста
23
Ошибка авторизации
— А давайтенапишем DOM-тест!
24
DOM-тест
Сколько будет 2 + 2?
Будет 4
Действительно 4!
Что лучше, TypeScript или Dart?
Dart
Извините, вы нам не подходите.
01.
02.
03.
01.
02.
03.
25
А что будет, если мыло занято и парольформально не подходит?
$('.login').val('existingName')
$('.pass').val('1')
$('.submit').click()
01.
02.
03.
26
Отвечает auth:
$('.pass').hasClass('error') === true
$('.errorMsg').length === 1
$('.errorMsg').text() === 'Ошибка'
01.
02.
03.
27
auth.takeResponce
28
...если бэкенд ответит, что парольнеправильный?
$('.login').val('name')
$('.pass').val('123456')
$('.submit').click()
auth.takeResponce(errorData)
01.
02.
03.
04.
29
Отвечает auth:
$('.pass').hasClass('error') === true
$('.errorMsg').length === 1
$('.errorMsg').text() === errorData.msg
01.
02.
03.
30
...бэкент не отвечает 10 секунд?
var clock = sinon.useFakeTimers()
$('.login').val('name')
$('.pass').val('123456')
$('.submit').click()
clock.tick(10 * 1000)
01.
02.
03.
04.
05.
31
Отвечает auth:
$('.auth').hasClass('timeout') === true
$('.errorMsg').length === 1
$('.errorMsg').text() === 'Ваш интернет плох'
01.
02.
03.
32
$.ajax
33
...нажать на вход при формально правильныхданных?
sinon.spy($, 'ajax')
$('.login').val('name')
$('.pass').val('123456')
$('.submit').click()
01.
02.
03.
04.
34
Отвечает auth:
$.ajax.called === true
35
DOM-тесты на
вёрстку
36
Горизонтальная резиновость37
Вертикальная резиновость38
Итого
— Проверка DOM элементов и атрибутов
— CSS классов и свойств
— Резиновости
— Таймаутов
— Слежение за методами
— Всё это мы не делаем!
39
Как сломать код
✓ Дать джуниору доступ до репозитория графеновая вёрстка
✓ Сменить окружение проверка резиновости
✓ Сменить контент электрокардиографическая одиннадцатиклассница
✓ Не проработанные требования прорабатываем
✓ Противоречивые требования невозможны
40
Как это работает у нас
— Проработка контекста
— Решение задачи
— Написание тесткейсов и тестов
— Регрессия вёрстки
— git push -> хук с тестами
41
Будь мужиком,
защити свой код!
42
Вопросы
43