Skip to content

Commit

Permalink
Implements task status flow (#1191)
Browse files Browse the repository at this point in the history 
* Added test case and refactored code

* Changed name of variables

* Made not needed test skip

* Added test for tasks status drop down

* Removed test cases

* Removed extra file

* Add test file

* Removed not needed test case

---------

Co-authored-by: Shubham Sharma <[email protected]>
  • Loading branch information
@skv93-coder
skv93-coder and Shubham Sharma authored Apr 26, 2024
1 parent a00373b commit 8eff409
Show file tree
Hide file tree
Showing 10 changed files with 467 additions and 96 deletions.
26 changes: 0 additions & 26 deletions __tests__/Unit/Components/Tasks/TaskDetails.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -529,32 +529,6 @@ describe('Task details Edit mode ', () => {
});
});

test('Should set new status on click at any option', async () => {
server.use(...taskDetailsHandler);
renderWithRouter(
<Provider store={store()}>
<TaskDetails taskID={details.taskID} />
</Provider>,
{ query: { dev: 'true' } }
);
await waitFor(() => {
const editButton = screen.getByRole('button', { name: 'Edit' });
fireEvent.click(editButton);
});
const opt = screen.getByRole('option', { name: /COMPLETED/i });
fireEvent.click(opt);

await waitFor(async () => {
const saveButton = await screen.findByRole('button', {
name: 'Save',
});
fireEvent.click(saveButton);
});
expect(screen.findByText(/COMPLETED/i)).not.toBeNull();

expect(screen.queryByText(/Successfully saved/i)).toBeNull();
});

