component-driven / component-driven/cypress-axe
eslint error, argument of type runOnly does exist on options
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 641
- Forks
- 90
- Avg merge
- 6h 8m
- Merged PRs (30d)
- 1
Description
Hi,
I'm trying to run cy.checkA11y to check for a specific standard and getting a lint error:
TS2345: Argument of type '{ runOnly: { type: string; values: string[]; }; }' is not assignable to parameter of type 'Options'. Object literal may only specify known properties, and 'runOnly' does not exist in type 'Options'.
I'm using PHPStorm 2021.2.3
package.json.
"dependencies": {
"@angular/animations": "^11.2.9",
"@angular/cdk": "^11.2.8",
"@angular/common": "^11.2.9",
"@angular/core": "^11.2.9",
"@angular/forms": "^11.2.9",
"@angular/localize": "^11.2.9",
"@angular/material": "^11.2.8",
"@angular/platform-browser": "^11.2.9",
"@angular/platform-browser-dynamic": "^11.2.9",
"@angular/router": "^11.2.9",
"bn-ng-idle": "^1.0.1",
"core-js": "^2.6.12",
"jsonwebtoken": "^8.5.1",
"jwt-decode": "^3.1.2",
"rxjs": "^6.6.7",
"tslib": "^2.2.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.1102.8",
"@angular-eslint/builder": "2.0.2",
"@angular-eslint/eslint-plugin": "^2.0.2",
"@angular-eslint/eslint-plugin-template": "2.0.2",
"@angular-eslint/schematics": "2.0.2",
"@angular-eslint/template-parser": "^2.0.2",
"@angular/cli": "^11.2.8",
"@angular/compiler": "^11.2.9",
"@angular/compiler-cli": "^11.2.9",
"@angular/language-service": "^11.2.9",
"@cypress/schematic": "^1.6.0",
"@types/jasmine": "~3.6.9",
"@types/jasminewd2": "^2.0.8",
"@types/node": "^14.14.37",
"@typescript-eslint/eslint-plugin": "^4.22.0",
"@typescript-eslint/eslint-plugin-tslint": "^4.22.0",
"@typescript-eslint/parser": "^4.22.0",
"axe-core": "^4.3.5",
"concurrently": "^6.5.0",
"cypress": "^9.2.0",
"cypress-axe": "^0.13.0",
"eslint": "^7.24.0",
"eslint-config-google": "^0.14.0",
"eslint-config-prettier": "^8.1.0",
"eslint-plugin-cypress": "^2.12.1",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsdoc": "^32.2.0",
"jasmine-core": "~3.7.1",
"jasmine-spec-reporter": "~5.0.2",
"karma": "~6.3.2",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.3",
"karma-jasmine": "~4.0.1",
"karma-jasmine-html-reporter": "^1.5.4",
"protractor": "~7.0.0",
"start-server-and-test": "^1.14.0",
"ts-node": "^8.10.2",
"typescript": "^4.1.5"
}
cypress eslintrc:
{
"plugins": [
"cypress"
],
"rules": {
"cypress/no-assigning-return-values": "error",
"cypress/no-unnecessary-waiting": "error",
"cypress/assertion-before-screenshot": "warn",
"cypress/no-force": "warn",
"cypress/no-async-tests": "error",
"cypress/no-pause": "error"
},
"env": {
"cypress/globals": true
},
"extends": [
"plugin:cypress/recommended"
]
}
html:
<div
class="example-class"
style='width:400px; height: 400px; background-color: lightseagreen; color:mediumseagreen; line-height: 20px; font-size: 16px'
>
foobar foobar foobar foobar foobar foobar foobar foobar foobar foobar foobar foobar foobar foobar foobar foobar foobar foobar foobar foobar foobar foobar foobar foobar foobar foobar foobar foobar foobar foobar foobar foobar foobar foobar foobar foobar foobar foobar foobar foobar foobar foobar foobar foobar foobar foobar foobar foobar foobar foobar foobar foobar foobar foobar foobar foobar foobar foobar foobar foobar foobar foobar foobar foobar foobar foobar foobar foobar foobar foobar foobar foobar foobar foobar foobar
</div>
spec test:
import 'cypress-axe';
import 'axe-core';
import { Options } from 'cypress-axe';
describe('it should pass or fail as needed', () => {
it('Should fail on contrast', () => {
cy.visit('/');
cy.injectAxe();
cy.configureAxe();
const a11yOptions: Options = {
runOnly: {
type: 'tag',
values: ['wcag2aa']
}
};
cy.checkA11y(null, a11yOptions);
});
it('Should pass contrast', () => {
cy.visit('/');
cy.injectAxe();
cy.configureAxe();
const a11yOptions: Options = {
runOnly: {
type: 'tag',
values: ['wcag2a']
}
};
cy.checkA11y(null, a11yOptions);
});
}
It correctly passes or fails the tests depending on the wcag level, but I get the error above on the runOnly section.
My axe.d.ts file has interface RunOptions { runOnly?: RunOnly | TagValue[] | string[] | string; and RunOnly is defined as
interface RunOnly {
type: RunOnlyType;
values: TagValue[] | string[];
}
If I specifically set const a11yOptions: RunOptions and then do cy.checkA11y(null, a11yOptions as Options); I don't have any eslint errors. But it seems like I shouldn't have to change the types like that.
Would making this little change to checkA11y work?
declare const checkA11y: (
context?: string | Node | axe.ContextObject | undefined,
options?: Options | axe.RunOptions | undefined,
violationCallback?: ((violations: axe.Result[]) => void) | undefined, skipFailures?: boolean
) => void;
Or am I doing something really wrong in my eslint config?
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the axe.d.ts definitions for RunOptions, RunOnly, and Options, then inspect the checkA11y declaration used by the supplied spec test. Confirm that the runOnly configuration is accepted without a type assertion, while both wcag2aa and wcag2a examples still compile and preserve their described pass/fail behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- cypress, typescript
- Domain
- accessibility, testing-qa
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100