📊 Визуализатор алгоритмов «МБОУ АЛГОСОШ им. Фибоначчи». 📊

📎Не залипни на сортировку! 🌞

Проект "МБОУ АЛГОСОШ им. Фибоначчи" представляет собой одностраничное веб-приложение реализованное в рамках обучения. Задача проекта - создание инструмента для визуализации различных алгоритмов и структур данных с целью более глубокого понимания их работы. Приложение позволяет пользователям интерактивно изучать и наблюдать процесс работы алгоритмов, таких как разворот строки, генерация последовательности Фибоначчи, сортировка массива. Оно также обеспечивает возможность визуального отображения добавления и удаления элементов в структурах данных, таких как стек, очередь и связный список.

Ссылки

Готовый проект на gh-pages | Макет в Figma | Техническое задание

Что сделала

• Создала интерактивное веб-приложение для визуализации алгоритмов с пошаговым отображением.
• Реализовала юнит-тестирование: снимки отдельных компонентов button и circle а так же алгоритма разворота строки и сортировки выбором и пузырьком.
• Реализовала E2E тестирование: проверка работоспособности приложения, проверка переходов по страницам, функциональности отдельных компонентов, страниц и корректность отображения и взаимодействия с элементами интерфейса.

👍- Реализовала паттерн проектирования 📷 «Снимок» ✅ (memento.ts) для повышения переиспользуемости кода в случаях с простыми структурами данных и алгоритмами.

👍- Изучила и внедрила лучшие практики Cypress

1. Использовала выбор элементов - для идентификации тестируемых элементов использовала атрибут 🔎data-cy✅ что улучшило стабильность и читаемость тестов. Пример
2. Исключила ⏳cy.wait ❌ ненужные ожидания в тестах, даже при наличии анимации, зависящей от таймаутов. Пример
3. Создала ️🪄кастомные команды для Cypress пример в commands.ts
   • getDataCy и getAlias: Получение элементов по атрибуту data-cy и псевдониму.
   • Проверка состояния кнопок и fieldset: checkDisabledButtonsWithEmptyInput, checkDisabledFieldsetAfterClickButton, checkActivityButtonsWithNonEmptyInput:

---

Используемые инструменты и технологии

• Языки: HTML CSS TypeScript
• Фреймворки и инструменты для тестирования: Cypress Jest React Testing Library
• Инструменты управления проектом: Git GitHub GitHub Pages
• Инструменты для разработки и сборки проекта: Node.js Webpack Yarn Create React App React Router

---

Установка и запуск

Для запуска проекта локально выполните следующие шаги:

1. Клонируйте репозиторий:

   git clone https://github.com/gudrum1983/algososh.git

2. Перейдите в директорию проекта:

   cd algososh

3. Установите зависимости:

   yarn install

4. Запустите проект:

   yarn start

5. Откройте http://localhost:3000 для просмотра в браузере.

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

Для запуска тестов используйте команду:

yarn test

Системные требования

Для работы с проектом потребуется Node.js и любой современный браузер.

---

Кочкина Екатерина - Спринты 11 - 12: Алгоритмы, структуры данных, тестирование, ФП и др. - 02.2024г.