Rollup Plugin Data-QA

rollup plugin of react and styled-component that can injection data-qa attribute to DOM that can display/hide with ENV flag.

inspired by

• babel-plugin-transform-react-styled-components-qa
• babel-plugin-transform-react-qa-classes

Installation

  yarn add -D rollup-plugin-data-qa

Usage

• on rollup.config.js

  import { injectDataQa } from 'rollup-plugin-data-qa'

  export default [{
    ...,
    plugins:[
      injectDataQa()
    ]
  }]

• on script

  E2E_ENABLED=true yarn build

• however if you are using rollup to build the library, you should set the env flag E2E_ENABLED=true in your main project instead.

input

const StyledA = styled.div`...`

const ComponentA = () => (
	<div>
		<StyledA>...</StyledA>
	</div>
)

output

const ComponentA = () => (
	<div data-qa="component-a">
		<div className="styled-xxx" data-qa="styled-a">
			...
		</div>
	</div>
)

Params

include

• Type: String[]
• Default: null

exclude

• Type: String[]
• Default: null

format

• Type: 'paramCase' | 'camelCase' | ..
• Default: 'paramCase'

this lib using change-case to format data-qa attribute value.

options

• Type: Object
• Default: null

options for configure plugin setting

disabledStyledComponent

• Type: Boolean
• Default: false

if you are not using styled-component it should set to be true

disabledReactFunctionComponent

• Type: Boolean
• Default: false