11import React , { useState } from 'react'
2- import { render } from '@testing-library/react'
2+ import { render , screen } from '@testing-library/react'
33import userEvent from '@testing-library/user-event'
4- import { TextInput , TextInputField } from '../'
4+ import { TextInput } from '../'
55import { mockRef } from '../../test/utils'
6+ import colors from '../../themes/default/tokens/colors'
67
78function makeTextInputFixture ( props = { } ) {
89 return < TextInput data-testid = "input" { ...props } />
910}
1011
11- function makeTextInputFieldFixture ( props = { } ) {
12- return < TextInputField data-testid = "input" label = "Name" { ...props } />
13- }
14-
1512describe ( 'TextInput' , ( ) => {
1613 it ( 'should forward ref to underlying <input />' , ( ) => {
1714 const ref = mockRef ( )
@@ -26,16 +23,15 @@ describe('TextInput', () => {
2623 } )
2724
2825 it ( 'should accept placeholder text' , ( ) => {
29- const { getByPlaceholderText } = render ( makeTextInputFixture ( { placeholder : 'Enter text here' } ) )
26+ render ( makeTextInputFixture ( { placeholder : 'Enter text here' } ) )
3027
31- expect ( getByPlaceholderText ( 'Enter text here' ) ) . toBeInTheDocument ( )
28+ expect ( screen . getByPlaceholderText ( 'Enter text here' ) ) . toBeInTheDocument ( )
3229 } )
3330
3431 it ( 'should set an invalid state if `isInvalid` is `true`' , ( ) => {
35- const { getByTestId } = render ( makeTextInputFixture ( { isInvalid : true } ) )
36- const input = getByTestId ( 'input' )
32+ render ( makeTextInputFixture ( { isInvalid : true } ) )
3733
38- expect ( input ) . toHaveAttribute ( 'aria-invalid' , 'true' )
34+ expect ( screen . getByTestId ( ' input' ) ) . toHaveAttribute ( 'aria-invalid' , 'true' )
3935 } )
4036
4137 it ( 'should accept an `onChange` handler to be a controlled component' , ( ) => {
@@ -51,60 +47,56 @@ describe('TextInput', () => {
5147 )
5248 }
5349
54- const { getByDisplayValue , getByTestId } = render ( < ControlledTextInput /> )
55- const input = getByTestId ( 'input' )
50+ render ( < ControlledTextInput /> )
51+ const input = screen . getByTestId ( 'input' )
5652 userEvent . click ( input )
5753
5854 expect ( document . activeElement ) . toEqual ( input )
5955 userEvent . type ( input , 'Testing' )
60- expect ( getByDisplayValue ( 'Testing' ) ) . toEqual ( input )
56+ expect ( screen . getByDisplayValue ( 'Testing' ) ) . toEqual ( input )
6157 } )
6258
6359 it ( 'should not be interactive if `disabled` is passed in' , ( ) => {
64- const { getByDisplayValue , getByTestId } = render ( makeTextInputFixture ( { disabled : true } ) )
65- const input = getByTestId ( 'input' )
60+ render ( makeTextInputFixture ( { disabled : true } ) )
61+ const input = screen . getByTestId ( 'input' )
6662 userEvent . type ( input , 'Testing' )
6763
68- expect ( ( ) => getByDisplayValue ( 'Testing' ) ) . toThrowError ( )
69- expect ( getByDisplayValue ( '' ) ) . toEqual ( input )
70- } )
71- } )
72-
73- describe ( 'TextInputField' , ( ) => {
74- it ( 'Should render without crashing' , ( ) => {
75- expect ( ( ) => render ( makeTextInputFieldFixture ( ) ) ) . not . toThrow ( )
76- } )
77-
78- it ( 'Should have expected accessible name when `label` prop' , ( ) => {
79- const { getByLabelText, getByTestId } = render ( makeTextInputFieldFixture ( ) )
80- expect ( getByLabelText ( 'Name' ) ) . toBeInTheDocument ( )
81- expect ( getByTestId ( 'input' ) ) . toHaveAccessibleName ( 'Name' )
82- } )
83-
84- it ( 'Should add hint text to accessible description when `hint` prop provided' , ( ) => {
85- const { getByTestId, getByText } = render ( makeTextInputFieldFixture ( { hint : 'Enter a value in the input' } ) )
86- expect ( getByText ( 'Enter a value in the input' ) ) . toBeInTheDocument ( )
87- expect ( getByTestId ( 'input' ) ) . toHaveAccessibleDescription ( 'Enter a value in the input' )
88- } )
89-
90- it ( 'Should render an astrix when `required` is passed in' , ( ) => {
91- const { getByTitle } = render ( makeTextInputFieldFixture ( { required : true } ) )
92- expect ( getByTitle ( 'This field is required.' ) ) . toBeInTheDocument ( )
64+ expect ( ( ) => screen . getByDisplayValue ( 'Testing' ) ) . toThrowError ( )
65+ expect ( screen . getByDisplayValue ( '' ) ) . toEqual ( input )
9366 } )
9467
95- it ( 'Should render a `validationMessage` when passed in' , ( ) => {
96- const { getByTestId, getByText } = render ( makeTextInputFieldFixture ( { validationMessage : 'Please enter a value.' } ) )
97- expect ( getByText ( 'Please enter a value.' ) ) . toBeInTheDocument ( )
98- expect ( getByTestId ( 'input' ) ) . toHaveAccessibleDescription ( 'Please enter a value.' )
68+ it . each ( [ undefined , 'default' ] ) ( 'should render with gray400 border when appearance is %p' , appearance => {
69+ render ( makeTextInputFixture ( { appearance } ) )
70+
71+ // For some reason we were applying a border: 1px solid transparent style and then overriding it with
72+ // the individual borderColor style, see https://github.com/segmentio/evergreen/issues/1581
73+ expect ( screen . getByTestId ( 'input' ) ) . not . toHaveStyle ( {
74+ borderTop : '1px solid transparent' ,
75+ borderBottom : '1px solid transparent' ,
76+ borderLeft : '1px solid transparent' ,
77+ borderRight : '1px solid transparent'
78+ } )
79+
80+ // ui-box splits the borderColor prop into individual sides/styles, so border: colors.gray400
81+ // won't pass this test
82+ expect ( screen . getByTestId ( 'input' ) ) . toHaveStyle ( {
83+ borderTopColor : colors . gray400 ,
84+ borderBottomColor : colors . gray400 ,
85+ borderLeftColor : colors . gray400 ,
86+ borderRightColor : colors . gray400
87+ } )
9988 } )
10089
101- it ( 'Should correctly compose an accessible description from multiple hints' , ( ) => {
102- const { getByTestId, getByText } = render (
103- makeTextInputFieldFixture ( { description : 'A description.' , hint : 'Am hint.' , validationMessage : 'Try again.' } )
104- )
105- expect ( getByText ( 'A description.' ) ) . toBeInTheDocument ( )
106- expect ( getByText ( 'Am hint.' ) ) . toBeInTheDocument ( )
107- expect ( getByText ( 'Try again.' ) ) . toBeInTheDocument ( )
108- expect ( getByTestId ( 'input' ) ) . toHaveAccessibleDescription ( 'A description. Try again. Am hint.' )
90+ it ( 'should render with transparent border when appearance is none' , ( ) => {
91+ render ( makeTextInputFixture ( { appearance : 'none' } ) )
92+
93+ // For some reason we were applying a border: 1px solid transparent style and then overriding it with
94+ // the individual borderColor style, see https://github.com/segmentio/evergreen/issues/1581
95+ expect ( screen . getByTestId ( 'input' ) ) . toHaveStyle ( {
96+ borderTop : '1px solid transparent' ,
97+ borderBottom : '1px solid transparent' ,
98+ borderLeft : '1px solid transparent' ,
99+ borderRight : '1px solid transparent'
100+ } )
109101 } )
110102} )
0 commit comments