Skip to content

Commit

Permalink
Merge pull request #439 from opentripplanner/dev
Browse files Browse the repository at this point in the history 
Release: 23 August 2021
  • Loading branch information
@landonreed
landonreed authored Aug 23, 2021
2 parents 36328f5 + 16ca30c commit c37ac4d
Show file tree
Hide file tree
Showing 17 changed files with 383 additions and 114 deletions.
4 changes: 3 additions & 1 deletion .github/workflows/codespell.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,4 +12,6 @@ jobs:
- uses: codespell-project/actions-codespell@master
with:
check_filenames: true
skip: ./.git,yarn.lock
# The a11y test file has a false positive and the ignore list does not work
# see https://github.com/opentripplanner/otp-react-redux/pull/436/checks?check_run_id=3369380014
skip: ./.git,yarn.lock,./a11y/a11y.test.js
56 changes: 56 additions & 0 deletions __tests__/components/viewers/__snapshots__/stop-viewer.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -827,12 +827,15 @@ exports[`components > viewers > stop viewer should render countdown times after
>
<div
className="route-row"
role="table"
>
<div
className="header"
role="row"
>
<div
className="route-name"
role="columnheader"
>
<b>
20
Expand All @@ -842,6 +845,7 @@ exports[`components > viewers > stop viewer should render countdown times after
</div>
<div
className="next-trip-preview"
role="columnheader"
>
<StopTimeCell
homeTimezone="America/Los_Angeles"
Expand Down Expand Up @@ -928,6 +932,9 @@ exports[`components > viewers > stop viewer should render countdown times after
className="expansion-button-container"
>
<button
aria-controls="route-20"
aria-expanded={false}
aria-label="Expand all departures for Route 20"
className="expansion-button"
onClick={[Function]}
>
Expand Down Expand Up @@ -1585,12 +1592,15 @@ exports[`components > viewers > stop viewer should render countdown times for st
>
<div
className="route-row"
role="table"
>
<div
className="header"
role="row"
>
<div
className="route-name"
role="columnheader"
>
<b>
20
Expand All @@ -1600,6 +1610,7 @@ exports[`components > viewers > stop viewer should render countdown times for st
</div>
<div
className="next-trip-preview"
role="columnheader"
>
<StopTimeCell
homeTimezone="America/Los_Angeles"
Expand Down Expand Up @@ -1686,6 +1697,9 @@ exports[`components > viewers > stop viewer should render countdown times for st
className="expansion-button-container"
>
<button
aria-controls="route-20"
aria-expanded={false}
aria-label="Expand all departures for Route 20"
className="expansion-button"
onClick={[Function]}
>
Expand Down Expand Up @@ -2631,12 +2645,15 @@ exports[`components > viewers > stop viewer should render times after midnight w
>
<div
className="route-row"
role="table"
>
<div
className="header"
role="row"
>
<div
className="route-name"
role="columnheader"
>
<b>
20
Expand All @@ -2646,6 +2663,7 @@ exports[`components > viewers > stop viewer should render times after midnight w
</div>
<div
className="next-trip-preview"
role="columnheader"
>
<StopTimeCell
homeTimezone="America/Los_Angeles"
Expand Down Expand Up @@ -2741,6 +2759,9 @@ exports[`components > viewers > stop viewer should render times after midnight w
className="expansion-button-container"
>
<button
aria-controls="route-20"
aria-expanded={false}
aria-label="Expand all departures for Route 20"
className="expansion-button"
onClick={[Function]}
>
Expand Down Expand Up @@ -4200,12 +4221,15 @@ exports[`components > viewers > stop viewer should render with OTP transit index
>
<div
className="route-row"
role="table"
>
<div
className="header"
role="row"
>
<div
className="route-name"
role="columnheader"
>
<b>
20
Expand All @@ -4215,6 +4239,7 @@ exports[`components > viewers > stop viewer should render with OTP transit index
</div>
<div
className="next-trip-preview"
role="columnheader"
>
<StopTimeCell
homeTimezone="America/Los_Angeles"
Expand Down Expand Up @@ -4310,6 +4335,9 @@ exports[`components > viewers > stop viewer should render with OTP transit index
className="expansion-button-container"
>
<button
aria-controls="route-20"
aria-expanded={false}
aria-label="Expand all departures for Route 20"
className="expansion-button"
onClick={[Function]}
>
Expand Down Expand Up @@ -4452,12 +4480,15 @@ exports[`components > viewers > stop viewer should render with OTP transit index
>
<div
className="route-row"
role="table"
>
<div
className="header"
role="row"
>
<div
className="route-name"
role="columnheader"
>
<b>
36
Expand All @@ -4467,6 +4498,7 @@ exports[`components > viewers > stop viewer should render with OTP transit index
</div>
<div
className="next-trip-preview"
role="columnheader"
>
<StopTimeCell
homeTimezone="America/Los_Angeles"
Expand Down Expand Up @@ -4562,6 +4594,9 @@ exports[`components > viewers > stop viewer should render with OTP transit index
className="expansion-button-container"
>
<button
aria-controls="route-36"
aria-expanded={false}
aria-label="Expand all departures for Route 36"
className="expansion-button"
onClick={[Function]}
>
Expand Down Expand Up @@ -4704,12 +4739,15 @@ exports[`components > viewers > stop viewer should render with OTP transit index
>
<div
className="route-row"
role="table"
>
<div
className="header"
role="row"
>
<div
className="route-name"
role="columnheader"
>
<b>
94
Expand All @@ -4719,6 +4757,7 @@ exports[`components > viewers > stop viewer should render with OTP transit index
</div>
<div
className="next-trip-preview"
role="columnheader"
>
<StopTimeCell
homeTimezone="America/Los_Angeles"
Expand Down Expand Up @@ -4814,6 +4853,9 @@ exports[`components > viewers > stop viewer should render with OTP transit index
className="expansion-button-container"
>
<button
aria-controls="route-94"
aria-expanded={false}
aria-label="Expand all departures for Route 94"
className="expansion-button"
onClick={[Function]}
>
Expand Down Expand Up @@ -5010,12 +5052,15 @@ exports[`components > viewers > stop viewer should render with OTP transit index
>
<div
className="route-row"
role="table"
>
<div
className="header"
role="row"
>
<div
className="route-name"
role="columnheader"
>
<b>
94
Expand All @@ -5025,6 +5070,7 @@ exports[`components > viewers > stop viewer should render with OTP transit index
</div>
<div
className="next-trip-preview"
role="columnheader"
>
<StopTimeCell
homeTimezone="America/Los_Angeles"
Expand Down Expand Up @@ -5120,6 +5166,9 @@ exports[`components > viewers > stop viewer should render with OTP transit index
className="expansion-button-container"
>
<button
aria-controls="route-94"
aria-expanded={false}
aria-label="Expand all departures for Route 94"
className="expansion-button"
onClick={[Function]}
>
Expand Down Expand Up @@ -6571,12 +6620,15 @@ exports[`components > viewers > stop viewer should render with TriMet transit in
>
<div
className="route-row"
role="table"
>
<div
className="header"
role="row"
>
<div
className="route-name"
role="columnheader"
>
<b>
20
Expand All @@ -6586,6 +6638,7 @@ exports[`components > viewers > stop viewer should render with TriMet transit in
</div>
<div
className="next-trip-preview"
role="columnheader"
>
<StopTimeCell
homeTimezone="America/Los_Angeles"
Expand Down Expand Up @@ -6681,6 +6734,9 @@ exports[`components > viewers > stop viewer should render with TriMet transit in
className="expansion-button-container"
>
<button
aria-controls="route-20"
aria-expanded={false}
aria-label="Expand all departures for Route 20"
className="expansion-button"
onClick={[Function]}
>
Expand Down
81 changes: 62 additions & 19 deletions a11y/a11y.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,39 @@ import path from 'path'
import puppeteer from 'puppeteer'
import execa from 'execa'

import { routes } from '../lib/components/app/responsive-webapp'

import { mockServer } from './mock-server'

const OTP_RR_CONFIG_FILE_PATH = './config.yml'
const OTP_RR_CONFIG_BACKUP_PATH = './config.non-test.yml'
const OTP_RR_TEST_CONFIG_PATH = './a11y/test-config.yml'

let server
let browser, server
// These rules aren't relevant to this project
const disabledRules = [
'region', // Leaflet does not comply
'meta-viewport', // Leaflet does not comply
'page-has-heading-one' // Heading is provided by logo
]

/**
* Runs a11y tests on a given OTP-RR path using the test build. Relies on
* the puppeteer browser running
*/
async function runAxeTestOnPath (otpPath) {
const page = await browser.newPage()
const filePath = `file://${path.resolve(__dirname, '../index-for-puppeteer.html')}#${otpPath}`
await Promise.all([
page.goto(filePath),
page.waitForNavigation({ waitUntil: 'networkidle2' })
])

beforeEach(() => {
await expect(page).toPassAxeTests({ disabledRules })
return page
}

beforeAll(async () => {
// backup current config file
if (fs.existsSync(OTP_RR_CONFIG_FILE_PATH)) {
fs.renameSync(
Expand All @@ -37,9 +61,11 @@ beforeEach(() => {
server = mockServer.listen(MOCK_SERVER_PORT, () => {
console.log(`Mock response server running on http://localhost:${MOCK_SERVER_PORT}`)
})
// Web security is disabled to allow requests to the mock OTP server
browser = await puppeteer.launch({args: ['--disable-web-security']})
})

afterEach(async () => {
afterAll(async () => {
fs.unlinkSync(OTP_RR_CONFIG_FILE_PATH)
if (fs.existsSync(OTP_RR_CONFIG_BACKUP_PATH)) {
fs.renameSync(
Expand All @@ -49,23 +75,40 @@ afterEach(async () => {
}
console.log('Restored original OTP-RR config file')
await server.close()
console.log('Closed mock server')
await browser.close()
console.log('Closed mock server and headless browser')
})

test('checks the test page with Axe', async () => {
jest.setTimeout(600000)
// Web security is disabled to allow requests to the mock OTP server
const browser = await puppeteer.launch({args: ['--disable-web-security']})
const page = await browser.newPage()
await page.goto(`file://${path.resolve(__dirname, '../index-for-puppeteer.html')}#/?ui_activeSearch=0qoydlnut&ui_activeItinerary=0&fromPlace=1900%20Main%20Street%2C%20Houston%2C%20TX%2C%20USA%3A%3A29.750144%2C-95.370998&toPlace=800%20Congress%2C%20Houston%2C%20TX%2C%20USA%3A%3A29.76263%2C-95.362178&date=2021-08-04&time=08%3A14&arriveBy=false&mode=WALK%2CBUS%2CTRAM&showIntermediateStops=true&maxWalkDistance=1207&optimize=QUICK&walkSpeed=1.34&ignoreRealtimeUpdates=true&numItineraries=3&otherThanPreferredRoutesPenalty=900`)
// Puppeteer can take a long time to load, espeically in some ci environments
jest.setTimeout(600000)
routes.forEach(route => {
const {a11yIgnore, path: pathsToTest} = route
if (a11yIgnore) {
return
}

// These rules aren't relevant to this project
await expect(page).toPassAxeTests({
disabledRules: [
'region', // Leaflet does not comply
'meta-viewport', // Leaflet does not comply
'page-has-heading-one' // Heading is provided by logo
]
})
await browser.close()
if (Array.isArray(pathsToTest)) {
// Run test on each path in list.
pathsToTest.forEach(async (p) => {
test(`${p} should pass Axe Tests`, async () => runAxeTestOnPath(p))
})
} else {
// Otherwise run test on individual path
test(`${pathsToTest} should pass Axe Tests`, async () => runAxeTestOnPath(pathsToTest))
}
})

test('Mocked Main Trip planner page should pass Axe Tests', async () => {
await runAxeTestOnPath('/?ui_activeSearch=0qoydlnut&ui_activeItinerary=0&fromPlace=1900%20Main%20Street%2C%20Houston%2C%20TX%2C%20USA%3A%3A29.750144%2C-95.370998&toPlace=800%20Congress%2C%20Houston%2C%20TX%2C%20USA%3A%3A29.76263%2C-95.362178&date=2021-08-04&time=08%3A14&arriveBy=false&mode=WALK%2CBUS%2CTRAM&showIntermediateStops=true&maxWalkDistance=1207&optimize=QUICK&walkSpeed=1.34&ignoreRealtimeUpdates=true&numItineraries=3&otherThanPreferredRoutesPenalty=900')
})

test('Mocked Stop Viewer and Dropdown should pass Axe tests', async () => {
// Puppeteer can take a long time to load, espeically in some ci environments
jest.setTimeout(600000)
// Test stop viewer
const stopViewerPage = await runAxeTestOnPath('/stop/Agency')
await stopViewerPage.waitForTimeout(2000)
await stopViewerPage.click('.expansion-button')
await stopViewerPage.waitForTimeout(2000)
await expect(stopViewerPage).toPassAxeTests({ disabledRules })
})
Loading

0 comments on commit c37ac4d

Please sign in to comment.