Frontend

2gis

К
К Л М Н О П Р С Т У Ф Х С Ч Ш Щ Ъ Ы Ь Э Ю Я А Б В Г Д Е Ё Ж С И Й
а
а б в г д е ё ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я
к
к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я а б в г д е ё ж з и й
 а б в г д е ё ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я
з
з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я а б в г д е ё ж
а
а б в г д е ё ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я
щ
щ ъ ы ь э ю я а б в г д е ё ж з и й к л м н о п р с т у ф х ц ч ш
и
и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я а б в г д е ё ж з
т
т у ф х ц ч ш щ ъ ы ь э ю я а б в г д е ё ж з и й к л м н о п р с
и
и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я а б в г д е ё ж з
т
т у ф х ц ч ш щ ъ ы ь э ю я а б в г д е ё ж з и й к л м н о п р с
ь
ь э ю я а б в г д е ё ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы
 а б в г д е ё ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я
с
с т у ф х ц ч ш щ ъ ы ь э ю я а б в г д е ё ж з и й к л м н о п р
в
в г д е ё ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я а б
о
о п р с т у ф х ц ч ш щ ъ ы ь э ю я а б в г д е ё ж з и й к л м н
й
й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я а б в г д е ё ж з и
 а б в г д е ё ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я
к
к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я а б в г д е ё ж з и й
о
о п р с т у ф х ц ч ш щ ъ ы ь э ю я а б в г д е ё ж з и й к л м н
д
д е ё ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я а б в г

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

Как сломать код

I. Вёрстка

Иконка

Текст

Go!
Go!

Длинный текст

Поехали!
Поехали!

Многострочный текст

Нажмите чтобы поехать!
Нажмите чтобы поехать!
Нажмите чтобы поехать!

Текст-подсказка

Нажмите чтобы поехать!
Это кнопка на которую можно нажимать
Нажмите чтобы поехать!
Это кнопка на которую можно нажимать

Много букв

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

Крестик

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

Нет основного текста

рентгеноэлектрокардиографическая
рентгеноэлектрокардиографическая

Сколько мы сломали?

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

А как надо?

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

100% регрессия

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

Защищаем вёрстку:

II. +JavaScript

auth

А что если...

Ошибка авторизации

— А давайте
напишем DOM-тест!

DOM-тест

                    Сколько будет 2 + 2?
                    Будет 4
                    Действительно 4!
            
                    Что лучше, TypeScript или Dart?
                    Dart
                    Извините, вы нам не подходите.

А что будет, если мыло занято и пароль формально не подходит?

                    $('.login').val('existingName')
                    $('.pass').val('1')
                    $('.submit').click()

Отвечает auth:

                    $('.pass').hasClass('error')  === true
                    $('.errorMsg').length         === 1
                    $('.errorMsg').text()         === 'Ошибка'

auth.takeResponce

...если бэкенд ответит, что пароль неправильный?

                    $('.login').val('name')
                    $('.pass').val('123456')
                    $('.submit').click()
                    auth.takeResponce(errorData)

Отвечает auth:

                    $('.pass').hasClass('error')  === true
                    $('.errorMsg').length         === 1
                    $('.errorMsg').text()         === errorData.msg

...бэкент не отвечает 10 секунд?

                    var clock = sinon.useFakeTimers()
                    $('.login').val('name')
                    $('.pass').val('123456')
                    $('.submit').click()
                    clock.tick(10 * 1000)

Отвечает auth:

                    $('.auth').hasClass('timeout')  === true
                    $('.errorMsg').length           === 1
                    $('.errorMsg').text()           === 'Ваш интернет плох'

$.ajax

...нажать на вход при формально правильных данных?

                    sinon.spy($, 'ajax')
                    $('.login').val('name')
                    $('.pass').val('123456')
                    $('.submit').click()

Отвечает auth:

                    $.ajax.called === true

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

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

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

Итого

Как сломать код

Как это работает у нас

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

Вопросы

Fork me on Github