• Like
Frontend
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Frontend

  • 95 views
Published

 

Published in Software
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
95
On SlideShare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
2
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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