Add comprehensive test suite and automated CI/CD pipeline

[Copilot]

This PR adds complete testing infrastructure and automated CI/CD pipeline to the Logoly project, which previously had no tests or continuous integration.

Testing Infrastructure

Test Suite (23 tests)

• Vitest as the test runner optimized for Vite projects
• Vue Test Utils for component testing with proper mocking
• jsdom environment for browser simulation
• Comprehensive coverage across all major components:
  • Store Tests (4): Pinia state management validation
  • Component Tests (9): FontSelector and ExportBtn functionality
  • Generator Tests (10): Pornhub and OnlyFans logo generators
  • Router Tests (3): Route configuration and analytics

Coverage Reporting

• v8 provider with text, LCOV, and HTML reporters
• Codecov integration for automated coverage tracking
• Current coverage: 33.44% overall with 100% store coverage

CI/CD Pipeline

GitHub Actions Workflows

1. Main CI: Tests on Node.js 18 & 20, validates builds
2. Dependency Review: Security scanning for vulnerabilities
3. CodeQL Analysis: Static security analysis (weekly + on changes)

Security Features

• Dependency vulnerability scanning with moderate+ severity blocking
• Static code analysis for security issues
• License compliance checking (MIT, Apache-2.0, BSD variants)

Usage

# Run tests in development
npm test

# Run tests once (CI)
npm run test:run

# Generate coverage report
npm run test:coverage

# View test UI
npm run test:ui

Documentation

Complete setup documentation provided in CI-README.md and tests-README.md covering test structure, CI configuration, and development workflows.

All workflows are configured to run automatically on pushes and pull requests, ensuring code quality and preventing regressions.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
logoly	Ready	Preview	Comment	Aug 20, 2025 9:44am

[bestony]

帮我加入自动化的 CI 测试

[bestony]

@copilot 帮我加入自动化的 CI 测试

[Copilot]

@copilot 帮我加入自动化的 CI 测试

I've added comprehensive automated CI testing with GitHub Actions. The CI pipeline includes:

🚀 Main CI Workflow: Tests on Node.js 18 & 20, builds project, and runs all 23 tests
🔒 Security Scanning: Dependency review and CodeQL static analysis
📊 Coverage Reporting: Automatic upload to Codecov
📝 Documentation: Complete CI setup guide in CI-README.md

The workflows will automatically run on pushes and pull requests to main/master branches. All tests pass and builds succeed.

Commit: 4872263

[bestony]

本功能官方文档说明：https://github.blog/news-insights/product-news/agents-panel-launch-copilot-coding-agent-tasks-anywhere-on-github/

[bestony]

/gemini summary

[gemini-code-assist]

Summary of Changes

This pull request significantly enhances the Logoly project by integrating a robust testing framework and an automated CI/CD pipeline. The changes aim to ensure code quality, prevent regressions, and bolster security through comprehensive unit and component tests, alongside continuous integration workflows that include security scanning and code coverage reporting. This foundational work establishes a more reliable and maintainable development process for the project.

Highlights

• Comprehensive Testing Infrastructure: Introduced a complete testing setup using Vitest as the test runner, Vue Test Utils for component testing, and jsdom for browser environment simulation. This includes 23 tests covering store, components, logo generators, and router configurations.
• Automated CI/CD Pipeline: Implemented GitHub Actions workflows for continuous integration. This pipeline includes a main CI job to run tests and build the project on Node.js 18 and 20, a dependency review for security vulnerabilities, and CodeQL static analysis for code security.
• Code Coverage Reporting: Configured v8 provider for code coverage with text, LCOV, and HTML reporters. Integrated Codecov for automated coverage tracking, showing an initial overall coverage of 33.44% with 100% store coverage.
• Enhanced Security Features: Added dependency vulnerability scanning that blocks moderate or higher severity issues, static code analysis, and license compliance checking for MIT, Apache-2.0, and BSD variants.
• Detailed Documentation: New CI-README.md and tests-README.md files provide comprehensive documentation on the CI/CD setup, test structure, coverage reporting, and local development workflows.

Changelog

• .gitignore
  • Added new entries to ignore test coverage related files such as *.lcov and test-results.
• CI-README.md
  • Added a new file detailing the Continuous Integration (CI) setup, including GitHub Actions workflows (Main CI, Dependency Review, CodeQL Analysis), test commands, coverage reporting, test structure, and security features.
• package-lock.json
  • Updated numerous dependencies to support the new testing infrastructure, including @vitest/coverage-v8, @vitest/ui, @vue/test-utils, jsdom, vitest, and various transitive dependencies for these packages.
• package.json
  • Added new npm scripts for running tests (npm test), running tests once (npm run test:run), running tests with UI (npm run test:ui), and generating coverage reports (npm run test:coverage).
  • Modified the lint script to explicitly use .eslintrc.cjs configuration.
• src/components/tests/ExportBtn.test.js
  • Added a new test file for the ExportBtn component, including mocks for dom-to-image and vue-gtag to test component functionality and dependencies.
