Add Percy visual regression testing (VRT) snapshots for all components

[tay1orjones]

Summary

In #8282 Cypress was set up for e2e testing and also added the Percy integration to facilitate visual regression testing via snapshots taken in the e2e tests. We need to enable a snapshot for each component, this epic/issue is to track the status of adding a single baseline snapshot for each component.

Process

High level steps for each component:

1. List in a comment below
2. Open the PR, ensure percy status check UI shows the component has an associated snapshot
   • This may require approval in the Percy UI

Components

• Accordion
• AccordionItem
• Add VRT for AccordionSkeleton #9263
• AspectRatio chore(test): add baseline e2e tests and percy snapshots #8958
• Breadcrumb chore(test): add baseline e2e tests and percy snapshots #8958
• BreadcrumbItem chore(test): add baseline e2e tests and percy snapshots #8958
• Add VRT for BreadcrumbSkeleton #9264
• Button chore(test): add baseline e2e tests and percy snapshots #8958
• Additional VRT for Buttons #9265
• ButtonSet chore(test): add baseline e2e tests and percy snapshots #8958
• Modal chore(test): add baseline e2e tests and percy snapshots #8958
• Add VRT for Checkbox #9266
• Add VRT for CodeSnippet #9267
• Add VRT for ComboBox #9268
• Add VRT for ContentSwitcher
• Add VRT for Copy
• Add VRT for CopyButton
• Add VRT for DataTable
• Add VRT for DatePicker
• Add VRT for Dropdown #9274
• Add VRT for ErrorBoundary
• Add VRT for FileUploader
• Add VRT for Form
• Add VRT for Grid #9278
• Add VRT for Link #9279
• Add VRT for List components
• Add VRT for Loading
• Add VRT for MultiSelect #9283
• Add VRT for Notification components
• Add VRT for NumberInput
• Add VRT for OverflowMenu
• Add VRT for Pagination
• Add VRT for ProgressIndicator
• Add VRT for RadioButton
• Add VRT for Search
• Add VRT for Select
• Add VRT for Skeleton
• Add VRT for SkipToContent
• Add VRT for Slider
• Add VRT for StructuredList
• Add VRT for Tab/Tabs
• Add VRT for Tag v10.47.0 #9949
• Add VRT for TextArea, TextInput
• Add VRT for Tile components
• Add VRT for TimePicker
• Add VRT for Toggle
• Add VRT for Tooltip
• Add VRT for UIShell
• Add VRT for unstable_Heading
• Add VRT for unstable_Menu
• Add VRT for unstable_PageSelector
• Add VRT for unstable_Pagination
• Add VRT for unstable_ProgressBar
• Add VRT for unstable_Section
• Add VRT for unstable_TreeNode
• Add VRT for unstable_TreeView

[tay1orjones]

Here's a super barebones template I've been starting from when adding a component-test.e2e.js file for a component that doesn't have one already:

/**
 * Copyright IBM Corp. 2016, 2018
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */

import 'carbon-components/scss/components/component/_component.scss';

import React from 'react';
import { mount } from '@cypress/react';
import { Component } from './Component';

describe('Component', () => {
  beforeEach(() => {
    mount(<Component>sample_text</Component>);
  });

  it('should render', () => {
    cy.findByText(/sample_text/).should('be.visible');

    // snapshots should always be taken _after_ an assertion that
    // a element/component should be visible. This is to ensure
    // the DOM has settled and the element has fully loaded.
    cy.percySnapshot();
  });
});

It's helpful to look at the stories to understand common permutations or configurations of the component to get the component into a "default" state for baseline snapshots.

[tay1orjones]

Here's a guide on what I've been doing to add these:

1. If the component doesn't have an .e2e file, create one with the template from above.
2. Modify the sass path, validate it's correct
3. Modify the component import
4. Render the component into a default state
   • For this I've been looking at the storybook stories and picking out the most general/simple one and essentially copying it over to the test file.
   • Be sure to render all the different component state/display variants (size props, type/kind props, checked, open/close etc)
5. Remove any unnecessary code relating to the story (bx/prefix code, extraneous components, state wrappers, etc)
6. Add some type of unique text content to the component so it's easily queryable for interactions
7. Modify the 'should render' it block with an appropriate query
8. Add any additional test blocks for component interaction variants (checked, open/closed, etc)
9. cd into packages/react and run yarn cypress open-ct
   • this will open the cypress gui in a new instance of chrome where you can select and run tests, and view the UI it's snapshotting and testing against.
10. Make any modifications needed, save and PR 🎉
11. Ensure percy status check UI shows the component has an associated snapshot. This may require approval in the Percy UI

[tay1orjones]

Helpful links I've referenced along the way:

• Cypress' viewport() documentation
• Cypress' assertion documentation
• Overview of the @testing-library/cypress package that provides RTL-style queries in cypress tests
• List of examples of all RTL-style queries made available by the @testing-library/cypress package

[tay1orjones]

Closing. We've migrated away from cypress to instead use playwright and added baseline VRT snapshots for all components in #11302