[MAINTAINER] What is the recommended React Testing Library way to test this? about windmill-react-ui

[yurisldk]

I rewrote the tests for the component and also added a test for "Ref". For all other components, I would use this testing way. @estevanmaito Is there any further development of the project planned? I would rewrite all the tests for RTL compatibility.

import React, { createRef } from 'react'
import { render, screen, within } from '@testing-library/react'
import Avatar from '../Avatar'

const avatar = () => screen.getByTestId('avatar')
const img = () => within(avatar()).getByRole('img')

describe('Avatar', () => {
  it('should render without crashing', () => {
    render(<Avatar src="#" />)

    expect(avatar()).toBeInTheDocument()
  })

  describe('Root', () => {
    it('should render with base styles', () => {
      const expectedClasses = 'relative rounded-full inline-block'
      render(<Avatar src="#" />)

      expect(avatar()).toHaveClass(expectedClasses)
    })

    describe('prop: ref', () => {
      it('should be able to access the <Avatar />', () => {
        const avatarRef = createRef<HTMLDivElement>()
        render(<Avatar ref={avatarRef} src="#" />)
        expect(avatar()).toEqual(avatarRef.current)
      })
    })

    describe('prop: size', () => {
      it('should render with large styles', () => {
        const expectedClasses = 'w-10 h-10'
        render(<Avatar src="#" size="large" />)

        expect(avatar()).toHaveClass(expectedClasses)
      })

      it('should render with regular styles', () => {
        const expectedClasses = 'w-8 h-8'
        render(<Avatar src="#" size="regular" />)

        expect(avatar()).toHaveClass(expectedClasses)
      })

      it('should render with small styles', () => {
        const expectedClasses = 'w-6 h-6'
        render(<Avatar src="#" size="small" />)

        expect(avatar()).toHaveClass(expectedClasses)
      })
    })
  })

  describe('Image', () => {
    it('should contain an image with the correct src', () => {
      const expectedSrc = '#'
      render(<Avatar src="#" />)

      expect(img()).toHaveAttribute('src', expectedSrc)
    })

    it('should contain an image with alt text', () => {
      const expectedAltText = 'Lorem'
      render(<Avatar src="#" alt="Lorem" />)

      expect(img()).toHaveAccessibleName(expectedAltText)
    })
  })
})