babel-plugin-transform-react-qa-classes

    1.6.0 • Public • Published

    Babel plugin transform React qa classes

    Build Status js-standard-style npm

    This babel plugin adds the component name as a data-qa in each React Component.

    Before After
    class componentName extends Component {
      render () {
        return (
          <div>
            <div>Hello world</div>
          </div>
        )
      }
    }
          
    class componentName extends Component {
      render () {
        return (
          <div data-qa='component-name'>
            <div>Hello world</div>
          </div>
        )
      }
    }
          

    This plugin asumes that you are using React and Babel as a building tool to generate your bundle.

    Why?

    The idea is to facilitate Automate Testing on Frontend Applications. Automate Frontend highly requires to get the DOMElements and interact with them, adding data-qa attributes automatically to all the components will make it more easy, rather than do it by code, with this way you won't have this data-qa in production code.

    On the testing site would need to get the element like that:

    document.querySelectorAll('[data-qa="component"]')

    That depends on the Test suit stack, for example with Ruby and PageObject looks like that:

    div(:component, data_qa: 'component')

    Install

    npm install --save-dev babel-plugin-transform-react-qa-classes
    # or yarn add -D 

    Use

    Inside .babelrc:

    {
      "presets": ["es2015", "react"],
      "env": {
        "dev": {
          "plugins": ["transform-react-qa-classes"]
        }
      }
    }

    Note: Adding this plugin only on DEV mode (or PREPROD) allows not having data-qa attributes on production.

    You can specify the format of the name that you want and the name of the attribute, inside your babelrc:

    {
      "presets": ["es2015", "react"],
      "env": {
        "dev": {
          "plugins": ["transform-react-qa-classes", {
            "attribute": "qa-property",
            "format": "camel"
          }]
        }
      }
    }

    Note: format can be: "camel" (camelCase), "snake" (snake_case), "kebab" (kebab-case) or "pascal" (PascalCase).

    with CLI

    babel --plugins transform-react-qa-classes component.js

    or programatically with babel-core

    require('babel-core').transform(`code`, {
      plugins: ['transform-react-qa-classes']
    })

    Contributing

    PRs for additional features are welcome!

    There's still a few feature that are missing, for example each change of the state of the component is added as a data-qa-state into the DOM. Support for more libraries.

    I recommend checking this handbook about how to write babel plugins in order to learn.

    • Clone the repo: git clone https://github.com/davesnx/babel-plugin-transform-react-qa-classes
    • Fork it & set origin as this repo: git remote set-url origin https://github.com/YOUR_USERNAME/babel-plugin-transform-react-qa-classes.git
    • Create a branch: git checkout -b BRANCH_NAME
    • Do the code
    • Create a PR to this repo.

    In order to do the commits I prefer to use Commitizen and there's a githook setted up when you push it runs the tests.

    Feedback

    Is your company using it? I would love to know more! Could you answer this small Typeform :P

    License

    MIT

    Install

    npm i babel-plugin-transform-react-qa-classes

    DownloadsWeekly Downloads

    4,120

    Version

    1.6.0

    License

    MIT

    Unpacked Size

    15.3 kB

    Total Files

    8

    Last publish

    Collaborators

    • davesnx