already-registered-prompt.component.tsx

import React                from 'react'
import { FormattedMessage } from 'react-intl'
import { memo }             from 'react'

import { Box }              from '@ui/layout'
import { Link }             from '@ui/link'
import { Space }            from '@ui/text'
import { Text }             from '@ui/text'

export const AlreadyRegisteredPrompt: React.FC = memo(() => (
  <Box alignItems='center' justifyContent='center'>
    <Text fontSize='small.increased' fontWeight='regular' color='text.black' letterSpacing={0.52}>
      <FormattedMessage
        id='already_registered.already_registered'
        defaultMessage='Уже зарегистрированы?'
      />
    </Text>
    <Space />
    <Text fontSize='small.increased' fontWeight='regular' letterSpacing={0.52}>
      <Link href='/auth/login' data-testid='test-link'>
        <FormattedMessage id='already_registered.enter' defaultMessage='Войти' />
      </Link>
    </Text>
  </Box>
))

/**
 * @jest-environment jsdom
 */

import { RenderResult }            from '@testing-library/react'
import { render }                  from '@testing-library/react'

import React                       from 'react'
import { IntlProvider }            from 'react-intl'

import { ThemeProvider }           from '@ui/theme'

import { AlreadyRegisteredPrompt } from '../already-registered-prompt.component'

jest.mock('@ui/theme/src/fonts', () => '')

type CustomRender = (element: React.ReactNode | React.ReactNode[]) => RenderResult

const customRender: CustomRender = (element) =>
  render(
    // eslint-disable-next-line @typescript-eslint/no-empty-function
    <IntlProvider locale='ru' onError={() => {}}>
      <ThemeProvider>{element}</ThemeProvider>
    </IntlProvider>
  )

describe('AlreadyRegisteredPrompt', () => {
  it('renders already registered message', () => {
    const { getByText } = customRender(<AlreadyRegisteredPrompt />)
    const alreadyRegisteredMessage = getByText('Уже зарегистрированы?')
    expect(alreadyRegisteredMessage).toBeTruthy()
  })

  it('renders enter link correctly', () => {
    const { getByRole } = customRender(<AlreadyRegisteredPrompt />)
    const enterLink = getByRole('link')
    expect(enterLink).toBeTruthy()

    const hrefAttributeValue = enterLink.getAttribute('href')
    expect(hrefAttributeValue).toBe('/auth/login')
  })

  it('renders enter link correctly obtained using data-test-id', () => {
    const { getByTestId } = customRender(<AlreadyRegisteredPrompt />)
    const enterLink = getByTestId('test-link')
    expect(enterLink).toBeTruthy()
  })
})

import styled                   from '@emotion/styled'
import { Text }                 from '@atls-ui-parts/text'

import { BaseLinkProps }        from './link.interfaces'
import { appearanceLinkStyles } from './link.styles'
import { shapeLinkStyles }      from './link.styles'
import { activeLinkStyles }     from './link.styles'
import { transitionStyles }     from './link.styles'

const Link = styled(Text.withComponent('a'))<BaseLinkProps>(
  appearanceLinkStyles,
  shapeLinkStyles,
  activeLinkStyles,
  transitionStyles
)

export { Link }