Сучасні інструменти тестування: JavaScript, Supertest та Jest/Mocha

💡 Усі статті, обговорення, новини про тестування — в одному місці. Приєднуйтесь до QA спільноти!

Привіт! Мене звати Олег, я Senior QA Engineer у компанії GlobalLogic. Це друга стаття з циклу, де я розбираю найпоширеніші інструменти автоматизації та тестування та навожу приклади, як вони застосовуються на практиці. За п’ять років досвіду у сфері тестування та три роки в команді я займався як Manual QA, так і QA Automation — тому зможу якнайбільш детально розглянути широкий пул інструментів.

У першій статті я проаналізував: що таке GIT і як він допомагає організувати командну роботу; інструменти браузерного тестування WebDriver IO та Puppeteer; приклади їх застосування, переваги та можливості. А також дав відповідь на питання, для яких задач кожен з інструментів підійде краще.

У другій статті пропоную зупинитись на:

• JavaScript — основному інструменті для автоматизації, стандарті ES6+ та його можливостях і ролі мови у фреймворках для тестування. Окремо розберу фреймворки JS — Jest і Mocha, їх основні відмінності та приклади написання тестів;
• Supertest — інструменті для тестування HTTP API, його перевагах, можливостях і прикладах застосування.
• Інтеграції всіх інструментів у CI/CD процес: як поєднати GIT, WebDriver IO, Puppeteer, Supertest, Jest/Mocha у CI/CD пайплайні (від збереження коду в GIT до розгортання в production).

У висновку я дам відповідь — у чому переваги автоматизованого тестування та від чого залежить вибір інструментів. Почнемо з JavaScript :)

JavaScript: мова програмування для тестування

JS — це одна з найпопулярніших і універсальних мов програмування, яка використовується для створення вебзастосунків та їх тестування. Її поширеність у середовищі розробки фронтенду та бекенду зробила JavaScript основним інструментом для автоматизації тестування. Ось кілька основних причин, чому JavaScript став лідером в автоматизації:

1. Універсальність: JavaScript працює безпосередньо у браузері, що робить його природним вибором для автоматизації тестів інтерфейсу користувача. Це дає змогу перевіряти взаємодію з елементами сторінки, як-от кнопками, формами, та іншими елементами DOM, без необхідності використовувати додаткові мови.
2. Широка екосистема: JavaScript має потужну екосистему бібліотек і фреймворків, які допомагають легко автоматизувати різні аспекти тестування. Наприклад, Selenium, Cypress, Puppeteer, WebDriver IO — усі вони підтримують JavaScript як основну мову для написання тестів.
3. Інтеграція з CI/CD: завдяки популярності JavaScript він чудово інтегрується з системами Continuous Integration/Continuous Deployment (CI/CD). Це спрощує автоматизацію тестів і їхнє виконання на різних етапах розробки та деплою продукту.
4. Низький поріг входу: у фронтенд-розробників, які вже знайомі з JavaScript, навчання написанню тестів на цій мові не викликає труднощів. Завдяки цьому тестування стало невід’ємною частиною розробки, адже їм не потрібно вивчати нові мови для тестування своїх застосунків.

Синтаксис та можливості ES6+: використання нових можливостей мови

З появою стандарту ES6+ (ECMAScript 2015 та новіше), JavaScript отримав багато нових функцій, які зробили код більш продуктивним та зручним для написання тестів. Ось кілька важливих можливостей ES6+, які стали невід’ємною частиною тестування:

Async/Await

Раніше асинхронні операції в JavaScript виконувалися за допомогою колбеків або промісів, що могло ускладнювати читання та супровід коду. З появою async/await асинхронні операції стали більш зрозумілими і схожими на синхронні виклики, що значно спростило організацію тестів.

Приклад використання async/await у тестах:

describe('Async Test Example', () => {
    it('should fetch user data', async () => {
        const response = await fetch('https://api.example.com/users/1');
        const user = await response.json();
        expect(user.name).toBe('John Doe');
    });
});

Тут тест асинхронно отримує дані користувача через API і перевіряє їх, що робить тест читабельним і простим у підтримці.

Проміси

