[Visual Testing]: Abstract the test API for developers

[AlexVelezLl]

Product

KDS.

Description

The setup of the visual testing framework in KDS has been carried out successfully. But the current way of doing snapshots involves a lot of boilerplate code, which makes the visual tests complex to write, complex to read, and the maintainability of the code is low. Example of the current behaviour:

describe('KButton', () => {
  if (!canTakeScreenshot()) {
    //... <unit tests>
  } else {
          beforeAll(async () => {
        await page.goto('http://localhost:4000/testing-playground', { waitUntil: 'networkidle2' });
      });

      async function renderComponent(component, props) {
        await page.evaluate(
          ({ component, props }) => {
            window.postMessage(
              {
                type: 'RENDER_COMPONENT',
                component: component,
                props: props,
              },
              '*'
            );
          },
          { component, props }
        );
        await page.waitForSelector('#testing-playground');

        const isComponentRendered = await page.evaluate(() => {
          const testing_playground = document.querySelector('#testing-playground');
          return testing_playground && testing_playground.children.length > 0;
        });

        if (!isComponentRendered) {
          // eslint-disable-next-line no-console
          console.error('Component did not render in the testing playground');
        }
      }

      it('renders correctly with default props', async () => {
        await renderComponent('KButton', { text: 'Test Button' });
        await percySnapshot(page, 'KButton - Default');
      });
    });
  }

So there are a lot of things that we can abstract:

• Avoid developers having to make a huge wrap of the current unit tests with an if(canTakeSnapshot()).
  • Find a cleaner way to select the tests that will be executed when we are running visual tests and unit tests.
• Avoid developers from having to write and know about the page.goto() method and any other boilerplate code, and abstract it so that it is done automatically when we want to run a visual test.
• Abstract the writing of the renderComponent function in all test suites.

The Value Add

This will allow for much easier, faster and more maintainable development of visual tests. And it will contribute a lot to developers easily adopting this pattern.

[KshitijThareja]

Thanks @AlexVelezLl for creating the issue. Will have the PR up soon :)

[AlexVelezLl]

Closed by #685.