Frontend не для всех
Frontend не для всех
  • 9
  • 67 280
Секция код ревью на собеседовании для Angular разработчика
Одно из популярных заданий на собеседовании - ревью кода. Важный навык для проверки умения быстро ориентироваться в чужом коде и выявлять всевозможные упущения, ошибки и антипаттерны.
Пример кода из видео: gist.github.com/diamond-darrell/b6792be3b3699e1ba649cbf62dddc184
Уровень: junior, middle
Подпишись, пока не потерял:
Канал в ТГ: t.me/frontend_not_for_everyone
ВК: frontend_not_for_everyone
Переглядів: 1 268

Відео

TypeScript. Для чего нужен type guard?
Переглядів 8 тис.3 роки тому
Рано или поздно в typescript, все приходят к работе с объединенными типами, потому что это быстро и удобно. Впрочем иногда с ними бывают сложности. Здесь-то и приходит на помощь type guard. Как именно его использовать и зачем, в сегодяшнем коротком выпуске. Продолжительность: 6 минут. Уроверь: junior, middle Подпишись, пока не потерял: Канал в ТГ: t.me/frontend_not_for_everyone ФБ: facebook.com...
Как тестироваить асинхронный код в Angular TestBed - Unit тестирование в Angular
Переглядів 2,8 тис.3 роки тому
Второй выпуск про тестирование асинхронного кода, на этот раз с помощью утилиты Angular TestBed. В этом выпуске рассмотрены два инструмента: fakeAsync и waitForAsync, для чего каждый из них используется, в чем их преимущество, чем они отличаются от встроенных инструментов Jasmine, и когда и какой из них стоит использовать. После просмотра вы научитесь тестировать асинхронный код и поймете, что ...
Как тестировать асинхронный код в Jasmine - Unit-тестирование в Angular
Переглядів 5 тис.3 роки тому
Как тестировать Observable? Как тестировать Promise? Какие сложности возникают при написании тестов для асинхронного кода? Какие способы доступны в Jasmine для создания асинхронных тестов? Как можно из асинхронного кода сделать синхронный. Это и многое другое в сегодняшнем выпуске. После просмотра вы научитесь тестировать асинхронный код и поймете, что это гораздо проще, чем кажется. Продолжите...
Главные ошибки при написании кода на TypeScript
Переглядів 3,4 тис.3 роки тому
TypeScript прекрасный язык, главное в нем разобраться и не допускать ошибок, которые делает большинство разработчиков. Каких именно, смотрите в сегодняшнем выпуске. Продолжительность: 33 минуты. Уроверь: junior, middle Подпишись, пока не потерял: Канал в ТГ: t.me/frontend_not_for_everyone ФБ: olga.fomina.58555 ВК: dreamhelg
Как тестировать компоненты - Unit-тестирование в Angular
Переглядів 13 тис.3 роки тому
Как писать юнит-тесты к компонентам Angular. В чем разница между тестированием сервисов и компонентов. Как эмулируются события и проверяются инпуты. В чем особенности мока зависимостей. Продолжительность: 55 минут. Уроверь: junior, middle Тестовое приложение из видео - github.com/dreamhelg/angular-components-unit-test Подпишись, пока не потерял: Канал в ТГ: t.me/frontend_not_for_everyone ФБ: fa...
Jasmine SpyOnProperty - Unit-тестирование в Angular
Переглядів 4 тис.3 роки тому
Как использовать Jasmine Spy для геттеров и сеттеров? Какие сложности могут возникнуть в ходе использования SpyOnProperty? Как можно скомбинировать мок зависимости, с геттером, методами и статическими полями класса. Все ответы в текущем видео, скорее смотри. Продолжительность: 27 минут Уровень: Middle, Senior Тестовое приложение из видео - github.com/dreamhelg/angular-jasmine-spy-on-property Сс...
Unit-тестирование в Angular. Как использовать Jasmine Spy?
Переглядів 11 тис.3 роки тому
Что такое Jasmine Spy и как он может помочь с тестами. Чем отличается spyOn от createSpy. В чем разница между callFake() и callThrough(). Как самостоятельно сделать, а потом починить flacky-тесты. Очень подробно, с примерами, ошибками и слезами радости. Продолжительность: 55 минут. Уроверь: junior, middle Тестовое приложение из видео - github.com/dreamhelg/angular-unit-test-jasmine-spy Ссылки: ...
Unit-тестирование в Angular. Jasmine, Karma, Test coverage report
Переглядів 18 тис.4 роки тому
Как начать писать юнит-тесты в Angular, что такое Jasmine и Karma. Как тестировать зависимости, что такое отчет Test coverage. Подробно и с примерами. Продолжительность: 23 минуты. Уроверь: junior, middle Тестовое приложение из видео - github.com/dreamhelg/angular-unit-test-beginner/ Ссылки: Канал в ТГ: t.me/frontend_not_for_everyone ФБ: olga.fomina.58555 ВК: dreamhelg

