Как сделать unit test

@ProSasg · Регистрация: 12.04.2021

Студворк — интернет-сервис помощи студентам

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
<?php
session_start();
?>
 
<!DOCTYPE html>
 
<html>
<head>
    <title>Карта расположения электросамокатов</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v1.7.1/leaflet.css" />
 
  <style>
   body {
            height: 100%;
            margin: 0;
            overflow: hidden; /* Для предотвращения скролла страницы */
            font-family: Arial, sans-serif;
            background-image: url('https://veliki.ua/wp-content/uploads/bg-client.jpg'); /* Путь к вашему фоновому изображению */
            background-size: cover; /* Масштабирование изображения по размеру окна */
            background-position: center; /* Выравнивание изображения по центру */
            padding-left: 150px; /* Зазор слева */
            padding-right: 150px; /* Зазор справа */
        }
        #map-container {
            padding: 50px; /* Отступы по каждой стороне */
            background-color: #f0f0f0; /* Бело-серый фон */
            width: calc(100% - 400px); /* Учитываем зазоры слева и справа по 150px */
            height: calc(100vh - 160px); /* Высота карты будет на 100 пикселей меньше высоты экрана */
            position: absolute;
            top: 100px; /* Учитываем высоту верхнего меню */
            left: 150px; /* Зазор слева */
            z-index: 999; /* Поднимаем контейнер карты над боковой панелью */
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* Добавляем тень контейнеру карты */
        }
        #map {
            width: 100%; /* Ширина карты должна занимать всю ширину контейнера */
            height: 100%; /* Высота карты должна занимать всю высоту контейнера */
        }
        #sidebar {
            height: 100px; /* Высота нижней панели */
            width: calc(100% - 300px); /* Ширина нижней панели будет равна ширине карты */
            position: absolute; /* Абсолютное позиционирование */
            bottom: 0; /* Прикрепление к нижней части экрана */
            background-color: white;
            box-shadow: 0 -2px 5px rgba(0,0,0,0.2); /* Тень вверху */
            display: none; /* Изначально скрываем панель */
            align-items: center; /* Выравнивание содержимого по центру по вертикали */
            justify-content: space-around; /* Распределение содержимого по ширине панели */
            z-index: 1000; /* Выше всех других элементов */
        }
        #top-menu {
            height: 100px; /* Высота верхнего меню */
            width: 100%; /* Ширина верхнего меню */
            background-color: #333; /* Цвет фона */
            color: white; /* Цвет текста */
            display: flex; /* Использование flexbox для выравнивания содержимого */
            align-items: center; /* Выравнивание содержимого по центру по вертикали */
            justify-content: center; /* Распределение содержимого по центру по горизонтали */
            padding: 0 150px; /* Отступы по краям */
            box-sizing: border-box; /* Учитываем padding в ширине */
            box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Тень снизу */
            position: relative;
            top: 0; /* Прикрепление к верхней части экрана */
            z-index: 1000; /* Выше всех других элементов */
            overflow: hidden; /* Прячем контент, который может выйти за пределы */
        }
        #top-menu a {
            color: white; /* Цвет ссылок */
            text-decoration: none; /* Убираем подчеркивание у ссылок */
            padding: 40px 50px; /* Отступы по краям */
            margin-right: 20px; /* Отступ между ссылками */
            border-right: 1px solid rgba(255, 255, 255, 0.5); /* Разделитель между ссылками */
        }
        #top-menu a:last-child {
            margin-right: 0; /* Убираем отступ у последней ссылки */
        }
        #login-button {
            background-color: #4CAF50; /* Цвет фона */
            border: none; /* Убираем границу */
            color: white; /* Цвет текста */
            padding: 10px 20px; /* Отступы внутри кнопки */
            text-align: center; /* Выравнивание текста по центру */
            text-decoration: none; /* Убираем подчеркивание у текста */
            display: inline-block; /* Отображение кнопки как строчного элемента */
            font-size: 16px; /* Размер текста */
            margin-right: 20px; /* Отступ справа */
            border-radius: 20px; /* Задаем радиус скругления углов */
            margin-left: auto;
        }
        #reserve-button {
    background-color: #4CAF50; /* Цвет фона */
    border: none; /* Убираем границу */
    color: white; /* Цвет текста */
    padding: 10px 20px; /* Отступы внутри кнопки */
    text-align: center; /* Выравнивание текста по центру */
    text-decoration: none; /* Убираем подчеркивание у текста */
    display: inline-block; /* Отображение кнопки как строчного элемента */
    font-size: 16px; /* Размер текста */
    margin-right: 20px; /* Отступ справа */
    border-radius: 20px; /* Задаем радиус скругления углов */
    transition: box-shadow 0.3s; /* Добавляем плавный переход для тени */
}
 
