Skip to content

test: migrate batch 2 component tests to browser locators #8614

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
tay1orjones wants to merge 1 commit into
base: main
Choose a base branch
from
Open

test: migrate batch 2 component tests to browser locators #8614

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
290 changes: 138 additions & 152 deletions packages/react/src/Autocomplete/Autocomplete.test.tsx
View file
Open in desktop

Large diffs are not rendered by default.

39 changes: 20 additions & 19 deletions packages/react/src/Avatar/Avatar.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import {describe, expect, it} from 'vitest'
import {render, screen} from '@testing-library/react'
import {render} from '@testing-library/react'
import {page} from 'vitest/browser'
import Avatar from '../Avatar'
import {implementsClassName} from '../utils/testing'
import classes from './Avatar.module.css'
Expand All @@ -8,35 +9,35 @@ describe('Avatar', () => {
implementsClassName(Avatar, classes.Avatar)

describe('Avatar data-component attribute', () => {
it('renders Avatar with data-component attribute', () => {
it('renders Avatar with data-component attribute', async () => {
render(<Avatar src="primer.png" alt="" data-testid="avatar" />)
const avatar = screen.getByTestId('avatar')
expect(avatar).toHaveAttribute('data-component', 'Avatar')
const avatar = page.getByTestId('avatar')
await expect.element(avatar).toHaveAttribute('data-component', 'Avatar')
})
})

it('renders small by default', () => {
it('renders small by default', async () => {
const size = 20
render(<Avatar src="primer.png" data-testid="avatar" />)
const avatar = screen.getByTestId('avatar')
expect(avatar).toHaveAttribute('width', size.toString())
expect(avatar).toHaveAttribute('height', size.toString())
const avatar = page.getByTestId('avatar')
await expect.element(avatar).toHaveAttribute('width', size.toString())
await expect.element(avatar).toHaveAttribute('height', size.toString())
})

it('respects the size prop', () => {
it('respects the size prop', async () => {
render(<Avatar size={40} src="primer.png" alt="github" data-testid="avatar" />)
const avatar = screen.getByTestId('avatar')
expect(avatar).toHaveAttribute('width', '40')
expect(avatar).toHaveAttribute('height', '40')
const avatar = page.getByTestId('avatar')
await expect.element(avatar).toHaveAttribute('width', '40')
await expect.element(avatar).toHaveAttribute('height', '40')
})

it('passes through the src prop', () => {
it('passes through the src prop', async () => {
render(<Avatar src="primer.png" alt="" data-testid="avatar" />)
const avatar = screen.getByTestId('avatar')
expect(avatar).toHaveAttribute('src', 'primer.png')
const avatar = page.getByTestId('avatar')
await expect.element(avatar).toHaveAttribute('src', 'primer.png')
})

it('should support the `style` prop without overriding internal styles', () => {
it('should support the `style` prop without overriding internal styles', async () => {
render(
<Avatar
data-testid="avatar"
Expand All @@ -47,13 +48,13 @@ describe('Avatar', () => {
/>,
)

const avatar = screen.getByTestId('avatar')
const avatar = page.getByTestId('avatar')

// Test that both the custom CSS property and the style prop are applied
expect(avatar).toHaveStyle('--avatarSize-regular: 20px')
await expect.element(avatar).toHaveStyle('--avatarSize-regular: 20px')

// Check that style attribute contains both the custom property and the background
const styleAttr = avatar.getAttribute('style') || ''
const styleAttr = avatar.element().getAttribute('style') || ''
expect(styleAttr).toContain('--avatarSize-regular: 20px')
expect(styleAttr).toContain('background: black')
})
Expand Down
36 changes: 19 additions & 17 deletions packages/react/src/AvatarStack/AvatarStack.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,57 +26,59 @@ describe('AvatarStack', () => {
implementsClassName(AvatarStack, classes.AvatarStack)

describe('AvatarStack data-component attributes', () => {
it('renders AvatarStack with data-component attribute', () => {
it('renders AvatarStack with data-component attribute', async () => {
const {container} = render(avatarComp)
const root = container.querySelector('[data-component="AvatarStack"]')
expect(root).toBeInTheDocument()
const root = container.querySelector<HTMLElement>('[data-component="AvatarStack"]')
await expect.element(root).toBeInTheDocument()
})

it('renders AvatarStack.Body with data-component attribute', () => {
it('renders AvatarStack.Body with data-component attribute', async () => {
const {container} = render(avatarComp)
const body = container.querySelector('[data-component="AvatarStack.Body"]')
expect(body).toBeInTheDocument()
const body = container.querySelector<HTMLElement>('[data-component="AvatarStack.Body"]')
await expect.element(body).toBeInTheDocument()
})
})

it('respects alignRight props', () => {
it('respects alignRight props', async () => {
const {container} = render(rightAvatarComp)
const root = container.querySelector('[data-component="AvatarStack"]')
expect(root).toHaveAttribute('data-align-right', '')
const root = container.querySelector<HTMLElement>('[data-component="AvatarStack"]')
await expect.element(root).toHaveAttribute('data-align-right', '')
})

it('should have a tabindex of 0 if there are no interactive children', () => {
it('should have a tabindex of 0 if there are no interactive children', async () => {
const {container} = render(avatarComp)
expect(container.querySelector('[tabindex="0"]')).toBeInTheDocument()
await expect.element(container.querySelector<HTMLElement>('[tabindex="0"]')).toBeInTheDocument()
})

it('should not have a tabindex if there are interactive children', () => {
it('should not have a tabindex if there are interactive children', async () => {
const {container} = render(
<AvatarStack>
<button type="button">Click me</button>
</AvatarStack>,
)
expect(container.querySelector('[tabindex="0"]')).not.toBeInTheDocument()
await expect.element(container.querySelector<HTMLElement>('[tabindex="0"]')).not.toBeInTheDocument()
})

it('should not have a tabindex if disableExpand is true', () => {
it('should not have a tabindex if disableExpand is true', async () => {
const {container} = render(
<AvatarStack disableExpand>
<img src="https://avatars.githubusercontent.com/u/7143434?v=4" alt="" />
<img src="https://avatars.githubusercontent.com/github" alt="" />
</AvatarStack>,
)
expect(container.querySelector('[tabindex="0"]')).not.toBeInTheDocument()
await expect.element(container.querySelector<HTMLElement>('[tabindex="0"]')).not.toBeInTheDocument()
})

it('should support `style` prop on the outermost element', () => {
it('should support `style` prop on the outermost element', async () => {
const style = {backgroundColor: 'red'}
const {container} = render(
<AvatarStack style={style}>
<img src="https://avatars.githubusercontent.com/u/7143434?v=4" alt="" />
<img src="https://avatars.githubusercontent.com/github" alt="" />
</AvatarStack>,
)
expect(container.firstChild).toHaveStyle('background-color: rgb(255, 0, 0)')
await expect
.element(container.querySelector<HTMLElement>('[data-component="AvatarStack"]'))
.toHaveStyle('background-color: rgb(255, 0, 0)')
})
})
Loading
Loading