Skip to content
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

Jump to bottom

chore: Migrate deprecated Table to DataTable for LearnerActivityTable #1288

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

chore: Migrate deprecated Table to DataTable for LearnerActivityTable #1288

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
130 changes: 40 additions & 90 deletions src/components/LearnerActivityTable/LearnerActivityTable.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,96 +8,26 @@ import { Provider } from 'react-redux';
import { mount } from 'enzyme';

import LearnerActivityTable from '.';
import useCourseEnrollments from './data/hooks/useCourseEnrollments';
import mockUseCourseEnrollments from './data/tests/constants';

const enterpriseId = 'test-enterprise';
const mockStore = configureMockStore([thunk]);
const learnerActivityEmptyStore = mockStore({
portalConfiguration: {
enterpriseId,
},
table: {
'active-week': {
data: {
results: [],
current_page: 1,
num_pages: 1,
},
ordering: null,
loading: false,
error: null,
},
},
});

const tableMockData = {
data: {
count: 2,
num_pages: 1,
current_page: 1,
results: [
{
id: 1,
passed_date: '2018-09-23T16:27:34.690065Z',
course_title: 'Dive into ReactJS',
course_key: 'edX/ReactJS',
user_email: '[email protected]',
course_list_price: '200',
course_start_date: '2017-10-21T23:47:32.738Z',
course_end_date: '2018-05-13T12:47:27.534Z',
current_grade: '0.66',
progress_status: 'Failed',
last_activity_date: '2018-09-22T10:59:28.628Z',
},
{
id: 5,
passed_date: '2018-09-22T16:27:34.690065Z',
course_title: 'Redux with ReactJS',
course_key: 'edX/Redux_ReactJS',
user_email: '[email protected]',
course_list_price: '200',
course_start_date: '2017-10-21T23:47:32.738Z',
course_end_date: '2018-05-13T12:47:27.534Z',
current_grade: '0.80',
progress_status: 'Passed',
last_activity_date: '2018-09-25T10:59:28.628Z',
},
],
next: null,
start: 0,
previous: null,
},
ordering: null,
loading: false,
error: null,
};
jest.mock('./data/hooks/useCourseEnrollments', () => (
jest.fn().mockReturnValue({})
));

const learnerActivityStore = mockStore({
const store = mockStore({
portalConfiguration: {
enterpriseId,
},
table: {
'active-week': tableMockData,
'inactive-week': tableMockData,
'inactive-month': tableMockData,
},
});

const LearnerActivityEmptyTableWrapper = props => (
<MemoryRouter>
<IntlProvider locale="en">
<Provider store={learnerActivityEmptyStore}>
<LearnerActivityTable
{...props}
/>
</Provider>
</IntlProvider>
</MemoryRouter>
);

const LearnerActivityTableWrapper = props => (
<MemoryRouter>
<IntlProvider locale="en">
<Provider store={learnerActivityStore}>
<Provider store={store}>
<LearnerActivityTable
{...props}
/>
Expand All @@ -107,33 +37,53 @@ const LearnerActivityTableWrapper = props => (
);

const verifyLearnerActivityTableRendered = (tableId, activity, columnTitles, rowsData) => {
const wrapper = mount((
<LearnerActivityTableWrapper id={tableId} activity={activity} />
));
// Verify that table has correct number of columns
expect(wrapper.find(`.${tableId} thead th`).length).toEqual(columnTitles.length);
const wrapper = mount(<LearnerActivityTableWrapper id={tableId} activity={activity} />);

const table = wrapper.find('[role="table"]');
const headerColumns = table.find('thead th');
const tableRows = table.find('tbody tr');

// Verify only expected columns are shown
wrapper.find(`.${tableId} thead th`).forEach((column, index) => {
// Verify the number of columns
expect(headerColumns).toHaveLength(columnTitles.length);

// Verify column titles
headerColumns.forEach((column, index) => {
expect(column.text()).toContain(columnTitles[index]);
});

// Verify that table has correct number of rows
expect(wrapper.find(`.${tableId} tbody tr`).length).toEqual(2);
// Verify the number of rows
expect(tableRows).toHaveLength(rowsData.length);

// Verify each row in table has correct data
wrapper.find(`.${tableId} tbody tr`).forEach((row, rowIndex) => {
row.find('td').forEach((cell, colIndex) => {
// Verify row data
tableRows.forEach((row, rowIndex) => {
const cells = row.find('td');
cells.forEach((cell, colIndex) => {
expect(cell.text()).toEqual(rowsData[rowIndex][colIndex]);
});
});
};

describe('LearnerActivityTable', () => {
beforeEach(() => {
useCourseEnrollments.mockReturnValue(mockUseCourseEnrollments);
});

afterEach(() => jest.clearAllMocks());

it('renders empty state correctly', () => {
useCourseEnrollments.mockReturnValue(
{
isLoading: false,
courseEnrollments: {
itemCount: 0,
pageCount: 0,
results: [],
},
},
);
const tree = renderer
.create((
<LearnerActivityEmptyTableWrapper id="active-week" activity="active_past_week" />
<LearnerActivityTableWrapper id="active-week" activity="active_past_week" />
))
.toJSON();
expect(tree).toMatchSnapshot();
Expand Down
Loading
Loading