Enhance DocsHelp component with additional form validation tests and improve feedback submission handling. Added coverage tests for empty comment validation and successful feedback submission. Updated success message content and ensured form visibility is managed correctly.

chauhan-varun · chauhan-varun · commit 929b33bf52bf · 2025-07-10T09:51:57.000+05:30
diff --git a/cypress/components/DocsHelp.cy.tsx b/cypress/components/DocsHelp.cy.tsx
@@ -129,7 +129,14 @@ describe('DocsHelp Component', () => {
     // check if clicking on submit button should show success message
     cy.get(FEEDBACK_FORM_SUCCESS_MESSAGE)
       .should('have.prop', 'tagName', 'P')
-      .and('contains', /Thank you for your feedback!/i);
+      .should('contain.text', 'Thanks for the feedback! Feel free to join the')
+      .and('contain.text', '#website')
+      .and('contain.text', 'channel on')
+      .and('contain.text', 'Slack')
+      .and('contain.text', 'for further discussion.');
+
+    // Verify the form is no longer visible
+    cy.get(FEEDBACK_FORM).should('not.exist');
   });
 
   /* test feedback form functionality when status code is 500
@@ -262,6 +269,8 @@ describe('DocsHelp Component', () => {
         expectedGitRedirect,
       );
     });
+
+    // Test direct URL case
     const customLink = 'https://example.com/custom-docs';
     cy.mount(<DocsHelp fileRenderType={customLink} />);
     cy.get('[data-test="edit-on-github-link"]').should(
@@ -280,4 +289,36 @@ describe('DocsHelp Component', () => {
     cy.mount(<DocsHelp fileRenderType='indexmd' showEditOption={false} />);
     cy.get('[data-test="edit-on-github-link"]').should('not.exist');
   });
+
+  // Test form validation for empty comment submission
+  it('should show error when submitting feedback with empty comment', () => {
+    // Click on yes button to show feedback form
+    cy.get(FEEDBACK_FORM_YES_BUTTON).click();
+    cy.get(FEEDBACK_FORM).should('be.visible');
+
+    // Try to submit with empty comment
+    cy.get(FEEDBACK_FORM_SUBMIT_BUTTON).click();
+
+    // Check that the error styling is applied
+    cy.get(FEEDBACK_FORM_INPUT).should('have.class', 'border-red-500');
+
+    // Verify error message is displayed
+    cy.contains('Please provide feedback before submitting').should('be.visible');
+  });
+
+  // Test form validation for empty comment when creating GitHub issue
+  it('should show error when creating GitHub issue with empty comment', () => {
+    // Click on yes button to show feedback form
+    cy.get(FEEDBACK_FORM_YES_BUTTON).click();
+    cy.get(FEEDBACK_FORM).should('be.visible');
+
+    // Try to create GitHub issue with empty comment
+    cy.get(CREATE_GITHUB_ISSUE_BUTTON).click();
+
+    // Check that the error styling is applied
+    cy.get(FEEDBACK_FORM_INPUT).should('have.class', 'border-red-500');
+
+    // Verify error message is displayed
+    cy.contains('Please provide feedback before submitting').should('be.visible');
+  });
 });
diff --git a/cypress/components/DocsHelpCoverage.cy.tsx b/cypress/components/DocsHelpCoverage.cy.tsx
@@ -0,0 +1,75 @@
+import React from 'react';
+import { DocsHelp } from '~/components/DocsHelp';
+import mockNextRouter from '../plugins/mockNextRouterUtils';
+
+describe('DocsHelp Coverage Tests', () => {
+    beforeEach(() => {
+        mockNextRouter();
+        cy.viewport(1200, 800);
+    });
+
+    // Test for line 93-94: Empty comment validation
+    it('should validate empty comments on form submission', () => {
+        cy.mount(<DocsHelp />);
+        cy.get('[data-test="feedback-survey-yes-button"]').click();
+        cy.get('[data-test="feedback-form"]').should('be.visible');
+
+        // Try to submit with empty comment
+        cy.get('[data-test="feedback-form-input"]').clear();
+        cy.get('[data-test="feedback-submit-button"]').click();
+
+        // Verify error state
+        cy.get('[data-test="feedback-form-input"]').should('have.class', 'border-red-500');
+        cy.contains('Please provide feedback before submitting').should('be.visible');
+    });
+
+    // Test for line 133-134: Successful feedback submission
+    it('should handle successful feedback submission and reset form', () => {
+        cy.mount(<DocsHelp />);
+
+        // Intercept API call
+        cy.intercept(
+            'POST',
+            'https://script.google.com/macros/s/AKfycbx9KA_BwTdsYgOfTLrHAxuhHs_wgYibB5_Msj9XP1rL5Ip4A20g1O609xAuTZmnbhRv/exec',
+            {
+                statusCode: 200,
+                body: { success: true },
+            }
+        ).as('feedback');
+
+        // Fill and submit form
+        cy.get('[data-test="feedback-survey-yes-button"]').click();
+        cy.get('[data-test="feedback-form-input"]').type('Test feedback');
+        cy.get('[data-test="feedback-submit-button"]').click();
+
+        // Wait for API response
+        cy.wait('@feedback');
+
+        // Verify success message and form reset
+        cy.get('[data-test="feedback-form-success-message"]').should('be.visible');
+        cy.get('[data-test="feedback-form"]').should('not.exist');
+    });
+
+    // Test for line 277: Direct URL in getGitRedirect
+    it('should use direct URL when fileRenderType is a URL', () => {
+        const directUrl = 'https://example.com/direct-url';
+        cy.mount(<DocsHelp fileRenderType={directUrl} />);
+
+        // Verify the URL is used directly
+        cy.get('[data-test="edit-on-github-link"]')
+            .should('have.attr', 'href', directUrl);
+    });
+
+    // Test for GitHub issue creation with empty comment
+    it('should validate empty comments when creating GitHub issue', () => {
+        cy.mount(<DocsHelp />);
+        cy.get('[data-test="feedback-survey-yes-button"]').click();
+
+        // Try to create issue with empty comment
+        cy.get('[data-test="create-github-issue-button"]').click();
+
+        // Verify error state
+        cy.get('[data-test="feedback-form-input"]').should('have.class', 'border-red-500');
+        cy.contains('Please provide feedback before submitting').should('be.visible');
+    });
+}); 
diff --git a/cypress/components/DocsHelpGitRedirect.cy.tsx b/cypress/components/DocsHelpGitRedirect.cy.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { DocsHelp } from '~/components/DocsHelp';
+import mockNextRouter from '../plugins/mockNextRouterUtils';
+
+describe('DocsHelp GitRedirect Tests', () => {
+    beforeEach(() => {
+        mockNextRouter();
+    });
+
+    it('should use direct URL when fileRenderType is a URL', () => {
+        // This test specifically targets line 67-69 in DocsHelp.tsx
+        const directUrl = 'https://github.com/direct-url';
+        cy.mount(<DocsHelp fileRenderType={directUrl} />);
+
+        // Verify the URL is used directly without modification
+        cy.get('[data-test="edit-on-github-link"]')
+            .should('have.attr', 'href')
+            .and('eq', directUrl);
+    });
+
+    it('should handle different file types correctly', () => {
+        // Test all file type cases
+        const types = [
+            { type: 'tsx', expected: '/index.page.tsx' },
+            { type: '_indexmd', expected: '/_index.md' },
+            { type: 'indexmd', expected: '/index.md' },
+            { type: '_md', expected: '.md' },
+        ];
+
+        types.forEach(({ type, expected }) => {
+            cy.mount(<DocsHelp fileRenderType={type} />);
+
+            cy.get('[data-test="edit-on-github-link"]')
+                .should('have.attr', 'href')
+                .and('include', expected);
+        });
+    });
+}); 
