Time Input Polyfill Tests

This project aims to bring consistent high quality tests to all of my Time Input Polyfill projects.

By incorporating these tests I can feel confident that any current and future time input polyfills behave consistently and as expected.

Getting started

Install

npm i -D @time-input-polyfill/tests

You will also need to install Cypress into your project:

npm install cypress
npx cypress open

Setting up

Then delete everything inside the cypress/integration folder and replace it with the contents of this zip file:

https://github.com/Dan503/time-input-polyfill-tests/raw/master/cypress/integration.zip

Next create a testSuite.js file in the cypress/support folder.

import { TimeInputTestSuite } from '@time-input-polyfill/tests'

export const testSuite = new TimeInputTestSuite({
	localHostUrl: 'http://localhost:3000',
	primaryTestsLabel: 'Label for the primary test input', // default = 'Primary tests'
	eventTestsLabel: 'Label for the events test input', // default = 'Event tests'
})

Finally, you will need to create a test component. Model this test component after the test component found here:

https://github.com/Dan503/time-input-polyfill-tests/blob/master/src/TestComponent.tsx

Running the project

Using a split terminal, have one terminal run npm run start (this runs the site) and the other run npm run test (this runs the Cypress UI).

Use the Cypress UI to determine what tests to run.

IMPORTANT: Tab key testing cannot be automated

Due to event.preventDefault() not being detected by the automated Tab functionality, it is currently not possible to automate the testing of the Tab key.

Expected Tab functionality:

• When input receives focus via the Tab key, select the Hours segment
• While Hours segment is selected, pressing Tab selects the Minutes segment
• While Minutes segment is selected, pressing Tab selects the Mode segment
• While Mode segment is selected, pressing Tab sends focus to the next focusable element on the page

Expected Shift + Tab functionality:

• When input receives focus via Shift + Tab, select the Mode segment
• While Mode segment is selected, pressing Shift + Tab selects the Minutes segment
• While Minutes segment is selected, pressing Shift + Tab selects the Hours segment
• While Hours segment is selected, pressing Shift + Tab sends focus to the previous focusable element on the page