• src/components/tests/FontSelector.test.js
  • Added a new test file for the FontSelector component, utilizing mocked Vuetify components to verify rendering, font options, and store integration.
• src/components/generator/tests/Onlyfans.test.js
  • Added a new test file for the Onlyfans logo generator component, including mocks for external dependencies and Vuetify components to test rendering, styling, computed properties, and external interactions.
• src/components/generator/tests/Pornhub.test.js
  • Added a new test file for the Pornhub logo generator component, with mocks for external dependencies and Vuetify components to test rendering, text display, color values, computed properties, and Twitter sharing functionality.
• src/router/tests/index.test.js
  • Added a new test file for the Vue Router configuration, verifying the correct setup of routes, route names, and analytics metadata for all defined routes.
• src/stores/tests/store.test.js
  • Added a new test file for the Pinia store, ensuring correct initialization of default values and proper functionality of prefix and suffix update methods.
• tests-README.md
  • Added a new file providing documentation on the test structure, including details on store, component, generator, and router tests, along with instructions for running tests and an overview of test coverage.
• vite.config.js
  • Added Vitest configuration to the Vite project, specifying global settings, jsdom environment, CSS support, and detailed coverage reporting options (text, lcov, html reporters, and exclusions).

Ignored Files

• Ignored by pattern: .github/workflows/** (3)
  • .github/workflows/ci.yml
  • .github/workflows/codeql.yml
  • .github/workflows/dependency-review.yml

Activity

• A Vercel bot deployed a preview of the changes.
• User 'bestony' requested the addition of automated CI testing.
• Copilot confirmed the implementation of comprehensive automated CI testing, including a main CI workflow, security scanning, coverage reporting, and documentation, noting that all 23 tests pass and builds succeed.
• User 'bestony' shared a link to Copilot coding agent tips.

[bestony]

/gemini 用中文帮我总结一下这个变更，并给一些说明

[bestony]

@gemini-code-assist 你觉得这个改动怎么样？

[gemini-code-assist]

好的，bestony。这个拉取请求（PR）对 Logoly 项目进行了显著的增强，主要通过集成一个强大的测试框架和自动化的持续集成/持续部署（CI/CD）管道。

变更总结

这个拉取请求通过引入强大的测试框架和自动化的 CI/CD 管道，显著增强了 Logoly 项目。这些变更旨在通过全面的单元测试和组件测试，以及包含安全扫描和代码覆盖率报告的持续集成工作流，确保代码质量、防止回归并加强安全性。这项基础性工作为项目建立了更可靠和可维护的开发流程。

亮点

• 全面的测试基础设施：引入了完整的测试设置，使用 Vitest 作为测试运行器，Vue Test Utils 进行组件测试，以及 jsdom 进行浏览器环境模拟。这包括涵盖存储、组件、Logo 生成器和路由配置的 23 个测试。
• 自动化 CI/CD 管道：实现了 GitHub Actions 工作流以进行持续集成。该管道包括一个主 CI 任务，用于在 Node.js 18 和 20 上运行测试和构建项目，一个用于安全漏洞的依赖项审查，以及用于代码安全的 CodeQL 静态分析。
• 代码覆盖率报告：配置了 v8 覆盖率提供程序，支持文本、LCOV 和 HTML 报告。集成了 Codecov 以进行自动化覆盖率跟踪，显示初始总体覆盖率为 33.44%，存储覆盖率为 100%。
• 增强的安全功能：增加了依赖项漏洞扫描，可阻止中等或更高严重性的问题，以及静态代码分析和 MIT、Apache-2.0 和 BSD 变体许可证合规性检查。
• 详细文档：新增的 CI-README.md 和 tests-README.md 文件提供了关于 CI/CD 设置、测试结构、覆盖率报告和本地开发工作流的全面文档。

总的来说，这些改进将大大提高项目的稳定性、安全性和开发效率。

[gemini-code-assist]

你好 bestony！

我认为这个改动非常棒！它为 Logoly 项目带来了巨大的进步，通过引入全面的测试套件和自动化的 CI/CD 管道，显著提升了项目的质量、稳定性和安全性。

主要优点：

• 增强的代码质量：通过 Vitest 和 Vue Test Utils 引入的单元和组件测试，可以有效捕获 bug，确保代码按预期工作。
• 自动化和效率：GitHub Actions CI/CD 管道自动化了测试、构建和部署过程，大大提高了开发效率并减少了手动错误的风险。
• 提升的安全性：依赖项审查和 CodeQL 静态分析等安全功能，有助于及早发现并解决潜在漏洞。
• 清晰的文档：新增的 CI-README.md 和 tests-README.md 文件为项目的持续集成和测试策略提供了宝贵的指导。

展望未来：

目前测试覆盖率已达到 33.44%，并且存储模块覆盖率达到了 100%，这是一个很好的开始。未来可以考虑逐步扩展测试范围，覆盖更多组件和业务逻辑，以进一步提高整体代码的健壮性。

总而言之，这是一次非常积极和重要的更新，为 Logoly 项目的长期健康发展奠定了坚实的基础。干得好！