Skip to content

ezraroi/grunt-ensure-id

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

grunt-ensure-id

Ensures that all specified html elements has id attribute.

Getting Started

This plugin requires Grunt ~0.4.5

If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:

npm install grunt-ensure-id --save-dev

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:

grunt.loadNpmTasks('grunt-ensure-id');

The "ensure_id" task

Overview

In your project's Gruntfile, add a section named ensure_id to the data object passed into grunt.initConfig().

grunt.initConfig({
  ensure_id: {
    options: {
      check: 'id',
      elements : ['button', 'a'],
      attrs: ['ng-click', 'ng-submit'],
      autofix: true
    },
    main: {
      src: ['test/fixtures/*']
    },
  },
});

Options

options.check

Type: string Default value: id

The attribute to be observed. Ex. 'id', 'ng-attr-id' or other id variants

options.elements

Type: Array Default value: ['button', 'a', 'input', 'select']

Which HTML elements should have id attribute.

options.attrs

Type: Array Default value: ['ng-click', 'ng-submit']

Which HTML elements which has the above attributes should have id attribute.

options.autofix

Type: boolean Default value: false

Add ID to all detected items in the following format:

nameFile_element_numberFile_uniqueId

Example (test-file.html): testFile_input_2_489

Usage Examples

Default Options

In this example, the default options are used to check form html elements without ids.

grunt.initConfig({
  ensure_id: {
    options: {},
    files: {
      'dest': ['components/**/*.html', 'view/**/*.html'],
    },
  },
});

Custom Options

In this example, custom options are used to do something else with whatever else. So if the testing file has the content Testing and the 123 file had the content 1 2 3, the generated result in this case would be Testing: 1 2 3 !!!

grunt.initConfig({
  ensure_id: {
    options: {
      check: 'id',
      elements : ['button', 'a'],
      attrs: ['ng-click'],
      autofix: true
    },
    files: {
      'dest/default_options': ['src/testing', 'src/123'],
    },
  },
});

Contributing

In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.

Release History

(Nothing yet)

About

grunt task to validate all clickable elements has ids for E2E testing

Resources

License

Stars

Watchers

Forks

Packages

No packages published