refactor: remove emotion from tests and utils (#5769)

* refactor: remove emotion from tests and utils

* fix: typecheck

* fix: tests

Author: lisalupi

packages/form/src/components/Submit/__tests__/__snapshots__/index.test.tsx.snap

@@ -53,12 +53,7 @@ exports[`submit > form is invalid 1`] = `
 
 exports[`submit > form is submitting 1`] = `
 <DocumentFragment>
-  .emotion-0 {
-  -webkit-transition: stroke-dashoffset 0.5s ease 0s;
-  transition: stroke-dashoffset 0.5s ease 0s;
-}
-
-<div
+  <div
     data-testid="testing"
   >
     <form
@@ -90,7 +85,7 @@ exports[`submit > form is submitting 1`] = `
             stroke-width="16"
           />
           <circle
-            class="emotion-0"
+            class="uv_tkulld3"
             cx="50"
             cy="50"
             fill="none"

packages/illustrations/src/components/DynamicIllustration/__tests__/index.test.tsx

@@ -1,27 +1,28 @@
+import type { theme as UVTheme } from '@ultraviolet/themes'
 import {
   consoleDarkerTheme,
   consoleDarkTheme,
   consoleLightTheme,
 } from '@ultraviolet/themes'
-import { shouldMatchEmotionSnapshot } from '@utils/test'
+import { shouldMatchSnapshot } from '@utils/test'
 import { describe, it } from 'vitest'
 import { DynamicIllustration } from '..'
 
 describe('dynamicIllustration', () => {
   it('should work with consoleLightTheme', () =>
-    shouldMatchEmotionSnapshot(
+    shouldMatchSnapshot(
       <DynamicIllustration name="empty" />,
-      consoleLightTheme,
+      consoleLightTheme as typeof UVTheme,
     ))
   it('should work with consoleDarkTheme', () =>
-    shouldMatchEmotionSnapshot(
+    shouldMatchSnapshot(
       <DynamicIllustration name="empty" />,
-      consoleDarkTheme,
+      consoleDarkTheme as typeof UVTheme,
     ))
 
   it('should work with consoleDarkerTheme', () =>
-    shouldMatchEmotionSnapshot(
+    shouldMatchSnapshot(
       <DynamicIllustration name="empty" />,
-      consoleDarkerTheme,
+      consoleDarkerTheme as typeof UVTheme,
     ))
 })

packages/plus/src/components/CodeEditor/__tests__/index.test.tsx

@@ -1,4 +1,4 @@
-import { shouldMatchEmotionSnapshot } from '@utils/test'
+import { shouldMatchSnapshot } from '@utils/test'
 import { describe, it } from 'vitest'
 import { CodeEditor } from '../CodeEditor'
 
@@ -8,7 +8,7 @@ import { CodeEditor } from '../CodeEditor'
 // library.
 describe.skip('codeEditor', () => {
   it('should render correctly with content', () =>
-    shouldMatchEmotionSnapshot(
+    shouldMatchSnapshot(
       <CodeEditor
         extensions="yaml"
         height="600px"
@@ -21,7 +21,7 @@ describe.skip('codeEditor', () => {
     ))
 
   it('should render correctly with label', () =>
-    shouldMatchEmotionSnapshot(
+    shouldMatchSnapshot(
       <CodeEditor
         extensions="yaml"
         height="600px"
@@ -33,7 +33,7 @@ describe.skip('codeEditor', () => {
     ))
 
   it('should render correctly disbled', () =>
-    shouldMatchEmotionSnapshot(
+    shouldMatchSnapshot(
       <CodeEditor
         disabled
         extensions="yaml"
@@ -44,7 +44,7 @@ describe.skip('codeEditor', () => {
     ))
 
   it('should render correctly with copyButton as boolean', () =>
-    shouldMatchEmotionSnapshot(
+    shouldMatchSnapshot(
       <CodeEditor
         copyButton
         extensions="yaml"
@@ -55,7 +55,7 @@ describe.skip('codeEditor', () => {
     ))
 
   it('should render correctly with copyButton as string', () =>
-    shouldMatchEmotionSnapshot(
+    shouldMatchSnapshot(
       <CodeEditor
         copyButton="Copy"
         extensions="yaml"

packages/plus/src/components/ContentCardGroup/__tests__/index.test.tsx

@@ -1,4 +1,4 @@
-import { renderWithTheme, shouldMatchEmotionSnapshot } from '@utils/test'
+import { renderWithTheme, shouldMatchSnapshot } from '@utils/test'
 import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest'
 import { ContentCardGroup } from '..'
 
@@ -12,14 +12,14 @@ describe('contentCardGroup', () => {
   })
 
   test('renders correctly with required title & hread', () =>
-    shouldMatchEmotionSnapshot(
+    shouldMatchSnapshot(
       <ContentCardGroup>
         <ContentCardGroup.Card href="http://scaleway.com" title="title" />
       </ContentCardGroup>,
     ))
 
   test('renders correctly with subtitle', () =>
-    shouldMatchEmotionSnapshot(
+    shouldMatchSnapshot(
       <ContentCardGroup>
         <ContentCardGroup.Card
           href="http://scaleway.com"
@@ -30,7 +30,7 @@ describe('contentCardGroup', () => {
     ))
 
   test('renders correctly with description', () =>
-    shouldMatchEmotionSnapshot(
+    shouldMatchSnapshot(
       <ContentCardGroup>
         <ContentCardGroup.Card
           description="description"
@@ -50,7 +50,7 @@ describe('contentCardGroup', () => {
   })
 
   test('renders correctly with link target _parent', () =>
-    shouldMatchEmotionSnapshot(
+    shouldMatchSnapshot(
       <ContentCardGroup>
         <ContentCardGroup.Card
           href="http://scaleway.com"
@@ -61,7 +61,7 @@ describe('contentCardGroup', () => {
     ))
 
   test('renders correctly with a children', () =>
-    shouldMatchEmotionSnapshot(
+    shouldMatchSnapshot(
       <ContentCardGroup>
         <ContentCardGroup.Card href="http://scaleway.com" target="_parent">
           <div>test</div>
@@ -70,7 +70,7 @@ describe('contentCardGroup', () => {
     ))
 
   test('renders correctly with different title and subtitle and with custom titleAs and subtitleAs', () =>
-    shouldMatchEmotionSnapshot(
+    shouldMatchSnapshot(
       <ContentCardGroup>
         <ContentCardGroup.Card
           href="http://scaleway.com"

packages/plus/src/components/Conversation/__tests__/index.test.tsx

@@ -1,10 +1,10 @@
-import { shouldMatchEmotionSnapshot } from '@utils/test'
+import { shouldMatchSnapshot } from '@utils/test'
 import { describe, it } from 'vitest'
 import { Conversation } from '..'
 
 describe('conversation', () => {
   it('should work with Default', () =>
-    shouldMatchEmotionSnapshot(
+    shouldMatchSnapshot(
       <Conversation>
         <Conversation.Date>2022-03-02</Conversation.Date>
         <Conversation.Message align="left" avatar={<div>Hello</div>}>

packages/plus/src/components/EstimateCost/__tests__/CustomUnitInput.test.tsx

@@ -1,6 +1,6 @@
 import { screen, waitFor } from '@testing-library/react'
 import { userEvent } from '@testing-library/user-event'
-import { renderWithTheme, shouldMatchEmotionSnapshot } from '@utils/test'
+import { renderWithTheme, shouldMatchSnapshot } from '@utils/test'
 import {
   resetIntersectionMocking,
   setupIntersectionMocking,
@@ -16,7 +16,7 @@ describe('estimateCost - CustomUnitInput', () => {
     resetIntersectionMocking()
   })
   test('render default values', () =>
-    shouldMatchEmotionSnapshot(
+    shouldMatchSnapshot(
       <CustomUnitInput
         iteration={{ unit: 'hours', value: 1 }}
         setIteration={() => {}}

packages/plus/src/components/EstimateCost/__tests__/Item.test.tsx

@@ -1,4 +1,4 @@
-import { renderWithTheme, shouldMatchEmotionSnapshot } from '@utils/test'
+import { renderWithTheme, shouldMatchSnapshot } from '@utils/test'
 import {
   resetIntersectionMocking,
   setupIntersectionMocking,
@@ -25,7 +25,7 @@ describe('estimateCost - Item', () => {
   })
 
   test('render with tabulation', () => {
-    shouldMatchEmotionSnapshot(
+    shouldMatchSnapshot(
       <EstimateCost>
         <EstimateCost.Item label="Test" tabulation={2}>
           <EstimateCost.Strong>Test</EstimateCost.Strong>
@@ -35,7 +35,7 @@ describe('estimateCost - Item', () => {
   })
 
   test('render with labelTextVariant', () => {
-    shouldMatchEmotionSnapshot(
+    shouldMatchSnapshot(
       <EstimateCost>
         <EstimateCost.Item label="Test" labelTextVariant="bodySmall">
           <EstimateCost.Strong>Test</EstimateCost.Strong>
@@ -45,7 +45,7 @@ describe('estimateCost - Item', () => {
   })
 
   test('render with priceText', () => {
-    shouldMatchEmotionSnapshot(
+    shouldMatchSnapshot(
       <EstimateCost>
         <EstimateCost.Item label="Test" priceText="included">
           <EstimateCost.Strong>Test</EstimateCost.Strong>
@@ -55,7 +55,7 @@ describe('estimateCost - Item', () => {
   })
 
   test('render with tooltipInfo', () => {
-    shouldMatchEmotionSnapshot(
+    shouldMatchSnapshot(
       <EstimateCost>
         <EstimateCost.Item label="Test" tooltipInfo="This is a tooltip">
           <EstimateCost.Strong>Test</EstimateCost.Strong>
@@ -65,7 +65,7 @@ describe('estimateCost - Item', () => {
   })
 
   test('render with notice', () => {
-    shouldMatchEmotionSnapshot(
+    shouldMatchSnapshot(
       <EstimateCost>
         <EstimateCost.Item label="Test" notice="This is a notice">
           <EstimateCost.Strong>Test</EstimateCost.Strong>

packages/plus/src/components/EstimateCost/__tests__/Regular.test.tsx

@@ -1,6 +1,6 @@
 import { screen, waitFor } from '@testing-library/react'
 import { userEvent } from '@testing-library/user-event'
-import { renderWithTheme, shouldMatchEmotionSnapshot } from '@utils/test'
+import { renderWithTheme, shouldMatchSnapshot } from '@utils/test'
 import {
   resetIntersectionMocking,
   setupIntersectionMocking,
@@ -20,7 +20,7 @@ describe('estimateCost - Regular Item', () => {
   })
 
   test('render basic props', () =>
-    shouldMatchEmotionSnapshot(
+    shouldMatchSnapshot(
       <EstimateCost description="Custom Description">
         <EstimateCost.Item label="Regular">
           <EstimateCost.Regular>This is a regular Item</EstimateCost.Regular>
@@ -29,7 +29,7 @@ describe('estimateCost - Regular Item', () => {
     ))
 
   test('render basic props with overlay', () =>
-    shouldMatchEmotionSnapshot(
+    shouldMatchSnapshot(
       <EstimateCost
         OverlayLeft={OverlaySubmitButton}
         OverlayRight={OverlaySubmitButton}
@@ -48,7 +48,7 @@ describe('estimateCost - Regular Item', () => {
     ))
 
   test('render basic props with overlay beta', () =>
-    shouldMatchEmotionSnapshot(
+    shouldMatchSnapshot(
       <EstimateCost isBeta OverlayRight={OverlaySubmitButton}>
         <EstimateCost.Item
           amount={0}
@@ -67,7 +67,7 @@ describe('estimateCost - Regular Item', () => {
     ))
 
   test('render basic props with long fractions digits', () =>
-    shouldMatchEmotionSnapshot(
+    shouldMatchSnapshot(
       <EstimateCost>
         <EstimateCost.Item label="Regular" longFractionDigits price={0.000001}>
           <EstimateCost.Regular>This is a regular Item</EstimateCost.Regular>
@@ -76,7 +76,7 @@ describe('estimateCost - Regular Item', () => {
     ))
 
   test('render basic props with maxPrice and longFractionDigits', () =>
-    shouldMatchEmotionSnapshot(
+    shouldMatchSnapshot(
       <EstimateCost>
         <EstimateCost.Item
           amount={10}
@@ -91,7 +91,7 @@ describe('estimateCost - Regular Item', () => {
     ))
 
   test('render basic props with maxPrice', () =>
-    shouldMatchEmotionSnapshot(
+    shouldMatchSnapshot(
       <EstimateCost>
         <EstimateCost.Item
           amount={0}
@@ -106,7 +106,7 @@ describe('estimateCost - Regular Item', () => {
     ))
 
   test('render basic props with is not defined', () =>
-    shouldMatchEmotionSnapshot(
+    shouldMatchSnapshot(
       <EstimateCost>
         <EstimateCost.Item isDefined={false} label="Regular">
           <EstimateCost.Regular>This is a regular Item</EstimateCost.Regular>
@@ -115,7 +115,7 @@ describe('estimateCost - Regular Item', () => {
     ))
 
   test('render basic props with sublabel', () =>
-    shouldMatchEmotionSnapshot(
+    shouldMatchSnapshot(
       <EstimateCost>
         <EstimateCost.Item label="Regular" subLabel="Excellent">
           <EstimateCost.Regular>This is a regular Item</EstimateCost.Regular>
@@ -124,7 +124,7 @@ describe('estimateCost - Regular Item', () => {
     ))
 
   test('render basic props with textNotDefined', () =>
-    shouldMatchEmotionSnapshot(
+    shouldMatchSnapshot(
       <EstimateCost>
         <EstimateCost.Item label="Regular" textNotDefined="Not defined">
           <EstimateCost.Regular>This is a regular Item</EstimateCost.Regular>
@@ -133,7 +133,7 @@ describe('estimateCost - Regular Item', () => {
     ))
 
   test('render basic with ellipsis', () =>
-    shouldMatchEmotionSnapshot(
+    shouldMatchSnapshot(
       <EstimateCost>
         <EstimateCost.Item label="Regular" textNotDefined="Not defined">
           <EstimateCost.Regular>
@@ -146,7 +146,7 @@ describe('estimateCost - Regular Item', () => {
     ))
 
   test('render with isDisabledOnOverlay', () =>
-    shouldMatchEmotionSnapshot(
+    shouldMatchSnapshot(
       <EstimateCost>
         <EstimateCost.Item label="Regular">
           <EstimateCost.Regular isDisabledOnOverlay>
@@ -157,7 +157,7 @@ describe('estimateCost - Regular Item', () => {
     ))
 
   test('render with alert', () =>
-    shouldMatchEmotionSnapshot(
+    shouldMatchSnapshot(
       <EstimateCost
         alert="this is an alert"
         alertTitle="this is an alert title"