Проміси дають змогу працювати з асинхронними операціями та обробляти помилки більш структуровано. Це корисно при написанні тестів, які взаємодіють з API, де треба обробляти відповідь сервера або різні сценарії відмов.

Приклад використання промісів:

it('should test a promise-based function', () => {
    return fetch('https://api.example.com/users')
        .then(response => response.json())
        .then(data => {
            expect(data.length).toBeGreaterThan(0);
        });
});

У цьому прикладі використовується стандартний підхід із промісами для перевірки, чи приходять дані з API.

Стрілкові функції (Arrow functions)

Стрілкові функції спростили синтаксис і дозволяють писати компактний та читабельний код. Їх активно використовують у тестах для обробки колбеків:

it('should check button click', () => {
    const button = document.querySelector('#submit');
    button.click();
    expect(button.innerHTML).toBe('Clicked');
});

Деструктуризація

Деструктуризація масивів і об’єктів дає змогу зручно витягувати потрібні дані з відповіді API або інших джерел, що робить код чистішим та зрозумілішим.

const { name, age } = user;
expect(name).toBe('John Doe');
expect(age).toBe(30);

Шаблонні рядки (Template literals)

Завдяки шаблонним рядкам в ES6 стало легше створювати динамічні повідомлення та перевірки, що корисно під час написання тестових повідомлень.

const username = 'John';
const message = `Welcome, ${username}!`;
expect(message).toBe('Welcome, John!');

Роль JS у фреймворках для тестування

JavaScript став стандартом для багатьох інструментів і фреймворків для тестування, і це не випадковість. Ось чому JavaScript настільки популярний у тестуванні:

Широка підтримка у фреймворках

JavaScript є основною мовою для таких потужних фреймворків, як:

• Cypress: це сучасний інструмент для end-to-end тестування, який працює винятково на JavaScript. Cypress є надзвичайно популярним завдяки своїй простоті та потужності, а також інтуїтивному API.
• Jest: інструмент для написання Unit-тестів, розроблений для проєктів на JavaScript та TypeScript. Jest часто використовують для тестування React-застосунків.
• Mocha: гнучкий фреймворк для написання тестів, який разом з бібліотекою Chai надає можливості для поведінкового тестування (BDD).
• Puppeteer: бібліотека для автоматизації браузерів на основі Chrome, яка також використовує JavaScript для написання тестів, веб-скрапінгу або генерації PDF.

Популярність серед розробників

Фронтенд і бекенд-розробники часто використовують JavaScript для створення везастосунків. Це зробило мову зручною для написання тестів, оскільки розробники не мають потреби освоювати нові технології. Також більшість фреймворків для тестування мають тісну інтеграцію з JS, що допомагає швидко впроваджувати автоматизовані тести у будь-який проєкт.

Підтримка Node.js

JavaScript працює на сервері завдяки Node.js, що розширює можливості мови. Node.js дозволяє запускати тести на стороні сервера, інтегрувати їх у CI/CD пайплайни і використовувати потужні інструменти для перевірки продуктивності, як-от Lighthouse.

Інструменти для тестування UI

JavaScript використовується для створення інструментів, які автоматизують тестування інтерфейсу користувача (UI). Наприклад, Selenium дозволяє керувати браузерами за допомогою JavaScript для перевірки взаємодії з користувацьким інтерфейсом.

Supertest: Інструмент для тестування API

Що таке Supertest

Supertest — це популярний інструмент для тестування HTTP API, який дає змогу розробникам легко здійснювати запити до вебсервісів і перевіряти їхні відповіді. Він орієнтований на інтеграційне тестування вебсервісів, що є ключовим компонентом для перевірки правильної взаємодії між фронтендом і бекендом, а також внутрішніх сервісів.

Supertest можна легко інтегрувати з будь-яким тестовим фреймворком, зокрема такими, як Mocha, Jest, або Jasmine. Що робить його гнучким і зручним для різних підходів до тестування.

Основні переваги Supertest

