TESTING EXTERNAL SCRIPT: external merge request from Contributor#37791
TESTING EXTERNAL SCRIPT: external merge request from Contributor#37791jacquesikot wants to merge 5 commits intoreleasefrom
Conversation
Use fallback values for alt property Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Dynamic binding and length validation. Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
…hore/external-contribution-37371
jacquesikot
requested review from
ApekshaBhosale and
sagar-qa007
as code owners
WalkthroughThe changes in this pull request enhance the testing and functionality of the Image Widget, particularly focusing on Base64 image validation and alternative text. New tests have been added to verify the presence of alternative text in images, and the test suite has been updated to include these checks. Additionally, the Image Widget's code has been modified to support an 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
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
📒 Files selected for processing (5)
app/client/cypress/e2e/Regression/ClientSide/Widgets/Image/Image_base64_spec.js(1 hunks)app/client/cypress/e2e/Regression/ClientSide/Widgets/Image/Image_spec.js(1 hunks)app/client/cypress/fixtures/TestDataSet1.json(2 hunks)app/client/src/widgets/ImageWidget/component/index.tsx(2 hunks)app/client/src/widgets/ImageWidget/widget/index.tsx(3 hunks)
🧰 Additional context used
📓 Path-based instructions (3)
app/client/cypress/e2e/Regression/ClientSide/Widgets/Image/Image_base64_spec.js (1)
Pattern app/client/cypress/**/**.*: Review the following e2e test code written using the Cypress test library. Ensure that:
- Follow best practices for Cypress code and e2e automation.
- Avoid using cy.wait in code.
- Avoid using cy.pause in code.
- Avoid using agHelper.sleep().
- Use locator variables for locators and do not use plain strings.
- Use data-* attributes for selectors.
- Avoid Xpaths, Attributes and CSS path.
- Avoid selectors like .btn.submit or button[type=submit].
- Perform logins via API with LoginFromAPI.
- Perform logout via API with LogOutviaAPI.
- Perform signup via API with SignupFromAPI.
- Avoid using it.only.
- Avoid using after and aftereach in test cases.
- Use multiple assertions for expect statements.
- Avoid using strings for assertions.
- Do not use duplicate filenames even with different paths.
- Avoid using agHelper.Sleep, this.Sleep in any file in code.
app/client/cypress/e2e/Regression/ClientSide/Widgets/Image/Image_spec.js (1)
Pattern app/client/cypress/**/**.*: Review the following e2e test code written using the Cypress test library. Ensure that:
- Follow best practices for Cypress code and e2e automation.
- Avoid using cy.wait in code.
- Avoid using cy.pause in code.
- Avoid using agHelper.sleep().
- Use locator variables for locators and do not use plain strings.
- Use data-* attributes for selectors.
- Avoid Xpaths, Attributes and CSS path.
- Avoid selectors like .btn.submit or button[type=submit].
- Perform logins via API with LoginFromAPI.
- Perform logout via API with LogOutviaAPI.
- Perform signup via API with SignupFromAPI.
- Avoid using it.only.
- Avoid using after and aftereach in test cases.
- Use multiple assertions for expect statements.
- Avoid using strings for assertions.
- Do not use duplicate filenames even with different paths.
- Avoid using agHelper.Sleep, this.Sleep in any file in code.
app/client/cypress/fixtures/TestDataSet1.json (1)
Pattern app/client/cypress/**/**.*: Review the following e2e test code written using the Cypress test library. Ensure that:
- Follow best practices for Cypress code and e2e automation.
- Avoid using cy.wait in code.
- Avoid using cy.pause in code.
- Avoid using agHelper.sleep().
- Use locator variables for locators and do not use plain strings.
- Use data-* attributes for selectors.
- Avoid Xpaths, Attributes and CSS path.
- Avoid selectors like .btn.submit or button[type=submit].
- Perform logins via API with LoginFromAPI.
- Perform logout via API with LogOutviaAPI.
- Perform signup via API with SignupFromAPI.
- Avoid using it.only.
- Avoid using after and aftereach in test cases.
- Use multiple assertions for expect statements.
- Avoid using strings for assertions.
- Do not use duplicate filenames even with different paths.
- Avoid using agHelper.Sleep, this.Sleep in any file in code.
📓 Learnings (4)
app/client/cypress/e2e/Regression/ClientSide/Widgets/Image/Image_base64_spec.js (1)
Learnt from: vhemery
PR: appsmithorg/appsmith#37371
File: app/client/cypress/e2e/Regression/ClientSide/Widgets/Image/Image_base64_spec.js:35-37
Timestamp: 2024-11-13T09:11:36.959Z
Learning: In the file `app/client/cypress/e2e/Regression/ClientSide/Widgets/Image/Image_base64_spec.js`, when writing Cypress end-to-end tests for the Image Widget in JavaScript, use `viewWidgetsPage.imageinner` as the selector when asserting 'src' and 'alt' attributes to maintain consistency.
app/client/cypress/e2e/Regression/ClientSide/Widgets/Image/Image_spec.js (2)
Learnt from: vhemery
PR: appsmithorg/appsmith#37371
File: app/client/cypress/e2e/Regression/ClientSide/Widgets/Image/Image_base64_spec.js:35-37
Timestamp: 2024-11-13T09:11:36.959Z
Learning: In the file `app/client/cypress/e2e/Regression/ClientSide/Widgets/Image/Image_base64_spec.js`, when writing Cypress end-to-end tests for the Image Widget in JavaScript, use `viewWidgetsPage.imageinner` as the selector when asserting 'src' and 'alt' attributes to maintain consistency.
Learnt from: vhemery
PR: appsmithorg/appsmith#37371
File: app/client/cypress/e2e/Regression/ClientSide/Widgets/Image/Image_spec.js:44-47
Timestamp: 2024-11-13T09:07:54.931Z
Learning: When reviewing code in `app/client/cypress/**` paths, ensure that suggestions are appropriate for test code and not for `src` code. Avoid applying source code checks to test code unless relevant.
app/client/src/widgets/ImageWidget/component/index.tsx (1)
Learnt from: vhemery
PR: appsmithorg/appsmith#37371
File: app/client/src/widgets/ImageWidget/widget/index.tsx:382-382
Timestamp: 2024-11-13T09:13:11.481Z
Learning: In the `ImageWidget` component (`app/client/src/widgets/ImageWidget/widget/index.tsx`), the `alt` property should remain optional (`alt?: string;`) because there are fallback values when the user does not provide alternative text.
app/client/src/widgets/ImageWidget/widget/index.tsx (1)
Learnt from: vhemery
PR: appsmithorg/appsmith#37371
File: app/client/src/widgets/ImageWidget/widget/index.tsx:382-382
Timestamp: 2024-11-13T09:13:11.481Z
Learning: In the `ImageWidget` component (`app/client/src/widgets/ImageWidget/widget/index.tsx`), the `alt` property should remain optional (`alt?: string;`) because there are fallback values when the user does not provide alternative text.
🔇 Additional comments (8)
app/client/cypress/e2e/Regression/ClientSide/Widgets/Image/Image_base64_spec.js (2)
31-31: LGTM!
The evaluation of the alternative text value is implemented correctly.
35-37: LGTM! Follows recommended selector usage
The implementation correctly uses the viewWidgetsPage.imageinner selector as recommended in previous reviews.
app/client/cypress/e2e/Regression/ClientSide/Widgets/Image/Image_spec.js (1)
Line range hint 1-100: Test structure follows best practices
The test follows Cypress best practices with:
- Proper use of describe and it blocks
- Appropriate test grouping and naming
- Correct use of data attributes and selectors
- Multiple assertions where appropriate
app/client/src/widgets/ImageWidget/widget/index.tsx (2)
348-348: LGTM!
Clean implementation of the alt property with proper undefined fallback.
389-389: LGTM!
Correct TypeScript interface definition with optional alt property.
app/client/src/widgets/ImageWidget/component/index.tsx (2)
294-294: Well-structured alt text implementation with proper fallbacks.
The implementation follows accessibility best practices by providing meaningful fallbacks when alt text is not specified.
413-413: LGTM - Interface addition follows established patterns.
The optional alt property is correctly typed and follows the component's existing property patterns.
app/client/cypress/fixtures/TestDataSet1.json (1)
95-95: LGTM! Good accessibility enhancement.
The addition of alt text fields enhances image accessibility by providing descriptive text for both base64 and regular images.
Let's verify the alt text usage in tests:
Also applies to: 99-99, 123-123
✅ Verification successful
Alt text fields are properly used in tests
The verification shows that the alt text fields are being properly tested:
Image_spec.jsverifies the alt text "Thor's hammer planted into the ground"Image_base64_spec.jsvalidates the alt text "A single pixel" for base64 images
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Verify that the new alt text fields are being used in tests
rg -A 5 "NewImageAltText|validateImageAltText|altText"
Length of output: 6484
| cy.testJsontext("alternativetext", this.dataSet.base64image.altText); | ||
| cy.wait("@updateLayout").should( | ||
| "have.nested.property", | ||
| "response.body.responseMeta.status", | ||
| 200, | ||
| ); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Replace cy.wait with better assertions
Instead of using cy.wait, consider using Cypress's built-in retry-ability with assertions that wait for the expected state.
cy.testJsontext("alternativetext", this.dataSet.base64image.altText);
- cy.wait("@updateLayout").should(
- "have.nested.property",
- "response.body.responseMeta.status",
- 200,
- );
+ cy.get("@updateLayout").should((response) => {
+ expect(response.response.body.responseMeta.status).to.equal(200);
+ });📝 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.
| cy.testJsontext("alternativetext", this.dataSet.base64image.altText); | |
| cy.wait("@updateLayout").should( | |
| "have.nested.property", | |
| "response.body.responseMeta.status", | |
| 200, | |
| ); | |
| cy.testJsontext("alternativetext", this.dataSet.base64image.altText); | |
| cy.get("@updateLayout").should((response) => { | |
| expect(response.response.body.responseMeta.status).to.equal(200); | |
| }); |
| /** | ||
| * @param{TEXT} Alternative text | ||
| */ | ||
| cy.testCodeMirrorLast(this.dataSet.NewImageAltText); | ||
| cy.get(viewWidgetsPage.imageinner) | ||
| .invoke("attr", "alt") | ||
| .should("contain", this.dataSet.validateImageAltText); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Alt text validation looks good, but remove cy.wait usage
The alt text validation is well implemented using the correct selector and fixture data. However, there's a cy.wait(1000) earlier in the test that should be replaced with a proper assertion.
Replace the wait with an assertion:
- cy.wait(1000);
+ cy.get(viewWidgetsPage.imageinner).should('exist');📝 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.
| /** | |
| * @param{TEXT} Alternative text | |
| */ | |
| cy.testCodeMirrorLast(this.dataSet.NewImageAltText); | |
| cy.get(viewWidgetsPage.imageinner) | |
| .invoke("attr", "alt") | |
| .should("contain", this.dataSet.validateImageAltText); | |
| /** | |
| * @param{TEXT} Alternative text | |
| */ | |
| cy.get(viewWidgetsPage.imageinner).should('exist'); | |
| cy.testCodeMirrorLast(this.dataSet.NewImageAltText); | |
| cy.get(viewWidgetsPage.imageinner) | |
| .invoke("attr", "alt") | |
| .should("contain", this.dataSet.validateImageAltText); |
| { | ||
| helpText: "Sets alternative text for the image", | ||
| propertyName: "alt", | ||
| label: "Alternative text", | ||
| controlType: "INPUT_TEXT", | ||
| placeholderText: "Alternative text", | ||
| isBindProperty: true, | ||
| defaultValue: "", | ||
| isTriggerProperty: false, | ||
| validation: { | ||
| type: ValidationTypes.TEXT, | ||
| params: { | ||
| required: true, | ||
| maxLength: 125 | ||
| } | ||
| }, | ||
| }, |
There was a problem hiding this comment.
Remove required validation for alt property
The alt property should remain optional as there are fallback values when users don't provide alternative text.
Apply this diff to fix the validation:
validation: {
type: ValidationTypes.TEXT,
params: {
- required: true,
maxLength: 125
}
},📝 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.
| { | |
| helpText: "Sets alternative text for the image", | |
| propertyName: "alt", | |
| label: "Alternative text", | |
| controlType: "INPUT_TEXT", | |
| placeholderText: "Alternative text", | |
| isBindProperty: true, | |
| defaultValue: "", | |
| isTriggerProperty: false, | |
| validation: { | |
| type: ValidationTypes.TEXT, | |
| params: { | |
| required: true, | |
| maxLength: 125 | |
| } | |
| }, | |
| }, | |
| { | |
| helpText: "Sets alternative text for the image", | |
| propertyName: "alt", | |
| label: "Alternative text", | |
| controlType: "INPUT_TEXT", | |
| placeholderText: "Alternative text", | |
| isBindProperty: true, | |
| defaultValue: "", | |
| isTriggerProperty: false, | |
| validation: { | |
| type: ValidationTypes.TEXT, | |
| params: { | |
| maxLength: 125 | |
| } | |
| }, | |
| }, |
| "base64image": { | ||
| "withoutPrefix": "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAAAAAA6fptVAAAACklEQVR4nGNiAAAABgADNjd8qAAAAABJRU5ErkJggg==", | ||
| "withPrefix": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAAAAAA6fptVAAAACklEQVR4nGNiAAAABgADNjd8qAAAAABJRU5ErkJggg==" | ||
| "withPrefix": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAAAAAA6fptVAAAACklEQVR4nGNiAAAABgADNjd8qAAAAABJRU5ErkJggg==", |
There was a problem hiding this comment.
Fix the trailing comma in base64 string.
The base64 string in withPrefix field contains a trailing comma which could cause parsing issues.
Apply this diff to fix the trailing comma:
- "withPrefix": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAAAAAA6fptVAAAACklEQVR4nGNiAAAABgADNjd8qAAAAABJRU5ErkJggg==",
+ "withPrefix": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAAAAAA6fptVAAAACklEQVR4nGNiAAAABgADNjd8qAAAAABJRU5ErkJggg=="📝 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.
| "withPrefix": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAAAAAA6fptVAAAACklEQVR4nGNiAAAABgADNjd8qAAAAABJRU5ErkJggg==", | |
| "withPrefix": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAAAAAA6fptVAAAACklEQVR4nGNiAAAABgADNjd8qAAAAABJRU5ErkJggg==" |
jacquesikot
added
ok-to-test
| ); | ||
| cy.EvaluateCurrentValue(this.dataSet.base64image.withPrefix); | ||
| cy.testJsontext("alternativetext", this.dataSet.base64image.altText); | ||
| cy.wait("@updateLayout").should( |
|
This PR has not seen activitiy for a while. It will be closed in 7 days unless further activity is detected. |
|
This PR has been closed because of inactivity. |
3 participants
Description
Fixes #
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.All"
🔍 Cypress test results
Caution
🔴 🔴 🔴 Some tests have failed.
Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/12064642042
Commit: f9c6707
Cypress dashboard.
Tags: @tag.All
Spec:
The following are new failures, please fix them before merging the PR:
- cypress/e2e/Regression/ClientSide/Widgets/Iframe/IframeTest_spec.ts
- cypress/e2e/Regression/ServerSide/ApiTests/API_MultiPart_Spec.ts
List of identified flaky tests.Thu, 28 Nov 2024 08:56:51 UTC
Communication
Should the DevRel and Marketing teams inform users about this change?
Summary by CodeRabbit
Release Notes
New Features
Bug Fixes
Documentation
Chores