chore(BaseStyles): Add vrt tests (#5346)

* Add tests for basestyles

* Add changeset

* test(vrt): update snapshots

* Add snapshot

* Remove changeset

---------

Co-authored-by: JelloBagel <[email protected]>

e2e/components/BaseStyles.test.ts

@@ -0,0 +1,44 @@
+import {test, expect} from '@playwright/test'
+import {visit} from '../test-helpers/storybook'
+import {themes} from '../test-helpers/themes'
+
+const stories = [
+  {
+    id: 'behaviors-basestyles-dev--default',
+    title: 'Dev Default',
+  },
+] as const
+
+test.describe('BaseStyles', () => {
+  for (const story of stories) {
+    test.describe(story.title, () => {
+      for (const theme of themes) {
+        test.describe(theme, () => {
+          test('default @vrt', async ({page}) => {
+            await visit(page, {
+              id: story.id,
+              globals: {
+                colorScheme: theme,
+              },
+            })
+
+            // Default state
+            expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
+              `BaseStyles.${story.title}.${theme}.png`,
+            )
+          })
+
+          test('axe @aat', async ({page}) => {
+            await visit(page, {
+              id: story.id,
+              globals: {
+                colorScheme: theme,
+              },
+            })
+            await expect(page).toHaveNoViolations()
+          })
+        })
+      }
+    })
+  }
+})

packages/react/src/BaseStyles.dev.stories.tsx

@@ -0,0 +1,11 @@
+import {BaseStyles} from '.'
+import type {Meta} from '@storybook/react'
+import React from 'react'
+import type {ComponentProps} from './utils/types'
+
+export default {
+  title: 'Behaviors/BaseStyles/Dev',
+  component: BaseStyles,
+} as Meta<ComponentProps<typeof BaseStyles>>
+
+export const Default = () => <BaseStyles>Hello</BaseStyles>

packages/react/src/__tests__/BaseStyles.test.tsx

@@ -0,0 +1,33 @@
+import {render} from '@testing-library/react'
+import MatchMediaMock from 'jest-matchmedia-mock'
+import 'jest-styled-components'
+import React from 'react'
+import {BaseStyles} from '..'
+
+let matchMedia: MatchMediaMock
+
+describe('BaseStyles', () => {
+  beforeAll(() => {
+    matchMedia = new MatchMediaMock()
+  })
+
+  afterEach(() => {
+    matchMedia.clear()
+  })
+
+  it('has default styles', () => {
+    const {container} = render(<BaseStyles></BaseStyles>)
+    expect(container).toMatchSnapshot()
+  })
+
+  it('respects styling props', () => {
+    const styles = {
+      color: '#f00',
+      fontFamily: 'Arial',
+      lineHeight: '3.5',
+    }
+
+    const {container} = render(<BaseStyles {...styles}></BaseStyles>)
+    expect(container.children[0]).toHaveStyle({color: '#f00', 'font-family': 'Arial', 'line-height': '3.5'})
+  })
+})

packages/react/src/__tests__/__snapshots__/BaseStyles.test.tsx.snap

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BaseStyles has default styles 1`] = `
+.c0 {
+  font-family: normal;
+  line-height: default;
+  color: fg.default;
+}
+
+<div>
+  <div
+    class="c0"
+    color="fg.default"
+    data-color-mode="light"
+    data-portal-root="true"
+    font-family="normal"
+  />
+</div>
+`;