-
Notifications
You must be signed in to change notification settings - Fork 1
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
MPDX-7531 outstanding commitments/special needs giving #834
Conversation
This pull request is automatically being deployed by Amplify Hosting (learn more). |
@canac I'm thinking about combining OutstandingNeeds and OutstandingCommitments into one component. I'm not sure it's worth the extra time or not though. Do you think this is worth doing? |
@wjames111 I think smaller components are more manageable to read, so I like how you have it right now with each table in its own component. |
@canac Okay great, I'm going to do some touch ups, and run the |
@canac It looks like these two additional components are causing CoachingDetail.test to fail. I can't seem to figure out what the issue is. I'm not all that comfortable with Jest yet, so any help you could give would be greatly appreciated. |
This branch has been manually merged with staging to fix merge conflicts. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Great work on this! 👍
src/components/Coaching/CoachingDetail/OutstandingCommitments/OutstandingCommitments.tsx
Outdated
Show resolved
Hide resolved
src/components/Coaching/CoachingDetail/OutstandingCommitments/OutstandingCommitments.tsx
Outdated
Show resolved
Hide resolved
src/components/Coaching/CoachingDetail/OutstandingCommitments/OutstandingCommitments.tsx
Outdated
Show resolved
Hide resolved
src/components/Coaching/CoachingDetail/OutstandingCommitments/OutstandingCommitments.tsx
Outdated
Show resolved
Hide resolved
src/components/Coaching/CoachingDetail/OutstandingCommitments/OutstandingCommitments.tsx
Outdated
Show resolved
Hide resolved
src/components/Coaching/CoachingDetail/OutstandingNeeds/OutstandingNeeds.tsx
Outdated
Show resolved
Hide resolved
@canac Thanks, couldn't have done without you. Appreciate the review, I'll get this updated hopefully by tomorrow depending on if I run into anymore issues. |
Yes, that would be good. The readme explains how to do it, and you'll want to use the
Since your tests explicitly check the page for the values you passed in, it's probably OK.
I'm not sure, but I lean towards making it match the original table as much as possible.
#826 will make the sidebar collapsible on smaller screens. Would this fix the issue you're referring to? |
Sure thing! I'm going to add @dr-bizz too to see if he has any thoughts. |
The sidebar actually seems fine now, it initially looked like it was cutoff after scrolling but now it shows the whole way down. I did attempt to add pagination to the OutstandingCommitments component in my last commit, but I must be doing something terribly wrong. If you happen to know what that is please feel free to share. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Were you going to add pagination to the other table? This should be basically done after you do that!
src/components/Coaching/CoachingDetail/OutstandingNeeds/OutstandingNeeds.tsx
Outdated
Show resolved
Hide resolved
src/components/Coaching/CoachingDetail/OutstandingCommitments/OutstandingCommitments.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Great work, just a couple of tweaks left! It looks like all my comments on OutstandingCommitments
apply to OutstandingNeeds
as well.
src/components/Coaching/CoachingDetail/OutstandingCommitments/OutstandingCommitments.graphql
Outdated
Show resolved
Hide resolved
src/components/Coaching/CoachingDetail/OutstandingCommitments/OutstandingCommitments.graphql
Outdated
Show resolved
Hide resolved
src/components/Coaching/CoachingDetail/OutstandingCommitments/OutstandingCommitments.tsx
Outdated
Show resolved
Hide resolved
src/components/Coaching/CoachingDetail/OutstandingCommitments/OutstandingCommitments.tsx
Outdated
Show resolved
Hide resolved
src/components/Coaching/CoachingDetail/LoadCoachingDetail.graphql
Outdated
Show resolved
Hide resolved
@canac the latest issues on this PR have been amended. Thanks for all your help on this, let me know if you catch anything else. |
I just realized that we should make the tests more robust. Checking that the table headers are in the document is great, but we should also check that they show the data. Where you have |
</GqlMockedProvider>, | ||
); | ||
|
||
expect(await getAllByTestId('Line').length).toEqual(8); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
getAllByTestId
doesn't return a promise, so the await
here doesn't do anything, and the it
function doesn't need to be async
.
</GqlMockedProvider>, | ||
); | ||
|
||
expect(await findByText('Name')).toBeVisible(); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Usually we do .toBeInTheDocument()
in tests.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I redid the tests to use .toBeInTheDocument()
and removed the unnecessary async await
. Also added additional data to specifically test for. Let me know if it needs any changes, Jest is still pretty new to me.
Yeah the test is super minimal, pretty much just to have it in there. I wanted to add more values to test for but the mock data seems to generate its own. That's helpful to know how to add specific values to check for, I'll get those added in. |
@canac how are we looking? |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Great work with making those tests more specific! I have just a few suggestions. Most of comments apply to both tests.
|
||
const accountListId = 'account-list-1'; | ||
|
||
describe('LoadSkeleton', () => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Normally the root describe is the name of the component.
describe('LoadSkeleton', () => { | |
describe('OutstandingCommitments', () => { |
expect(getAllByTestId('Line').length).toEqual(8); | ||
}); | ||
|
||
it('Renders outstanding recurring commitments correctly', async () => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Normally the it
names aren't capitalized so that when combined with all the parent describe
names, it reads like a sentence (i.e. "OutstandingCommitments renders outstanding recurring commitments correctly").
it('Renders outstanding recurring commitments correctly', async () => { | |
it('renders outstanding recurring commitments correctly', async () => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
That makes sense, I didn't think to format it that way. Thanks for pointing that out.
> | ||
<OutstandingCommitments | ||
accountListId={accountListId} | ||
accountListType={AccountListTypeEnum.Coaching} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Let's switch this to AccountListTypeEnum.Own
since our mocks are for an own account list.
</GqlMockedProvider>, | ||
); | ||
|
||
expect(getAllByTestId('Line').length).toEqual(8); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
expect(getAllByTestId('Line').length).toEqual(8); | |
expect(getAllByTestId('Line')).toHaveLength(8); |
pledges: { | ||
nodes: [ | ||
{ | ||
amount: 0, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Let's give this amount a value and check for it in the document since the test below checks for the N/A case.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The code looks great! Good job with everything!
Before we merge lets squash the commit history down to two commits: one for the outstanding commitments and one for the outstanding needs. That way we have a cleaner history in git.
bfe6262
to
f3e1a02
Compare
Description
Potential Changes
Checklist: