hazza/dspace-angular
1
0
Fork 1
mirror of https://github.com/DSpace/dspace-angular.git synced 2025-10-07 01:54:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add logging for violations & testA11y() in utils.ts. Use that method everywhere else

Browse Source
This commit is contained in:
Tim Donohue
2021-09-13 17:11:53 -05:00
parent fad74a4ca2
commit 4faa850fba
16 changed files with 100 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
cypress/integration/breadcrumbs.spec.ts
View File

@@ -1,23 +1,15 @@
import { Options } from "cypress-axe";
import { TEST_ENTITY_PUBLICATION } from "cypress/support";
import { TEST_ENTITY_PUBLICATION } from 'cypress/support';
import { testA11y } from 'cypress/support/utils';
describe('Breadcrumbs', () => {
it('should pass accessibility tests', () => {
// Visit an Item, as those have more breadcrumbs
cy.visit('/entities/publication/' + TEST_ENTITY_PUBLICATION);
cy.injectAxe();
// Wait for breadcrumbs to be visible
cy.get('ds-breadcrumbs').should('be.visible');
// Analyze <ds-breadcrumbs> for accessibility
// Disable color-contrast checks until #1149 is fixed
cy.checkA11y('ds-breadcrumbs',
{
rules: {
'color-contrast': { enabled: false }
}
} as Options
);
testA11y('ds-breadcrumbs');
});
});

14
cypress/integration/collection-page.spec.ts
View File

@@ -1,23 +1,15 @@
import { Options } from "cypress-axe";
import { TEST_COLLECTION } from "cypress/support";
import { TEST_COLLECTION } from 'cypress/support';
import { testA11y } from 'cypress/support/utils';
describe('Collection Page', () => {
it('should pass accessibility tests', () => {
cy.visit('/collections/' + TEST_COLLECTION);
cy.injectAxe();
// <ds-collection-page> tag must be loaded
cy.get('ds-collection-page').should('exist');
// Analyze <ds-collection-page> for accessibility issues
// Disable color-contrast checks until it is fixed (see #1202 and #1178)
cy.checkA11y('ds-collection-page',
{
rules: {
'color-contrast': { enabled: false }
}
} as Options
);
testA11y('ds-collection-page');
});
});

6
cypress/integration/collection-statistics.spec.ts
View File

