Skip to content

Instantly share code, notes, and snippets.

@Nelfimov
Created February 9, 2024 09:02
Show Gist options
  • Save Nelfimov/ba3768ecf31f804b7f9378807be4c2fa to your computer and use it in GitHub Desktop.
Save Nelfimov/ba3768ecf31f804b7f9378807be4c2fa to your computer and use it in GitHub Desktop.
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>
))
@Nelfimov
Copy link
Author

Nelfimov commented Feb 9, 2024

/**
 * @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()
  })
})

@Nelfimov
Copy link
Author

Nelfimov commented Feb 9, 2024

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 }

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment