Add styles to snapshots (uber#663)

* add styles to snapshots

* ignore modules error

package.json

@@ -73,6 +73,7 @@
  "next-router-mock": "^0.9.13",
  "pino-pretty": "^11.2.2",
  "prettier": "3.2.5",
+ "styletron-engine-snapshot": "^1.0.2",
  "ts-jest": "^29.1.2",
  "typescript": "^5.3.3",
  "typescript-eslint": "^7.13.0",

src/providers/styletron-provider.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 
 import { BaseProvider, type BaseProviderOverrides, createTheme } from 'baseui';
 import { Provider } from 'styletron-react';
+import { type StandardEngine } from 'styletron-standard';
 
 import themeLight from '@/config/theme/theme-light.config';
 import themeProviderOverrides from '@/config/theme/theme-provider-overrides.config';
@@ -14,12 +15,14 @@ const cadenceLightTheme = createTheme(themeLight);
 export default function StyletronProvider({
  children,
  baseProviderOverrides = themeProviderOverrides,
+ styletronEngine = styletron,
 }: {
  children: React.ReactNode;
  baseProviderOverrides?: BaseProviderOverrides;
+ styletronEngine?: StandardEngine;
 }) {
  return (
- <Provider value={styletron}>
+ <Provider value={styletronEngine}>
  <BaseProvider overrides={baseProviderOverrides} theme={cadenceLightTheme}>
  {children}
  </BaseProvider>

src/test-utils/test-provider.tsx

@@ -6,6 +6,8 @@ import {
  QueryClientProvider,
 } from '@tanstack/react-query';
 import { MemoryRouterProvider } from 'next-router-mock/MemoryRouterProvider';
+// @ts-expect-error Could not find a declaration file for module 'styletron-engine-snapshot'
+import { StyletronSnapshotEngine } from 'styletron-engine-snapshot';
 
 import themeProviderOverrides from '@/config/theme/theme-provider-overrides.config';
 import StyletronProvider from '@/providers/styletron-provider';
@@ -15,6 +17,8 @@ import { type Props } from './test-provider.types';
 
 jest.mock('next/router', () => jest.requireActual('next-router-mock'));
 
+const snapshotEngine = new StyletronSnapshotEngine();
+
 const disableAnimationOverrides = {
  AppContainer: {
  style: {
@@ -57,6 +61,7 @@ export const TestProvider = ({
  queryClientConfig = {},
  endpointsMocks,
  enableAnimations = false,
+ isSnapshotTest = false,
 }: Props) => {
  const [client] = useState(() => getQueryClient(queryClientConfig));
  const themeOverridesWithDisabledAnimations = useMemo(() => {
@@ -66,6 +71,9 @@ export const TestProvider = ({
  return (
  <StyletronProvider
  baseProviderOverrides={themeOverridesWithDisabledAnimations}
+ {...(isSnapshotTest && {
+ styletronEngine: snapshotEngine,
+ })}
  >
  <MSWMockHandlers endpointsMocks={endpointsMocks} />
  <MemoryRouterProvider url={router.initialUrl}>

src/test-utils/test-provider.types.tsx

@@ -13,4 +13,5 @@ export type Props = {
  queryClientConfig?: QueryClientConfig;
  endpointsMocks?: MSWMocksHandlersProps['endpointsMocks'];
  enableAnimations?: boolean;
+ isSnapshotTest?: boolean;
 };

src/views/task-list-page/task-list-workers-table-handler-icon/__tests__/task-list-workers-table-handler-icon.test.tsx

@@ -33,7 +33,8 @@ describe(TaskListWorkersTableHandlerIcon.name, () => {
  tests.forEach((test) => {
  it(test.name, () => {
  const { container } = render(
- <TaskListWorkersTableHandlerIcon hasHandler={test.hasHandler} />
+ <TaskListWorkersTableHandlerIcon hasHandler={test.hasHandler} />,
+ { isSnapshotTest: true }
  );
 
  expect(container).toMatchSnapshot();

src/views/task-list-page/task-list-workers-table-handler-icon/__tests__/task-list-workers-table-handler-icon.test.tsx.snapshot

@@ -3,10 +3,20 @@
 exports[`TaskListWorkersTableHandlerIcon should render correctly if worker does not have handler 1`] = `
 <div>
  <div
- class="css-cOgsKQ"
+ class="style={
+ '*, *::before, *::after': {
+ '-moz-animation': 'none !important',
+ '-moz-transition': ' none !important',
+ animation: 'none !important',
+ 'caret-color': ' transparent !important',
+ transition: ' none !important',
+ },
+}
+"
  >
  <div
- class="css-gstZaV"
+ class="style={ color: '#CBCBCB', display: 'block' }
+"
  >
  <svg
  display="block"
@@ -29,18 +39,29 @@ exports[`TaskListWorkersTableHandlerIcon should render correctly if worker does
  </div>
  </div>
  <div
- class="css-PKJb"
+ class="style={}
+"
  />
 </div>
 `;
 
 exports[`TaskListWorkersTableHandlerIcon should render correctly if worker has handler 1`] = `
 <div>
  <div
- class="css-cOgsKQ"
+ class="style={
+ '*, *::before, *::after': {
+ '-moz-animation': 'none !important',
+ '-moz-transition': ' none !important',
+ animation: 'none !important',
+ 'caret-color': ' transparent !important',
+ transition: ' none !important',
+ },
+}
+"
  >
  <div
- class="css-fbOyLS"
+ class="style={ color: '#009A51', display: 'block' }
+"
  >
  <svg
  display="block"
@@ -63,7 +84,8 @@ exports[`TaskListWorkersTableHandlerIcon should render correctly if worker has h
  </div>
  </div>
  <div
- class="css-PKJb"
+ class="style={}
+"
  />
 </div>
 `;

src/views/workflow-history/workflow-history-event-status-badge/__tests__/workflow-history-tab-event-status-badge.test.tsx

@@ -12,7 +12,8 @@ describe('WorkflowHistoryEventStatusBadge', () => {
  it('should match snapshot when status is not valid and badge should not be rendered', () => {
  const { container } = render(
  // @ts-expect-error invalid status
- <WorkflowHistoryEventStatusBadge status="INVALID_STATUS" />
+ <WorkflowHistoryEventStatusBadge status="INVALID_STATUS" />,
+ { isSnapshotTest: true }
  );
  expect(container).toMatchSnapshot();
  });
@@ -29,7 +30,8 @@ describe('WorkflowHistoryEventStatusBadge', () => {
  for (const size of Object.values(WORKFLOW_EVENT_STATUS_BADGE_SIZES)) {
  it(`should match snapshot when status is ${status} and size is ${size}`, () => {
  const { container } = render(
- <WorkflowHistoryEventStatusBadge status={status} size={size} />
+ <WorkflowHistoryEventStatusBadge status={status} size={size} />,
+ { isSnapshotTest: true }
  );
  expect(container).toMatchSnapshot();
  });