Fix: WhatsApp Forms Cypress tests after icon updates and conditional rendering changes

[priyanshu6238]

Frontend pr: glific/glific-frontend#3696

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR updates the Cypress E2E test for WhatsApp Forms, aligning the test suite with API schema changes and UI interaction updates. The GraphQL response shape is updated from listWhatsappForms to whatsappForms, and the test flow for accessing read-only forms is changed from clicking an EditIcon to using row-text-based selection and a view-form control.

Changes

Cohort / File(s)	Summary
WhatsApp Forms E2E Test Updates cypress/e2e/wa_forms/wa_form.spec.ts	Updated GraphQL API response shape to use whatsappForms instead of listWhatsappForms; refactored "published flows should be read-only" test flow to locate form by row text ("second form") and click view-form control instead of EditIcon; test assertions for read-only field validation remain intact.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• PR #196: Introduces the same WhatsApp Forms API list shape change (whatsappForms) and the view-form selector pattern that this PR adopts.
• PR #199: Modifies the same test file with updates to UI selectors and interaction flows for WhatsApp Forms testing.

Suggested reviewers

• shijithkjayan

Poem

🐰 A form's new path to read-only grace,
No EditIcon in this place,
We find by text, we view with care,
The data shape floats through the air,
GraphQL whispers its fresh new name,
Tests still pass—the logic's the same! ✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Title check	✅ Passed	The title accurately describes the main changes: fixing Cypress tests for WhatsApp Forms due to icon updates and conditional rendering changes, which aligns with the test suite modifications and selector-based navigation updates.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/wa_forms_button

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

cypress/e2e/wa_forms/wa_form.spec.ts (1)

276-276: Consider making the selector more robust.

The text-based selector cy.contains('second form') is more descriptive than the previous approach but could be fragile if form names change or if partial text matches occur. Consider these alternatives:

1. Use a data-testid on the table row: cy.get('[data-testid="form-row-2"]').find('[data-testid="view-form"]')
2. Add exact match: cy.contains('tr', 'second form').find('[data-testid="view-form"]')

The current implementation works but may require maintenance if test data changes.

🔎 Alternative selector approaches

Option 1: Using form ID in data-testid

-    cy.contains('second form').closest('tr').find('[data-testid="view-form"]').click();
+    cy.get('[data-testid="form-row-2"]').find('[data-testid="view-form"]').click();

Option 2: More specific text match

-    cy.contains('second form').closest('tr').find('[data-testid="view-form"]').click();
+    cy.contains('tr', 'second form').find('[data-testid="view-form"]').click();

📜 Review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between dece3e6 and b40d1f8.

📒 Files selected for processing (1)

• cypress/e2e/wa_forms/wa_form.spec.ts

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: glific (1.18.3-otp-27, 27.3.3)

🔇 Additional comments (1)

cypress/e2e/wa_forms/wa_form.spec.ts (1)

34-34: No changes needed. The mock response structure is correct as-is. In GraphQL, operation names and response field names serve different purposes and don't need to match—listWhatsappForms (operation) → whatsappForms (response field) follows standard GraphQL conventions for list operations.