Feature/update readme gh actions

[AndrewHanasiro]

Summary by CodeRabbit

Release Notes

• New Features

  • Automated end-to-end testing workflow for continuous quality assurance
  • Dynamic path resolution for improved navigation functionality

• Chores

  • Updated testing infrastructure with enhanced coverage and reporting capabilities
  • Improved test execution workflow (separated unit and end-to-end testing)
  • Added security vulnerability monitoring badge to project documentation
  • Optimized list rendering performance with improved item tracking

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

This change establishes a comprehensive testing infrastructure by adding Playwright e2e test workflows, updating test tooling and dependencies, reconfiguring Vite for testing, and applying keyed iterations to Svelte component lists for improved DOM diffing.

Changes

Cohort / File(s)	Summary
Test Infrastructure & Workflows .github/workflows/playwright.yml, .github/workflows/continuous_integration.yml	Adds GitHub Actions Playwright workflow for e2e tests on main/master; modifies CI workflow to run unit tests only and removes browser installation step.
Configuration Files playwright.config.ts, vite.config.ts, tsconfig.json, vitest-setup.js	Updates Playwright reporter path to results-e2e.xml; replaces Vitest multi-project setup with svelteTesting and jsdom environment; adds Jest DOM types; imports testing-library matchers.
Dependency & Script Management package.json	Bumps eslint, Vite, Vitest, Svelte, and related dependencies; adds @testing-library packages, jsdom, and @vitest/coverage-v8; reorganizes test scripts (test:unit with coverage, test as combined unit+e2e, new lint:check command).
Git & Documentation .gitignore, README.md	Adds Playwright report and cache directories, coverage, and e2e results to ignore rules; inserts Snyk vulnerabilities badge.
Test Files src/demo.spec.ts, test/Header.svelte.test.ts, e2e/Header.test.ts	Removes demo unit test; adds new Header.svelte test using @testing-library/svelte; removes trailing semicolons in e2e Header test.
Svelte Component Updates src/routes/Menu.svelte, src/routes/invoices/table.svelte, src/routes/login/choose.svelte, src/routes/mfa/+page.svelte, src/routes/users/table.svelte	Adds keyed iterations to each blocks (e.g., {#each list as usr (usr.id)}); Menu.svelte also imports and uses resolve() for dynamic navigation paths.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• Specific areas requiring attention:
  • vite.config.ts: Verify the new test environment configuration (jsdom), setup file path, and coverage provider integration work correctly with the testing-library/svelte setup.
  • package.json: Cross-check all dependency versions are compatible, particularly testing-library packages, vitest, and Vite versions.
  • Svelte keyed iterations: Confirm each key expression (e.g., usr.id, opt) uniquely identifies list items and won't cause rendering issues.
  • src/routes/Menu.svelte: Ensure resolve() function from $app/paths is properly available and produces correct paths in all environments.
  • GitHub Actions workflows: Verify Playwright job timeout (60 min), artifact retention, and conditional logic align with testing needs.

Possibly related PRs

• feat: update #14: Modifies Playwright configuration JUnit reporter path (results.xml vs. results-e2e.xml), directly related to playwright.config.ts changes.
• featute/update-packages #13: Updates devDependencies and testing script versions; overlaps with package.json testing tooling modifications.
• fix: sonar config #15: Modifies CI workflow and test scripts around Playwright browser installation and test command configuration; directly related to .github/workflows and package.json test script changes.

Poem

🐰 A tester's dream takes shape,
With Vitest, Playwright, and jest-dom's embrace,
Keyed iterations now dance through the DOM,
While workflows orchestrate the testing throng,
Svelte components render smooth and strong!

Pre-merge checks and finishing touches

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The pull request description is completely empty. No explanation of the changes, objectives, rationale, or testing information was provided.	Add a comprehensive description following the template structure with Proposal section, links to relevant issues, and context for the extensive changes made across testing, CI/CD, and component updates.
Title check	❓ Inconclusive	The title is vague and overly broad, using shorthand notation ('Feature/update readme gh actions') that doesn't clearly convey what was actually changed. The PR makes extensive changes across testing infrastructure, configuration files, and component updates—far more than just README and GitHub Actions updates.	Consider a more descriptive title like 'Setup Playwright testing with coverage, update CI/CD, and add component tests' that accurately reflects the scope of changes.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feature/update-README-GH-actions

---

📜 Recent review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between ef2a57e and e162131.

📒 Files selected for processing (11)

• .github/workflows/continuous_integration.yml (2 hunks)
• .github/workflows/playwright.yml (1 hunks)
• e2e/Header.test.ts (1 hunks)
• package.json (1 hunks)
• src/routes/Menu.svelte (2 hunks)
• src/routes/invoices/table.svelte (1 hunks)
• src/routes/login/choose.svelte (1 hunks)
• src/routes/mfa/+page.svelte (1 hunks)
• src/routes/users/table.svelte (1 hunks)
• test/Header.svelte.test.ts (1 hunks)
• vite.config.ts (1 hunks)

✅ Files skipped from review due to trivial changes (1)

• e2e/Header.test.ts

🚧 Files skipped from review as they are similar to previous changes (2)

• .github/workflows/playwright.yml
• test/Header.svelte.test.ts

🔇 Additional comments (14)

src/routes/login/choose.svelte (1)

25-25: LGTM! Keyed iteration improves DOM stability.

Adding the key (opt) to the each block follows Svelte best practices and enables efficient DOM diffing when the strategy list changes.

src/routes/invoices/table.svelte (1)

30-30: LGTM! Proper keyed iteration for invoice list.

Using (usr.id) as the key ensures stable DOM updates when the invoice list changes. This is the correct approach for list rendering in Svelte.

src/routes/mfa/+page.svelte (1)

44-44: LGTM! Keyed iteration for strategy list.

Adding (strategy) as the key is appropriate for this static list of MFA strategies. This ensures Svelte can efficiently track and update the Card components.

src/routes/users/table.svelte (1)

25-25: LGTM! Proper keyed iteration for user list.

Using (usr.id) as the key ensures Svelte can efficiently update the user table when the list changes. This is the correct pattern for rendering user records.

src/routes/Menu.svelte (2)

20-23: LGTM! Dynamic path resolution improves deployment flexibility.

Replacing static hrefs with resolve() calls is a good practice for SvelteKit applications. This ensures navigation works correctly when the app is deployed under a base path.

---

3-3: No changes needed — the import is correct. The resolve function from '$app/paths' resolves pathnames by prefixing with the base path and resolves route IDs with dynamic parameters.

.github/workflows/continuous_integration.yml (1)

44-45: LGTM! Good separation of unit and e2e tests.

Running test:unit in the CI workflow keeps the feedback loop fast while Playwright e2e tests run in their dedicated workflow. This separation improves CI performance and maintainability.

vite.config.ts (4)

3-3: LGTM! Correct Testing Library integration.

The svelteTesting plugin from @testing-library/svelte/vite is properly imported and configured alongside SvelteKit. This is the recommended approach for Svelte component testing with Vitest.

Also applies to: 6-6

---

15-15: Consider whether the test include pattern is too restrictive.

The pattern test/**/*.svelte.test.ts only matches TypeScript test files with the .svelte.test.ts naming convention. This excludes .test.js files and other test patterns. Verify this aligns with your testing strategy or consider a broader pattern like test/**/*.test.{ts,js} if other test files exist in the project.

---

14-14: Setup file is properly configured.

The ./vitest-setup.js file exists and correctly imports Jest DOM matchers via @testing-library/jest-dom/vitest.

---

8-11: Broaden coverage pattern to include TypeScript utility files and stores.

The coverage configuration only includes src/**/*.svelte files, excluding TypeScript logic files like src/stores/auth.ts, src/routes/invoices/invoices.ts, src/routes/mfa/mfa.ts, and src/routes/users/users.ts. Update the pattern to include both Svelte and TypeScript files: include: ['src/**/*.{ts,svelte}'] (or adjust based on your needs) to ensure comprehensive coverage tracking of all source files.

package.json (3)

14-15: LGTM! Good separation of lint and lint:check scripts.

The lint script now auto-fixes both formatting and linting issues, while lint:check provides a read-only validation suitable for CI/CD pipelines. This is a best practice approach.

---

16-17: LGTM! Well-structured test commands.

The test:unit script now explicitly includes coverage, and the test script properly chains unit and e2e tests in sequence. This ensures fast feedback from unit tests before running slower e2e tests.

---

22-22: All dependency versions are valid and have no known security vulnerabilities.

jsdom@27.3.0 is the latest version, published 9 days ago, and svelte@5.46.0 was published 4 days ago. Svelte 5.46.0 is marked as the latest non-vulnerable version. The @testing-library/svelte library supports Svelte versions 3, 4, and 5. No direct security vulnerabilities were found in the tested packages. The updates are safe to proceed with.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 3

🧹 Nitpick comments (1)

package.json (1)

15-17: LGTM! Well-organized test script structure.

The test scripts are properly separated:

• test:unit runs Vitest with coverage
• test:e2e runs Playwright tests
• test composes both sequentially with &&, ensuring e2e tests only run if unit tests pass

This structure provides flexibility for developers to run specific test suites while ensuring comprehensive validation in CI.

Consider adding a test:unit:watch script for local development without coverage overhead:

"test:unit:watch": "vitest",
"test:unit": "vitest run --coverage",

This allows developers to run npm run test:unit:watch during development for faster feedback, while keeping coverage for CI runs.

📜 Review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 00da970 and d9c80b6.

⛔ Files ignored due to path filters (1)

• package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (11)

• .github/workflows/playwright.yml (1 hunks)
• .gitignore (2 hunks)
• README.md (1 hunks)
• e2e/example.spec.ts (1 hunks)
• package.json (1 hunks)
• playwright.config.ts (1 hunks)
• src/demo.spec.ts (0 hunks)
• test/Header.svelte.test.ts (1 hunks)
• tsconfig.json (1 hunks)
• vite.config.ts (1 hunks)
• vitest-setup.js (1 hunks)

💤 Files with no reviewable changes (1)

• src/demo.spec.ts

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: Test

🔇 Additional comments (8)

.gitignore (1)

3-4: ✓ LGTM!

The additions for the E2E testing infrastructure are appropriate and well-organized. The entries align with Playwright conventions and follow the existing file structure (grouped by concern).

Also applies to: 28-32

README.md (1)

5-6: Verify the Snyk badge URL is correct and accessible.

The badge syntax is well-formed Markdown, and the placement after the intro description is appropriate. However, please verify that:

1. The Snyk badge URL (https://snyk.io/test/github/auth-plus/auth-plus-client/badge.svg) resolves and displays correctly
2. The repository path (auth-plus/auth-plus-client) matches your actual GitHub repository name

vitest-setup.js (1)

1-1: LGTM! Proper Vitest setup for Jest DOM matchers.

The import correctly extends Vitest with DOM-related matchers from @testing-library/jest-dom, which aligns with the TypeScript configuration and will enable matchers like toBeInTheDocument() used in the test files.

playwright.config.ts (1)

9-9: LGTM! Clear test result differentiation.

Renaming the JUnit output file to results-e2e.xml appropriately distinguishes end-to-end test results from unit test results, which is helpful for CI/CD pipelines and test result analysis.

tsconfig.json (1)

12-13: LGTM! Proper TypeScript configuration for Jest DOM.

Adding @testing-library/jest-dom to the types array ensures TypeScript recognizes the custom matchers like toBeInTheDocument() used in the tests. This aligns perfectly with the vitest-setup.js configuration.

.github/workflows/playwright.yml (1)

1-27: LGTM! Standard Playwright CI configuration.

The workflow follows GitHub Actions best practices:

• Uses latest stable action versions (v4)
• Configures reasonable timeout (60 minutes)
• Includes proper artifact retention (30 days)
• Uploads reports even on test failures (if: !cancelled())

Note: The e2e tests themselves need correction (see comment on e2e/example.spec.ts), but the workflow configuration is solid.

vite.config.ts (1)

3-16: LGTM! Well-structured test configuration.

The transition from browser-playwright to jsdom with Testing Library is a solid choice for Svelte component testing. The configuration correctly:

• Integrates svelteTesting() plugin for proper Svelte component handling
• Configures v8 coverage for Svelte files
• Sets up jsdom environment with appropriate setup file
• Maintains assertion requirements for test quality

The focused test pattern (test/**/*.svelte.test.ts) clearly separates unit tests from e2e tests.

package.json (1)

19-54: Dependency versions are current and secure.

@testing-library/jest-dom is at its latest version 6.9.1, and @testing-library/svelte is at version 5.2.9, also the latest. Playwright's latest version is 1.57.0, which is the version currently pinned. jsdom's latest version is 27.2.0, and the pinned caret range (^27.3.0) is acceptable. @vitest/coverage-v8 is at the latest version 4.0.16. No direct vulnerabilities have been found for jsdom, and @vitest/coverage-v8 shows no reported security vulnerabilities. The testing infrastructure dependencies are appropriately selected and maintained.