#reserve-button:hover {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Добавляем тень при наведении курсора */
}
        #login-button:hover {
            background-color: #45a049; /* Цвет фона при наведении курсора */
        }
        #top-menu div:nth-child(2) {
    margin-left: auto; /* Позволяет блоку кнопки "Вход" быть справа от блока ссылок */
    margin-right: auto;
}
  </style>
</head>
<body>
<?php
// Підключення до бази даних
$servername = "localhost";
$username = "root";
$password = ""; // Ваш пароль доступу до бази даних
$dbname = "ic_skyter";
 
// Створення з'єднання
$conn = new mysqli($servername, $username, $password, $dbname);
 
// Перевірка з'єднання
if ($conn->connect_error) {
    die("Помилка підключення до бази даних: " . $conn->connect_error);
}
 
// Отримання даних користувача з бази даних
if (isset($_SESSION['phoneNumber'])) {
    $phoneNumber = $_SESSION['phoneNumber'];
    $sql = "SELECT * FROM user WHERE phoneNumber = '$phoneNumber'";
    $result = $conn->query($sql);
 
    if ($result->num_rows > 0) {
        $row = $result->fetch_assoc();
        $idUser = $row['idUser'];
    
        
        // Ініціалізація флагів редагування для кожного поля
         $editidUser = false;
    } else {
        echo "Користувача не знайдено.";
    }
} else {
    ;
}
 
// Закриття з'єднання
$conn->close();
?>
 
<div id="top-menu">
    <a href="index.html">
    <div>Ic_skyter</div>
    </a>
    <div>
        <a href="map.php">Прокат</a>
        <a href="#">О нас</a>
        <a href="#">Контакты</a>
    </div>
    <div>
    <button id="login-button" onclick="window.location.href='registration.php'">Увійти</button>
    </div>
    </div>
<div id="map-container">
    <div id="map"></div>
</div>
<div id="sidebar"></div>
<script src="http://cdn.leafletjs.com/leaflet/v1.7.1/leaflet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 
<script>
var isAuthenticated = <?php echo isset($_SESSION['authenticated']) && $_SESSION['authenticated'] ? 'true' : 'false'; ?>;
 