• Легкість інтеграції: Supertest легко підключається до проєкту і працює з будь-яким тестовим фреймворком JavaScript.
• Читабельність коду: завдяки лаконічному та інтуїтивному синтаксису, тести, написані з використанням Supertest, дуже прості та зрозумілі.
• Підтримка всіх основних HTTP-методів: інструмент дозволяє виконувати запити всіх типів — GET, POST, PUT, DELETE та інші.
• Автоматизовані перевірки: Supertest дозволяє легко перевіряти статуси HTTP-відповідей, заголовки та тіла відповідей без написання додаткового коду.

Основні можливості

Запити GET, POST, PUT, DELETE

Supertest дозволяє створювати і тестувати HTTP-запити різних типів. Ось як виглядає базовий приклад:

GET-запит:

const request = require('supertest');
const app = require('../app'); // Ваш застосунок на Node.js

describe('GET /api/users', () => {
    it('should return a list of users', async () => {
        const response = await request(app).get('/api/users');
        expect(response.status).toBe(200);
        expect(response.body).toHaveLength(3); // Перевірка кількості користувачів
    });
});

POST-запит:

describe('POST /api/users', () => {
    it('should create a new user', async () => {
        const newUser = { name: 'John', age: 30 };
        const response = await request(app)
            .post('/api/users')
            .send(newUser);
        expect(response.status).toBe(201);
        expect(response.body.name).toBe('John');
    });
});

PUT-запит:

describe('PUT /api/users/:id', () => {
    it('should update the user data', async () => {
        const updatedUser = { name: 'Jane', age: 25 };
        const response = await request(app)
            .put('/api/users/1')
            .send(updatedUser);
        expect(response.status).toBe(200);
        expect(response.body.name).toBe('Jane');
    });
});

DELETE-запит:

describe('DELETE /api/users/:id', () => {
    it('should delete the user', async () => {
        const response = await request(app).delete('/api/users/1');
        expect(response.status).toBe(204); // Успішне видалення
    });
});

Перевірка статусів, заголовків і тіла відповідей

Supertest дозволяє перевіряти різні аспекти відповіді, включно зі статус-кодами, заголовками, HTTP і вмістом відповідей.

Перевірка статус-коду:

it('should return 404 if user not found', async () => {
    	    const response = await request(app).get('/api/users/999');
                expect(response.status).toBe(404);
           });

Перевірка заголовків:

it('should return application/json content-type', async () => {
    const response = await request(app).get('/api/users');
    expect(response.headers['content-type']).toMatch(/json/);
});

Перевірка тіла відповіді:

it('should return a user object with correct properties', async () => {
    const response = await request(app).get('/api/users/1');
    expect(response.body).toHaveProperty('name');
    expect(response.body).toHaveProperty('age');
});

Тестування з промісами або async/await

Supertest підтримує асинхронні операції, що дозволяє легко використовувати проміси або async/await для написання тестів. Це особливо корисно при тестуванні асинхронних запитів до API, де важливо отримати дані перед їхньою обробкою.

it('should return user details', async () => {
   	  const response = await request(app).get('/api/users/1');
  	  expect(response.status).toBe(200);
 	  expect(response.body.name).toBe('John Doe');
});

Приклад тестування REST API з Supertest

Припустимо, ми маємо API для управління користувачами в системі. Тестування цього API за допомогою Supertest може виглядати так:

• Налаштування проєкту.

Спочатку потрібно налаштувати середовище для тестування. Встановлюємо необхідні залежності:

npm install supertest jest express

• Приклад коду тестування.

Нехай у нас є простий API для управління користувачами:

// app.js
const express = require('express');
const app = express();
app.use(express.json());

let users = [{ id: 1, name: 'John Doe', age: 30 }];

app.get('/api/users', (req, res) => {
    res.status(200).json(users);
});

app.post('/api/users', (req, res) => {
    const newUser = { id: users.length + 1, ...req.body };
    users.push(newUser);
    res.status(201).json(newUser);
});

app.put('/api/users/:id', (req, res) => {
    const id = parseInt(req.params.id);
    const user = users.find(u => u.id === id);
    if (!user) {
        return res.status(404).json({ message: 'User not found' });
    }
    Object.assign(user, req.body);
    res.status(200).json(user);
});

