Skip to content

Commit

Permalink
Small a11y fixes; test sorting and query strings
Browse files Browse the repository at this point in the history
  • Loading branch information
@czmj
czmj committed Jul 14, 2022
1 parent 90b2d60 commit d1f48f1
Show file tree
Hide file tree
Showing 4 changed files with 204 additions and 7 deletions.
83 changes: 83 additions & 0 deletions apps/hpc-ftsadmin-e2e/src/integration/flows.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,4 +38,87 @@ describe('flows', () => {
.and('contain.text', 'child')
.and('not.contain.text', 'parent');
});

describe('sorting', () => {
it('is inititally sorted by updated/created descending', () => {
cy.get('[data-test="header-updatedCreated"]').should(
'have.attr',
'aria-sort',
'descending'
);
cy.get('[data-test="flows-table-id"]')
.first()
.should('have.text', '1 v1');
cy.get('[data-test="header-id"]').should('not.have.attr', 'aria-sort');
});

it('one click triggers sorting descending', () => {
cy.get('[data-test="header-id"]').click();

cy.get('[data-test="header-id"]').should(
'have.attr',
'aria-sort',
'descending'
);
cy.get('[data-test="flows-table-id"]')
.first()
.should('have.text', '3 v1');
});

it('two clicks triggers sorting ascending', () => {
cy.get('[data-test="header-id"]').click();
cy.get('[data-test="header-id"]').click();

cy.get('[data-test="header-id"]').should(
'have.attr',
'aria-sort',
'ascending'
);
cy.get('[data-test="flows-table-id"]')
.first()
.should('have.text', '1 v1');
});

it('can switch to sorting by a different property', () => {
cy.get('[data-test="header-id"]').click();
cy.get('[data-test="header-sourceOrganization"]').click();

cy.get('[data-test="header-sourceOrganization"]').should(
'have.attr',
'aria-sort',
'descending'
);
cy.get('[data-test="header-id"]').should('not.have.attr', 'aria-sort');
cy.get('[data-test="flows-table-id"]')
.first()
.should('have.text', '3 v1');
});
});

