Skip to content

Commit

Permalink
Merge pull request #282 from ral-facilities/DSEGOG-16-react-table-8
Browse files Browse the repository at this point in the history 
DSEGOG-16 upgrade to react table 8
  • Loading branch information
@louise-davies
louise-davies authored Sep 25, 2023
2 parents 33ab9a7 + fe85659 commit 92ac903
Show file tree
Hide file tree
Showing 47 changed files with 711 additions and 860 deletions.
74 changes: 38 additions & 36 deletions .pnp.cjs
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Binary file added .yarn/cache/@tanstack-react-table-npm-8.9.3-af8d0ec3fb-a71fbbc608.zip
View file
Binary file not shown.
Binary file added .yarn/cache/@tanstack-table-core-npm-8.9.3-993026ff01-52c7e57daa.zip
View file
Binary file not shown.
Binary file removed .yarn/cache/@types-react-table-npm-7.7.12-3528071866-287ea68e75.zip
View file
Binary file not shown.
Binary file removed .yarn/cache/react-table-npm-7.8.0-61488af438-44ca0fb848.zip
View file
Binary file not shown.
36 changes: 34 additions & 2 deletions cypress/integration/table/search.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,23 @@ describe('Search', () => {
});
}).as('getSettings');

cy.visit('/').wait(['@getSettings']);
cy.visit('/', {
// need these to ensure Date picker media queries pass
// ref: https://mui.com/x/react-date-pickers/getting-started/#testing-caveats
onBeforeLoad: (win) => {
cy.stub(win, 'matchMedia')
.withArgs('(pointer: fine)')
.returns({
matches: true,
addListener: () => {
// no-op
},
removeListener: () => {
// no-op
},
});
},
}).wait(['@getSettings']);

cy.findByRole('progressbar').should('be.visible');
cy.findByRole('progressbar').should('not.exist');
Expand Down Expand Up @@ -1093,7 +1109,23 @@ describe('Search', () => {
});
}).as('getSettings');

cy.visit('/').wait(['@getSettings']);
cy.visit('/', {
// need these to ensure Date picker media queries pass
// ref: https://mui.com/x/react-date-pickers/getting-started/#testing-caveats
onBeforeLoad: (win) => {
cy.stub(win, 'matchMedia')
.withArgs('(pointer: fine)')
.returns({
matches: true,
addListener: () => {
// no-op
},
removeListener: () => {
// no-op
},
});
},
}).wait(['@getSettings']);
});