app.delete('/api/users/:id', (req, res) => {
    const id = parseInt(req.params.id);
    users = users.filter(u => u.id !== id);
    res.status(204).send();
});
module.exports = app;

• Написання тестів з Supertest.

Далі напишемо інтеграційні тести для цього API:

// app.test.js
const request = require('supertest');
const app = require('./app');

describe('Users API', () => {
    it('GET /api/users - should return all users', async () => {
        const response = await request(app).get('/api/users');
        expect(response.status).toBe(200);
        expect(response.body.length).toBe(1);
    });

    it('POST /api/users - should create a new user', async () => {
        const newUser = { name: 'Jane Doe', age: 25 };
        const response = await request(app)
            .post('/api/users')
            .send(newUser);
        expect(response.status).toBe(201);
        expect(response.body.name).toBe('Jane Doe');
    });

    it('PUT /api/users/:id - should update an existing user', async () => {
        const updatedUser = { name: 'John Smith', age: 35 };
        const response = await request(app)
            .put('/api/users/1')
            .send(updatedUser);
        expect(response.status).toBe(200);
        expect(response.body.name).toBe('John Smith');
    });

    it('DELETE /api/users/:id - should delete a user', async () => {
        const response = await request(app).delete('/api/users/1');
        expect(response.status).toBe(204);
    });
});

Supertest є потужним і простим інструментом для інтеграційного тестування HTTP API. Він дозволяє розробникам швидко налаштувати тестування API, перевіряти правильність відповідей і забезпечувати якість вебсервісів. Завдяки можливості легко інтегруватися з будь-яким тестовим фреймворком, Supertest став стандартом для тестування API в екосистемі Node.js.

Jest/Mocha: Фреймворки для тестування на JS

Тестування є важливим етапом розробки програмного забезпечення, оскільки воно забезпечує якість, надійність та стабільність коду. У світі JavaScript існує безліч фреймворків для тестування, але Jest і Mocha виділяються як два з найбільш популярних варіантів.

Огляд Jest та Mocha

Jest і Mocha — це два фреймворки, які дозволяють розробникам писати Unit-тести та інтеграційні тести для JavaScript-коду. Обидва фреймворки мають свої особливості, які роблять їх привабливими для різних типів проєктів.

Jest — це фреймворк для тестування JavaScript, розроблений компанією Facebook. Він спочатку був призначений для тестування проєктів React, але згодом набув популярності серед розробників, що працюють із різними технологіями.

Основні характеристики Jest

• Вбудований мокінг: Jest має вбудовані можливості для мокінгу функцій, що спрощує тестування залежностей.
• Таймери: Jest дозволяє легко тестувати асинхронний код, включно з таймерами та промісами.
• Модульність: Jest підтримує модульний підхід, що дозволяє організовувати код тестів у окремі файли та папки.

Mocha — це гнучкий фреймворк для тестування JavaScript, який дозволяє створювати тести у стилі BDD (Behavior-Driven Development) або TDD (Test-Driven Development). Mocha не нав’язує жодного конкретного стилю тестування, що робить його дуже кастомізованим.

Основні характеристики Mocha

• Гнучкість: Mocha підтримує різні стилі написання тестів і дає змогу використовувати будь-які асерти (наприклад, Chai, Should.js).
• Широкий набір плагінів: Mocha має велику кількість плагінів і розширень, що дозволяє налаштувати фреймворк під конкретні потреби.
• Подробиці звітності: Mocha надає можливість налаштовувати формат звітності тестів, що може бути корисним для інтеграції з CI/CD.

Порівняння Jest та Mocha

Коли і що доцільніше використовувати:

• Jest: якщо ви працюєте з React або проєктом, де важливі вбудовані можливості мокінгу, тестування асинхронного коду та швидкість запуску тестів.
• Mocha: якщо вам потрібна висока гнучкість, підтримка різних стилів написання тестів або якщо ви вже використовуєте інші плагіни для тестування.

Приклад написання тестів

• Тести з Jest.

Для початку потрібно встановити Jest у ваш проєкт:

npm install --save-dev jest

Приклад тесту в Jest:

// sum.js
function sum(a, b) {
    return a + b;
}
module.exports = sum;

