Skip to content

This ESLint rule helps enforce best practices in Jasmine tests by discouraging the use of By.css with CSS class selectors. It promotes the use of more robust and reliable selectors, such as data attributes, to improve test stability and maintainability.

License

Notifications You must be signed in to change notification settings

andreasnicolaou/eslint-plugin-no-classes-by-css

Repository files navigation

@andreasnicolaou/eslint-plugin-no-classes-by-css

ESLint plugin to disallow the use of By.css with CSS class selectors in Jasmine tests. This plugin helps enforce better practices by avoiding over-reliance on CSS classes for element selection in tests.

JavaScript GitHub contributors GitHub License GitHub Actions Workflow Status GitHub package.json version Known Vulnerabilities Bundle Size

ESLint Prettier Jest Maintenance codecov

NPM Downloads

Installation

Install the npm package

# If eslint is installed globally
npm install -g @andreasnicolaou/eslint-plugin-no-classes-by-css

# If eslint is installed locally
npm install -D @andreasnicolaou/eslint-plugin-no-classes-by-css

Add the plugin to the plugins section and the rule to the rules section in your .eslintrc

"plugins": [
  "@andreasnicolaou/no-classes-by-css"
],
"rules": {
  "@andreasnicolaou/no-classes-by-css/no-classes-by-css": [
    "error",
    {
      "allowIds": true,
      "allowTags": true
    }
  ]
}

Configuration

  • allowIds: If set to true, the plugin will allow using By.css with ID selectors (e.g., By.css('#elementId')).
  • allowTags: If set to true, the plugin will allow using By.css with tag selectors (e.g., By.css('button')).
  • disallowClasses: By default, the plugin will disallow the use of CSS class selectors in By.css (e.g., By.css('.my-class')).

Usage

This plugin enforces the following:

  • Disallow CSS class selectors (e.g., By.css('.my-class')) in Jasmine tests.
  • Optionally allow tag selectors (e.g., By.css('button')).
  • Optionally allow ID selectors (e.g., By.css('#my-id')).

To ensure proper usage, add the rule to your .eslintrc as shown above.

Example

The following code will cause an ESLint error:

const element = element(By.css('.my-class'));

The correct usage would be either:

// With ID
const element = element(By.css('#my-id'));

// Or with a tag
const element = element(By.css('button'));

Autofixing

Currently, this plugin does not support automatic fixes for code violations. It only detects incorrect usage and warns you to replace CSS class selectors in By.css.

Notice

Make sure to follow best practices by using IDs or tag selectors when selecting elements for tests to ensure more stable and maintainable test code.

About

This ESLint rule helps enforce best practices in Jasmine tests by discouraging the use of By.css with CSS class selectors. It promotes the use of more robust and reliable selectors, such as data attributes, to improve test stability and maintainability.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors 3

  •  
  •  
  •