Dmitriy D.

AAA-паттерн в unit-тестировании на JavaScript

2024-10-29T17:52:12.887Z

Паттерны программирования помогают разработчикам читать и понимать чужой код. AAA-паттерн в контексте unit-тестирования предлагает структурировать тесты на три секции:

Arrange (настрой)
Act (действуй)
Assert (проверь)

Настрой

На этапе настройки подготавливаются все зависимости теста:

Объявляем аргументы для функций
Объявляем props для компонентов

Иногда настраивать ничего не требуется, это нормально.

Действуй

На этапе действия выполняется основная задача теста:

Рендерим React-компонент
Получаем DOM-элементы
Вызываем функции с аргументами
Изменяем состояние в React-хуках
Инициируем действие пользователя (клик, фокус и т.д.)

Проверь

На этапе проверки сверяем результаты выполнения сценариев:

Проверяем позитивные сценарии
Проверяем негативные сценарии

Примеры с тестами

Чистые функции

Проверяем по AAA-паттерну результат работы чистой функции:

describe('dateFormat', () => {
  it('дата должна соотвествовать формату DD-MM-YYYY', () => {
  
    // Настрой
  
    const inputDate = '07.12.2012'
    const outputFormat = 'DD-MM-YYYY'
  
    // Действуй
  
    const date = dateFormat(inputDate, outputFormat)
  
    // Проверь
  
    expect(date).toBe('07-12-2012')
  })
}

Изменение `state` в React-хуке

Проверяем по AAA-паттерну бизнес-логику, вынесенную в отдельный хук:

function useAnalytics() { 
  const [events, setEventCount] = useState(0) 
  
  const sendEvent = debounce(async (event) => {
     await ym(event)
     setEventCount((x) => x + 1)
  }, 300)
  
  return { sendEvent, events } 
}

import { renderHook, waitFor } from "@testing-library/react"

describe('useAnalytics', () => {
  it('только 1 событие отправлено после 2 кликов подряд', async () => {
   
    // Действуй
  
    const { sendEvent, events } = renderHook(useAnalytics)
  
    waitFor(() => { 
      await sendEvent('click')
      await sendEvent('click')
    })
  
    // Проверь
  
    expect(events).toBe(1)
  })
}

Изменение `state` в Redux-редюсере

Проверяем по AAA-паттерну бизнес-логику вынесенную в отдельный редюсер, при помощи доступных методов:

const ratesReducer = createSlice({
  name: 'rates',
  initialState: {
     all: [],
     best: [],
  },
  reducers: {
     set: (state, action) => {
        state.all = action.payload
     }
     filter: (state, action) => {
        const { all, best } = state
        const { value } = action.payload
        
        best = all.filter(rate => rate.value >= value)
     }
  }
})

describe('ratesReducer', () => {
  it('возвращает ставки при фильтрации по значению', () => {
   
    // Настрой
  
    const initials = {
      all: [
        { name: 'Накопительный', value: 11 },
        { name: 'Среднесрочный', value: 14 },
        { name: 'Долгосрочный',  value: 20 },
      ],
      best: []
    }
  
    // Действуй
   
    const { reducer, filter } = rates
  
    const bestRates = reducer(initials, filter({ value: 12 })
  
    // Проверь
  
    expect(bestRates).toEqual([
      { name: 'Среднесрочный', value: 14 },
      { name: 'Долгосрочный',  value: 18 },
    ])
  })
})

Изменение `props` в React-компоненте

Проверяем по AAA-паттерну рендеринг компонента с различными сочетаниями props:

import { render } from "@testing-library/react"

describe('Button', () => {
  it('отображает загрузку (без текста) для состояния loading', () => {
  
    // Настрой
  
    const props = {
       isLoading: true
    }
  
    // Действуй
  
    const component = render(<Button {...props}>Скачать</Button>)
    const button = component.getByTestId('button') 
  
    // Проверь

    expect(button).toHaveClass('.loading')
    expect(button).not.toHaveTextContent("Скачать") 
  })
})

Тестируем внутреннее изменение state в React-компоненте по AAA-паттерну:

import { render, fireEvent } from "@testing-library/react"

describe("Toggle", () => {
  it("включён после клика на Toggle в дефолтном состоянии", () => {
  
    // Действуй
  
    const component = render(<Toggle />)
    const toggle = component.getByTestId('.toggle') 

    waitFor(() => { 
       fireEvent.click(toggle)
    }) 
  
    // Проверь

    expect(toggle).toBeChecked()
  })
})

Название теста

Имя теста так же можно создавать при помощи AAA-паттерна, только в обратную сторону (на примере тестов выше):

(dateFormat) date must be exact to DD-MM-YYYY format
(useAnalytics) sent only one event after double call by sendEvent
(ratesReducer) returns rates with filter value
(button) show loading styles and no text for loading state
(toggle) checked after click to toggle with default state

Заключение

Паттерн хорош собой, так как при создании теста заставляет концентрироваться на независимых этапах, которые при повторении можно легко вынести и переиспользовать.

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

Паттерн подходит только для unit-тестов, так кактребует чтобы тесты проводили проверки, а не ходили по шагам.

Использовать паттерн — хорошая практика, так как разработчикам становиться проще читать и понимать чужие тесты.

Unit-тестирование

2024-10-03T15:58:01.928Z

Unit-тестирование помогает стабилизировать процесс разработки при помощи тестов на базовые составляющие кода: функции, методы, классы и целые блоки кода, например:

Функция вычисления общей стоимости заказа
Метод сортировки новостей по дате
Колбек при переходе на страницу

Покрытие unit-тестами позволяет:

Повысить стабильность рефакторинга
Уменьшить количество ошибок на ранних стадиях разработки
Увеличить доверие + получить гарантии работоспособности кода
Задокументировать код

Без покрытия unit-тестами:

Дефекты будут найдены позже, их исправление станет дороже
Новый код будет лежать «рядом» с исходным, вместо изменений
Проект быстро устареет и его потребуется переписать с нуля

Unit-тестирование трудоемкий процесс отнимающий значимое количество рабочего времени, поэтому перед тем как начать писать тест следует обдумать что конкретно вы собираетесь покрыть тестом.

Что покрывать unit-тестами?

Вопрос который мучает многих разработчиков, так как возможности Jest в сочетании с другими инструментами позволяют тестировать компоненты на уровне сквозных тестов (e2e).

Концептуально стоит тестировать любой код, отказ которого может привести к потере денег, например:

Бизнес-сценарий не может быть завершен
Интерфейс работает некорректно

На прикладном уровне unit-тестами следует тестировать состояние и поведение кода.

Тестирование состояния

Тестируя состояние мы подаем на вход данные и проверяем:

1. Корректность вывода утилитарных функций

function sum(a: number, b: number) :number {
    return a + b
}

test("sum of 2 numbers return correct value", () => {
    const result = sum(1, 2)
    expect(result).toEqual(3)
})

2. Корректность отображения props глупых компонентов

import { render } from "@testing-library/react";

test("breadcrumbs renders correct count of items", () => {
    const items = ["Главная", "Категория", "Статья"]
    const component = render(<Breadcrumbs items={items} visible={2} />)
    
    const items = component.querySelector('.items')
    
    // позитвные сценарии
    expect(items).toHaveLength(2)
    expect(items).toHaveTextContent("Главная")
    expect(items).toHaveTextContent("Категория")
    
    // негативные сценарии
    expect(items).not.toHaveTextContent("Статья")
})

3. Корректность изменения state глупых компонентов:

import { renderHook, waitFor } from "@testing-library/react";

function useCounter() {
  const [count, setCount] = useState(0)
  const increment = () => setCount((x) => x + 1)

  return { count, increment }
}

test("useCounter increment method works correct", async () => {
  const result = renderHook(useCounter)
   
  waitFor(() => {
    result.current.increment()
  })
   
  expect(result.current.count).toBe(1)
})

Тестирование поведения

Тестируя поведение мысовершаем действия и смотрим:

1. Как компонент взаимодействует c другими компонентами

Взаимодействие данных между страницами

2. Как компонент взаимодействует с пользователем

Прохождение happy-path
Заполнение форм

3. Как компонент реагирует на ответы с сервера

Серверная валидация формы
Корректное отображение данных с сервера

Что такое хороший тест?

Проверяет только 1 утверждение
Изолирован от других тестов и окружения
Выполняться быстро и параллельно
Соблюдает структуру, конвенцию именования
Имеет небольшой размер

Пишем тесты с умом

Бездумное написание тестов не помогает, а даже вредит проекту.

Если раньше у вас был один некачественный продукт, то написав тесты, не разобравшись, вы получите — два, и бонусом удвоенное время на сопровождение и поддержку за ваш счёт.

Не стоит относиться к тестам как к второсортному коду.

Многие начинающие разработчики ошибочно полагают, что DRY, KISS и другие подходы, да даже переиспользование переменных для test-id — это только для кода в продакшен, а в тестах допустимо всё.

Это не верно.

Тесты так же являются важным кодом, просто пользователи этого кода — другие разработчики.

Какой процент покрытия?

Добиваться 100% покрытия бессмысленно, так как такой процент покрытия не гарантирует вам безотказную работу вашего приложения.

Почему бесмысленно добиваться 100% покрытия

Хорошие практики

На баг всегда должен быть написан unit-тест
Писать unit-тесты на негативные сценарии
Описывать unit-тест по структуре AAA

Arrange (условие)
Act (действие)
Assert (утверждение)

Cтремиться к 80% покрытию
Завязываться на test-id для обращения к DOM-элементами

Плохие практики

Unit-тест тестирует смежные модули
Unit-тест тестирует данные, а не бизнес-логику
Unit-тест не проверяет исключительные ситуации
Unit-тест выводит не понятный assertion message
Unit-тест тестирует компонент UI-библиотеки или готовый пакет
Стремиться к 100% покрытию
Завязываться на селекторы и классы для обращения к DOM-элементами

Как качественно сформулировать техническое предложение по изменениям в проекте

2024-09-28T13:29:56.431Z

Материал для тех, кому часто требуется выступить с предложением технических изменений в проекте ✌

Кто пробовал изменить что-то в устоявшемся проекте, тот знает — любые изменения воспринимаются окружающими критически, и полезность ваших изменений надо еще доказать.

В особенности когда проект существует много лет и все привыкли что проект работает пускай не идеально, но зато предсказуемо и понятно.

Такая уж природа человека 🤷‍♂️

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

Донести важность изменений
Сохранить адекватность повествования
Не давать повествованию уйти в сторону
Достичь хорошего соотношения времени/полезности в выступлении

Итак, чек-лист адекватного предложения изменений:

Сформулируй тему

Тема должна быть узкой и предлагать конкретное решение проблемы. Широкая тема даёт возможность перескакивать с одного места на другое, из-за этого становится сложно понять общий смысл.

Широкие темы, где мысль может скакать:

Улучшение процесса тестирования
Повышение производительности приложения
Использование паттернов проектирования

Узкие темы, где мысль будет идти по четкой траектории:

3 утилиты способные ускорить написание тестов
Использование хуков для мемоизоции снижает нагрузка на коллстэк

Как внедрение MVC сделает приложение более устойчивым к рефакторингу

В контексте презентации, тема должна быть сформулирована так, чтобы презентация умещалась в 5-7 простых слайдов.

Определи цель

Целью выступления должно быть позитивное изменение текущего положения дел.

Не стоит коммититься на что-то амбициозное, нужно выбрать простую, понятную и достижимую цель, которую можно внедрить без лишней боли.

Абстрактная амбициозная цель:

Помочь разработчикам писать код лучше и не допускать ошибок
Предложить рефакторинг лейаутов

Конкретная цель:

Убедить разработчиков включить/выключить линтер-правила
Доказать что доработка лейаута значительно сократит код-базу, снизит траты ресурсов на тестирование и поддержку

Предложи решение

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

Помни про тайминг

Выступление должно идти не больше 20 минут, иначе оно рискует превратится в скучную лекцию препода по матеше в субботний солнечный день.

Строгий режим в JavaScript (use strict)

2024-05-31T17:12:45.646Z

Долгое время JavaScript развивался без проблем с обратной совместимостью к прошлым версиям языка: добавлялись новые возможности, старая функциональность не изменялась.

В результате, существующий код продолжал работать, но каждая ошибка и несовершенство языка застревали в нем навсегда.

Так JavaScript работает по-умолчанию.

Что же выбрать?

Sloppy mode (небрежный режим)

Режим работы JavaScript по-умолчанию называется sloppy mode и у него есть свои плюсы и минусы:

Плюсы

Режим позволяет не обращать внимание на несоответствие кода спецификации JavaScript, например:

Можно использовать переменную до её объявления

Минусы

В коде появляется магия, например, с преобразованием типов
Код становится менее безопасным

Strict mode (строгий режим)

В 2009 году появляется стандарт ECMAScript 5 (ES5).

Он добавляет новые возможности в язык и изменяет некоторые из существующих. Чтобы устаревший код в новых версиях языка продолжал работать стабильно и предсказуемо, в стандарт был введен строгий режим.

Строгий режим вводит в JavaScript ограничения и некоторые правила по написанию кода:

Правила

Значением this по умолчанию является undefined:

'use strict'

function showMeThis() {    
    return this
}

showMeThis() // undefined

Ограничения

Нельзя присваивать значения или обращаться к необъявленным переменным:

function returnY() {    
    'use strict'    
    y = 123    
    return y
}

returnY() 

// Uncaught ReferenceError: y is not defined

Нельзя присваивать значения глобальным переменным, доступным только для чтения или записи:

'use strict'

var NaN = NaN
var undefined = undefined
var Infinity = 'and beyond'

// Uncaught TypeError: Cannot assign to read only property

Нельзя удалить «неудаляемое» свойство объекта:

'use strict'

const obj = {}

Object.defineProperties(obj, 'x', {
    value: 1
})

delete obj.x 

// Uncaught TypeError: Property description must be an object: x

Запрещено дублирование параметров:

'use strict'

function someFunc(a, b, b, c) { } 

// Uncaught SyntaxError: Duplicate parameter
// nname ot allowed in this context

Нельзя использовать зарезервированные слова:

abstract extends intertace synchronized boolean false long this break 
final native throw byte finally new throws case float null transient 
catch for package true char function private try class goto protected 
var const if public void continue implements return while default 
import short with do in static double instanceof super else int switch

Когда использовать строгий режим?

Защитить код от начинающих разработчиков
Когда нужно писать чистый и безопасный код

Вопросы для собеседования по Browser API

2024-05-31T12:44:57.031Z

Темы

Где лучше хранить токен авторизации?

В cookies с использованием флагов:

secure передача только по HTTPS
httpOnly отключение доступа из JavaScript

Как победить ошибку CORS?

Прописать CORS на сервере
Настроить локальный proxy сервер
Отключить политику cors в браузере

Специальные символы и зарезервированные слова в JavaScript

2024-05-11T14:27:51.337Z

Специальные символы

Внутри строк мы можем использовать специальные символы.

Это комбинации обычных символов, обозначающих служебные или непечатаемые символы, то есть те, которые нельзя ввести обычным способом:

\n перевод строки

\f перевод страницы

\t табуляция

\\ обратный слэш

\r возврат каретки

Зарезервированные слова

Зарезервированные слова нельзя использовать в качестве имен переменных, функций и объектов:

abstract extends intertace synchronized boolean false long this break final
native throw byte finally new throws case float null transient catch for 
package true char function private try class goto protected var const if 
public void continue implements return while default import short with do 
in static double instanceof super else int switch

Развернуть вложенный массив | Алгоритмические задачи по JavaScript

2023-10-30T11:36:39.353Z

Три подхода для разворачивания массива любой вложенности:

Код

Мутирование

const arr = [1, [2, 3, [4, 5, 6]], 7]

const flat = (arr) => {
  for (let i = 0; i < arr.length; i++) {
    if (Array.isArray(arr[i])) {
      arr.splice(i, 1, ...arr[i])
    }
  }
  return arr
}

flat(arr) // [1, 2, 3, 4, 5, 6, 7]

Рекурсия

const arr = [1, [2, 3, [4, 5, 6]], 7]

const flat = (arr) => {
  const cache = []
  
  for (let i = 0; i < arr.length; i++) {
    if (Array.isArray(arr[i])) {
      cache.push(...flat(arr[i]))
    } else {
      cache.push(arr[i])
    }
  }
  return cache
}

flat(arr) // [1, 2, 3, 4, 5, 6, 7]

Стэк

const arr = [1, [2, 3, [4, 5, 6]], 7]

const flat = (arr) => {
  const stack = [...arr]
  const result = []
  
  while(stack.length > 0) {
     const pop = stack.pop()
     
     if (Array.isArray(pop) {
        stack.unshift(...pop)
     } else {
        result.push(pop)
     }
  }
  
  return result
}

flat(arr) // [1, 2, 3, 4, 5, 6, 7]

Вопросы

Почему рекурсия наиболее худший вариант из предложенных?

Полезное

https://learn.javascript.ru/array-methods

Задачи

https://leetcode.com/problems/flatten-deeply-nested-array/

Очереди (stack, queue)

2023-10-27T08:45:49.463Z

Стэк (stack)

Стек хранит данные в последовательном порядке и удаляет последние (новые) элементы.

Алгоритм

push: добавить новый элемент
pop: удалить верхний элемент, вернуть его
peek: вернуть верхний элемент
length: вернуть количество элементов в стеке

Код

function Stack() { 
  this.count = 0 
  this.storage = {} 
 
  this.push = function(value) { 
    this.storage[this.count] = value 
    this.count++ 
  } 
 
  this.pop = function() { 
 
    if (this.count === 0) return undefined 
    
    this.count-- let
    result = this.storage[this.count] 
    delete this.storage[this.count] 
    
    return result
  } 
 
  this.peek = function() { 
    return this.storage[this.count - 1] 
  } 
 
  this.size = function() { 
    return this.count 
  }
}

Очередь (queue)

Очередь напоминает стек, она так же хранит данные в последовательном порядке, но удаляет самые первые элементы (старые)

Алгоритм

enqueue: войти в очередь, добавить элемент в конец
dequeue: покинуть очередь, удалить первый элемент и вернуть его
front: получить первый элемент
isEmpty: проверить, пуста ли очередь
size: получить количество элементов в очереди

Код

function Queue() { 
  let collection = [] 
  
  this.print = function() { 
    console.log(collection) 
  } 
  
  this.enqueue = function(element) { 
    collection.push(element) 
  } 
  
  this.dequeue = function() { 
    return collection.shift() 
  } 
  
  this.front = function() { 
    return collection[0] 
  } 
  
  this.isEmpty = function() { 
    return collection.length === 0 
  } 
  
  this.size = function() { 
    return collection.length } 
  }

Задачи

https://leetcode.com/problems/valid-parentheses

Видео

https://www.youtube.com/watch?v=C6CbIReHsNk

Hash-таблицы (hash table)

2023-10-26T14:21:35.629Z

Hash-таблица — неупорядоченная структура данных для быстрого доступа к значению по ключу.

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

Плюсы

Эффективно работает с неизменяемыми объектами
Хэш-функция дает (должна) равномерное распределение

Структура

Словарь для хранения ключей
Хэш-функция (преобразует ключ в уникальный хэш)
Получение значения по хэшу
Удаление значения по хэшу

Код

class HashTable { 
  constructor() { 
    this.memory = []
  } 
  
  hashKey(key) { 
    var hash = 0
    for (var index = 0; index < key.length; index++) { 
      // базовая генерация hash
      var code = key.charCodeAt(index)
      hash = ((hash << 5) - hash) + code | 0
    } 
    return hash; 
  }
  
  get(key) { 
    var address = this.hashKey(key)
    return this.memory[address]
  }

  remove(key) { 
    var address = this.hashKey(key)

    if (this.memory[address]) { 
        delete this.memory[address]
    }
  }
}

Пример hash-функций:

function hash(string, max) { 
  let hash = 0 
  
  for (let i = 0; i < string.length; i++) { 
    hash += string.charCodeAt(i) 
  } 
  
  return hash % max 
}

Проблемы

Коллизии

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

Потребление памяти

При большом размере таблица будет использоваться много памяти. При маленьком размере в таблице будет большой коэффициент заполнения, медленный поиск и удаление

Задачи

https://leetcode.com/problems/single-number (решить за O(1) по памяти)
https://leetcode.com/problems/two-sum
https://leetcode.com/problems/4sum
https://leetcode.com/problems/group-anagrams
https://leetcode.com/problems/valid-anagram
https://leetcode.com/problems/find-all-anagrams-in-a-string

Видео

https://www.youtube.com/watch?v=0UX4MIfOMEs

Алгоритмы и структуры данных

2023-10-26T13:40:36.027Z

Другими словами, алгоритм — это определенная последовательность действий, которая приводит к предсказуемому результату.

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

Сложность алгоритмов

Сложность алгоритма это количество операций за которое алгоритм будет выполнен.

Оценка сложности алгоритма (Big O)
Алгоритмы

Поиск

Сортировки

Пузырьком
Выбором
Вставками
Слиянием
Быструю

Очереди

Пространственная сложность

Количество памяти которое задействует алгоритм

Структуры данных (data structure)

Структуры данных это определенный способ организации данных, предоставляющая механизмы взаимодействия с ними.

Материалы

Dmitriy D.

AAA-паттерн в unit-тестировании на JavaScript

Настрой

Действуй

Проверь

Примеры с тестами

Чистые функции

Изменение state в React-хуке

Изменение state в Redux-редюсере

Изменение props в React-компоненте

Название теста

Заключение

Unit-тестирование

Что покрывать unit-тестами?

Тестирование состояния

Тестирование поведения

Что такое хороший тест?

Пишем тесты с умом

Какой процент покрытия?

Хорошие практики

Плохие практики

Как качественно сформулировать техническое предложение по изменениям в проекте

Сформулируй тему

Определи цель

Предложи решение

Помни про тайминг

Строгий режим в JavaScript (use strict)

Sloppy mode (небрежный режим)

Плюсы

Минусы

Strict mode (строгий режим)

Правила

Ограничения

Когда использовать строгий режим?

Вопросы для собеседования по Browser API

Темы

Где лучше хранить токен авторизации?

Как победить ошибку CORS?

Специальные символы и зарезервированные слова в JavaScript

Специальные символы

Зарезервированные слова

Развернуть вложенный массив | Алгоритмические задачи по JavaScript

Код

Мутирование

Рекурсия

Стэк

Вопросы

Полезное

Задачи

Очереди (stack, queue)

Стэк (stack)

Алгоритм

Код

Очередь (queue)

Алгоритм

Код

Задачи

Видео

Hash-таблицы (hash table)

Плюсы

Структура

Код

Проблемы

Коллизии

Потребление памяти

Задачи

Алгоритмы и структуры данных

Сложность алгоритмов

Структуры данных (data structure)

Изменение `state` в React-хуке

Изменение `state` в Redux-редюсере

Изменение `props` в React-компоненте