chore(storybook): borrower profile storybook baseline AD-267#6997
Merged
Conversation
Add a no-op setVariables() to the mocked watchQuery so components that re-issue queries don't throw, and switch the preview router to memory history with a catch-all route so route-dependent stories don't navigate the iframe away or fail to match.
Add standalone Storybook stories for the existing borrower-profile components (LoanProgress, SummaryCard, DetailsTabs, CountryInfo, LendCta, LoanStory, LoanDetails, FieldPartnerDetails, TrusteeDetails, and others), backed by shared mockLoanFixtures, plus Empty and CurrentUserHighlighted variants for SupportedByLenders. Stories render against the components as they exist on main.
mcstover
approved these changes
Jun 16, 2026
emuvente
force-pushed
the
chore/borrower-profile-storybook-baseline
branch
from
18e52a9 to
ceb2f55
Compare
Contributor
There was a problem hiding this comment.
Pull request overview
Adds a Storybook “baseline” set of stories for Borrower Profile components (plus shared mock fixtures) to support upcoming migration work, and tweaks Storybook’s app-level setup to behave better with in-story navigation and Apollo usage.
Changes:
- Added many new Storybook stories under
Components/BorrowerProfile/*backed by a sharedmockLoanFixtures.js. - Updated Storybook’s Vue Router setup to use in-memory history and added a catch-all route.
- Extended the Apollo Storybook mixin’s
watchQuery()mock to includesetVariables().
Reviewed changes
Copilot reviewed 23 out of 23 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
| .storybook/stories/SupportedByLenders.stories.js | Adds additional scenarios for SupportedByLenders story. |
| .storybook/stories/BorrowerProfile/TrusteeDetails.stories.js | New BorrowerProfile TrusteeDetails stories. |
| .storybook/stories/BorrowerProfile/SummaryCard.stories.js | New SummaryCard stories using shared Apollo/cookie/auth mixins. |
| .storybook/stories/BorrowerProfile/ShareButton.stories.js | New ShareButton story using shared fixtures/mixins. |
| .storybook/stories/BorrowerProfile/RepaymentSchedule.stories.js | New RepaymentSchedule story. |
| .storybook/stories/BorrowerProfile/MoreAboutLoan.stories.js | New MoreAboutLoan stories (partner/direct/loading). |
| .storybook/stories/BorrowerProfile/mockLoanFixtures.js | Shared mock loan/user/queryResult fixtures for BorrowerProfile stories. |
| .storybook/stories/BorrowerProfile/LoanStory.stories.js | New LoanStory stories (single/group/repeat borrower variants). |
| .storybook/stories/BorrowerProfile/LoanProgress.stories.js | New LoanProgress stories covering many statuses. |
| .storybook/stories/BorrowerProfile/LoanDetails.stories.js | New LoanDetails stories for partner/direct and date variants. |
| .storybook/stories/BorrowerProfile/LendersAndTeams.stories.js | New LendersAndTeams stories (lenders/teams/empty). |
| .storybook/stories/BorrowerProfile/LendCta.stories.js | New LendCta stories for fundraising/funded/post-fundraising. |
| .storybook/stories/BorrowerProfile/JournalUpdates.stories.js | New JournalUpdates stories (default/none). |
| .storybook/stories/BorrowerProfile/FieldPartnerDetails.stories.js | New FieldPartnerDetails stories/variants. |
| .storybook/stories/BorrowerProfile/DetailsTabs.stories.js | New DetailsTabs stories for partner/direct loan scenarios. |
| .storybook/stories/BorrowerProfile/DescriptionListItem.stories.js | New DescriptionListItem stories. |
| .storybook/stories/BorrowerProfile/CountryInfo.stories.js | New CountryInfo story using fixtures/mixins. |
| .storybook/stories/BorrowerProfile/CommentsAndWhySpecial.stories.js | New CommentsAndWhySpecial stories (admin/subscribed variants). |
| .storybook/stories/BorrowerProfile/BorrowerSideSheetWrapper.stories.js | New side sheet wrapper stories (open/closed). |
| .storybook/stories/BorrowerProfile/BorrowerSideSheetContent.stories.js | New side sheet content story. |
| .storybook/stories/BorrowerProfile/BorrowerCountry.stories.js | New BorrowerCountry stories (geocode fallback/loading). |
| .storybook/preview.js | Switches Storybook router to createMemoryHistory() and adds route handling. |
| .storybook/mixins/apollo-story-mixin.js | Adds setVariables() stub on mocked watchQuery() observable. |
dyersituations
approved these changes
Jun 16, 2026
BorrowerCountry and MoreAboutLoan Loading stories passed a Promise as queryResult, which apolloStoryMixin ignores; without loading:true the mocked query resolved immediately and no loading state rendered. Use loading:true with createQueryResult(), matching the SummaryCard pattern. AD-267
…ants The LessThanOneYear and MissingOptionalFields variants only toggled fields the component does not accept as props (startDate, loansPosted, totalAmountRaised, avgLoanSizePercentPerCapitaIncome), so they rendered identically to AllMetrics. Replace them with NoAverageCost (avgBorrowerCost 0 -> "N/A") and HighRiskRating, which drive props the component renders. AD-267
createMockLoan derived plannedExpirationDate from new Date(), making the fixture (and any rendered time/repayment text) drift day to day. Pin it to a fixed ISO date so story output is deterministic for visual regression. AD-267
SummaryCard declares no props; it derives loanId from the route and fetches the loan via Apollo. The :loan binding and its setup() were dead, so remove them to keep the stories aligned with the component's API. AD-267
emuvente
force-pushed
the
chore/borrower-profile-storybook-baseline
branch
from
dec2891 to
043ccad
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Adding stories for Borrower Profile components before the migration work lands.
Copilot summary:
This pull request adds comprehensive Storybook stories for all major components of the Borrower Profile feature, ensuring each component can be visually tested in isolation with realistic data scenarios. It also improves Storybook's Vue router handling to prevent navigation issues within the Storybook iframe and enhances the Apollo mock mixin for better compatibility with stories that use variable changes.
The most important changes are:
Storybook stories for Borrower Profile components:
BorrowerCountry,BorrowerSideSheetContent,BorrowerSideSheetWrapper,CommentsAndWhySpecial,CountryInfo,DescriptionListItem,DetailsTabs,FieldPartnerDetails,JournalUpdates,LendCta,LendersAndTeams, andLoanDetails. These stories cover various states and edge cases for each component. [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12]Improvements to Storybook router setup:
createWebHistorytocreateMemoryHistoryand added a catch-all route to prevent navigation from breaking Storybook's iframe when components use$router.push()or similar methods. [1] [2]Enhancements to Apollo mock mixin:
setVariables()to the Apollo Storybook mixin to improve compatibility with components that interact with Apollo queries using variables.