component-driven / cypress-axe

Test accessibility with axe-core in Cypress
MIT License
622 stars 86 forks source link

eslint error, argument of type runOnly does exist on options #116

Open rramsey opened 2 years ago

rramsey commented 2 years ago

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?