Skip to content

Commit

Permalink
Refactor tests, add TODOs
Browse files Browse the repository at this point in the history
  • Loading branch information
@dotherightthing
dotherightthing committed Sep 24, 2020
1 parent ee6df1a commit e583da8
Show file tree
Hide file tree
Showing 2 changed files with 42 additions and 42 deletions.
22 changes: 7 additions & 15 deletions cypress/integration/single-select-listbox.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,22 +26,14 @@ describe('Single Select', function () {

describe('Configuration', function () {
it('Classes exist', function () {
// check that the class is available
cy.window()
.should('have.property', 'SingleSelectListbox');
[ 'SingleSelectListbox', 'KeyboardHelpers' ].forEach(($class) => {
cy.window().then((win) => {
cy.wrap(win)
.should('have.property', $class);

// check that it's a function
cy.window().then((win) => {
expect(win.SingleSelectListbox).to.be.a('function');
});

// check that the class is available
cy.window()
.should('have.property', 'KeyboardHelpers');

// check that it's a function
cy.window().then((win) => {
expect(win.KeyboardHelpers).to.be.a('function');
cy.wrap(win[$class])
.should('be.a', 'function');
});
});
});
});
Expand Down
62 changes: 35 additions & 27 deletions cypress/integration/tabbed-carousel.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,11 @@
/**
* @file cypress/integration/listbox.js
* @file cypress/integration/tabbed-carousel.js
* @summary Cypress spec for End-to-End UI testing.
* @requires accessible-components
*
* @todo Add injection of JS-dependent elements, test noscript state.
* @todo Add and test progressive enhancement of link to aria button, to allow fallback of direct link to image
* @todo Add and test swipe support
*/

/* eslint-disable prefer-arrow-callback */
Expand All @@ -28,22 +32,14 @@ describe('Tabbed Carousel', function () {

describe('Configuration', function () {
it('Classes exist', function () {
// check that the class is available
cy.window()
.should('have.property', 'SingleSelectListbox');
[ 'TabbedCarousel', 'KeyboardHelpers' ].forEach(($class) => {
cy.window().then((win) => {
cy.wrap(win)
.should('have.property', $class);

// check that it's a function
cy.window().then((win) => {
expect(win.SingleSelectListbox).to.be.a('function');
});

// check that the class is available
cy.window()
.should('have.property', 'KeyboardHelpers');

// check that it's a function
cy.window().then((win) => {
expect(win.KeyboardHelpers).to.be.a('function');
cy.wrap(win[$class])
.should('be.a', 'function');
});
});
});
});
Expand Down Expand Up @@ -181,16 +177,30 @@ describe('Tabbed Carousel', function () {
cy.get('@testAnchor')
.tab();

cy.get('@tabs').eq(0)
.should('have.focus');
if (cy.getAttr(`#${testId} .${componentClass}`, initialSelectionAttr)) {
cy.getAttr(`#${testId} .${componentClass}`, initialSelectionAttr, 'index').then(($index) => {
cy.get('@tabs').eq($index)
.should('have.focus');
});
} else {
cy.get('@tabs').eq(0)
.should('have.focus');
}
});

it('When the tab list contains the focus, moves focus to the next element in the page tab sequence outside the tablist, which is typically either the first focusable element inside the tab panel or the tab panel itself.', function () {
cy.get('@testAnchor')
.tab().tab();

cy.get('@tabpanels').eq(0)
.should('have.focus');
if (cy.getAttr(`#${testId} .${componentClass}`, initialSelectionAttr)) {
cy.getAttr(`#${testId} .${componentClass}`, initialSelectionAttr, 'index').then(($index) => {
cy.get('@tabpanels').eq($index)
.should('have.focus');
});
} else {
cy.get('@tabpanels').eq(0)
.should('have.focus');
}
});

it('+ When the tab panel has the focus, moves focus to the first tab panel navigation button', function () {
Expand Down Expand Up @@ -221,7 +231,7 @@ describe('Tabbed Carousel', function () {
cy.log('Tabs are not oriented exclusively horizonally or vertically, therefore both keys are supported');

cy.get('@tabs').first()
.click() // focus and select - but isn't truly selecting..
.click() // focus and select
.type($key);

cy.get('@tabs').last()
Expand All @@ -246,7 +256,7 @@ describe('Tabbed Carousel', function () {
cy.log('Tabs are not oriented exclusively horizonally or vertically, therefore both keys are supported');

cy.get('@tabs').last()
.focus().click() // focus and select
.click() // focus and select
.type($key);

cy.get('@tabs').first()
Expand All @@ -268,7 +278,7 @@ describe('Tabbed Carousel', function () {

context('When focus is on a tab in a tablist with either horizontal or vertical orientation:', function () {
context('Space or Enter: Activates the tab if it was not activated automatically on focus.', function () {
[ '{enter}', ' ' ].forEach(($key) => {
[ ' ', '{enter}' ].forEach(($key) => {
it($key, function () {
cy.getAttr(`#${testId} .${componentClass}`, selectionFollowsFocusAttr).then(($value) => {
if ($value !== 'true') {
Expand All @@ -290,7 +300,7 @@ describe('Tabbed Carousel', function () {

it('Home (Optional): Moves focus to the first tab. Optionally, activates the newly focused tab.', function () {
cy.get('@tabs').last()
.focus().click() // focus and select
.click() // focus and select
.type('{home}');

cy.get('@tabs').first()
Expand All @@ -309,7 +319,7 @@ describe('Tabbed Carousel', function () {

it('End (Optional): Moves focus to the last tab. Optionally, activates the newly focused tab.', function () {
cy.get('@tabs').first()
.focus().click() // focus and select
.click() // focus and select
.type('{end}');

cy.get('@tabs').last()
Expand Down Expand Up @@ -451,8 +461,6 @@ describe('Tabbed Carousel', function () {
});
});
});

it.skip('Removing JS hook shows pre-JS state', function () {});
});
});
});
Expand Down

0 comments on commit e583da8

Please sign in to comment.