APG Infrastructure

This page is an overview of the infrastructure used to maintain the health of this repository. If you are a new contributor, this first section tells you about the three things you are mostly likely to need to know about, specifically our linter, regression tests and the PR Previewer. Read the rest of the page for more details! :)

1. We have JavaScript, CSS and HTML linters and a spellcheck that we use to gain consistency in coding style across the repository. You can read more about the linters in the README.md. These linters are run in multiple places:

   1. Continuous Integration These linters are run as part of our continuous integration in a github action.
   2. Local Development These linters can be run locally as you work with the following commands (see package.json if these change):
      1. npm run lint
      2. npm run lint:css
      3. npm run lint:js
      4. npm run lint:html
      5. npm run lint:spelling
      6. npm run fix # Runs JS and CSS linter to fix any automatically fixable mistakes
   3. Commit hooks The CSS and JS linters are also run with "--fix" as part of a "pre-commit" hook. The fix flag will fix anything that can be automatically fixed, and the changes will be added to your commit, so you might see different spacing or formatting in your commit than you added.

2. We have regression tests for the example widgets on the "example" pages. These regression tests should be run only when you make a change to a file in the examples/ or tests/ directory. They are run the following places:

   1. Continuous Integration These regression tests are run as part of the continuous integration in a github action. Note: there is an occasional failure in the regression tests from "webdriver". If you see a "webdriver" related error, the tests should just be re-run by an admin.
   2. Local development You can run the regression tests locally with the following command:
      1. npm run regression

3. We have a PR previewer that will run when you are editing the specification page. The PR previewer will host your PR and add a pair of links that look like "Preview | Diff" to your PR's description. You can edit the PR description to add fragment id(s) that point to the part of the aria practices document that you edited in your PR.

Linters

You can read more about our linters in the repository's README.md file.

Commit hooks

We use the node module lint-staged to configure the git hooks we use to automatically fix lint errors in staged files. Lint-staged uses husky to configure git hooks. You can see both the lint-staged and husky configurations in package.json.

Github Apps

Dependabot

The dependabot app is enabled on this repository to update npm dependencies. When a new version of a dependency is published on npm, dependabot opens a PR to update the version in the package.json. This app is configured in .github/dependabot.yml. Read more about auditing those changes here.

Github Checks

Our continious integration is handled by Github Checks. These are configured in the .github/workflows directory.

Preview Bot

Preview bot will produce a link to the new specification and a diff between the new and old specification on PRs that edit the spec. It then edits the PR description to add these links. It is configured by the .pr-preview.json file in the root directory.

Other NPM Modules

ava

AVA is a testing framework used to run regression tests of the example widgets in the examples/ directory, read more about our testing framework here.

cheerio

Cheerio is used to parse html by the regression report and the script that creates the examples/index.js file.

geckodriver

Geckodriver is used to control firefox for the regression tests of the widgets in the examples/ directory, read more about our testing framework here.

glob

glob is used in the script that creates the examples/index.js file.

selenium-webdriver

Selenium Webdriver is our browser testing framework, read more about the framework here.