// sum.test.js
const sum = require('./sum');
const { expect } = require('chai');

describe('Sum Function', () => {
    it('should return 3 when adding 1 and 2', () => {
        expect(sum(1, 2)).to.equal(3);
    });
});

Запуск тестів:

npx mocha

Jest і Mocha — це два популярних фреймворки для тестування на JavaScript, кожен з яких має свої унікальні можливості та підходи. Ви можете обрати один із них, виходячи з потреб вашого проєкту, типу тестування, яке ви плануєте реалізувати, і вашої команди. Обидва фреймворки надають потужні інструменти для забезпечення якості коду.

Підсумки. Інтеграція всіх інструментів у CI/CD процес

У сучасній розробці програмного забезпечення CI/CD (безперервна інтеграція та безперервне розгортання) стали стандартом. Вони дозволяють командам швидше і якісніше розвивати програми, зменшуючи ризики і покращуючи надійність. Наостанок розглянемо, як інтегрувати популярні інструменти GIT, WebDriver IO, Puppeteer, Supertest, та Jest/Mocha у CI/CD пайплайн.

Кожен з цих інструментів грає важливу роль у CI/CD процесі:

• GIT: система контролю версій, що дозволяє команді зберігати та керувати кодом.
• Jest/Mocha: фреймворки для написання Unit та інтеграційних тестів, які перевіряють коректність коду.
• WebDriver IO та Puppeteer: інструменти для автоматизації браузерного тестування, що забезпечують перевірку користувацького інтерфейсу.
• Supertest: інструмент для тестування HTTP API, який дозволяє перевіряти інтеграцію між фронтендом і бекендом.

Об’єднавши ці інструменти, ми можемо створити потужний CI/CD пайплайн, який автоматизує тестування на всіх етапах розробки.

Автоматизація тестування в CI/CD

Налаштування процесу безперервної інтеграції та розгортання

1. Створення репозиторію в GIT: усі команди мають працювати в одному репозиторії, де вони зможуть вносити зміни та перевіряти код.
2. Використання CI/CD сервісів: оберіть CI/CD інструмент, наприклад GitHub Actions, Travis CI, CircleCI або Jenkins. Ці сервіси допоможуть автоматизувати процеси збірки, тестування та розгортання.
3. Конфігурація пайплайну: створіть конфігураційний файл (наприклад, .yml для GitHub Actions), в якому ви описуєте кроки, що потрібно виконати. Як-то установка залежностей, запуск тестів, збірка проєкту та деплой.

Приклад конфігураційного файлу для CI/CD

Ось базовий приклад yaml-файлу для GitHub Actions, що інтегрує GIT, Jest/Mocha, WebDriver IO, Puppeteer та Supertest:

name: CI/CD Pipeline

on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v2

      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '14'

      - name: Install dependencies
        run: npm install

      - name: Run unit tests with Jest
        run: npm test

      - name: Run integration tests with Mocha
        run: npm run test:integration

      - name: Run WebDriver IO tests
        run: npm run test:webdriver

      - name: Run Puppeteer tests
        run: npm run test:puppeteer

      - name: Run Supertest for API tests
        run: npm run test:api

      - name: Deploy to production
        run: npm run deploy

Кроки автоматизації від збереження коду в GIT до запуску тестів та розгортання в production

Збереження коду в GIT

Розробники зберігають свій код у репозиторії GIT. Кожен раз, коли зміни внесені, команда відправляє їх до основної гілки (наприклад, main).

Запуск пайплайну

Кожного разу, коли код пушиться у репозиторій, CI/CD інструмент (наприклад, GitHub Actions) запускає пайплайн. Він складається з кількох кроків:

• Перевірка коду: виконання статичного аналізу для перевірки якості коду.
• Встановлення залежностей: запуск команди npm install для установки необхідних бібліотек.

Запуск тестів

• Unit та інтеграційні тести: запуск тестів з використанням Jest/Mocha для перевірки основної логіки.

  npm test
  

• Браузерне тестування: виконання тестів за допомогою WebDriver IO і Puppeteer для перевірки інтерфейсу користувача.

  npm run test:webdriver
  npm run test:puppeteer
  

