feat(tests): add tests for value change handling and confirmation popup in InContextDiscussionFields

Author: bra-i-am

src/advanced-settings/setting-card/SettingCard.test.jsx

@@ -105,6 +105,16 @@ describe('<SettingCard />', () => {
     expect(input).not.toBeDisabled();
   });
 
+  it('calls setIsEditableState when value changes and isEditableState is false', async () => {
+    // Test for line 45: setIsEditableState(true) called when value changes
+    const { getByLabelText } = render(<RootWrapper isEditableState={false} />);
+    const input = getByLabelText(/Setting Name/i);
+    fireEvent.change(input, { target: { value: 'new-different-value' } });
+    await waitFor(() => {
+      expect(setIsEditableState).toHaveBeenCalledWith(true);
+    });
+  });
+
   it('shows help popup when clicking info button', () => {
     render(<RootWrapper />);
     const helpButton = screen.getByRole('button', { name: /show help text/i });

src/pages-and-resources/discussions/app-config-form/apps/shared/InContextDiscussionFields.test.jsx

@@ -1,12 +1,13 @@
 // @ts-check
-import { render, screen } from '@testing-library/react';
+import { render, screen, fireEvent } from '@testing-library/react';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { Formik, Form } from 'formik';
 import InContextDiscussionFields from './InContextDiscussionFields';
 
 const defaultProps = {
   onBlur: jest.fn(),
   onChange: jest.fn(),
+  setFieldValue: jest.fn(),
   values: {
     enableGradedUnits: false,
     groupAtSubsection: false,
@@ -17,9 +18,11 @@ const renderComponent = (props = {}) =>
   render(
     <IntlProvider locale="en">
       <Formik initialValues={defaultProps.values} onSubmit={jest.fn()}>
-        <Form>
-          <InContextDiscussionFields {...defaultProps} {...props} />
-        </Form>
+        {() => (
+          <Form>
+            <InContextDiscussionFields {...defaultProps} {...props} />
+          </Form>
+        )}
       </Formik>
     </IntlProvider>,
   );
@@ -40,12 +43,15 @@ describe('InContextDiscussionFields', () => {
     expect(screen.getByText(/Visibility of in-context discussions/)).toBeInTheDocument();
   });
 
-  it('accepts different values', () => {
+  it('renders with default disabled (false)', () => {
+    // Test default param - no disabled prop passed
+    renderComponent();
+    expect(screen.getByText(/Visibility of in-context discussions/)).toBeInTheDocument();
+  });
+
+  it('renders with enableGradedUnits true (shows cancel labels)', () => {
     renderComponent({
-      values: {
-        enableGradedUnits: true,
-        groupAtSubsection: true,
-      },
+      values: { enableGradedUnits: true, groupAtSubsection: false },
     });
     expect(screen.getByText(/Visibility of in-context discussions/)).toBeInTheDocument();
   });
@@ -65,4 +71,28 @@ describe('InContextDiscussionFields', () => {
     const switchControl = screen.getByLabelText(/enable discussions/i);
     expect(switchControl).toBeDisabled();
   });
+
+  it('shows confirmation popup and handles confirm', () => {
+    renderComponent({ disabled: false, setFieldValue: jest.fn() });
+    // Click the switch to show popup
+    const switchControl = screen.getByLabelText(/enable discussions/i);
+    fireEvent.click(switchControl);
+    // Check popup appears with confirm button
+    expect(screen.getByText(/Confirm/i)).toBeInTheDocument();
+    // Click confirm
+    fireEvent.click(screen.getByText(/Confirm/i));
+    // Popup should close (no longer visible)
+  });
+
+  it('shows confirmation popup and handles cancel', () => {
+    renderComponent({ disabled: false, setFieldValue: jest.fn() });
+    // Click the switch to show popup
+    const switchControl = screen.getByLabelText(/enable discussions/i);
+    fireEvent.click(switchControl);
+    // Check popup appears with cancel button
+    expect(screen.getByText(/Cancel/i)).toBeInTheDocument();
+    // Click cancel
+    fireEvent.click(screen.getByText(/Cancel/i));
+    // Popup should close (no longer visible)
+  });
 });