Skip to content

Commit

Permalink
Ensure active assignments are rendered as selected ones (#6566)
Browse files Browse the repository at this point in the history
  • Loading branch information
acelaya authored Aug 14, 2024
1 parent e019551 commit 51337fa
Show file tree
Hide file tree
Showing 2 changed files with 55 additions and 39 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,22 @@ function elementScrollIsAtBottom(element: HTMLElement, offset = 20): boolean {
/** Get first item from an array, if any */
const firstItem = <T,>(array: T[]) => array[0] as T | undefined;

/**
* Represents a `Select.Option` for a specific assignment
*/
function AssignmentOption({ assignment }: { assignment: Assignment }) {
return (
<Select.Option value={`${assignment.id}`}>
<div className="flex flex-col gap-0.5">
{assignment.title}
<div className="text-grey-6 text-xs">
{formatDateTime(assignment.created)}
</div>
</div>
</Select.Option>
);
}

/**
* Renders drop-downs to select courses, assignments and/or students, used to
* filter dashboard activity metrics.
Expand Down Expand Up @@ -253,23 +269,11 @@ export default function DashboardActivityFilters({
>
<Select.Option value={undefined}>All assignments</Select.Option>
{activeAssignment ? (
<Select.Option
key={activeAssignment.id}
value={`${activeAssignment.id}`}
>
{activeAssignment.title}
</Select.Option>
<AssignmentOption assignment={activeAssignment} />
) : (
<>
{assignmentsResults.data?.map(assignment => (
<Select.Option key={assignment.id} value={`${assignment.id}`}>
<div className="flex flex-col gap-0.5">
{assignment.title}
<div className="text-grey-6 text-xs">
{formatDateTime(assignment.created)}
</div>
</div>
</Select.Option>
<AssignmentOption key={assignment.id} assignment={assignment} />
))}
{assignmentsResults.isLoading &&
!assignmentsResults.isLoadingFirstPage && (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -472,10 +472,12 @@ describe('DashboardActivityFilters', () => {
selectedIds: [],
onChange: sinon.stub(),
};
const created = '2024-06-10T09:55:44.701550';
const activeItem = {
activeItem: {
id: 123,
title: 'The active title',
created,
},
onClear: sinon.stub(),
};
Expand All @@ -490,6 +492,7 @@ describe('DashboardActivityFilters', () => {
selectId: 'courses-select',
allOption: 'All courses',
skippedAPIFetchIndex: 0,
expectedOptionTitle: 'The active title',
},
{
props: {
Expand All @@ -500,36 +503,45 @@ describe('DashboardActivityFilters', () => {
selectId: 'assignments-select',
allOption: 'All assignments',
skippedAPIFetchIndex: 1,
expectedOptionTitle: `The active title${formatDateTime(created)}`,
},
].forEach(({ props, selectId, allOption, skippedAPIFetchIndex }) => {
it('displays active item', () => {
const wrapper = createComponentWithProps(props);
const select = getSelectContent(wrapper, selectId);

assert.equal(select, 'The active title');
});
].forEach(
({
props,
selectId,
allOption,
skippedAPIFetchIndex,
expectedOptionTitle,
}) => {
it('displays active item', () => {
const wrapper = createComponentWithProps(props);
const select = getSelectContent(wrapper, selectId);

assert.equal(select, 'The active title');
});

it('displays only two options in select', () => {
const wrapper = createComponentWithProps(props);
const select = getSelect(wrapper, selectId);
const options = select.find(Select.Option);
it('displays only two options in select', () => {
const wrapper = createComponentWithProps(props);
const select = getSelect(wrapper, selectId);
const options = select.find(Select.Option);

assert.equal(options.length, 2);
assert.equal(options.at(0).text(), allOption);
assert.equal(options.at(1).text(), 'The active title');
});
assert.equal(options.length, 2);
assert.equal(options.at(0).text(), allOption);
assert.equal(options.at(1).text(), expectedOptionTitle);
});

it('does not load list of items', () => {
createComponentWithProps(props);
it('does not load list of items', () => {
createComponentWithProps(props);

assert.calledWith(
fakeUsePaginatedAPIFetch.getCall(skippedAPIFetchIndex),
sinon.match.string,
null, // The path should be null
sinon.match.any,
);
});
});
assert.calledWith(
fakeUsePaginatedAPIFetch.getCall(skippedAPIFetchIndex),
sinon.match.string,
null, // The path should be null
sinon.match.any,
);
});
},
);
});

it(
Expand Down

0 comments on commit 51337fa

Please sign in to comment.