Chromatic QA checks with different storybook knob values

[sareh]

Is your feature request related to a problem? Please describe.
Currently, Chromatic QA checks just the standard set of props in Storybook.

For examples such as the Consent Banner, the standard is using the news service. e.g. ?path=/story/consentbanner--default
It does not carry out tests against a service such as arabic, which has a different layout. It should be testing this variant as well.

https://www.chromaticqa.com/component?appId=5d28eb5ee163f6002046d6fb&name=Components%7CConsentBanner&mode=interactive&buildNumber=289

Describe the solution you'd like
There should be automated tests that check different variants of Storybook examples.

Describe alternatives you've considered
Updating our stories, so we have a separate url for each variant. e.g. ConsentBanner RTL & ConsentBanner LTR.

Testing notes
[Tester to complete]

Dev insight: Will Cypress tests be required or are unit tests sufficient? Will there be any potential regression? etc

Additional context
Add any other context or screenshots about the feature request here.

[chris-hinds]

We should see about disabling the default story on the chromatic runs and look to add a few more stories with the service value hardcoded for running against chromaticqa

[oluoluoxenfree]

@jroebu14 proposed a better solution to just hardcoding all the values:

import React from 'react';
import {
  color,
  select,
  number,
  text,
  withKnobs,
  boolean,
} from '@storybook/addon-knobs';
import { storiesOf } from '@storybook/react';
import * as svgs from '@bbc/psammead-assets/svgs';
import { dirDecorator, inputProvider } from '@bbc/psammead-storybook-helpers';
import { C_POSTBOX, C_WHITE } from '@bbc/psammead-styles/colours';
import notes from '../README.md';
import Brand from './index';

const inputs = () => {
  // capitalization is only for presentation purpose on the knob
  const options = Object.keys(svgs)
    .filter(key => key !== 'BBC_BLOCKS')
    .map(key => key.charAt(0).toUpperCase() + key.slice(1));

  const svgChoice = select('Service SVG', options, 'News').toLowerCase();
  const productInput = text('Product', 'BBC News');
  const serviceLocalisedNameInput = text('Localised service name', 'Yoruba');
  const svgRatio = svgs[svgChoice].ratio;
  const svgMaxHeight = 24;
  const svgMinHeight = 16;
  const minWidthInput = number('minimum svg width', svgRatio * svgMinHeight);
  const maxWidthInput = number('maximum svg width', svgRatio * svgMaxHeight);
  const svgHeightInput = number('desired height svg', svgMaxHeight);
  const borderBottom = boolean('Border Bottom', false);
  const borderTop = boolean('Border Top', false);
  const backgroundColour = color('Background colour', `${C_POSTBOX}`);
  const logoColour = color('Logo colour', `${C_WHITE}`);

  return {
    productInput,
    serviceLocalisedNameInput,
    svgChoice,
    svgHeightInput,
    minWidthInput,
    maxWidthInput,
    borderTop,
    borderBottom,
    backgroundColour,
    logoColour,
  };
};

const stories = storiesOf('Components|Brand', module)
  .addDecorator(withKnobs)
  .addDecorator(dirDecorator);

[
  {
    title: 'without brand link',
    component: () => {
      const {
        productInput,
        serviceLocalisedNameInput,
        svgHeightInput,
        minWidthInput,
        maxWidthInput,
        svgChoice,
        borderBottom,
        borderTop,
        backgroundColour,
        logoColour,
      } = inputs();

      return (
        <Brand
          product={productInput}
          serviceLocalisedName={serviceLocalisedNameInput}
          svgHeight={svgHeightInput}
          minWidth={minWidthInput}
          maxWidth={maxWidthInput}
          svg={svgs[svgChoice]}
          borderBottom={borderBottom}
          borderTop={borderTop}
          backgroundColour={backgroundColour}
          logoColour={logoColour}
        />
      );
    },
  },
  {
    title: 'with brand link',
    component: () => {
      const {
        productInput,
        serviceLocalisedNameInput,
        svgHeightInput,
        minWidthInput,
        maxWidthInput,
        svgChoice,
        borderBottom,
        borderTop,
        backgroundColour,
        logoColour,
      } = inputs();

      return (
        <Brand
          product={productInput}
          serviceLocalisedName={serviceLocalisedNameInput}
          svgHeight={svgHeightInput}
          minWidth={minWidthInput}
          maxWidth={maxWidthInput}
          svg={svgs[svgChoice]}
          url="https://www.bbc.com/news"
          borderBottom={borderBottom}
          borderTop={borderTop}
          backgroundColour={backgroundColour}
          logoColour={logoColour}
        />
      );
    },
  },
].forEach(({ title, component }) => {
  ['LTR', 'RTL'].forEach(service => {
    stories.add(
      `${service} - ${title}`,
      inputProvider({
        options: { defaultService: service },
        componentFunction: component,
      }),
      { notes },
    );
  });
});

[jroebu14]

@oluoluoxenfree and I were looking into automatically creating RTL variants of stories. We found it's possible but not with the current input provider set up that sets the default service of a story. I've created an issue for this that I think should be fixed if we were to continue with the approach in #2366

The other option is to manually create RTL variants for every story which could be time consuming and error prone.

[chris-hinds]

@jroebu14 & @oluoluoxenfree I think what you are working on in #2366 is the better solution, especially as most of what the input provider did was us was pulled out a while back.