[cv-lib-app-abtesting]

dev commands

$ npm install or yarn install
$ npm run storybook

Installation (not working)

$ npm install --save cv-lib-app-testing-ab
$ yarn add cv-lib-app-testing-ab

Sample use component with cookie

set cookie name: 10234
set cookie value: {"id":"10234","variant":"A","name":"sample with cookie"}

import { Experiment, Variant } from 'cv-lib-app-testing-ab';

const Component = () => {
  return (
    <Experiment id="10234">
      <Variant variantId="A"><h1>Variant A</h1></Variant>
      <Variant variantId="B"><h1>Variant B</h1></Variant>
    <Experiment/>
  )
}

Sample use component without cookie (only for devs testing mode)

import { Experiment, Variant } from 'cv-lib-app-testing-ab';

const Component = () => {
  return (
    <Experiment id="10234" forceExperiment={{ id: '10234', name: 'forced', variant: 'B' }}>
      <Variant variantId="A"><h1>Variant A</h1></Variant>
      <Variant variantId="B"><h1>Variant B</h1></Variant>
    <Experiment/>
  )
}

Sample use "useExperiment" this only works in child elements inside component

import { Experiment, Variant, useExperiment } from 'cv-lib-app-testing-ab'

const ComponentA = () => {
  const { getExperiment } = useExperiment('10234');
  return (
    <>
      <h1>Experiment: {getExperiment().name} - Variant: A</h1>
    </>
  )
}

const ComponentB = () => {
  const { getExperiment } = useExperiment('10234');
  return (
    <>
      <h1>{getExperiment().name} - Variant: B</h1>
    </>
  )
}

const Component = () => {
  return (
    <Experiment id="10234">
      <Variant variantId="A"><ComponentA /></Variant>
      <Variant variantId="B"><ComponentB /></Variant>
    <Experiment/>
  )
}

Sample use "getExperimentFromCookie"

import { getExperimentFromCookie } from 'cv-lib-app-testing-ab'

// return experiment object value
const value = getExperimentFromCookie('myCookie')