Merge pull request learningequality#5942 from Abhishek-Punhani/Issue5914

Update HintsEditor layout and collapse behavior

Author: AlexVelezLl

contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemEditor/AssessmentItemEditor.vue

@@ -106,7 +106,10 @@
           @close="closeAnswer"
         />
 
-        <VDivider class="hints-divider" />
+        <div
+          class="hints-divider"
+          :style="{ borderTop: `1px solid ${$themeTokens.fineLine}` }"
+        ></div>
 
         <HintsEditor
           :hints="hints"

contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemToolbar.vue

@@ -298,14 +298,14 @@
 
   .assessment-item-toolbar {
     display: flex;
-    gap: 16px;
+    gap: 4px;
     align-items: center;
     justify-content: flex-end;
   }
 
   .icon-actions-wrapper {
     display: flex;
-    gap: 16px;
+    gap: 4px;
     align-items: center;
   }
 

contentcuration/contentcuration/frontend/channelEdit/components/HintsEditor/HintsEditor.spec.js

@@ -5,6 +5,11 @@ import { AssessmentItemToolbarActions } from '../../constants';
 import HintsEditor from './HintsEditor';
 
 jest.mock('shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue');
+jest.mock('kolibri-design-system/lib/composables/useKResponsiveWindow', () => {
+  return function useKResponsiveWindow() {
+    return { windowBreakpoint: { value: 4 } };
+  };
+});
 
 configure({
   testIdAttribute: 'data-test',
@@ -20,6 +25,10 @@ const renderComponent = props => {
   });
 };
 
+const openHintsSection = async user => {
+  await user.click(screen.getByText(HintsEditor.$trs.hintsLabel));
+};
+
 const getHintCards = () => {
   return screen.getAllByTestId('hint');
 };
@@ -31,29 +40,35 @@ const clickToolbarAction = async ({ action, hintIdx, user }) => {
 };
 
 describe('HintsEditor', () => {
-  it('smoke test', () => {
+  it('smoke test', async () => {
+    const user = userEvent.setup();
     renderComponent();
+    await openHintsSection(user);
 
     expect(
       screen.getByRole('button', { name: HintsEditor.$trs.newHintBtnLabel }),
     ).toBeInTheDocument();
   });
 
-  it('shows an empty-state message when a question has no hints', () => {
+  it('shows an empty-state message when a question has no hints', async () => {
+    const user = userEvent.setup();
     renderComponent({
       hints: [],
     });
+    await openHintsSection(user);
 
     expect(screen.getByText(HintsEditor.$trs.noHintsPlaceholder)).toBeInTheDocument();
   });
 
-  it('shows hints in the same order as the question', () => {
+  it('shows hints in the same order as the question', async () => {
+    const user = userEvent.setup();
     renderComponent({
       hints: [
         { hint: 'First hint', order: 1 },
         { hint: 'Second hint', order: 2 },
       ],
     });
+    await openHintsSection(user);
 
     const hintCards = getHintCards();
     expect(within(hintCards[0]).getByText('First hint')).toBeInTheDocument();
@@ -69,6 +84,7 @@ describe('HintsEditor', () => {
       ],
       openHintIdx: 1,
     });
+    await openHintsSection(user);
 
     const hintCards = getHintCards();
     const hintTextField = within(hintCards[1]).getByRole('textbox');
@@ -92,6 +108,7 @@ describe('HintsEditor', () => {
         { hint: 'Third hint', order: 3 },
       ],
     });
+    await openHintsSection(user);
 
     await user.click(screen.getByRole('button', { name: HintsEditor.$trs.newHintBtnLabel }));
 
@@ -114,6 +131,7 @@ describe('HintsEditor', () => {
       ],
       openHintIdx: 0,
     });
+    await openHintsSection(user);
 
     const hintCards = getHintCards();
     await user.click(hintCards[1]);
@@ -131,6 +149,7 @@ describe('HintsEditor', () => {
       ],
       openHintIdx: 1,
     });
+    await openHintsSection(user);
 
     await clickToolbarAction({
       action: AssessmentItemToolbarActions.MOVE_ITEM_UP,
@@ -156,6 +175,7 @@ describe('HintsEditor', () => {
       ],
       openHintIdx: 0,
     });
+    await openHintsSection(user);
 
     await clickToolbarAction({
       action: AssessmentItemToolbarActions.MOVE_ITEM_UP,
@@ -176,6 +196,7 @@ describe('HintsEditor', () => {
       ],
       openHintIdx: 0,
     });
+    await openHintsSection(user);
 
     await clickToolbarAction({
       action: AssessmentItemToolbarActions.MOVE_ITEM_DOWN,
@@ -201,6 +222,7 @@ describe('HintsEditor', () => {
       ],
       openHintIdx: 1,
     });
+    await openHintsSection(user);
 
     await clickToolbarAction({
       action: AssessmentItemToolbarActions.MOVE_ITEM_DOWN,
@@ -221,6 +243,7 @@ describe('HintsEditor', () => {
       ],
       openHintIdx: 0,
     });
+    await openHintsSection(user);
 
     await clickToolbarAction({
       action: AssessmentItemToolbarActions.DELETE_ITEM,
@@ -242,6 +265,7 @@ describe('HintsEditor', () => {
       ],
       openHintIdx: 1,
     });
+    await openHintsSection(user);
 
     await clickToolbarAction({
       action: AssessmentItemToolbarActions.DELETE_ITEM,
@@ -252,4 +276,26 @@ describe('HintsEditor', () => {
     expect(emitted().open).toHaveLength(1);
     expect(emitted().open[0][0]).toBe(0);
   });
+
+  it('toggles the hints section open and closed when clicking the header button', async () => {
+    const user = userEvent.setup();
+    renderComponent({
+      hints: [{ hint: 'First hint', order: 1 }],
+    });
+
+    // The header button acts as an accordion trigger with correct initial attributes
+    const headerButton = screen.getByRole('button', { name: HintsEditor.$trs.hintsLabel });
+    expect(headerButton).toHaveAttribute('aria-expanded', 'false');
+    expect(screen.queryByTestId('hint')).not.toBeInTheDocument();
+
+    // Click to open the section
+    await user.click(headerButton);
+    expect(headerButton).toHaveAttribute('aria-expanded', 'true');
+    expect(screen.getByTestId('hint')).toBeInTheDocument();
+
+    // Click to close the section
+    await user.click(headerButton);
+    expect(headerButton).toHaveAttribute('aria-expanded', 'false');
+    expect(screen.queryByTestId('hint')).not.toBeInTheDocument();
+  });
 });