Кузнецов Дмитрий

Как защитить свой код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