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

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

Определение и типизация пропсов

Пропсы в Atomico задаются с помощью функции props, которая позволяет указать тип, значение по умолчанию и валидацию. Стандартный синтаксис:

import { c, props, useState } from "atomico";

const MyComponent = c(
  () => {
    const [count, setCount] = useState(0);
    return <div>{count}</div>;
  },
  {
    count: props.number
  }
);

Ключевые моменты:

props.number, props.string, props.boolean — базовые типы.
Можно использовать props.arrayOf(type) и props.shape({ ... }) для сложных структур.
Для задания значения по умолчанию применяется функция default.

Пример с дефолтным значением:

const MyComponent = c(
  () => {},
  {
    count: props.number({ default: 0 })
  }
);

Проверка пропсов при тестировании

Atomico не включает встроенного механизма runtime проверки типов пропсов в production. Для тестирования используются юнит-тесты с библиотеками типа Jest и Testing Library. Основные подходы:

Проверка корректной передачи значений

import { render } from "@testing-library/atomico";
import MyComponent from "./MyComponent";

test("должен корректно принимать числовой проп count", () => {
  const { root } = render(<my-component count={5} />);
  expect(root.count).toBe(5);
});

Проверка значений по умолчанию

test("значение по умолчанию должно быть 0", () => {
  const { root } = render(<my-component />);
  expect(root.count).toBe(0);
});

Валидация сложных структур

const MyComponent = c(
  () => {},
  {
    user: props.shape({
      name: props.string({ default: "Аноним" }),
      age: props.number
    })
  }
);

test("корректная структура user", () => {
  const { root } = render(<my-component user={{ age: 30 }} />);
  expect(root.user.name).toBe("Аноним");
  expect(root.user.age).toBe(30);
});

Мокирование и изоляция пропсов

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

const mockUser = { name: "Иван", age: 25 };
const { root } = render(<my-component user={mockUser} />);
expect(root.user.name).toBe("Иван");

Мокирование позволяет изолировать компонент от внешнего состояния и фокусироваться на его реактивной логике.

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

Atomico автоматически обновляет компонент при изменении пропсов. В тестах это проверяется через рендер с обновлением атрибутов:

const { root, update } = render(<my-component count={1} />);
expect(root.count).toBe(1);

update({ count: 10 });
expect(root.count).toBe(10);

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

Использование кастомной валидации

Atomico поддерживает кастомные функции проверки пропсов через свойство validate:

const MyComponent = c(
  () => {},
  {
    score: props.number({
      validate: (value) => value >= 0 && value <= 100
    })
  }
);

test("валидное значение score", () => {
  const { root } = render(<my-component score={85} />);
  expect(root.score).toBe(85);
});

Функция валидации позволяет ловить некорректные данные на этапе разработки, но не предотвращает ошибку в runtime production.

Интеграция с Testing Library

Для интеграционного тестирования пропсов удобно использовать @testing-library/atomico:

Метод render возвращает объект с доступом к корню компонента, его пропсам и методам.
update позволяет менять пропсы после первоначального рендера.
Можно использовать querySelector для проверки отображаемых данных, связанных с пропсами.

Пример комплексного теста:

const { root, update, shadowRoot } = render(<my-component count={5} />);
expect(shadowRoot.textContent).toContain("5");

update({ count: 15 });
expect(shadowRoot.textContent).toContain("15");