function finishRental(idScooter) {
    // Отправка запроса на сервер для завершения аренды
    $.ajax({
        url: 'finishrental.php', // Путь к файлу на сервере для завершения аренды
        type: 'POST',
        data: { idScooter: idScooter },
        success: function(response) {
            console.log(response); 
            console.log('Аренда успешно завершена.');
            var reserveButton = document.getElementById('reserve-button');
            reserveButton.innerText = 'Зарезервировать';
            reserveButton.removeEventListener('click', reserveButtonClickHandler);
            reserveButton.addEventListener('click', reserveButtonClickHandler);
            // Здесь вы можете добавить код для обновления интерфейса или выполнения других действий после завершения аренды
        },
        error: function(xhr, status, error) {
            console.error('Ошибка при завершении аренды:', status, error);
        }
    });
}
$.ajax({
    url: 'addmarker.php',
    type: 'GET',
    dataType: 'json', // Ожидаемый тип данных в ответе (JSON)
    success: function(data) {
        // Обработка данных
        data.forEach(function(markerData) {
            // Создание маркера на карте
            var marker = L.marker([markerData.LocationScooterLat, markerData.LocationScooterLon]).addTo(map);
            marker.bindPopup('ID: ' + markerData.idScooter + '<br>Уровень заряда: ' + markerData.BatteryLevel + '%');
            marker.on('click', function(e) {
                showScooterInfo(markerData); // Показываем информацию о самокате при нажатии на метку
            });
            map.on('click', function() {
            document.getElementById('sidebar').style.display = 'none';
            });
        });
    },
    error: function(xhr, status, error) {
        console.error('Ошибка при загрузке маркеров:', status, error);
    }
});
var reserveButtonClickHandler;
// Функция для показа информации о самокате в bottom-bar
function showScooterInfo(markerData) {
    var sidebar = document.getElementById('sidebar');
     if (!isAuthenticated) {
        sidebar.style.display = 'none'; // Скрываем боковую панель, если пользователь не аутентифицирован
        return; // Завершаем выполнение функции
    }
    sidebar.style.display = 'flex';
    sidebar.innerHTML = '<b>ID:</b> ' + markerData.idScooter + '<br><b>Уровень заряда:</b> ' + markerData.BatteryLevel + '%';
 
    // Создаем кнопку "Зарезервировать"
    var reserveButton = document.createElement('button');
    reserveButton.innerText = 'Зарезервировать';
    reserveButton.id = 'reserve-button';
    sidebar.appendChild(reserveButton);
 
    // Добавляем обработчик события для кнопки "Зарезервировать"
    reserveButton.addEventListener('click', function() {
    // Отправляем запрос на сервер для обновления статуса самоката на "Reserved"
    $.ajax({
        url: 'updatestatus.php',
        type: 'POST',
        data: { idScooter: markerData.idScooter, status: 'Reserved' },
        success: function(response) {
            console.log('Статус самоката обновлен на "Reserved".');
            
            // Генерируем случайный 4-значный код
            var code = Math.floor(1000 + Math.random() * 9000);
            console.log('Сгенерированный код:', code);
 
            // Отображаем поле для ввода кода
            sidebar.innerHTML += '<br><input type="text" id="code-input" placeholder="Введите код" style="margin-top: 10px;"><button id="submit-code" style="margin-top: 10px;">Отправить</button>';
 
            // Добавляем обработчик события для кнопки "Отправить"
            var submitButton = document.getElementById('submit-code');
            submitButton.addEventListener('click', function() {
                var enteredCode = document.getElementById('code-input').value;
                if (enteredCode === code.toString()) {
                    // Отправляем запрос на сервер для обновления статуса самоката на "Rental"
                    $.ajax({
                        url: 'updatestatus.php',
                        type: 'POST',
                        data: { idScooter: markerData.idScooter, status: 'Rental' },
                        success: function(response) {
                            console.log('Статус самоката обновлен на "Rental".');
                            alert('Код верный. Самокат успешно зарезервирован.');
                            // Удаляем поле для ввода кода и кнопку "Отправить" из боковой панели
                            sidebar.removeChild(document.getElementById('code-input'));
                            sidebar.removeChild(document.getElementById('submit-code'));
                            var reserveButton = document.getElementById('reserve-button');
 
                            reserveButton.innerText = 'Завершить';
 
// Изменим обработчик события click на кнопке
                    reserveButton.addEventListener('click', function() {
    // Здесь вызываем функцию для завершения аренды
    finishRental(markerData.idScooter);
});
                            // Отправляем запрос на сервер для регистрации начала аренды
                            $.ajax({
                                url: 'rentalstart.php',
                                type: 'POST',
                                data: { idScooter: markerData.idScooter },
                                success: function(response) {
                                console.log('Начало аренды успешно зарегистрировано.');
                                console.log(response); // Печатаем ответ от сервера в консоль
                                },
                                error: function(xhr, status, error) {
                                console.error('Произошла ошибка:', status, error);
                                }
                                });
                            },
                        error: function(xhr, status, error) {
                            console.error('Ошибка при обновлении статуса:', status, error);
                        }
                    });
                } else {
                    alert('Неверный код. Попробуйте еще раз.');
                }
            });
        },
        error: function(xhr, status, error) {
            console.error('Ошибка при обновлении статуса:', status, error);
        }
    });
});
        }
 
 
 
var loginButton = document.getElementById('login-button');
 
if (isAuthenticated) {
    loginButton.innerText = 'Кабінет';
    loginButton.onclick = function() {
        window.location.href = 'cabinet.php';
    };
}
 
// Инициализируем карту
var map = L.map('map').setView([], 13);
 
// Добавляем слой карты OpenStreetMap
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '© OpenStreetMap contributors'
}).addTo(map);
 
// Иконка самоката
var scooterIcon = L.icon({
    iconUrl: 'scooter.png', // Укажите путь к вашей иконке самоката
    iconSize: [38, 38],
    iconAnchor: [22, 94],
    popupAnchor: [-3, -76]
});
 
// Полигон для зоны
var polygon = L.polygon([
 
], {
    color: 'purple',
    fillColor: 'purple',
    fillOpacity: 0.3
}).addTo(map);
</script>
</body>
</html>

@mr_dramm · 08.04.2024, 21:23

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

@ProSasg · 10.04.2024, 07:44 **[ТС]**

Как я понимаю нужно разбить код на функции их. В php подключения к бд. Для тестов установил phpUnit
Я установил вроде называется Jest для тестов JS, но он всегда выдает ошибку из-за того что в коде находяться $Ajax запросы.

@mr_dramm · 10.04.2024, 14:08

Сообщение от ProSasg

Как я понимаю нужно разбить код на функции их.

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

Сообщение от ProSasg

В php подключения к бд. Для тестов установил phpUnit

