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

Parameters

interface InjectDataQaParams {
	// by default inject-data-qa will use input that rollup retrieved
	include?: string[] = null
	exclude?: string[] = null
	// this lib using [change-case](https://www.npmjs.com/package/change-case) to format data-qa attribute value.
	format?: 'paramCase' | 'camelCase' | ... = 'paramCase'
	options?: Options
}

interface Options {
	// if you don't want to use styled-component, should set to be true
	disabledStyledComponent?: boolean
	disabledReactFunctionComponent?: boolean
}