@testgorilla/tgo-linting

Linting rules and code quality standards for TestGorilla projects.

Installation

npm install @testgorilla/tgo-linting @angular-eslint/template-parser --save-dev

Usage

This package supports both modern flat config (ESLint 9+) and legacy config formats (ESLint 8.x and below).

Flat Config (ESLint 9+)

Recommended approach:

// eslint.config.js
import tgoPlugin from '@testgorilla/tgo-linting';

export default [
  tgoPlugin.configs.recommended,
  // Your other configurations
];

Manual configuration:

// eslint.config.js
import tgoPlugin from '@testgorilla/tgo-linting';

export default [
  {
    plugins: {
      tgo: tgoPlugin,
    },
    rules: {
      'tgo/require-data-testid': 'warn',
    },
  },
];

Legacy Config (ESLint 8.x and below)

Using the legacy preset:

// .eslintrc.js
const { legacy } = require('@testgorilla/tgo-linting');

module.exports = {
  // Your base config
  extends: [
    // Your other extends
  ],
  plugins: ['tgo'],
  overrides: [
    {
      files: ['*.html'],
      parser: '@angular-eslint/template-parser',
      ...legacy,
    },
  ],
};

Manual configuration:

// .eslintrc.js
module.exports = {
  plugins: ['tgo'],
  extends: [
    // Your other extends
  ],
  overrides: [
    {
      files: ['*.html'],
      parser: '@angular-eslint/template-parser',
      rules: {
        'tgo/require-data-testid': 'warn',
      },
    },
  ],
};

Important Notes

• Template Parser Required: The tgo/require-data-testid rule only works with HTML/Angular templates. You must configure @angular-eslint/template-parser for .html files.
• Angular Projects: If you're using @angular-eslint, the template parser is usually already configured for HTML files in your overrides.

Rules

tgo/require-data-testid

Ensures that specific HTML elements have a data-testid attribute for testing purposes. This makes it easier to write stable E2E tests by providing consistent selectors.

Severity: warn (in recommended config)

Category: Testing Best Practices

Default Elements

By default, this rule checks the following elements:

• button
• mat-checkbox
• input
• mat-radio-button
• mat-radio-group
• h1
• table, header-table, mat-table
• img
• textarea
• ng-select
• video
• app-tgo-choice
• testgorilla-confirm-dialog
• mat-form-field
• tgo-checkout-message
• mat-dialog-actions
• ui-button

Configuration

You can customize which elements to check:

{
  rules: {
    'tgo/require-data-testid': ['warn', {
      tags: ['button', 'input', 'custom-element']
    }]
  }
}

Examples

❌ Incorrect

<button>Click me</button>
<input type="text" />

✅ Correct

<button data-testid="submit-button">Click me</button>
<input type="text" data-testid="email-input" />

Development

Building

nx build tgo-linting

Testing

nx test tgo-linting

Linting

nx lint tgo-linting

License

PROPRIETARY - © TestGorilla