Skip to content

Commit

Permalink
Improve download e2e tests
Browse files Browse the repository at this point in the history 
- Add tests for bugs I found
- Fix linting errors
- Improve test efficiency
- Lint cypress code in CI
  • Loading branch information
@louise-davies
louise-davies committed Aug 22, 2023
1 parent f74f581 commit f692e7a
Show file tree
Hide file tree
Showing 6 changed files with 230 additions and 360 deletions.
265 changes: 91 additions & 174 deletions packages/datagateway-download/cypress/e2e/adminDownloadStatus.cy.ts
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,10 @@
describe('Admin Download Status', () => {
before(() => {
// Ensure the downloads are cleared before running tests.
cy.login({ username: 'root', password: 'pw', mechanism: 'simple' });

// Seed the initial downloads.
cy.clearDownloads();
});

beforeEach(() => {
cy.intercept('GET', '**/getPercentageComplete**');
// set the viewport larger so all columns display nicely
// and sort indicators aren't covered
cy.viewport(1920, 1080);

cy.intercept('GET', '**/getPercentageComplete**', '100');
cy.intercept('GET', '**/topcat/admin/downloads**').as(
'fetchAdminDownloads'
);
Expand All @@ -25,11 +21,6 @@ describe('Admin Download Status', () => {
});
});

it('should load correctly and display admin download status table', () => {
cy.title().should('equal', 'DataGateway Download');
cy.get('#datagateway-download').should('be.visible');
});

it('should refresh the table when clicking the refresh downloads button', () => {
cy.get('[aria-label="Refresh download status table"]').should('exist');

Expand All @@ -52,177 +43,103 @@ describe('Admin Download Status', () => {
});
});

describe('should be able to sort download items by', () => {
it('ascending order', () => {
// Table is sorted by Requested Date by default. To keep working test, we will remove all sorts on the table beforehand
cy.get('.react-draggable')
.eq(7)
.trigger('mousedown')
.trigger('mousemove', { clientX: 800 })
.trigger('mouseup');
cy.contains('[role="button"]', 'Requested Date').click();

cy.get('.react-draggable')
.eq(4)
.trigger('mousedown')
.trigger('mousemove', { clientX: 600 })
.trigger('mouseup');
cy.contains('[role="button"]', 'Access Method').click();

cy.get('[aria-sort="ascending"]').should('exist');
cy.get('.MuiTableSortLabel-iconDirectionAsc').should('be.visible');
cy.get('[aria-rowindex="1"] [aria-colindex="5"]').should(
'have.text',
'globus'
);
});
it('should be able to sort by all sort directions on single and multiple columns', () => {
// remove default sort
cy.contains('[role="button"]', 'Requested Date').click();

it('descending order', () => {
// Table is sorted by Requested Date by default. To keep working test, we will remove all sorts on the table beforehand
cy.get('.react-draggable')
.eq(7)
.trigger('mousedown')
.trigger('mousemove', { clientX: 800 })
.trigger('mouseup');
cy.contains('[role="button"]', 'Requested Date').click();

cy.get('.react-draggable')
.eq(4)
.trigger('mousedown')
.trigger('mousemove', { clientX: 600 })
.trigger('mouseup');
cy.contains('[role="button"]', 'Access Method').click();
cy.contains('[role="button"]', 'Access Method').click();

cy.get('[aria-sort="descending"]').should('exist');
cy.get('.MuiTableSortLabel-iconDirectionDesc').should(
'not.have.css',
'opacity',
'0'
);
cy.get('[aria-rowindex="1"] [aria-colindex="5"]').should(
'have.text',
'https'
);
});
// ascending order
cy.contains('[role="button"]', 'Access Method')
.as('accessMethodSortButton')
.click();

it('no order', () => {
// Table is sorted by Requested Date by default. To keep working test, we will remove all sorts on the table beforehand
cy.get('.react-draggable')
.eq(7)
.trigger('mousedown')
.trigger('mousemove', { clientX: 800 })
.trigger('mouseup');
cy.contains('[role="button"]', 'Requested Date').click();

cy.get('.react-draggable')
.eq(3)
.trigger('mousedown')
.trigger('mousemove', { clientX: 500 })
.trigger('mouseup');
cy.contains('[role="button"]', 'Prepared ID').click();
cy.contains('[role="button"]', 'Prepared ID').click();
cy.contains('[role="button"]', 'Prepared ID').click();

cy.get('[aria-sort="ascending"]').should('not.exist');
cy.get('.MuiTableSortLabel-iconDirectionDesc').should('not.exist');
cy.get('.MuiTableSortLabel-iconDirectionAsc').should(
'have.css',
'opacity',
'0'
);
cy.get('[aria-rowindex="1"] [aria-colindex="4"]').should(
($preparedId) => {
expect($preparedId[0].textContent).match(
/[0-9a-zA-Z]{8}-[0-9a-zA-Z]{4}-[0-9a-zA-Z]{4}-[0-9a-zA-Z]{4}-[0-9a-zA-Z]{12}/
);
}
);
});
cy.get('[aria-sort="ascending"]').should('exist');
cy.get('.MuiTableSortLabel-iconDirectionAsc').should('be.visible');
cy.get('[aria-rowindex="1"] [aria-colindex="5"]').should(
'have.text',
'globus'
);

it('multiple columns', () => {
// Table is sorted by Requested Date by default. To keep working test, we will remove all sorts on the table beforehand
cy.get('.react-draggable')
.eq(7)
.trigger('mousedown')
.trigger('mousemove', { clientX: 800 })
.trigger('mouseup');
cy.contains('[role="button"]', 'Requested Date').click();

cy.get('.react-draggable')
.eq(4)
.trigger('mousedown')
.trigger('mousemove', { clientX: 550 })
.trigger('mouseup');
cy.contains('[role="button"]', 'Access Method').click();

cy.get('.react-draggable')
.eq(2)
.trigger('mousedown')
.trigger('mousemove', { clientX: 400 })
.trigger('mouseup');
cy.contains('[role="button"]', 'Username').click();

cy.get('[aria-rowindex="1"] [aria-colindex="5"]').should(
'have.text',
'globus'
);
});
});
// descending order
cy.get('@accessMethodSortButton').click();

describe('should be able to filter download items by', () => {
it('text', () => {
cy.get('[aria-label="Filter by Availability"]')
.first()
.type('Available', { force: true });
cy.get('[aria-sort="descending"]').should('exist');
cy.get('.MuiTableSortLabel-iconDirectionDesc').should(
'not.have.css',
'opacity',
'0'
);
cy.get('[aria-rowindex="1"] [aria-colindex="5"]').should(
'have.text',
'https'
);

cy.get('[aria-rowindex="1"] [aria-colindex="6"]').should(
'have.text',
'Available'
);
});
// no order
cy.get('@accessMethodSortButton').click();

it('date between', () => {
const currDate = new Date();
cy.get('[aria-sort="ascending"]').should('not.exist');
cy.get('.MuiTableSortLabel-iconDirectionDesc').should('not.exist');
cy.get('.MuiTableSortLabel-iconDirectionAsc').should(
'have.css',
'opacity',
'0'
);
cy.get('[aria-rowindex="1"] [aria-colindex="5"]').should(
'have.text',
'https'
);

cy.get('input[id="Requested Date filter from"]').type(
currDate.toISOString().slice(0, 10)
);
// multiple columns
cy.contains('[role="button"]', 'Deleted').click();
cy.contains('[role="button"]', 'Availability').click();

cy.get('input[id="Requested Date filter to"]').type(
currDate.toISOString().slice(0, 10)
);
cy.get('[aria-rowindex="2"] [aria-colindex="6"]').should(
'have.text',
'Available'
);
cy.get('[aria-rowindex="3"] [aria-colindex="6"]').should(
'have.text',
'Expired'
);
});

cy.get('[aria-rowcount="0"]').should('not.exist');
it('should be able to filter with both text & date filters on multiple columns', () => {
cy.get('[aria-rowcount]')
.invoke('attr', 'aria-rowcount')
.as('initialRowCount');
const now = Date.now();
// plus and minus 5 seconds from "now"
const fromDate = new Date(now - 5000);
const toDate = new Date(now + 5000);

cy.get('input[id="Requested Date filter from"]').type(
fromDate.toLocaleString('sv')
);

cy.get('input[id="Requested Date filter to"]').type(
toDate.toLocaleString('sv')
);

cy.get('@initialRowCount').then((initialRowCount) => {
cy.get(`[aria-rowcount="${initialRowCount}"]`).should('not.exist');
});
cy.get('[aria-rowcount="0"]').should('not.exist');

cy.get('[aria-rowcount]')
.invoke('attr', 'aria-rowcount')
.as('dateFilterRowCount');

cy.get('[aria-label="Filter by Availability"]')
.first()
.type('Available', { force: true });

cy.get('[aria-rowindex="1"] [aria-colindex="6"]').should(
'have.text',
'Available'
);

it('multiple columns', () => {
cy.get('[role="columnheader"]').eq(4).as('accessColumn');
cy.get('[role="columnheader"]').eq(5).as('availabilityColumn');

cy.get('.react-draggable')
.eq(4)
.trigger('mousedown')
.trigger('mousemove', { clientX: 500 })
.trigger('mouseup');

cy.get('.react-draggable')
.eq(5)
.trigger('mousedown')
.trigger('mousemove', { clientX: 700 })
.trigger('mouseup');

cy.get('[aria-label="Filter by Access Method')
.first()
.type('globus', { force: true });
cy.get('[aria-label="Filter by Availability"]')
.first()
.type('restoring', { force: true });

cy.get('[aria-rowindex="1"] [aria-colindex="5"]').should(
'have.text',
'globus'
);
cy.get('@dateFilterRowCount').then((dateFilterRowCount) => {
cy.get(`[aria-rowcount="${dateFilterRowCount}"]`).should('not.exist');
});
cy.get('[aria-rowcount="0"]').should('not.exist');
});
});
9 changes: 4 additions & 5 deletions packages/datagateway-download/cypress/e2e/downloadCart.cy.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,13 +21,12 @@ describe('Download Cart', () => {
// Ensure we can move away from the table and come back to it.
cy.get('[aria-label="Download selection panel"]').should('exist');
// Wait for the downloads to be fetched before moving back to the cart.
cy.get('[aria-label="Downloads"]')
.should('exist')
.click()
.wait('@fetchDownloads');
cy.get('[aria-label="Downloads"]').should('exist').click();
cy.wait('@fetchDownloads');
cy.get('[aria-label="Download status panel"]').should('exist');

cy.get('[aria-label="Selection').click().wait('@fetchCart');
cy.get('[aria-label="Selection').click();
cy.wait('@fetchCart');
cy.get('[aria-label="Download selection panel"]').should('exist');

cy.get('[aria-rowcount=59]', { timeout: 10000 }).should('exist');
Expand Down
Loading

0 comments on commit f692e7a

Please sign in to comment.