КОМЕНТАРІ

  • @flepjack
    @flepjack Місяць тому

    Годнота 👍 Отличный вводный урок, как раз то что нужно

  • @ЮлияХомякова-с4л
    @ЮлияХомякова-с4л 2 місяці тому

    Спасибо) очень полезное видео!

  • @pzaydulin
    @pzaydulin 2 місяці тому

    14:23 опечатка, вместо createSpyObj('fakeFirstDependency' -> должно быть createSpyObj('fakeFirstDependencyService'. Поэтому 23:20 отсутствует поле name. После исправления поле появляется, поэтому нет необходимости в defineProperty. определяем set и get как в прошлом примере /// age: 0, get name(): string {return ''}, set name(val: string) {}, /// и в тестах используем spyOnProperty как указано на видео

    • @pzaydulin
      @pzaydulin 2 місяці тому

      хотя get и set можно определить и через defineProperty

  • @VeynShot
    @VeynShot 4 місяці тому

    Годно! Спасибо за видео !

  • @zaicev_evgeny
    @zaicev_evgeny 5 місяців тому

    Было очень полезно. Спасибо.

  • @dimzinnatov7242
    @dimzinnatov7242 5 місяців тому

    Кстати когда используешь createSpyObj и оставляешь массив названий методов пустым - выпадает ошибка о том, что нужен заполненный массив Может быть кто-нибудь знает почему нельзя оставить массив пустым?

  • @Amfeon
    @Amfeon 6 місяців тому

    С возвращением)

  • @volodimiryemshyn715
    @volodimiryemshyn715 6 місяців тому

    Не, ну тут очевидно реди фор продакшен код был :) . Ой как режет ухо Транспортный слой

  • @andreidetenkov
    @andreidetenkov 6 місяців тому

    Приветствую! у меня вопрос не по теме наверно - а как вы учили ангуляр? дока у ангуляра хорошая но это на уровень мидла наверно. а дальше как? DDD, чистая архитектура, луковая, микросервисы/микрофронтенды в ангуляре? хочется ведь не только делать сделать big ball of mat но и спроектировать хорошее приложение что ангуляр позволяет сделать со своим DI и TS из коробки.

    • @volodimiryemshyn715
      @volodimiryemshyn715 6 місяців тому

      Опыт и еще раз опыт, хороший проект с грамотной архитектурой, плотная команда с хорошим код ревью 2-3 годика и вопрос отпадет :) МФ это инструмент решение как-то проблемы, опять же пока не столкнешься с проблемой нет смысла все на микрофронтендах строить. Чистая архитектура на каждом проекте своя, где то сервисы где то состояние, где то граф, кто-то extends не любит при построение копонентов, кто-то с контекстом любит побаловаться. Сколько проектов столько и подходов есть основа и она в целом в доке описана. Дальше только подстраиваешься под проекты.

    • @andreidetenkov
      @andreidetenkov 6 місяців тому

      @@volodimiryemshyn715 согласен. Где ж его взять то хороший проект с хорошей командой ;)

  • @lionstar3189
    @lionstar3189 6 місяців тому

    Хотел отписаться, но нет. Канал жив!

  • @a_lodygin
    @a_lodygin 6 місяців тому

    Пожалуйста, люди, не забывайте писать type в тегах button 😭

  • @Yermalex
    @Yermalex 6 місяців тому

    круто, здорово, спасибо! Было бы интересно посмотреть ролик на тему архитектуры ангуляр приложений, как вы организовываете структуру, различные слои и абстракции)

    • @frontend-not-for-everyone
      @frontend-not-for-everyone 6 місяців тому

      есть мысль кстати сделать такой, да, если это будет интересно

    • @Mihes22
      @Mihes22 6 місяців тому

      Плюсую

    • @Mihes22
      @Mihes22 6 місяців тому

      Плюсую

    • @andreidetenkov
      @andreidetenkov 6 місяців тому

      @@frontend-not-for-everyone про NX было бы бомбезно, и не про feature и data-access, а как выделить доменную модель, как раскидать зацепление, как сделать приоритетом абстракции и отделить их от реализаций в домене, как выделить use cases и все такое прочее неинтересное никому на ютубе ))))

    • @КонстантинХ-у4ф
      @КонстантинХ-у4ф 6 місяців тому

      ​@@andreidetenkov ну и душнила ты

  • @keptof
    @keptof 6 місяців тому

    Отличный контент, спасибо) Я бы разделил сервисы в любом случае)

  • @user-san-chous
    @user-san-chous 6 місяців тому

    ого-ого, не думал уже увидеть самого красивого ангулярщика на ютубе) учил когда-то тесты по Вашим видео А из несогласий, то в ngOnchanges то что он написал, то это норм выглядит, если у компонента действительно может меняться id юзера, без нового инита компонента и без стейт-менеджмента на проекте. И вместо сетера можно просто сделать if (changes['userId']). Сетеры - более устаревший подход, имхо. По поводу везде писать void возвращаемый тоже как-то избыточно.... Можно договориться, что писать возвращаемый тип лишь когда метод действительно что-то возвращает... имхо) Сегодня тоже 2 часа на собеседовании был, то это еще не может мозг отойти и генерирует все подряд))

    • @VasyaFF
      @VasyaFF 6 місяців тому

      Чтобы избежать лишнего ререндера, я вместо `if (changes['userId'])` пишу `if (changes['userId'].currentValue)`

    • @user-san-chous
      @user-san-chous 6 місяців тому

      ​@@VasyaFFну это от кейса зависит... Такой код не отработает, когда прилет null или undefined. Иногда это норм, а иногда может быть какая-то логика, когда сущности нет.

    • @volodimiryemshyn715
      @volodimiryemshyn715 6 місяців тому

      Она подсветила этот момент если у тебя не стоит OnPush то твой компонент будет рередериться постоянно, как бы ты там не старался с if (changes['userId']) этот код будет только вызывать лишний if потому что потому :) слово ИМХО устарело примерно лет 10 назад :) Но почему то ты его используешь) я сеттеры люблю удобны) Но и ngOnchanges пользуюсь когда есть динамический компонент где действительно нужно следить за состоянием.

    • @user-san-chous
      @user-san-chous 6 місяців тому

      @@volodimiryemshyn715 при чем там повторный рендер?) Зачем мы пишем сетер или хук этот? Мб чтобы выполнять дополнительную логику? Или ты каждый раз сеттер пишешь просто ради инкапсуляции?) И вот чтобы эта логика не срабатывала при любом инпуте и нужна проверка. А рендер и так не произойдет, если значение не изменится. В сетере тебе приходитяс писать еще дополнительное свойство какое-то приватное, чтобы сетить его. С хуком это не нужно. Но да, с хуком другая проблема - отсутствме типизации(( Если инпут точно будет только один, тогда в этом случае сеттер еще оправдан. А если больше, то спорно. А "имхо" не может устареть, учитывая его значение. Я его добавил, чтобы не звучало как общепринятое мнение или т.п.

    • @volodimiryemshyn715
      @volodimiryemshyn715 6 місяців тому

      ​@@user-san-chous Я не так чтобы поспорить написал, есть кейс - у тебя идет запрос на сервер получаеться user после ты передаешь этого юзера в инпут, если у тебя onpush стратегия, то ? или ? а как? :) вот тут и не обходим ручной перерндер ввиде settera или changes/ChangeDetectorRef.

  • @JohnPo-id7wz
    @JohnPo-id7wz 6 місяців тому

    Не верю своими глазам! Очень рад!

  • @a4y_m5r
    @a4y_m5r 6 місяців тому

    Мне кажется сейчас уже все используют id как uuid, а представить его лучше всего в виде строки ))

    • @frontend-not-for-everyone
      @frontend-not-for-everyone 6 місяців тому

      да, именно поэтому нужно уточнить, все может быть)

  • @Kurigohan-and_k
    @Kurigohan-and_k 6 місяців тому

    Спасибо за видео! ❤

  • @javascript_runner
    @javascript_runner 6 місяців тому

    Спасибо было интересно послушать - все грамотно расказано

  • @VasyaFF
    @VasyaFF 9 місяців тому

    Для тех, кто будет смотреть в будущем (на новых версиях Ангуляра и RxJS): Чтобы в subscribe не использовать undefined: subscribe({ next: result => console.log('could be deleted here'), err => { expect(err).toBe('name is undefined'); done(); }, complete: () => console.log('could be deleted here') }); return throwError(() => 'name is undefined'); Observable и Subject'ы принято обозначать долларом (легче читать код): subjectExample$

  • @adammartin7477
    @adammartin7477 10 місяців тому

    Вам бы тоже подошло имя Жасмин!

  • @AlexFilenko
    @AlexFilenko 10 місяців тому

    Несправедливо мало просмотров и лайков. Спасибо за полезную информацию.

  • @apkartas7416
    @apkartas7416 10 місяців тому

    спасибо, куколка)

  • @satsat92736
    @satsat92736 10 місяців тому

    Спасибо за информацию! Только можно экран увеличить, шрифт маленький, сложно порой смотреть

  • @satsat92736
    @satsat92736 10 місяців тому

    спасибо

  • @kirylsereda
    @kirylsereda 11 місяців тому

    красава)продолжай

  • @johnjohhoun1716
    @johnjohhoun1716 11 місяців тому

    00:40 SpyOnProperty 12:48 CreateSpyObj

  • @dimonagon6710
    @dimonagon6710 Рік тому

    😍

  • @romanryaboshtan9270
    @romanryaboshtan9270 Рік тому

    27:28 вообще более точно 500 - это внутренняя ошибка сервера(Internal server error)

  • @romanryaboshtan9270
    @romanryaboshtan9270 Рік тому

    раньше такое не использовал, да, было полезно, можно делать ещё заметки по TS (вопрос: почему нельзя было на 11 строке поставить number | undefined вместо || 0 на 13 строке??)

  • @romanryaboshtan9270
    @romanryaboshtan9270 Рік тому

    4:06 12-16 строка: можно было тернарником - чуть короче запись

  • @romanryaboshtan9270
    @romanryaboshtan9270 Рік тому

    hi, 3:50 почему на 17 строке не просто boolean вместо person is Woman??

  • @egor13E
    @egor13E Рік тому

    Я все понимаю. Но Кли и Хит... Леди точно умеет читать не по-русски?

  • @un_defined
    @un_defined Рік тому

    чеш так мелко то, ну все ж спасиб

  • @m9tezhnik
    @m9tezhnik Рік тому

    Большое спасибо за информативный ролик.

  • @MegaDjeday
    @MegaDjeday Рік тому

    Вы потрясающе рассказываете!

  • @Teardrop-u4z
    @Teardrop-u4z Рік тому

    Ахаххах "есть люди который считают что динамическая типизация лучше"😂😂😂 сказала так будто это больные люди😂 дмнамическая типизация для средних и маленьких проектов чамое то. А их в интернете 70%

  • @макс-х9п9л
    @макс-х9п9л Рік тому

    Не понял прикола. Какой смысл передавать в аргументы тип Man, если функция должна возвращать Woman? Убрать Man из аргумента и не потребуется этот type guard. В общем сами создали себе проблему и решаем её, ясно

    • @romanryaboshtan9270
      @romanryaboshtan9270 Рік тому

      дело в том, что такие примеры встречаются на практике, когда функция работает с разными типами и выполняет похожие действия, поэтому здесь разбирается этот вопрос

  • @sergeisychov9810
    @sergeisychov9810 Рік тому

    Спасибо! Жаль что мало контента на канале. У Вас хорошо получается преподносить информацию

  • @sergeisychov9810
    @sergeisychov9810 Рік тому

    ничего не видно, поэтому информация плохо усваивается

  • @Александр-п9м8й

    Огонь, спасибо за проделанную работу!

  • @Александр-п9м8й

    Доходчиво разобрали довольно сложную тему для меня, спасибо!

  • @Александр-п9м8й

    Все четко и понятно, спасибо!

  • @Александр-п9м8й

    Большое спасибо за ролик!

  • @Александр-п9м8й

    Спасибо большое за ваш труд!

  • @polosatytigr
    @polosatytigr Рік тому

    24:45 по идее, вместо spread оператора, можно использовать `Object.assign`: ``` const fakeFirstDependencyService = Object.assign(jasmine.createSpyObject("fakeFirstDependency", ["doSomething", "doSomethingElse"], ["name"]), {age: 0}); ``` У вас очень позновательные уроки. Спасибо за ваш труд.

  • @tigranovakyan
    @tigranovakyan Рік тому

    И красивая и умничка еще и angular)) одно слово влюбился)) Спасибо за уроки

  • @meizurin3176
    @meizurin3176 Рік тому

    Здравствуйте, подскажите пожалуйста, как тестировать void методы?

  • @johnjohhoun1716
    @johnjohhoun1716 Рік тому

    02:49 ошибка компиляции шаблона 09:55 использование блока: schema CUSTOM_ELEMENT_SHEMA и NO_ERRORS_SCHEMA - пропустить тестирование дочерних компонентов 13:06 Change detection cycle 15:13 @Input и detectChanges 21:47 @Output метод Jasmin spyON 26:22 Эмуляция события из шаблона 30:22 проверка CSS в шаблоне, detectChanges 37:52 тестирование зависимостей приложения Dependency Injection 41:20 мок провайдеров компонента, устранение зависимости зависимостей - TestBed.overrideComponent 51:30 ошибки тестирования форм, включение реальных модулей форм

  • @elenaswiderskaya718
    @elenaswiderskaya718 Рік тому

    Отличный материал по тестированию, спасибо большое! Видно, что вы имеете хороший опыт и, что отрадно, делитесь им. Я даже рассматриваю данные видео в виде best practice по написанию тестов и особенно стилистике, потому как хоть пишу тесты, но как Бог на душу положит - хороших развернутых примеров не так много. Я обычно пишу на Jest, но применить всё, что есть в Jasmine, можно. А с данными роликами - так без труда, ведь понятна становится вся суть техник, использующихся в тестировании. Уже просто неважно, что именно использовать в проекте. Полагаю, что у вас есть богатый опыт и обычном программировании, поэтому буду надеяться на выход других видео (по TS или Angular). Не могу не отметить хорошую подачу материала - очень всё понятно, нет никаких темных пятен в логике. Я прям с большим удовольствием все посмотрела!

  • @mishabutuzov
    @mishabutuzov Рік тому

    Спасибо, очень полезно! Вас приятно слушать