Привет ребята.
Я Нима HKH, (бэк и фронт)*end разработчик.
Эта статья является продолжением статьи: Как создать приложение для создания заметок с помощью React и localstorage — часть 2
Теперь я собираюсь написать несколько тестов для нашего приложения для создания заметок с помощью React и Localstorage.
При использовании CRA Jest уже установлен на нем. но мы установили библиотеку Enzyme и React Testing. эти две библиотеки тестирования предназначены для тестирования React и DOM, и сейчас нам не нужна тема.
Сначала нам нужно создать localStorage.test.js внутри каталога src/Utils.
beforeEach: это функция Jest, которая будет повторяться перед каждым тестом. что мы ожидаем в нашем тесте от этого метода, так это очищать локальное хранилище перед каждым тестом. поэтому нам нужно создать метод clearLocalStorage. этот метод будет использоваться и в других тестах, поэтому лучше экспортировать его из утилиты.
TestUtils.js: эта утилита поможет нам очистить LocalStorage, смоделировать поставщика состояния и обернуть им все компоненты в тестах.
import React from "react";
import { StateProvider } from "../statemanagement";
export function clearLocaStorage() {
localStorage.clear();
}
export function IncludingProvider(props) {
const initialState = {
notes: [],
modal: false,
edit: null,
show: null,
showModal: false
};
const reducer = (state, action) => {
switch (action.type) {
case "newNote":
return {
...state,
notes: action.notes
};
case "openModal":
return {
...state,
modal: action.modal,
edit: action.edit
};
case "showMessage":
return {
...state,
showModal: action.showModal,
show: action.show
};
default:
return state;
}
};
return (
<StateProvider initialState={initialState} reducer={reducer}>
{props.children}
</StateProvider>
);
}
Давай сделаем это :
Сначала мы должны создать наше тестовое тело.
describe("Test Locastorage functionality", () => {
test("test insert note", () => {
//first set the item
LocalStorage.setNotes(JSON.stringify(object));
//now check with normal localStorage
const insertedLocalStorage = LocalStorage.get("notes");
expect(JSON.parse(insertedLocalStorage)).toEqual(object);
});
})
Объект здесь не объявлен, поэтому мы должны объявить некоторые фиктивные элементы для нашего теста.
const object = {
id: 123456789,
message: "Testi Message",
category: "Family",
title: "Test Title",
notebook: ""
};
const unExistsObject = {
id: 123456780,
message: "Testi Message",
category: "Family",
title: "Test Title",
notebook: ""
};
const objects = [
{
id: 123456789,
message: "Testi Message",
category: "Family",
title: "Test Title",
notebook: ""
},
{
id: 123456785,
message: "Second Testi Message",
category: "work",
title: "Second Test Title",
notebook: ""
}
];
const HomeNoteBook = [
{
id: 23456789,
message: "Home Message",
category: "Family",
title: "Test Title",
notebook: "Home"
},
{
id: 23456785,
message: "Second Home Message",
category: "work",
title: "Second Test Title",
notebook: "Home"
}
];
const UniversityNoteBook = [
{
id: 23456789,
message: "University Message",
category: "Family",
title: "Test Title",
notebook: "University"
},
{
id: 23456785,
message: "Second University Message",
category: "work",
title: "Second Test Title",
notebook: "University"
}
];
const NoteNextMonth = [];
Эти объекты являются фиктивными элементами, которые мы хотим вставлять, удалять, обновлять, считать и перемещать.
Перед переменными нам нужна beforeEach функция.
import LocalStorage from "./localStorage";
import { clearLocaStorage } from "./TestUtils";
beforeEach(() => {
clearLocaStorage();
});
Итак, наш код должен быть таким, как показано ниже:
import LocalStorage from "./localStorage";
import { clearLocaStorage } from "./TestUtils";
beforeEach(() => {
clearLocaStorage();
});
const object = {
id: 123456789,
message: "Testi Message",
category: "Family",
title: "Test Title",
notebook: ""
};
const unExistsObject = {
id: 123456780,
message: "Testi Message",
category: "Family",
title: "Test Title",
notebook: ""
};
const objects = [
{
id: 123456789,
message: "Testi Message",
category: "Family",
title: "Test Title",
notebook: ""
},
{
id: 123456785,
message: "Second Testi Message",
category: "work",
title: "Second Test Title",
notebook: ""
}
];
const HomeNoteBook = [
{
id: 23456789,
message: "Home Message",
category: "Family",
title: "Test Title",
notebook: "Home"
},
{
id: 23456785,
message: "Second Home Message",
category: "work",
title: "Second Test Title",
notebook: "Home"
}
];
const UniversityNoteBook = [
{
id: 23456789,
message: "University Message",
category: "Family",
title: "Test Title",
notebook: "University"
},
{
id: 23456785,
message: "Second University Message",
category: "work",
title: "Second Test Title",
notebook: "University"
}
];
const NoteNextMonth = [];
describe("Test Locastorage functionality", () => {
test("test insert note", () => {
//first set the item
LocalStorage.setNotes(JSON.stringify(object));
//now check with normal localStorage
const insertedLocalStorage = LocalStorage.get("notes");
expect(JSON.parse(insertedLocalStorage)).toEqual(object);
});
});
describe: он просто описывает набор тестовых случаев, перечисляемых «тестовыми» функциями.
test: наш тест должен быть в test функции.
expect: expect получит значение, а затем функцию цепочки, чтобы подтвердить наше ожидание.
toEqual: это наше ожидаемое значение. мы ожидаем, что длина insertedLocalStorage равна длине object.
Теперь нам нужно написать наши тесты вот так.
Тест должен быть комплексным, и вы должны составить несколько сценариев. действительно, с помощью теста BDD вы можете объяснить этот сценарий и провести для него тест. но теперь мы используем Jest и нет теста BDD (а также cucumber.js).
Сложный пример — «обновить заметку с идентификатором 123456785».
test("update the note with id 123456785", () => {
//first set Notes object
LocalStorage.setNotes(JSON.stringify(objects));
//update the objects[1]
let updateObject = objects[1];
updateObject.title = "Come On";
updateObject.message = "It's Our Life";
updateObject.category = "Friends";
const updatedObject = LocalStorage.updateId(123456785, updateObject);
const updatedItem = LocalStorage.findId(123456785)[0];
const unUpdatedItem = LocalStorage.findId(123456789)[0];
//it must be equal to new values
expect(updatedItem.message).toEqual("It's Our Life");
expect(updatedItem.title).toEqual("Come On");
expect(updatedItem.category).toEqual("Friends");
expect(updatedItem.id).toEqual(123456785);
//it dont have to be equal to pervious object
expect(updatedObject.message).not.toEqual(objects[1].message);
expect(updatedObject.title).not.toEqual(objects[1].title);
expect(updatedObject.category).not.toEqual(objects[1].category);
expect(updatedObject.id).not.toEqual(objects[1].id);
//un Updated object must be the same as it was
expect(unUpdatedItem.message).toEqual(objects[0].message);
expect(unUpdatedItem.title).toEqual(objects[0].title);
expect(unUpdatedItem.category).toEqual(objects[0].category);
expect(unUpdatedItem.id).toEqual(objects[0].id);
});
Когда вы тестируете функциональность, важно протестировать заявления об отказе от ответственности. теперь запустите npm run test, чтобы запустить сценарий Jest.
Следующий уровень: CI/CD и Dockerize проект React.