@@ -1,4 +1,5 @@
import { TEST_COLLECTION } from "cypress/support";
import { TEST_COLLECTION } from 'cypress/support';
import { testA11y } from 'cypress/support/utils';
describe('Collection Statistics Page', () => {
const COLLECTIONSTATISTICSPAGE = '/statistics/collections/' + TEST_COLLECTION;
@@ -21,12 +22,11 @@ describe('Collection Statistics Page', () => {
it('should pass accessibility tests', () => {
cy.visit(COLLECTIONSTATISTICSPAGE);
cy.injectAxe();
// <ds-collection-statistics-page> tag must be loaded
cy.get('ds-collection-statistics-page').should('exist');
// Analyze <ds-collection-statistics-page> for accessibility issues
cy.checkA11y('ds-collection-statistics-page');
testA11y('ds-collection-statistics-page');
});
});

6
cypress/integration/community-list.spec.ts
View File

@@ -1,10 +1,10 @@
import { Options } from "cypress-axe";
import { Options } from 'cypress-axe';
import { testA11y } from 'cypress/support/utils';
describe('Community List Page', () => {
it('should pass accessibility tests', () => {
cy.visit('/community-list');
cy.injectAxe();
// <ds-community-list-page> tag must be loaded
cy.get('ds-community-list-page').should('exist');
@@ -14,7 +14,7 @@ describe('Community List Page', () => {
// Analyze <ds-community-list-page> for accessibility issues
// Disable heading-order checks until it is fixed
cy.checkA11y('ds-community-list-page',
testA11y('ds-community-list-page',
{
rules: {
'heading-order': { enabled: false }

14
cypress/integration/community-page.spec.ts
View File

@@ -1,23 +1,15 @@
import { Options } from "cypress-axe";
import { TEST_COMMUNITY } from "cypress/support";
import { TEST_COMMUNITY } from 'cypress/support';
import { testA11y } from 'cypress/support/utils';
describe('Community Page', () => {
it('should pass accessibility tests', () => {
cy.visit('/communities/' + TEST_COMMUNITY);
cy.injectAxe();
// <ds-community-page> tag must be loaded
cy.get('ds-community-page').should('exist');
// Analyze <ds-community-page> for accessibility issues
// Disable color-contrast checks until it is fixed (see #1202 and #1178)
cy.checkA11y('ds-community-page',
{
rules: {
'color-contrast': { enabled: false }
}
} as Options
);
testA11y('ds-community-page',);
});
});

6
cypress/integration/community-statistics.spec.ts
View File

@@ -1,4 +1,5 @@
import { TEST_COMMUNITY } from "cypress/support";
import { TEST_COMMUNITY } from 'cypress/support';
import { testA11y } from 'cypress/support/utils';
describe('Community Statistics Page', () => {
const COMMUNITYSTATISTICSPAGE = '/statistics/communities/' + TEST_COMMUNITY;
@@ -21,12 +22,11 @@ describe('Community Statistics Page', () => {
it('should pass accessibility tests', () => {
cy.visit(COMMUNITYSTATISTICSPAGE);
cy.injectAxe();
// <ds-community-statistics-page> tag must be loaded
cy.get('ds-community-statistics-page').should('exist');
// Analyze <ds-community-statistics-page> for accessibility issues
cy.checkA11y('ds-community-statistics-page');
testA11y('ds-community-statistics-page');
});
});

7
cypress/integration/footer.spec.ts
View File

@@ -1,12 +1,13 @@
import { testA11y } from 'cypress/support/utils';
describe('Footer', () => {
it('should pass accessibility tests', () => {
cy.visit('/');
cy.injectAxe();
// Footer must first be visible
cy.get('ds-footer').should('be.visible');
// Analyze <ds-footer> for accessibility
cy.checkA11y('ds-footer');
testA11y('ds-footer');
});
});
});

7
cypress/integration/header.spec.ts
View File

@@ -1,13 +1,14 @@
import { testA11y } from 'cypress/support/utils';
describe('Header', () => {
it('should pass accessibility tests', () => {
cy.visit('/');
cy.injectAxe();
// Header must first be visible
cy.get('ds-header').should('be.visible');
// Analyze <ds-header> for accessibility
cy.checkA11y({
testA11y({
include: ['ds-header'],
exclude: [
['#search-navbar-container'], // search in navbar has duplicative ID. Will be fixed in #1174
@@ -15,4 +16,4 @@ describe('Header', () => {
],
});
});
});
});

5
cypress/integration/homepage-statistics.spec.ts
View File

@@ -1,3 +1,5 @@
import { testA11y } from 'cypress/support/utils';
describe('Site Statistics Page', () => {
it('should load if you click on "Statistics" from homepage', () => {
cy.visit('/');
@@ -7,12 +9,11 @@ describe('Site Statistics Page', () => {
it('should pass accessibility tests', () => {
cy.visit('/statistics');
cy.injectAxe();
// <ds-site-statistics-page> tag must be loaded
cy.get('ds-site-statistics-page').should('exist');
// Analyze <ds-site-statistics-page> for accessibility issues
cy.checkA11y('ds-site-statistics-page');
testA11y('ds-site-statistics-page');
});
});

6
cypress/integration/homepage.spec.ts
View File

@@ -1,3 +1,5 @@
import { testA11y } from 'cypress/support/utils';
describe('Homepage', () => {
beforeEach(() => {
// All tests start with visiting homepage
@@ -21,12 +23,10 @@ describe('Homepage', () => {
});
it('should pass accessibility tests', () => {
cy.injectAxe();
// Wait for homepage tag to appear
cy.get('ds-home-page').should('be.visible');
// Analyze <ds-home-page> for accessibility issues
cy.checkA11y('ds-home-page');
testA11y('ds-home-page');
});
});

8
cypress/integration/item-page.spec.ts
View File

@@ -1,5 +1,6 @@
import { Options } from "cypress-axe";
import { TEST_ENTITY_PUBLICATION } from "cypress/support";
import { Options } from 'cypress-axe';
import { TEST_ENTITY_PUBLICATION } from 'cypress/support';
import { testA11y } from 'cypress/support/utils';
describe('Item Page', () => {
const ITEMPAGE = '/items/' + TEST_ENTITY_PUBLICATION;
@@ -13,14 +14,13 @@ describe('Item Page', () => {
it('should pass accessibility tests', () => {
cy.visit(ENTITYPAGE);
cy.injectAxe();
// <ds-item-page> tag must be loaded
cy.get('ds-item-page').should('exist');
// Analyze <ds-item-page> for accessibility issues
// Disable heading-order checks until it is fixed
cy.checkA11y('ds-item-page',
testA11y('ds-item-page',
{
rules: {
'heading-order': { enabled: false }

6
cypress/integration/item-statistics.spec.ts
View File

@@ -1,4 +1,5 @@
import { TEST_ENTITY_PUBLICATION } from "cypress/support";
import { TEST_ENTITY_PUBLICATION } from 'cypress/support';
import { testA11y } from 'cypress/support/utils';
describe('Item Statistics Page', () => {
const ITEMSTATISTICSPAGE = '/statistics/items/' + TEST_ENTITY_PUBLICATION;
@@ -27,12 +28,11 @@ describe('Item Statistics Page', () => {
it('should pass accessibility tests', () => {
cy.visit(ITEMSTATISTICSPAGE);
cy.injectAxe();
// <ds-item-statistics-page> tag must be loaded
cy.get('ds-item-statistics-page').should('exist');
// Analyze <ds-item-statistics-page> for accessibility issues
cy.checkA11y('ds-item-statistics-page');
testA11y('ds-item-statistics-page');
});
});

17
cypress/plugins/index.ts
View File

@@ -1,5 +1,16 @@
// Plugins enable you to tap into, modify, or extend the internal behavior of Cypress
// For more info, visit https://on.cypress.io/plugins-api
/* tslint:disable:no-empty */
module.exports = (on, config) => { };
/* tslint:enable:no-empty */
module.exports = (on, config) => {
// Define "log" and "table" tasks, used for logging accessibility errors during CI
// Borrowed from https://github.com/component-driven/cypress-axe#in-cypress-plugins-file
on('task', {
log(message: string) {
console.log(message);
return null;
},
table(message: string) {
console.table(message);
return null;
}
});
};

2
cypress/support/index.ts
View File

@@ -23,4 +23,4 @@ import 'cypress-axe';
// Global constants used in tests
export const TEST_COLLECTION = '282164f5-d325-4740-8dd1-fa4d6d3e7200';
export const TEST_COMMUNITY = '0958c910-2037-42a9-81c7-dca80e3892b4';
export const TEST_ENTITY_PUBLICATION = 'e98b0f27-5c19-49a0-960d-eb6ad5287067';
export const TEST_ENTITY_PUBLICATION = 'e98b0f27-5c19-49a0-960d-eb6ad5287067';

44
cypress/support/utils.ts Normal file
View File

@@ -0,0 +1,44 @@
import { Result } from 'axe-core';
import { Options } from 'cypress-axe';
// Log violations to terminal/commandline in a table format.
// Uses 'log' and 'table' tasks defined in ../plugins/index.ts
// Borrowed from https://github.com/component-driven/cypress-axe#in-your-spec-file
function terminalLog(violations: Result[]) {
cy.task(
'log',
`${violations.length} accessibility violation${violations.length === 1 ? '' : 's'} ${violations.length === 1 ? 'was' : 'were'} detected`
);
// pluck specific keys to keep the table readable
const violationData = violations.map(
({ id, impact, description, helpUrl, nodes }) => ({
id,
impact,
description,
helpUrl,
nodes: nodes.length,
html: nodes.map(node => node.html)
})
);
// Print violations as an array, since 'node.html' above often breaks table alignment
cy.task('log', violationData);
// Optionally, uncomment to print as a table
// cy.task('table', violationData);
}
// Custom "testA11y()" method which checks accessibility using cypress-axe
// while also ensuring any violations are logged to the terminal (see terminalLog above)
// This method MUST be called after cy.visit(), as cy.injectAxe() must be called after page load
export const testA11y = (context?: any, options?: Options) => {
cy.injectAxe();
cy.configureAxe({
rules: [
// Disable color contrast checks as they are inaccurate / result in a lot of false positives
// See also open issues in axe-core: https://github.com/dequelabs/axe-core/labels/color%20contrast
{ id: 'color-contrast', enabled: false },
]
});
cy.checkA11y(context, options, terminalLog);
};

3
cypress/tsconfig.json
View File

@@ -6,7 +6,8 @@
"compilerOptions": {
"types": [
"cypress",
"cypress-axe"
"cypress-axe",
"node"
]
}
}