test('Should render assignee dropdown', async () => {
renderWithRouter(
<Provider store={store()}>
Expand Down
162 changes: 162 additions & 0 deletions __tests__/Unit/Components/Tasks/TaskDropDown.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,162 @@
import TaskDropDown from '@/components/tasks/TaskDropDown';
import TaskDropDownModel from '@/components/tasks/TaskDropDownModel';
import { MSG_ON_0_PROGRESS, MSG_ON_100_PROGRESS } from '@/constants/constants';
import { BACKEND_TASK_STATUS } from '@/constants/task-status';
import { fireEvent, render, screen } from '@testing-library/react';

const onChange = jest.fn();

describe('TaskDropDown', () => {
beforeEach(() => {
onChange.mockReset();
});
it('should display model informing user that proceeding further will make progress 100%, on task status change from in progress to needs review', () => {
const oldProgress = 80;
const oldStatus = BACKEND_TASK_STATUS.IN_PROGRESS;

render(
<TaskDropDown
isDevMode={true}
oldProgress={oldProgress}
oldStatus={oldStatus}
onChange={onChange}
/>
);

const msg = `The progress of current task is ${oldProgress}%. ${MSG_ON_100_PROGRESS}`;
fireEvent.change(screen.getByTestId('task-status'), {
target: { value: BACKEND_TASK_STATUS.NEEDS_REVIEW },
});

const msgTag = screen.getByTestId('msg');
expect(msgTag).toBeInTheDocument();
expect(msgTag).toHaveTextContent(msg);
});
it('should display model informing user that proceeding further will make progress 0%, on task status change from needs review to in progress', () => {
const oldProgress = 100;
const oldStatus = BACKEND_TASK_STATUS.NEEDS_REVIEW;

render(
<TaskDropDown
isDevMode={true}
oldProgress={oldProgress}
oldStatus={oldStatus}
onChange={onChange}
/>
);

const msg = `The progress of current task is ${oldProgress}%. ${MSG_ON_0_PROGRESS}`;
fireEvent.change(screen.getByTestId('task-status'), {
target: { value: BACKEND_TASK_STATUS.IN_PROGRESS },
});

const msgTag = screen.getByTestId('msg');
expect(msgTag).toBeInTheDocument();
expect(msgTag).toHaveTextContent(msg);
});
it('should send changed status and progress if user click the proceed button of the model, on task status change from needs review to in progress', () => {
const oldProgress = 100;
const oldStatus = BACKEND_TASK_STATUS.NEEDS_REVIEW;

render(
<TaskDropDown
isDevMode={true}
oldProgress={oldProgress}
oldStatus={oldStatus}
onChange={onChange}
/>
);

fireEvent.change(screen.getByTestId('task-status'), {
target: { value: BACKEND_TASK_STATUS.IN_PROGRESS },
});
fireEvent.click(screen.getByTestId('proceed'));
expect(onChange).toHaveBeenCalledWith({
newStatus: BACKEND_TASK_STATUS.IN_PROGRESS,
newProgress: 0,
});
expect(onChange).toHaveBeenCalledTimes(1);
});
it('should send reset status and progress if user click the cancel button of the model, on task status change from needs review to in progress', () => {
const oldProgress = 100;
const oldStatus = BACKEND_TASK_STATUS.NEEDS_REVIEW;

render(
<TaskDropDown
isDevMode={true}
oldProgress={oldProgress}
oldStatus={oldStatus}
onChange={onChange}
/>
);

fireEvent.change(screen.getByTestId('task-status'), {
target: { value: BACKEND_TASK_STATUS.IN_PROGRESS },
});
fireEvent.click(screen.getByTestId('cancel'));
expect(onChange).toHaveBeenCalledTimes(0);
expect(screen.getByTestId('task-status')).toHaveValue(oldStatus);
});
it('should not show any model info on change of status from in progress to backlog', () => {
const oldProgress = 80;
const oldStatus = BACKEND_TASK_STATUS.IN_PROGRESS;

render(
<TaskDropDown
isDevMode={true}
oldProgress={oldProgress}
oldStatus={oldStatus}
onChange={onChange}
/>
);

fireEvent.change(screen.getByTestId('task-status'), {
target: { value: BACKEND_TASK_STATUS.BACKLOG },
});
expect(onChange).toHaveBeenCalledTimes(1);
expect(onChange).toHaveBeenCalledWith({
newStatus: BACKEND_TASK_STATUS.BACKLOG,
});
const msgTag = screen.queryByTestId('msg');
expect(msgTag).toBeNull();
});
it('should not show any model info on change of status from in progress to blocked', () => {
const oldProgress = 70;
const oldStatus = BACKEND_TASK_STATUS.IN_PROGRESS;

render(
<TaskDropDown
isDevMode={true}
oldProgress={oldProgress}
oldStatus={oldStatus}
onChange={onChange}
/>
);

fireEvent.change(screen.getByTestId('task-status'), {
target: { value: BACKEND_TASK_STATUS.BLOCKED },
});
expect(onChange).toHaveBeenCalledTimes(1);
expect(onChange).toHaveBeenCalledWith({
newStatus: BACKEND_TASK_STATUS.BLOCKED,
});
const msgTag = screen.queryByTestId('msg');
expect(msgTag).toBeNull();
});
describe('TaskDropDownModel', () => {
const handleProceed = jest.fn();
const resetProgressAndStatus = jest.fn();
it('should render message sent to it', () => {
const msg = 'This is random msg';
render(
<TaskDropDownModel
message={msg}
handleProceed={handleProceed}
resetProgressAndStatus={resetProgressAndStatus}
/>
);
const msgTag = screen.queryByTestId('msg');
expect(msgTag).toHaveTextContent(msg);
});
});
});
67 changes: 33 additions & 34 deletions src/components/taskDetails/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,11 +25,10 @@ import Progress from '../ProgressCard';
import ProgressContainer from '../tasks/card/progressContainer';
import DevFeature from '../DevFeature';
import Suggestions from '../tasks/SuggestionBox/Suggestions';
import { BACKEND_TASK_STATUS } from '@/constants/task-status';
import task from '@/interfaces/task.type';
import task, { taskStatusUpdateHandleProp } from '@/interfaces/task.type';
import { TASK_EXTENSION_REQUEST_URL } from '@/constants/url';

const taskStatus = Object.entries(BACKEND_TASK_STATUS);
import TaskDropDown from '../tasks/TaskDropDown';
import { beautifyStatus } from '../tasks/card/TaskStatusEditMode';

export function Button(props: ButtonProps) {
const { buttonName, clickHandler, value } = props;
Expand Down Expand Up @@ -105,12 +104,20 @@ const TaskDetails: FC<Props> = ({ taskID }) => {
setShowSuggestion(false);
setEditedTaskDetails((prev) => ({ ...prev, assignee: userName }));
};
const handleTaskStatusUpdate = (
ev: React.ChangeEvent<HTMLSelectElement>
) => {
const newStatus: string = ev.target.value;

setEditedTaskDetails((prev) => ({ ...prev, status: newStatus }));
const handleTaskStatusUpdate = ({
newStatus,
newProgress,
}: taskStatusUpdateHandleProp) => {
const payload: { status: string; percentCompleted?: number } = {
status: newStatus,
};
if (newProgress !== undefined) {
payload.percentCompleted = newProgress;
}
setEditedTaskDetails((prev) => ({
...prev,
...payload,
}));
};

useEffect(() => {
Expand Down Expand Up @@ -301,34 +308,25 @@ const TaskDetails: FC<Props> = ({ taskID }) => {
/>
<DevFeature>
{isEditing && (
<label>
Status:
<select
name="status"
onChange={
handleTaskStatusUpdate
}
value={
editedTaskDetails?.status
}
>
{taskStatus.map(
([name, status]) => (
<option
key={status}
value={status}
>
{name}
</option>
)
)}
</select>
</label>
<TaskDropDown
isDevMode={true}
onChange={
handleTaskStatusUpdate
}
oldStatus={
taskDetailsData?.status
}
oldProgress={
taskDetailsData?.percentCompleted
}
/>
)}
</DevFeature>
<Details
detailType={'Status'}
value={taskDetailsData?.status}
value={beautifyStatus(
taskDetailsData?.status
)}
/>
<Details
detailType={'Link'}
Expand All @@ -339,6 +337,7 @@ const TaskDetails: FC<Props> = ({ taskID }) => {
/>
<ProgressContainer
content={taskDetailsData}
key={taskDetailsData?.percentCompleted}
/>
</div>
</TaskContainer>
Expand Down
Loading

0 comments on commit 8eff409

Please sign in to comment.