Модульные тесты подразумевают что нужно в тест выносить честь своего кода и тестировать независимо от внешних факторов имитируя ответы от внешних источников данных с помощью stub и mock. Если вы тестируете фронтенд код, то установка phpUnit это лишнее, нужно изолироваться от сервера, нужно считать, что ответы от сервера всегда приходят именно такие какие нам надо. Для получения ожидаемых ответов от сервера нужно сделать mock $.ajax. например для mock

моя лайтовая адаптация

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
/*
/*
{
        url: 'finishrental.php', // Путь к файлу на сервере для завершения аренды
        type: 'POST',
        data: { idScooter: idScooter },
        success: function(response) {
            console.log(response); 
            console.log('Аренда успешно завершена.');
            var reserveButton = document.getElementById('reserve-button');
            reserveButton.innerText = 'Зарезервировать';
            reserveButton.removeEventListener('click', reserveButtonClickHandler);
            reserveButton.addEventListener('click', reserveButtonClickHandler);
            // Здесь вы можете добавить код для обновления интерфейса или выполнения других действий после завершения аренды
        },
        error: function(xhr, status, error) {
            console.error('Ошибка при завершении аренды:', status, error);
        }
*/
 
 
const finishrentalPOST = (data) => {
  // то что нам вернет сервер в ответ на эти данные
  let result = null;
  if (data["idScooter"] == 2) {
    //
    result = "idScooter 1 exist";
  } else {
    throw new Error("idScooter 1 not exist");
  }
  return result
};
 
const mockData = {
  "finishrental.php": {
    POST: finishrentalPOST,
  },
};
 
const ajax = async (args) => {
  const { url, type, data, success, error } = args;
  let result = null;
  try {
    result = mockData[url][type](data);
  } catch (err) {
    return error("400", err.message);
  }
  return success(result);
};
/* test case
ajax({
  url: "finishrental.php",
  type: "POST",
  data: { idScooter: 1 },
  success: function (response) {
    console.log("success", response);
  },
  error: function (status, error) {
    console.error("error:", status, error);
  },
});
*/
module.exports = ajax

Так как ваш код написан без системы сборки

для использования кастомной ajax в начале файла script.js

JavaScript
1
2
3
4
5
if (typeof module !== "undefined" && module.exports) {
if($) {
    $.ajax = require("./ajax.js")
}
}

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

JavaScript
1
2
3
if (typeof module !== "undefined" && module.exports) {
  module.exports = {/*список функций который будем тестировать*/};
}

Пример как бы мог выглядеть ваш тест если мы тестируем showScooterInfo и хотим быть уверены что sidebar.style.display станет flex

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
const {showScooterInfo} = require('./script.js');
 
// тестируем что sidebar.style.display будет flex
test('showScooterInfo test display flex', () => {
  // Mocking authenticated user
  window.isAuthenticaded = true;
  // Creating markerData object
  const markerData = {
    idScooter: 1,
    BatteryLevel: 80
  };
 
  // Creating sidebar element
  const sidebar = document.createElement('div');
  sidebar.id = 'sidebar';
  document.body.appendChild(sidebar);
 
  // Calling showScooterInfo function with markerData
  showScooterInfo(markerData);
 
  // Expecting sidebar display style to be 'flex'
  expect(sidebar.style.display).toBe('flex');
 
});

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

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
const { JSDOM } = require('jsdom');
  const dom = new JSDOM(`
    <html>
      <body>
        <div id="sidebar"></div>
      </body>
    </html>
  `);
 
  /
  global.window = dom.window;
  global.document = dom.window.document;

Новые блоги и статьи Все статьи Все блоги /
модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ
Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .	Горе от ума kumehtar 07.04.2026 Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .	Использование значений реквизитов справочника в документе, с определенными условиями и правами Maks 07.04.2026 1. Контроль срока действия договора Алгоритм из решения ниже реализован на примере нетипового документа "ЗаявкаНаРаботу", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если. . .	Доступность команды формы по условию Maks 07.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: сделать доступной кнопку (команда формы "ЗавершитьСписание") при. . .

@mr_dramm Молодой техлид) 1818 / 1056 / 329 Регистрация: 17.07.2021 Сообщений: 2,147 Записей в блоге: 14
	08.04.2024, 21:23
	Для начала нужно определиться с тем что тестируем и каой результат нужно получить, чем точнее будет описание тем лучше. Рекомендую посмотреть лекциюТесты. Модульное тестирование 0

@ProSasg 1 / 1 / 0 Регистрация: 12.04.2021 Сообщений: 20
	10.04.2024, 07:44 [ТС]
	Как я понимаю нужно разбить код на функции их. В php подключения к бд. Для тестов установил phpUnit Я установил вроде называется Jest для тестов JS, но он всегда выдает ошибку из-за того что в коде находяться $Ajax запросы. 0

Как сделать unit test

Решение