Skip to content

Commit

Permalink
Merge branch 'fix-getIdleSinceText-function' of https://github.com/Re…
Browse files Browse the repository at this point in the history 
…al-Dev-Squad/website-status into fix-getIdleSinceText-function
  • Loading branch information
@anishpawaskar
anishpawaskar committed Oct 28, 2023
2 parents 7cb94ac + 4eeee04 commit c199c02
Show file tree
Hide file tree
Showing 6 changed files with 100 additions and 164 deletions.
8 changes: 6 additions & 2 deletions __tests__/Unit/Components/Tasks/TaskDetails.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -324,8 +324,12 @@ describe('TaskDetails Page', () => {
fireEvent.change(textareaElement, {
target: { name: 'title', value: 'test 1 for drag and drop' },
});
const saveButton = await screen.findByRole('button', { name: 'Save' });
fireEvent.click(saveButton);
await waitFor(async () => {
const saveButton = await screen.findByRole('button', {
name: 'Save',
});
fireEvent.click(saveButton);
});
expect(screen.queryByText(/Successfully saved/i)).toBeNull();
});

Expand Down
117 changes: 9 additions & 108 deletions __tests__/Unit/Components/Tasks/TasksContent.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { TasksContent } from '@/components/tasks/TasksContent';
import { setupServer } from 'msw/node';
import handlers from '../../../../__mocks__/handlers';
import { fireEvent, screen, within } from '@testing-library/react';
import { fireEvent, screen, waitFor, within } from '@testing-library/react';
import { renderWithRouter } from '@/test_utils/createMockRouter';
import { Provider } from 'react-redux';
import { store } from '@/app/store';
Expand Down Expand Up @@ -53,28 +53,6 @@ describe('tasks content', () => {
<Provider store={store()}>
<TasksContent />
</Provider>,
{
query: { section: 'assigned' },
}
);
await screen.findByTestId('tabs');
const tabsContainer = within(
screen.getByTestId('status-tabs-container')
);
const assignedButton = tabsContainer.getByRole('button', {
name: 'ASSIGNED',
});
expect(assignedButton).toHaveTextContent('ASSIGNED');
await screen.findByText(NO_TASKS_FOUND_MESSAGE);
expect(screen.getByText(NO_TASKS_FOUND_MESSAGE)).toBeInTheDocument();
});