• Тестування API: використання Supertest для перевірки API-інтерфейсів.

  npm run test:api
  

Розгортання в production

Після успішного проходження всіх тестів пайплайн може перейти до розгортання. Це може включати:

• Збірку проєкту: створення фінальної версії програми.
• Деплой: вивантаження на сервер або платформу (наприклад, Heroku, AWS, або DigitalOcean).

  npm run deploy
  

Інтеграція GIT, WebDriver IO, Puppeteer, Supertest та Jest/Mocha у CI/CD процес є важливим кроком у забезпеченні якості програмного забезпечення. Це допомагає автоматизувати тестування та розгортання, зменшуючи ризики і прискорюючи цикл розробки. Налаштувавши пайплайн, команди можуть зосередитися на розробці нових функцій, знаючи, що їхній код перевіряється на надійність на кожному етапі.

Переваги автоматизованого тестування та вибір інструментів

Автоматизоване тестування стало важливою складовою сучасної розробки програмного забезпечення. Використання автоматизованих тестів дозволяє командам зменшити витрати часу на тестування, підвищити якість продукту і забезпечити стабільність на всіх етапах розробки.

Переваги автоматизованого тестування

1. Спрощення розробки

Автоматизоване тестування дозволяє розробникам швидше отримувати зворотній зв’язок про якість коду. З автоматизованими тестами розробники можуть:

• Зосередитися на написанні коду замість того, щоб вручну перевіряти кожну функцію.
• Виявляти помилки на ранніх етапах: автоматизовані тести виконуються регулярно (під час кожного коміту або перед розгортанням), що дозволяє виявляти помилки на ранньому етапі і запобігати їхньому накопиченню.

2. Скорочення часу на тестування

Автоматизація тестування значно скорочує час, необхідний для виконання тестів.

• Швидкість виконання: автоматизовані тести виконуються набагато швидше, ніж ручні, особливо в великих проєктах з великою кількістю тестів.
• Можливість запуску в режимі паралельного виконання: багато фреймворків для автоматизованого тестування підтримують паралельне виконання тестів, що додатково скорочує час тестування.

3. Підвищення якості продукту

Автоматизоване тестування сприяє підвищенню якості продукту завдяки:

• Постійній перевірці: автоматизовані тести дозволяють постійно перевіряти код на відповідність вимогам, що зменшує ризик виникнення помилок у продуктивній версії.
• Визначенню стандартів якості: використання автоматизованих тестів сприяє формуванню чітких стандартів якості для проєкту, що допомагає забезпечити стабільність і надійність продукту.

Вибір інструментів залежно від задачі

Коли мова йде про автоматизоване тестування, важливо правильно вибрати інструменти в залежності від конкретних потреб проєкту. Ось кілька рекомендацій щодо вибору інструментів:

1. Визначення типу тестування

• Unit-тестування: для перевірки окремих функцій або модулів. Інструменти, як-от Jest або Mocha, ідеально підходять для цієї задачі.
• Інтеграційне тестування: для перевірки взаємодії між різними частинами системи. Тут можуть бути використані Supertest для API-тестування або Jest/Mocha в поєднанні з мокінгом.
• Функціональне та браузерне тестування: для перевірки роботи інтерфейсу користувача. WebDriver IO або Puppeteer будуть найкращим вибором для автоматизації тестування веб-застосунків.

2. Характер проєкту

• Масштаб проєкту: для малих проєктів можуть бути достатніми прості фреймворки, але для великих зі складною архітектурою краще обрати потужніші інструменти з можливістю масштабування.
• Крос-браузерне тестування: якщо проєкт має працювати на різних браузерах, варто обрати інструменти, які підтримують крос-браузерне тестування, як-то Selenium або Cypress.

3. Потреби команди

• Кваліфікація команди: обирайте інструменти, з якими ваша команда знайома або готова навчатися. Наприклад, якщо є досвід роботи з JavaScript, Jest або Mocha можуть бути кращими виборами.

Вимоги до документації та спільноти: інструменти з хорошою документацією та активною спільнотою можуть спростити процес впровадження і навчання.