You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP
Socket
Book a DemoInstallSign in
Socket

babel-plugin-transform-react-qa-attributes

Package Overview
Dependencies
Maintainers
1
Versions
2
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

babel-plugin-transform-react-qa-attributes

Add component's name in `data-qa` attributes to React Components Edit

0.0.9
latest
Source
npmnpm
Version published
Weekly downloads
217
106.67%
Maintainers
1
Weekly downloads
 
Created
Source

Babel plugin transform React qa classes

Build Status js-standard-style npm

FORKED FROM davesnx/babel-plugin-transform-react-qa-classes

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

BeforeAfter
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>
    )
  }
}
      

Why?

Basically the idea is to facilitate Automate Testing on Frontend Applications. Automate Frontend highly requires get the DOMElements and interact with them, adding data-qa attributes make it more easy.

They would only need to get the element like that:

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

That depends on the Test suit, with PageObject can work like that:

div(:component, data_qa: 'component')

Install

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

Use

.babelrc

{
  "presets": ["es2015", "react"], // This asumes that you use those presets
  "env": {
    "dev": {
      "plugins": ["transform-react-qa"]
    }
  }
}

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

You can specify the format of the name that you want and the name of the attribute:

{
  "presets": ["es2015", "react"], // This asumes that you use those presets
  "env": {
    "dev": {
      "plugins": ["transform-react-qa", {
        "attribute": "qa-property",
        "format": "camel"
      }]
    }
  }
}

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

with CLI

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

or programatically with babel-core

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

Keywords

babel

FAQs

Package last updated on 18 Oct 2018

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts