Skip to content

Commit

Permalink
Fix wrong import & refactor e2e test for my dois table #1533
Browse files Browse the repository at this point in the history
  • Loading branch information
@louise-davies
louise-davies committed Mar 15, 2024
1 parent ae3349d commit 729e0e3
Show file tree
Hide file tree
Showing 4 changed files with 73 additions and 143 deletions.
192 changes: 64 additions & 128 deletions packages/datagateway-dataview/cypress/e2e/table/dls/myDois.cy.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,54 @@ describe('DLS - MyDOIs Table', () => {

describe('Logged in tests', () => {
beforeEach(() => {
cy.intercept('**/datapublications/count').as('getDataPublicationCount');
cy.intercept('**/datapublications?*').as('getDataPublications');
cy.intercept(
/\/datapublications\?.*where=%7B%22users\.contributorType%22%3A%7B%22eq%22%3A%22Minter%22%7D%7D.*where=%7B%22relatedItems\.relationType%22%3A%7B%22eq%22%3A%22HasVersion%22%7D%7D.*/,
(req) => {
// delete type = investigation requirement
const [url, search] = req.url.split('?');
const params = new URLSearchParams(search);
// params.delete with value is still a new standard, so use workaround for now until browser compat catches up
// params.delete('where', '{"users.contributorType":{"eq":"Minter"}}');
// params.delete('where', '{"relatedItems.relationType":{"eq":"HasVersion"}}');
const removeValue = (
params: URLSearchParams,
key: string,
valueToRemove: string
): URLSearchParams => {
const values = params.getAll(key);
if (values.length) {
params.delete(key);
for (const value of values) {
if (value !== valueToRemove) {
params.append(key, value);
}
}
}
return params;
};
removeValue(
params,
'where',
'{"relatedItems.relationType":{"eq":"HasVersion"}}'
);
removeValue(
params,
'where',
'{"users.contributorType":{"eq":"Minter"}}'
);
params.append(
'where',
JSON.stringify({
'users.contributorType': {
eq: 'ProjectLeader',
},
})
);
req.url = `${url}?${params.toString()}`;

req.continue();
}
).as('getDataPublications');
cy.login(
{
username: 'root',
Expand All @@ -35,141 +81,31 @@ describe('DLS - MyDOIs Table', () => {
cy.location('pathname').should('eq', '/browse/dataPublication/14');
});

it('should disable the hover tool tip by pressing escape', () => {
// The hover tool tip has a enter delay of 500ms.
// eslint-disable-next-line cypress/no-unnecessary-waiting
cy.get('[data-testid="dls-datapublication-table-id"]')
.first()
.trigger('mouseover', { force: true })
.wait(700)
.get('[role="tooltip"]')
.should('exist');

cy.get('body').type('{esc}');

// eslint-disable-next-line cypress/no-unnecessary-waiting
cy.get('[data-testid="dls-datapublication-table-id"]')
.wait(700)
.first()
.get('[role="tooltip"]')
.should('not.exist');
});

it('should be able to resize a column', () => {
let columnWidth = 0;

// Using Math.round to solve rounding errors when calculating 1000 / 3
cy.window()
.then((window) => {
const windowWidth = window.innerWidth;
columnWidth = Math.round(windowWidth / 3);
columnWidth = Math.round((columnWidth * 100) / 100);
})
.then(() => expect(columnWidth).to.not.equal(0));

cy.get('[role="columnheader"]').eq(0).as('titleColumn');
cy.get('[role="columnheader"]').eq(1).as('doiColumn');

cy.get('@titleColumn').should(($column) => {
let { width } = $column[0].getBoundingClientRect();
width = Math.round((width * 100) / 100);
expect(width).to.equal(columnWidth);
});

cy.get('@doiColumn').should(($column) => {
let { width } = $column[0].getBoundingClientRect();
width = Math.round((width * 100) / 100);
expect(width).to.equal(columnWidth);
});

cy.get('.react-draggable')
.first()
.trigger('mousedown')
.trigger('mousemove', { clientX: 400 })
.trigger('mouseup');

cy.get('@titleColumn').should(($column) => {
const { width } = $column[0].getBoundingClientRect();
expect(width).to.be.greaterThan(columnWidth);
});

cy.get('@doiColumn').should(($column) => {
const { width } = $column[0].getBoundingClientRect();
expect(width).to.be.lessThan(columnWidth);
});

// table width should grow if a column grows too large
cy.get('.react-draggable')
.first()
.trigger('mousedown')
.trigger('mousemove', { clientX: 900 })
.trigger('mouseup');

cy.get('@doiColumn').should(($column) => {
const { width } = $column[0].getBoundingClientRect();
expect(width).to.be.equal(84);
});

cy.get('[aria-label="grid"]').then(($grid) => {
const { width } = $grid[0].getBoundingClientRect();
cy.window().should(($window) => {
expect(width).to.be.greaterThan($window.innerWidth);
});
});
});

// can't test sorting as there's only 1 table item

describe('should be able to filter by', () => {
it('text', () => {
cy.get('[aria-rowcount="1"]').should('exist');
cy.get('[aria-label="Filter by Title"]').type('random text');

cy.get('[aria-rowcount="0"]').should('exist');
});

it('date between', () => {
cy.get('[aria-rowcount="1"]').should('exist');

const date = new Date();

cy.get('input[aria-label="Publication Date filter to"]').type(
date.toISOString().slice(0, 10)
);
it('should be able to filter with text & date filters on multiple columns', () => {
// test text filter
cy.get('[aria-rowcount="1"]').should('exist');
cy.get('[aria-label="Filter by Title"]').type('random text');

cy.get('[aria-rowcount="1"]').should('exist');
cy.get('[aria-rowcount="0"]').should('exist');
cy.get('[aria-label="Filter by Title"]').clear();
cy.get('[aria-label="Filter by Title"]').type('Officer');

cy.get('input[id="Publication Date filter from"]').type('2019-01-01');
// test date filter
cy.get('[aria-rowcount="1"]').should('exist');

cy.get('[aria-rowcount="0"]').should('exist');
});
const date = new Date();

it('multiple columns', () => {
cy.get('[aria-label="Filter by Title"]').type('Officer');

cy.get('[aria-rowcount="1"]').should('exist');

cy.get('input[id="Publication Date filter from"]')
.first()
.type('2023-01-01');

cy.get('[aria-rowcount="0"]').should('exist');
});
});

it('should be able to click clear filters button to clear filters', () => {
cy.url().then((url) => {
cy.get('[aria-rowcount="1"]').should('exist');
cy.get('[aria-label="Filter by Title"]').type('random text');
cy.get('input[aria-label="Publication Date filter to"]').type(
date.toISOString().slice(0, 10)
);

cy.wait('@getDataPublications');
cy.get('[aria-rowcount="1"]').should('exist');

cy.get('[aria-rowcount="0"]').should('exist');
cy.get('input[id="Publication Date filter from"]').type('2019-01-01');

cy.get('[data-testid="clear-filters-button"]').click();
cy.url().should('eq', url);
cy.get('[aria-rowcount="1"]').should('exist');
});
cy.get('[aria-rowcount="0"]').should('exist');
});
});
});
10 changes: 2 additions & 8 deletions packages/datagateway-dataview/src/views/table/dls/dlsMyDOIsTable.component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,10 +45,7 @@ const DLSMyDOIsTable = (): React.ReactElement => {
filterType: 'where',
filterValue: JSON.stringify({
'users.contributorType': {
/* istanbul ignore next */
eq: process.env.REACT_APP_E2E_TESTING
? ContributorType.ProjectLeader
: ContributorType.Minter,
eq: ContributorType.Minter,
},
}),
},
Expand All @@ -75,10 +72,7 @@ const DLSMyDOIsTable = (): React.ReactElement => {
filterType: 'where',
filterValue: JSON.stringify({
'users.contributorType': {
/* istanbul ignore next */
eq: process.env.REACT_APP_E2E_TESTING
? ContributorType.ProjectLeader
: ContributorType.Minter,
eq: ContributorType.Minter,
},
}),
},
Expand Down
4 changes: 1 addition & 3 deletions packages/datagateway-download/src/downloadConfirmation/downloadConfirmDialog.component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import {
TextField,
Typography,
} from '@mui/material';
import { formatBytes } from 'datagateway-common';
import { DialogContent, DialogTitle, formatBytes } from 'datagateway-common';
import React from 'react';
import { useTranslation } from 'react-i18next';

Expand All @@ -24,8 +24,6 @@ import {
useDownloadTypeStatuses,
useSubmitCart,
} from '../downloadApiHooks';
import DialogContent from './dialogContent.component';
import DialogTitle from './dialogTitle.component';
import DownloadRequestResult from './downloadRequestResult.component';

const TableContentDiv = styled('div')(() => ({
Expand Down
10 changes: 6 additions & 4 deletions packages/datagateway-download/src/downloadConfirmation/downloadRequestResult.component.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,8 @@
import { Button, Grid, Typography } from '@mui/material';
import { Mark } from 'datagateway-common';
import { DialogContent, DialogTitle, Mark } from 'datagateway-common';
import React from 'react';
import { Trans, useTranslation } from 'react-i18next';
import type DownloadRequestInfo from './DownloadRequestInfo';
import DialogContent from './dialogContent.component';
import DialogTitle from './dialogTitle.component';

interface DownloadRequestResultComponentProps {
/**
Expand Down Expand Up @@ -97,7 +95,11 @@ function DownloadRequestResult({

return (
<div>
<DialogTitle id="download-confirm-dialog-title" onClose={closeDialog} />
<DialogTitle
id="download-confirm-dialog-title"
onClose={closeDialog}
closeAriaLabel={t('downloadConfirmDialog.close_aria_label')}
/>

<DialogContent>
<Grid
Expand Down

0 comments on commit 729e0e3

Please sign in to comment.