← Теория
⚡ Блок 05 — Программирование (JS/TS) Ozon
JavaScript · TypeScript · Типы данных · Асинхронность · Тестирование (Jest, Playwright)
📜 1. JavaScript — основы
Объявление переменных
| Ключевое слово | Можно переназначить? | Область видимости | Использовать |
|---|
| var | ✅ | Функция | ❌ Устарело |
| let | ✅ | Блок { } | ✅ Если значение меняется |
| const | ❌ | Блок { } | ✅ По умолчанию |
Типы данных
| Тип | Пример | Примитив? |
|---|
| string | "hello" | ✅ |
| number | 42, 3.14 | ✅ |
| boolean | true / false | ✅ |
| null | null (намеренно пусто) | ✅ |
| undefined | undefined (не присвоено) | ✅ |
| object | {"key": "value"} | ❌ Ссылочный |
| array | [1, 2, 3] | ❌ Ссылочный (вид объекта) |
null vs undefined
- null — разработчик намеренно указал «пусто»
- undefined — значение не было присвоено (автоматически)
let a; // undefined
let b = null; // null (явно)
typeof null // "object" (баг JS!)
typeof undefined // "undefined"
На собе: "const — по умолчанию, let — если значение меняется, var — устарело. null = намеренно пусто, undefined = не присвоено."
⚡ 2. Асинхронность
JS — однопоточный. Асинхронность позволяет не ждать медленных операций (запрос к серверу, таймер).
Три уровня
Callbacks (старый способ)
fetchData(url, function(result) {
console.log(result);
});
// Callback hell — вложенность становится нечитаемой
Promise (современный)
fetch(url)
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
Promise — обещание: операция завершится позже. Три состояния:
- pending — ожидание
- fulfilled — успешно завершено
- rejected — ошибка
async/await (самый читаемый)
async function getUser() {
try {
const response = await fetch(url);
const data = await response.json();
return data;
} catch (error) {
console.error(error);
}
}
На собе: "async/await — самый читаемый способ работы с асинхронным кодом. await «ждёт» результат Promise. Обязательно try/catch для обработки ошибок."
🔷 3. TypeScript — зачем и что
TypeScript = JavaScript + типы. Компилируется в обычный JS. В вакансии Ozon фронт на TS.
Зачем
- Ловит ошибки до запуска (на этапе компиляции)
- IDE подсказывает поля и методы
- Код понятнее: видно что принимает функция и что возвращает
Примеры типов
// JS — нет типов
function add(a, b) { return a + b; }
add("1", "2") // "12" — не ошибка, но баг!
// TS — типы указаны
function add(a: number, b: number): number {
return a + b;
}
add("1", "2") // ❌ Ошибка компиляции!
Основные типы TS
| Тип | Пример |
|---|
| string | let name: string = "Test" |
| number | let age: number = 25 |
| boolean | let active: boolean = true |
| string[] | let items: string[] = ["a", "b"] |
| interface | interface User { name: string; age: number } |
| any | Отключает проверку типов ❌ |
На собе: "TypeScript — это JavaScript с типами. Позволяет ловить ошибки на этапе компиляции, а не в рантайме. Основная выгода: безопасность кода и подсказки IDE."
🧪 4. Jest — тестирование JS/TS
Jest — самый популярный фреймворк тестирования для JS/TS (от Meta/Facebook).
Структура теста
describe("Login", () => {
test("успешный логин", () => {
const result = login("test@mail.com", "123");
expect(result.status).toBe(200);
expect(result.name).toBe("Test");
});
});
Ключевые методы
| Метод | Что делает |
|---|
| describe | Группировка тестов (сьют) |
| test / it | Один тест |
| expect() | Проверка (assertion) |
| toBe() | Строгое сравнение (===) |
| toEqual() | Глубокое сравнение объектов |
| beforeEach | Выполняется перед каждым тестом (setup) |
| afterEach | Выполняется после каждого теста (teardown) |
toBe vs toEqual
const a = { name: "Test" };
const b = { name: "Test" };
expect(a).toBe(b); // ❌ Разные объекты в памяти
expect(a).toEqual(b); // ✅ Одинаковое содержимое
На собе: "Jest — фреймворк тестирования JS. describe — группировка, test/it — тест, expect — проверка. toBe для примитивов, toEqual для объектов."
🎭 5. Playwright — автотесты UI
Playwright — фреймворк от Microsoft для автотестов UI. Поддерживает JS/TS, мультибраузерность.
Пример теста
import { test, expect } from '@playwright/test';
test('логин', async ({ page }) => {
await page.goto('https://example.com/login');
await page.fill('[data-testid="email"]', 'test@mail.com');
await page.fill('[data-testid="password"]', '123456');
await page.click('[data-testid="login-btn"]');
await expect(page).toHaveURL('/dashboard');
});
Ключевые методы
| Действие | Метод |
|---|
| Открыть URL | page.goto(url) |
| Кликнуть | page.click(selector) |
| Ввести текст | page.fill(selector, text) |
| Проверить текст | expect(el).toHaveText('...') |
| Проверить URL | expect(page).toHaveURL('/path') |
| Скриншот | page.screenshot() |
| Ждать элемент | page.waitForSelector(sel) |
Почему Playwright, а не Selenium
- Auto-waiting — сам ждёт когда элемент появится
- Быстрее — использует CDP (Chrome DevTools Protocol)
- Мультибраузерный — Chromium, Firefox, WebKit
- Встроенные assertion — expect с автоповтором
На собе: "Playwright — современный фреймворк UI-тестов. Главное преимущество: auto-waiting (сам ждёт элементы), быстрый, поддерживает несколько браузеров. Локаторы: data-testid, CSS, XPath."
🔧 6. beforeEach / afterEach (фикстуры)
В Jest/Playwright beforeEach и afterEach — это аналог фикстур из PyTest.
describe('Корзина', () => {
beforeEach(async () => {
// Setup — логинимся перед каждым тестом
await page.goto('/login');
await login(page, 'test@mail.com', '123');
});
afterEach(async () => {
// Teardown — очищаем корзину
await clearCart(page);
});
test('добавить товар', async () => {
await addToCart(page, 'item-1');
await expect(cartCount(page)).resolves.toBe(1);
});
});
Все хуки
| Хук | Когда выполняется | Для чего |
|---|
| beforeAll | 1 раз перед всеми тестами | Подключение к БД, запуск сервера |
| beforeEach | Перед каждым тестом | Логин, очистка данных |
| afterEach | После каждого теста | Очистка состояния |
| afterAll | 1 раз после всех тестов | Закрытие соединений |
На собе: "beforeEach / afterEach — это setup и teardown. beforeEach выполняется перед каждым тестом (например, логин), afterEach — после (очистка). beforeAll / afterAll — один раз на весь сьют."
💬 Вопросы для самопроверки