describe('query strings', () => {
it('updates query string on sort', () => {
cy.get('[data-test="header-id"]').click();
cy.location('search').should('include', 'orderBy=flow.id&orderDir=DESC');
});

it('updates query string on changing pagination', () => {
cy.get(
'[data-test="flows-table-pagination"] .MuiTablePagination-select'
).click();
cy.get('[data-value="10"]').click();
cy.location('search').should('include', 'rowsPerPage=10');
});

it('loads correct settings when visiting from a query string link', () => {
cy.visit('/flows?orderBy=flow.id&orderDir=DESC&page=0&rowsPerPage=10');
cy.get('[data-test="header-id"]').should(
'have.attr',
'aria-sort',
'descending'
);
cy.get(
'[data-test="flows-table-pagination"] .MuiTablePagination-select'
).should('have.text', '10');
});
});
});
14 changes: 13 additions & 1 deletion apps/hpc-ftsadmin/src/app/components/flows-table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -181,7 +181,17 @@ export default function FlowsTable(props: FlowsTableProps) {
</TableRow>
<TableRow>
{props.headers.map((header) => (
<TableCell key={header.label}>
<TableCell
key={header.label}
data-test={`header-${header.label}`}
{...(header.sortable &&
query.orderBy === header.id && {
'aria-sort':
query.orderDir === 'ASC'
? 'ascending'
: 'descending',
})}
>
{header.sortable ? (
<TableSortLabel
active={query.orderBy === header.id}
Expand All @@ -198,6 +208,7 @@ export default function FlowsTable(props: FlowsTableProps) {
>
<span className={CLASSES.VISUALLY_HIDDEN}>
{t.t(lang, (s) => s.components.flowsTable.sortBy)}
<br />
</span>
{t.t(
lang,
Expand Down Expand Up @@ -431,6 +442,7 @@ export default function FlowsTable(props: FlowsTableProps) {
<TableFooter>
<TableRow>
<TablePagination
data-test="flows-table-pagination"
rowsPerPageOptions={rowsPerPageOptions}
component="td"
count={parseInt(data.flowCount)}
Expand Down
4 changes: 2 additions & 2 deletions libs/hpc-dummy/src/lib/data.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,7 @@ export const INITIAL_DATA: DummyData = {
id: 2,
versionID: 1,
amountUSD: '6685723',
updatedAt: '2022-02-17T16:15:44.482Z',
updatedAt: '2022-02-15T16:15:44.482Z',
origAmount: null,
origCurrency: null,
activeStatus: true,
Expand Down Expand Up @@ -228,7 +228,7 @@ export const INITIAL_DATA: DummyData = {
id: 3,
versionID: 1,
amountUSD: '13514277',
updatedAt: '2022-02-17T16:14:31.838Z',
updatedAt: '2022-02-16T16:14:31.838Z',
origAmount: null,
origCurrency: null,
activeStatus: true,
Expand Down
110 changes: 106 additions & 4 deletions libs/hpc-dummy/src/lib/dummy.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -490,10 +490,112 @@ export class Dummy {
}),
searchFlows: dummyEndpoint(
'flows.searchFlows',
async (params: flows.SearchFlowsParams) => ({
flows: this.data.flows,
flowCount: this.data.flows.length.toString(),
})
async (params: flows.SearchFlowsParams) => {
const { flowSearch } = params;
const { flows } = this.data;

if (flowSearch.orderBy) {
flows.sort((a, b) => {
let returnVal = 0;
switch (flowSearch.orderBy) {
case 'flow.id':
returnVal = a.id > b.id ? 1 : -1;
break;
case 'flow.versionID':
returnVal = a.versionID > b.versionID ? 1 : -1;
break;
case 'flow.updatedAt':
returnVal = a.updatedAt > b.updatedAt ? 1 : -1;
break;
case 'externalReference.systemID':
if (
a.externalReference?.systemID &&
b.externalReference?.systemID
) {
returnVal =
a.externalReference?.systemID >
b.externalReference?.systemID
? 1
: -1;
}
break;
case 'flow.amountUSD':
returnVal =
parseInt(a.amountUSD) > parseInt(b.amountUSD) ? 1 : -1;
break;
case 'source.organization.name': {
const sourceOrgA = a.organizations?.find(
(org) => org.refDirection === 'source'
);
const sourceOrgB = a.organizations?.find(
(org) => org.refDirection === 'source'
);
if (sourceOrgA && sourceOrgB) {
returnVal = sourceOrgA.name > sourceOrgB.name ? 1 : -1;
}
break;
}
case 'destination.organization.name': {
const destOrgA = a.organizations?.find(
(org) => org.refDirection === 'destination'
);
const destOrgB = a.organizations?.find(
(org) => org.refDirection === 'destination'
);
if (destOrgA && destOrgB) {
returnVal = destOrgA.name > destOrgB.name ? 1 : -1;
}
break;
}
case 'destination.planVersion.name': {
const planA = a.plans && a.plans[0];
const planB = b.plans && b.plans[0];
if (!planA) {
returnVal = -1;
} else if (!planB) {
returnVal = 1;
} else {
returnVal = planA.name > planB.name ? 1 : -1;
}
break;
}
case 'destination.location.name': {
const locationA = a.locations && a.locations[0];
const locationB = b.locations && b.locations[0];
if (!locationA) {
returnVal = -1;
} else if (!locationB) {
returnVal = 1;
} else {
returnVal = locationA.name > locationB.name ? 1 : -1;
}
break;
}
case 'destination.usageYear.year': {
const yearA = a.usageYears?.find(
(org) => org.refDirection === 'destination'
);
const yearB = a.usageYears?.find(
(org) => org.refDirection === 'destination'
);
if (yearA && yearB) {
returnVal = yearA.year > yearB.year ? 1 : -1;
}
break;
}
}

return flowSearch.orderDir === 'DESC'
? returnVal * -1
: returnVal;
});
}

return {
flows,
flowCount: flows.length.toString(),
};
}
),
},
operations: {
Expand Down

0 comments on commit d1f48f1

Please sign in to comment.