Skip to content

Improve & test the cross stack reactivity #8370

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 11 commits into from
May 2, 2025

Conversation

estib-vega
Copy link
Contributor

@estib-vega estib-vega commented May 2, 2025

Description

This PR improves and tests the cross-stack reactivity with the following key changes:

  • Fetch branch changes only when mounting the files split view, ensuring correct stack/project IDs and reactive updates.
  • Add comprehensive mocking support for branch changes, including new types, type guards, and backend mock implementations.
  • Introduce a helper to create mock branch details for easier and cleaner test setups.
  • Add a new mock scenario with multiple stacks and unique file changes to test cross-stack behavior.
  • Enhance test IDs for better targeting and consistency across components (file list items, changed files, stack tabs).
  • Add a new Cypress E2E test verifying UI updates when switching stack selections, using the new mocks and test IDs.
  • Refactor and unify test IDs for file list items to improve maintainability.

⧓ Review in Butler Review #2GVXU8Bud

Improve & test the cross stack reactivity

Description

This PR improves and tests the cross-stack reactivity with the following key changes:

  • Fetch branch changes only when mounting the files split view, ensuring correct stack/project IDs and reactive updates.
  • Add comprehensive mocking support for branch changes, including new types, type guards, and backend mock implementations.
  • Introduce a helper to create mock branch details for easier and cleaner test setups.
  • Add a new mock scenario with multiple stacks and unique file changes to test cross-stack behavior.
  • Enhance test IDs for better targeting and consistency across components (file list items, changed files, stack tabs).
  • Add a new Cypress E2E test verifying UI updates when switching stack selections, using the new mocks and test IDs.
  • Refactor and unify test IDs for file list items to improve maintainability.

11 commit series (version 2)

Series Commit Title Status Reviewers
11/11 fix lint errors
10/11 test(mock): add BranchesWithChanges scenario for multiple stacks with file changes
9/11 feat(mock-backend): support branch changes and getBranchChanges
8/11 feat(mock): add getBranchChanges and type guards for branch changes
7/11 test(e2e): add selection.cy.ts for cross-stack selection reactivity
6/11 feat(test-ids): add StackTab test id to stack tab button
5/11 feat(test-ids): add optional testId prop to ChangedFiles and apply to root div
4/11 refactor(test-ids): unify file list item test id to 'file-list-item'
3/11 fix: Move the fetching of the branch changes to the snippet 💬
2/11 add scenario description
1/11 feat(tests): add helper to create mock branch details

Please leave review feedback in the Butler Review

estib-vega added 10 commits May 2, 2025 12:51
Introduce createMockBranchDetails function to simplify creating
customized mock BranchDetails objects in tests. This improves test
readability and reduces duplication by allowing overrides of default
mock data.
Add a description to the ‘lots of file changes’ scenario
Only fetch the changes when mounting the files split view.

This improves things in the following ways:
- Ensures that only if the actual snippet is rendered, the information is fetched and subscribed to.
- It correctly reacts to changing of parameters
- It uses the correct stack and project Id. Important since this component is within a ReduxResult, so the stack IDs might be out of sync in between changes
- Replace all usages of 'uncommitted-changes-file-list-item' with 'file-list-item' in test files and FileListItemWrapper.svelte
- Update testIds.ts to reflect the new unified test id
- Update affected Cypress tests to use the new test id

This change standardizes the test id for file list items, making tests and components more consistent and maintainable.
… root div

- Allow passing a testId prop to ChangedFiles.svelte
- Apply the testId to the root element for improved test targeting

This enables more flexible and robust test selectors for changed files lists.
- Import TestId and set data-testid={TestId.StackTab} on StackTab button
- Improves testability and selector consistency for stack tab elements
- Add new Cypress test to verify drawer and file list update when changing stack selection
- Uses new test ids for stack tab and file list item
- Mocks backend to provide multiple stacks with different file changes

Ensures UI updates correctly when switching between stacks with different changes.
- Add GetBranchChangesParams type and isGetBranchChangesParams type guard
- Support for mocking branch changes in backend

This enables more robust mocking of branch-specific file changes for tests.
- Add branchChanges map to MockBackend for storing per-branch file changes
- Implement getBranchChanges and getBranchChangesFileNames methods
- Update types for StackId, CommitId, BranchName, BranchChanges

This allows mocking and retrieval of file changes for specific branches and stacks, supporting more advanced test scenarios.
… file changes

- Add BranchesWithChanges mock scenario with three stacks, each having unique file changes
- Sets up stack details and branch changes for each stack
- Used in selection.cy.ts to test cross-stack reactivity

This enables robust testing of UI behavior when switching between stacks with different file changes.
Copy link

vercel bot commented May 2, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
gitbutler-components ✅ Ready (Inspect) Visit Preview 💬 Add feedback May 2, 2025 11:17am
1 Skipped Deployment
Name Status Preview Comments Updated (UTC)
gitbutler-web ⬜️ Skipped (Inspect) May 2, 2025 11:17am

@vercel vercel bot temporarily deployed to Preview – gitbutler-web May 2, 2025 11:15 Inactive
@estib-vega estib-vega merged commit 1648b15 into master May 2, 2025
20 checks passed
@estib-vega estib-vega deleted the fix-cross-stack-reactivity branch May 2, 2025 11:19
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant