Skip to content

Update HintsEditor layout and collapse behavior #5942

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Abhishek-Punhani wants to merge 2 commits into
base: unstable
Choose a base branch
from
+235 −100
Open

Update HintsEditor layout and collapse behavior #5942

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c8a825a
Update HintsEditor layout according to new figma specs and added coll…
Abhishek-Punhani May 27, 2026
076780e
refactor: update new hint button to use KIcon via slot with custom st…
Abhishek-Punhani May 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 22 additions & 3 deletions ...tcuration/contentcuration/frontend/channelEdit/components/HintsEditor/HintsEditor.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,10 @@ const renderComponent = props => {
});
};

const openHintsSection = async user => {
await user.click(screen.getByText(HintsEditor.$trs.hintsLabel));
};

const getHintCards = () => {
return screen.getAllByTestId('hint');
};
Expand All @@ -31,29 +35,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();
Expand All @@ -69,6 +79,7 @@ describe('HintsEditor', () => {
],
openHintIdx: 1,
});
await openHintsSection(user);

const hintCards = getHintCards();
const hintTextField = within(hintCards[1]).getByRole('textbox');
Expand All @@ -92,6 +103,7 @@ describe('HintsEditor', () => {
{ hint: 'Third hint', order: 3 },
],
});
await openHintsSection(user);

await user.click(screen.getByRole('button', { name: HintsEditor.$trs.newHintBtnLabel }));

Expand All @@ -114,6 +126,7 @@ describe('HintsEditor', () => {
],
openHintIdx: 0,
});
await openHintsSection(user);

const hintCards = getHintCards();
await user.click(hintCards[1]);
Expand All @@ -131,6 +144,7 @@ describe('HintsEditor', () => {
],
openHintIdx: 1,
});
await openHintsSection(user);

await clickToolbarAction({
action: AssessmentItemToolbarActions.MOVE_ITEM_UP,
Expand All @@ -156,6 +170,7 @@ describe('HintsEditor', () => {
],
openHintIdx: 0,
});
await openHintsSection(user);

await clickToolbarAction({
action: AssessmentItemToolbarActions.MOVE_ITEM_UP,
Expand All @@ -176,6 +191,7 @@ describe('HintsEditor', () => {
],
openHintIdx: 0,
});
await openHintsSection(user);

await clickToolbarAction({
action: AssessmentItemToolbarActions.MOVE_ITEM_DOWN,
Expand All @@ -201,6 +217,7 @@ describe('HintsEditor', () => {
],
openHintIdx: 1,
});
await openHintsSection(user);

await clickToolbarAction({
action: AssessmentItemToolbarActions.MOVE_ITEM_DOWN,
Expand All @@ -221,6 +238,7 @@ describe('HintsEditor', () => {
],
openHintIdx: 0,
});
await openHintsSection(user);

await clickToolbarAction({
action: AssessmentItemToolbarActions.DELETE_ITEM,
Expand All @@ -242,6 +260,7 @@ describe('HintsEditor', () => {
],
openHintIdx: 1,
});
await openHintsSection(user);

await clickToolbarAction({
action: AssessmentItemToolbarActions.DELETE_ITEM,
Expand Down
Loading
Loading