it('displays appropriate tooltips', () => {
Expand Down
124 changes: 29 additions & 95 deletions cypress/integration/table/table.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,25 +11,34 @@ const verifyColumnOrder = (columns: string[]): void => {

describe('Table Component', () => {
beforeEach(() => {
cy.visit('/');
cy.visit('/', {
// need these to ensure Date picker media queries pass
// ref: https://mui.com/x/react-date-pickers/getting-started/#testing-caveats
onBeforeLoad: (win) => {
cy.stub(win, 'matchMedia')
.withArgs('(pointer: fine)')
.returns({
matches: true,
addListener: () => {
// no-op
},
removeListener: () => {
// no-op
},
});
},
});
});

it('initialises with a time column', () => {
it('adds columns in the order they are selected', () => {
cy.get('[aria-describedby="table-loading-indicator"]').should(
'have.attr',
'aria-busy',
'false'
);

// check initialised with time column
verifyColumnOrder(['Time']);
});

it('adds columns in the order they are selected', () => {
cy.get('[aria-describedby="table-loading-indicator"]').should(
'have.attr',
'aria-busy',
'false'
);

addInitialSystemChannels(['Shot Number']);

Expand All @@ -45,14 +54,14 @@ describe('Table Component', () => {
});

it('moves a column left', () => {
addInitialSystemChannels(['Shot Number', 'Active Area']);

cy.get('[aria-describedby="table-loading-indicator"]').should(
'have.attr',
'aria-busy',
'false'
);

addInitialSystemChannels(['Shot Number', 'Active Area']);

cy.get(getHandleSelector())
.first()
.as('secondColumn')
Expand All @@ -71,14 +80,14 @@ describe('Table Component', () => {
});

it('moves a column right', () => {
addInitialSystemChannels(['Shot Number', 'Active Area']);

cy.get('[aria-describedby="table-loading-indicator"]').should(
'have.attr',
'aria-busy',
'false'
);

addInitialSystemChannels(['Shot Number', 'Active Area']);

cy.get(getHandleSelector())
.first()
.as('secondColumn')
Expand Down Expand Up @@ -176,12 +185,6 @@ describe('Table Component', () => {
});

it('column headers overflow when word wrap is enabled', () => {
cy.get('[aria-describedby="table-loading-indicator"]').should(
'have.attr',
'aria-busy',
'false'
);

cy.contains('Data Channels').click();
const channelName = 'CHANNEL_ABCDE';

Expand All @@ -193,6 +196,12 @@ describe('Table Component', () => {

cy.contains('Add Channels').click();

cy.get('[aria-describedby="table-loading-indicator"]').should(
'have.attr',
'aria-busy',
'false'
);

cy.get('[data-testid^="sort timestamp"] p')
.invoke('css', 'height')
.then((height) => {
Expand All @@ -217,81 +226,6 @@ describe('Table Component', () => {
});
});

describe.skip('should be able to sort by', () => {
it('ascending order', () => {
cy.get('[data-testid="sort timestamp"]').click().wait('@getRecords');
// eslint-disable-next-line cypress/no-unnecessary-waiting
cy.wait(200);
cy.get('[aria-sort="ascending"]').should('exist');
cy.get('.MuiTableSortLabel-iconDirectionAsc').should('be.visible');
cy.get('tbody').within(() => {
cy.get('tr')
.first()
.within(() => {
cy.get('td').first().contains('2022-01-01 00:00:00');
});
});
});

it('descending order', () => {
cy.get('[data-testid="sort timestamp"]').click().wait('@getRecords');
cy.get('[data-testid="sort timestamp"]').click().wait('@getRecords');
cy.get('[aria-sort="descending"]').should('exist');
cy.get('.MuiTableSortLabel-iconDirectionDesc').should('be.visible');
cy.get('tbody').within(() => {
cy.get('tr')
.first()
.within(() => {
cy.get('td').first().contains('2022-01-01 00:00:00');
});
});
});

it('no order', () => {
cy.get('[data-testid="sort timestamp"]').click().wait('@getRecords');
// eslint-disable-next-line cypress/no-unnecessary-waiting
cy.wait(200);
cy.get('[data-testid="sort timestamp"]').click().wait('@getRecords');
// eslint-disable-next-line cypress/no-unnecessary-waiting
cy.wait(200);
cy.get('[data-testid="sort timestamp"]').click().wait('@getRecords');
// eslint-disable-next-line cypress/no-unnecessary-waiting
cy.wait(200);
cy.get('[aria-sort="ascending"]').should('not.exist');
cy.get('[aria-sort="descending"]').should('not.exist');
cy.get('.MuiTableSortLabel-iconDirectionAsc').should(
'have.css',
'opacity',
'0'
);
cy.get('.MuiTableSortLabel-iconDirectionDesc').should('not.exist');
cy.get('tbody').within(() => {
cy.get('tr')
.first()
.within(() => {
cy.get('td').first().contains('2022-01-01 00:00:00');
});
});
});

it('multiple columns', () => {
addInitialSystemChannels(['Shot Number']);
cy.get('[data-testid="sort timestamp"]').click().wait('@getRecords');
// eslint-disable-next-line cypress/no-unnecessary-waiting
cy.wait(200);
cy.get('[data-testid="sort shotnum"]').click().wait('@getRecords');

cy.get('tbody').within(() => {
cy.get('tr')
.first()
.within(() => {
cy.get('td').eq(0).contains('2022-01-01 00:00:00');
cy.get('td').eq(1).contains('1');
});
});
});
});

describe('should be able to search by', () => {
it('date from', () => {
cy.get('input[id="from date-time"]').type('2022-01-01 00:00:00');
Expand Down
Loading

0 comments on commit 92ac903

Please sign in to comment.