chore: adds automation for request templates component #37140
Conversation
rahulbarwal
added
the
Widgets & Accelerators Pod
WalkthroughThis pull request introduces a new test suite for the 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
Documentation and Community
|
github-actions
bot
added
the
skip-changelog
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Outside diff range and nitpick comments (1)
app/client/src/pages/Templates/Template/RequestTemplate.test.tsx (1)
21-30: Add documentation for the BaseComponentRender utility.
Consider adding JSDoc documentation and return type annotation for better maintainability.
+/**
+ * Utility function to render RequestTemplate component with necessary providers
+ * @param props - Component props
+ * @param storeToUse - Optional Redux store override
+ * @returns Rendered component with providers
+ */
const BaseComponentRender = (
props: RequestTemplateProps,
storeToUse = unitTestBaseMockStore,
-) => (
+): JSX.Element => (📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
📒 Files selected for processing (2)
- app/client/src/pages/Templates/Template/RequestTemplate.test.tsx (1 hunks)
- app/client/src/pages/Templates/Template/RequestTemplate.tsx (2 hunks)
🔇 Additional comments (4)
app/client/src/pages/Templates/Template/RequestTemplate.tsx (3)
2-2: LGTM! Import organization follows a clear pattern.
Also applies to: 7-7, 9-9, 12-12, 13-13
54-56: LGTM! Clean interface export with proper typing.
Line range hint 63-66: Verify URL opening security implementation.
The window.open() call is currently safe as it uses a constant URL. However, if this component is extended to accept dynamic URLs in the future, ensure proper URL validation is implemented.
app/client/src/pages/Templates/Template/RequestTemplate.test.tsx (1)
1-20: LGTM! Clean and well-organized imports.
The test file has all the necessary testing utilities and follows good practices for mock store setup.
| export const REQUEST_TEMPLATE_URL = | ||
| "https://app.appsmith.com/app/request-templates/request-list-6241c12fc99df2369931a714"; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Consider moving the URL to environment configuration.
Hardcoding the URL with a specific app ID might cause issues if the environment or app ID changes. Consider moving this to an environment configuration file.
-export const REQUEST_TEMPLATE_URL =
- "https://app.appsmith.com/app/request-templates/request-list-6241c12fc99df2369931a714";
+export const REQUEST_TEMPLATE_URL = process.env.REACT_APP_REQUEST_TEMPLATE_URL ||
+ "https://app.appsmith.com/app/request-templates/request-list-6241c12fc99df2369931a714";📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| export const REQUEST_TEMPLATE_URL = | |
| "https://app.appsmith.com/app/request-templates/request-list-6241c12fc99df2369931a714"; | |
| export const REQUEST_TEMPLATE_URL = process.env.REACT_APP_REQUEST_TEMPLATE_URL || | |
| "https://app.appsmith.com/app/request-templates/request-list-6241c12fc99df2369931a714"; |
| describe("RequestTemplate", () => { | ||
| it("should display correct message based on isBuildingBlock prop", () => { | ||
| const { getByText } = render( | ||
| BaseComponentRender({ isBuildingBlock: true }), | ||
| ); | ||
|
|
||
| expect( | ||
| getByText(createMessage(REQUEST_BUILDING_BLOCK)), | ||
| ).toBeInTheDocument(); | ||
| }); | ||
| it("should open REQUEST_TEMPLATE_URL in a new window when button is clicked", () => { | ||
| const openSpy = jest.spyOn(window, "open"); | ||
| const { getByText } = render( | ||
| BaseComponentRender({ isBuildingBlock: false }), | ||
| ); | ||
| const button = getByText(createMessage(REQUEST_TEMPLATE)); | ||
|
|
||
| fireEvent.click(button); | ||
| expect(openSpy).toHaveBeenCalledWith(REQUEST_TEMPLATE_URL); | ||
| }); | ||
|
|
||
| it('should trigger AnalyticsUtil logEvent with "REQUEST_NEW_TEMPLATE" when button is clicked', () => { | ||
| const logEventSpy = jest.spyOn(AnalyticsUtil, "logEvent"); | ||
| const { getByText } = render( | ||
| BaseComponentRender({ isBuildingBlock: false }), | ||
| ); | ||
| const button = getByText(createMessage(REQUEST_TEMPLATE)); | ||
|
|
||
| fireEvent.click(button); | ||
| expect(logEventSpy).toHaveBeenCalledWith("REQUEST_NEW_TEMPLATE"); | ||
| }); | ||
| }); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Consider adding error scenario test cases.
The test suite could benefit from additional test cases:
- Error handling when URL is invalid
- Component behavior with undefined props
- Multiple button clicks handling
Would you like me to provide example implementations for these test cases?
| it("should open REQUEST_TEMPLATE_URL in a new window when button is clicked", () => { | ||
| const openSpy = jest.spyOn(window, "open"); | ||
| const { getByText } = render( | ||
| BaseComponentRender({ isBuildingBlock: false }), | ||
| ); | ||
| const button = getByText(createMessage(REQUEST_TEMPLATE)); | ||
|
|
||
| fireEvent.click(button); | ||
| expect(openSpy).toHaveBeenCalledWith(REQUEST_TEMPLATE_URL); | ||
| }); |
There was a problem hiding this comment.
Add cleanup for window.open spy.
The test should clean up the spy after execution to prevent interference with other tests.
it("should open REQUEST_TEMPLATE_URL in a new window when button is clicked", () => {
const openSpy = jest.spyOn(window, "open");
+ afterEach(() => {
+ openSpy.mockRestore();
+ });
const { getByText } = render(
BaseComponentRender({ isBuildingBlock: false }),
);
const button = getByText(createMessage(REQUEST_TEMPLATE));
fireEvent.click(button);
- expect(openSpy).toHaveBeenCalledWith(REQUEST_TEMPLATE_URL);
+ expect(openSpy).toHaveBeenCalledWith(REQUEST_TEMPLATE_URL, "_blank");
});Committable suggestion was skipped due to low confidence.
…7140) ## Description This was done manually by QA team. This unit test ensures that a valid URL is present for requesting template and is opens correctly. Fixes #`Issue Number` _or_ Fixes `Issue URL` > [!WARNING] > _If no issue exists, please create an issue first, and check with the maintainers if the issue is valid._ ## Automation /ok-to-test tags="@tag.Templates" ### 🔍 Cypress test results <!-- This is an auto-generated comment: Cypress test results --> > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: <https://github.com/appsmithorg/appsmith/actions/runs/11592781616> > Commit: 9a48f05 > <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=11592781616&attempt=1" target="_blank">Cypress dashboard</a>. > Tags: `@tag.Templates` > Spec: > <hr>Wed, 30 Oct 2024 12:27:43 UTC <!-- end of auto-generated comment: Cypress test results --> ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [x] No <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Introduced a new test suite for the `RequestTemplate` component to validate its behavior and user interactions. - `REQUEST_TEMPLATE_URL` and `RequestTemplateProps` are now exported for use in other modules. - **Bug Fixes** - Enhanced testing to ensure correct message display and button functionality within the `RequestTemplate`. - **Documentation** - Updated import statements for better organization and clarity. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
Description
This was done manually by QA team. This unit test ensures that a valid URL is present for requesting template and is opens correctly.
Fixes #
Issue Numberor
Fixes
Issue URLWarning
If no issue exists, please create an issue first, and check with the maintainers if the issue is valid.
Automation
/ok-to-test tags="@tag.Templates"
🔍 Cypress test results
Tip
🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/11592781616
Commit: 9a48f05
Cypress dashboard.
Tags:
@tag.TemplatesSpec:
Wed, 30 Oct 2024 12:27:43 UTC
Communication
Should the DevRel and Marketing teams inform users about this change?
Summary by CodeRabbit
New Features
RequestTemplatecomponent to validate its behavior and user interactions.REQUEST_TEMPLATE_URLandRequestTemplatePropsare now exported for use in other modules.Bug Fixes
RequestTemplate.Documentation