test('select tab and set active when dev is true', async () => {
setWindowInnerWidth(breakpointToShowTabs);
renderWithRouter(
<Provider store={store()}>
<TasksContent dev={true} />
</Provider>,
{
query: { section: 'unassigned' },
}
Expand Down Expand Up @@ -102,29 +80,27 @@ describe('tasks content', () => {
expect(errorMessage).toBeInTheDocument();
});

test('display tasks', async () => {
test('display tasks to be rendered on /tasks page', async () => {
const { findByText } = renderWithRouter(
<Provider store={store()}>
<TasksContent />
</Provider>,
{ query: { section: 'available' } }
);
await screen.findByTestId('tabs');

const task = await findByText(
'Design and develop an online booking system'
);
expect(task).toBeInTheDocument();
});

test('display tasks when dev is true', async () => {
test('display tasks to be rendered on /tasks page when dev is true', async () => {
const { findByText } = renderWithRouter(
<Provider store={store()}>
<TasksContent dev={true} />
<TasksContent />
</Provider>,
{ query: { section: 'done' } }
);
await screen.findByTestId('tabs');

const task = await findByText(
'Depreciate task status AVAILABLE and COMPLETED'
Expand Down Expand Up @@ -162,36 +138,6 @@ describe('tasks content', () => {
});
});

test('Selecting a tab pushes into query params when dev is true', async () => {
setWindowInnerWidth(breakpointToShowTabs);
const mockPushFunction = jest.fn();
renderWithRouter(
<Provider store={store()}>
<TasksContent dev={true} />
</Provider>,
{ push: mockPushFunction }
);

await screen.findByTestId('tabs');
const tabsContainer = within(
screen.getByTestId('status-tabs-container')
);
const inProgressBtn = tabsContainer.getByRole('button', {
name: /IN PROGRESS/i,
});
expect(inProgressBtn).toHaveClass('tabButton');
const unassignedButton = tabsContainer.getByRole('button', {
name: /UNASSIGNED/i,
});
fireEvent.click(unassignedButton);
expect(mockPushFunction).toBeCalledTimes(1);
expect(mockPushFunction).toBeCalledWith({
query: {
q: 'status:unassigned',
},
});
});

test('should show status-tabs-container after 450px of screen width', async () => {
setWindowInnerWidth(breakpointToShowTabs);
const mockPushFunction = jest.fn();
Expand Down Expand Up @@ -258,50 +204,6 @@ describe('tasks content', () => {
});
});

test('Selecting a value from dropdown pushes into query params when dev is true', async () => {
setWindowInnerWidth(breakpointToShowSelect);
const mockPushFunction = jest.fn();
renderWithRouter(
<Provider store={store()}>
<TasksContent dev={true} />
</Provider>,
{ push: mockPushFunction }
);

await screen.findByTestId('status-select-container');
const selectContainer = screen?.getByTestId(
'selected-option-container'
);

fireEvent.click(selectContainer);
fireEvent.keyDown(selectContainer, {
key: 'ArrowDown',
code: 'ArrowDown',
});

fireEvent.keyDown(selectContainer, {
key: 'ArrowDown',
code: 'ArrowDown',
});

fireEvent.keyDown(selectContainer, {
key: 'ArrowDown',
code: 'ArrowDown',
});

fireEvent.keyDown(selectContainer, {
key: 'Enter',
code: 'Enter',
});

expect(mockPushFunction).toBeCalledTimes(1);
expect(mockPushFunction).toBeCalledWith({
query: {
q: 'status:unassigned',
},
});
});

test('searchButtonHandler when search button is clicked', async () => {
setWindowInnerWidth(breakpointToShowTabs);
const mockPushFunction = jest.fn();
Expand All @@ -312,10 +214,11 @@ describe('tasks content', () => {
{ push: mockPushFunction }
);

await screen.findByTestId('tabs');
const searchButton = screen.getByTestId('search-button');
const searchButton = await screen.findByTestId('search-button');
fireEvent.click(searchButton);
expect(mockPushFunction).toBeCalledTimes(1);
await waitFor(() => {
expect(mockPushFunction).toBeCalledTimes(1);
});
expect(mockPushFunction).toBeCalledWith({
query: {
q: 'status:all',
Expand All @@ -332,9 +235,7 @@ describe('tasks content', () => {
</Provider>,
{ push: mockPushFunction }
);

await screen.findByTestId('tabs');
const searchInput = screen.getByTestId('search-input');
const searchInput = await screen.findByTestId('search-input');
fireEvent.change(searchInput, { target: { value: 'test' } });
expect(searchInput).toHaveValue('test');
});
Expand Down
79 changes: 45 additions & 34 deletions src/components/tasks/TasksContent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {
} from '../../constants/messages';
import { EMPTY_TASKS_DATA } from '@/constants/tasks';
import { TabSection } from './TabSection';

import TaskList from './TaskList/TaskList';
import { useRouter } from 'next/router';
import { getActiveTab } from '@/utils/getActiveTab';
Expand Down Expand Up @@ -143,40 +144,50 @@ export const TasksContent = ({ dev }: { dev?: boolean }) => {
onInputChange={(value) => searchInputHandler(value)}
onClickSearchButton={searchButtonHandler}
/>
<div
className={classNames['status-tabs-container']}
data-testid="status-tabs-container"
>
<TabSection
dev={dev}
onSelect={(status: Tab) =>
searchNewTasks(status, queryAssignees, queryTitle)
}
activeTab={selectedTab}
/>
</div>
<div
className={classNames['status-select-container']}
data-testid="status-select-container"
>
<Select
dev={dev}
value={{
label: getChangedStatusName(selectedTab),
value: selectedTab,
}}
onChange={(selectedTaskStatus) => {
if (selectedTaskStatus) {
searchNewTasks(
selectedTaskStatus.value as Tab,
queryAssignees,
queryTitle
);
}
}}
options={taskSelectOptions}
/>
</div>
{dev !== true ? (
<>
<div
className={classNames['status-tabs-container']}
data-testid="status-tabs-container"
>
<TabSection
dev={dev}
onSelect={(status: Tab) =>
searchNewTasks(
status,
queryAssignees,
queryTitle
)
}
activeTab={selectedTab}
/>
</div>
<div
className={classNames['status-select-container']}
data-testid="status-select-container"
>
<Select
dev={dev}
value={{
label: getChangedStatusName(selectedTab),
value: selectedTab,
}}
onChange={(selectedTaskStatus) => {
if (selectedTaskStatus) {
searchNewTasks(
selectedTaskStatus.value as Tab,
queryAssignees,
queryTitle
);
}
}}
options={taskSelectOptions}
/>
</div>
</>
) : (
<></>
)}
<div>
{loadedTasks[selectedTab] && loadedTasks[selectedTab].length ? (
<TaskList tasks={loadedTasks[selectedTab]} />
Expand Down
5 changes: 0 additions & 5 deletions src/components/tasks/card/card.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,17 +42,12 @@ $progressTextAnimation: #9babb8;
width: 100%;

@media (min-width: 768px) and (max-width: 1024px) {
width: 90%;
justify-content: center;
}

@media (max-width: 448px) {
justify-content: center;
}

@media (max-width: 368px) {
width: 90%;
}
}
.card_updated {
border-radius: 10px;
Expand Down
10 changes: 5 additions & 5 deletions src/helperFunctions/getIdleSinceText.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,15 @@ const getIdleSinceText = (idleSince: string) => {
const differenceInHours = Math.round(
(presentDate - idleSinceDate) / TOTAL_MILLISECONDS_IN_A_HOUR
);
const idealDays = Math.round(differenceInHours / 24);
const idleDays = Math.round(differenceInHours / 24);

if (idealDays <= 0) {
if (idleDays <= 0) {
return `${differenceInHours} hours ago`;
} else if (idealDays === 1) {
return `${idealDays} day ago`;
} else if (idleDays === 1) {
return `${idleDays} day ago`;
}

return `${idealDays} days ago`;
return `${idleDays} days ago`;
};

export default getIdleSinceText;
Loading

0 comments on commit c199c02

Please sign in to comment.