feat: create frontend mock endpoint for get codelists #14513
Conversation
|
Warning Rate limit exceeded@wrt95 has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 17 minutes and 36 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. 📒 Files selected for processing (3)
📝 WalkthroughWalkthroughThis pull request introduces functionality for organizational level code lists across multiple frontend files. It adds a new mock implementation for fetching code lists, creates a custom query hook, updates the query key enum, and provides a Jest mock function for testing. The changes prepare the groundwork for retrieving and managing organizational level code lists with a placeholder implementation that can be replaced with a backend endpoint in the future. Changes
Possibly related PRs
Suggested labels
Suggested reviewers
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
github-actions
bot
added
solution/studio/designer
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
frontend/packages/shared/src/api/queries.ts (1)
205-213: Consider enhancing the mock implementation.A few suggestions:
- The commented code for testing empty lists could be moved to a separate exported constant for better reusability.
- Consider adding a mock for error scenarios to test error handling in the UI.
Here's a suggested implementation:
+const emptyCodeListsMock: CodeList[] = []; + export const getOrgLevelCodeLists = async (): Promise<CodeList[]> => // TODO: Replace with endpoint when it is ready in backend. new Promise((resolve) => { setTimeout(() => { - // Replace the two resolves to test with empty list - // resolve([]); resolve(orgLevelCodeListsMock); }, 1000); }); + +// Export for testing +export const mockEmptyResponse = async (): Promise<CodeList[]> => + Promise.resolve(emptyCodeListsMock);
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
frontend/packages/shared/src/api/queries.ts(2 hunks)frontend/packages/shared/src/hooks/queries/useOrgLevelCodeListsQuery.ts(1 hunks)frontend/packages/shared/src/mocks/queriesMock.ts(1 hunks)frontend/packages/shared/src/types/QueryKey.ts(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: Build environment and run e2e test
- GitHub Check: Testing
🔇 Additional comments (4)
frontend/packages/shared/src/hooks/queries/useOrgLevelCodeListsQuery.ts (1)
6-12: Well-structured React Query implementation!The custom hook follows best practices with proper typing and clean implementation.
frontend/packages/shared/src/types/QueryKey.ts (1)
52-52: LGTM!The new enum entry follows the existing pattern and maintains alphabetical ordering.
frontend/packages/shared/src/api/queries.ts (1)
181-204: Mock data provides good test coverage.The mock data includes different value types (string, boolean, number) and varying array lengths, which is good for testing different scenarios.
frontend/packages/shared/src/mocks/queriesMock.ts (1)
80-80: LGTM!The Jest mock follows the existing pattern and maintains consistency with other mocks.
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #14513 +/- ##
=======================================
Coverage 95.69% 95.70%
=======================================
Files 1902 1903 +1
Lines 24715 24723 +8
Branches 2829 2829
=======================================
+ Hits 23652 23660 +8
Misses 802 802
Partials 261 261 ☔ View full report in Codecov by Sentry. |
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
frontend/packages/shared/src/hooks/queries/useOrgLevelCodeListsQuery.test.ts (1)
14-18: Improve render helper function flexibility.The current implementation always waits for success state, which won't work for testing error scenarios. Also, consider adding TypeScript return type annotation.
Consider applying this diff:
-const render = async () => { +const render = async (waitForSuccess = true) => { const { result } = renderHookWithProviders(() => useOrgLevelCodeListsQuery()); - await waitFor(() => expect(result.current.isSuccess).toBe(true)); + if (waitForSuccess) { + await waitFor(() => expect(result.current.isSuccess).toBe(true)); + } return result; -}; +} as const;
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
frontend/packages/shared/src/hooks/queries/useOrgLevelCodeListsQuery.test.ts(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: Build environment and run e2e test
- GitHub Check: Testing
🔇 Additional comments (1)
frontend/packages/shared/src/hooks/queries/useOrgLevelCodeListsQuery.test.ts (1)
1-4: LGTM! All necessary imports are present.The imports cover all required testing utilities and mock implementations.
| describe('useOrgLevelCodeListsQuery', () => { | ||
| it('calls getOptionListsReferences with the correct parameters', () => { | ||
| render(); | ||
| expect(queriesMock.getOrgLevelCodeLists).toHaveBeenCalledWith(); | ||
| expect(queriesMock.getOrgLevelCodeLists).toHaveBeenCalledTimes(1); | ||
| }); | ||
| }); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Enhance test coverage and fix test description.
The current test suite has several areas for improvement:
- The test description mentions "getOptionListsReferences" but tests "getOrgLevelCodeLists"
- Missing test cases for:
- Verifying the returned data structure
- Error handling
- Loading states
Consider applying this diff:
describe('useOrgLevelCodeListsQuery', () => {
- it('calls getOptionListsReferences with the correct parameters', () => {
+ it('calls getOrgLevelCodeLists and returns the code lists data', () => {
render();
expect(queriesMock.getOrgLevelCodeLists).toHaveBeenCalledWith();
expect(queriesMock.getOrgLevelCodeLists).toHaveBeenCalledTimes(1);
+ expect(result.current.data).toEqual(expect.any(Array));
});
+
+ it('handles error states correctly', async () => {
+ queriesMock.getOrgLevelCodeLists.mockRejectedValueOnce(new Error('Failed to fetch'));
+ const { result } = renderHookWithProviders(() => useOrgLevelCodeListsQuery());
+ await waitFor(() => expect(result.current.isError).toBe(true));
+ expect(result.current.error).toBeDefined();
+ });
+
+ it('shows loading state while fetching data', () => {
+ const { result } = renderHookWithProviders(() => useOrgLevelCodeListsQuery());
+ expect(result.current.isLoading).toBe(true);
+ });
});Committable suggestion skipped: line range outside the PR's diff.
There was a problem hiding this comment.
Vi har en egen sak for hooks (#14505), så du må gjerne flytte dette ut i en separat PR.
|
|
||
| // Org level code lists | ||
|
|
||
| const orgLevelCodeListsMock: CodeList[] = [ |
There was a problem hiding this comment.
Responsen bør også inneholde tittel på kodelistene. Jeg foreslår at vi bruker typen OptionListsResponse her. Da blir det likt som det vi bruker på appnivå.
There was a problem hiding this comment.
Som snakket om på Slack så brukte jeg feil type opprinnelig 😅 Det endres nå
| }, | ||
| ], | ||
| ]; | ||
| export const getOrgLevelCodeLists = async (): Promise<CodeList[]> => |
There was a problem hiding this comment.
Denne bør ta imot org som parameter. Det er ikke så farlig at den ikke blir brukt i mocken.
| ], | ||
| ]; | ||
| export const getOrgLevelCodeLists = async (): Promise<CodeList[]> => | ||
| // TODO: Replace with endpoint when it is ready in backend. |
There was a problem hiding this comment.
| // TODO: Replace with endpoint when it is ready in backend. | |
| // TODO: Replace with endpoint when it is ready in backend. https://github.com/Altinn/altinn-studio/issues/14482 |
| // Replace the two resolves to test with empty list | ||
| // resolve([]); |
There was a problem hiding this comment.
Skal denne kommentaren være her?
| // Replace the two resolves to test with empty list | ||
| // resolve([]); | ||
| resolve(orgLevelCodeListsMock); | ||
| }, 1000); |
There was a problem hiding this comment.
Godt tenkt å simulere treghet i responsen, men et helt sekund er kanskje litt lenge? Det kan det jo bli litt tungt å jobbe med. Har du vurdert kortere tid, typ 100-200 millisekunder?
There was a problem hiding this comment.
Satt bare det tallet vi brukte på Ansattporten. Er helt samme for min del, så kan endre til 200 😄
|
Closing this as it will be fixed during today's workshop. |
Description
Related Issue(s)
Verification
Summary by CodeRabbit
Summary by CodeRabbit
New Features
Chores
The changes enhance the application's data retrieval capabilities for organizational code lists with a new query mechanism.