Add tests

Author: pksjce

src/TextInput.tsx

@@ -56,6 +56,7 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputInternalProps>(
         hasIcon={!!IconComponent || !!(LeadingIconComponent || TrailingIconComponent)}
         sx={sxProp}
         theme={theme}
+        size={sizeProp}
         width={widthProp}
         minWidth={minWidthProp}
         maxWidth={maxWidthProp}

src/_TextInputWrapper.tsx

@@ -58,7 +58,7 @@ const TextInputWrapper = styled.span<StyledWrapperProps>`
   line-height: 20px;
   color: ${get('colors.fg.default')};
   vertical-align: middle;
-  background-color: ${get('colors.input.bg')};
+  background-color: ${get('colors.canvas.default')};
   background-repeat: no-repeat; // Repeat and position set for form states (success, error, etc)
   background-position: right 8px center; // For form validation. This keeps images 8px from right and centered vertically.
   border: 1px solid ${get('colors.border.default')};

src/__tests__/TextInput.test.tsx

@@ -4,6 +4,7 @@ import {render, mount, behavesAsComponent, checkExports} from '../utils/testing'
 import {render as HTMLRender, cleanup} from '@testing-library/react'
 import {axe, toHaveNoViolations} from 'jest-axe'
 import 'babel-polyfill'
+import {SearchIcon} from '@primer/octicons-react'
 expect.extend(toHaveNoViolations)
 
 describe('TextInput', () => {
@@ -25,17 +26,41 @@ describe('TextInput', () => {
   })
 
   it('renders small', () => {
-    expect(render(<TextInput name="zipcode" variant="small" />)).toMatchSnapshot()
+    expect(render(<TextInput name="zipcode" size="small" />)).toMatchSnapshot()
   })
 
   it('renders large', () => {
-    expect(render(<TextInput name="zipcode" variant="large" />)).toMatchSnapshot()
+    expect(render(<TextInput name="zipcode" size="large" />)).toMatchSnapshot()
   })
 
   it('renders block', () => {
     expect(render(<TextInput name="zipcode" block />)).toMatchSnapshot()
   })
 
+  it('renders warning', () => {
+    expect(render(<TextInput name="zipcode" status="warning" />)).toMatchSnapshot()
+  })
+
+  it('renders error', () => {
+    expect(render(<TextInput name="zipcode" status="error" />)).toMatchSnapshot()
+  })
+
+  it('renders contrast', () => {
+    expect(render(<TextInput name="zipcode" status="contrast" />)).toMatchSnapshot()
+  })
+
+  it('renders placeholder', () => {
+    expect(render(<TextInput name="zipcode" placeholder={'560076'} />)).toMatchSnapshot()
+  })
+
+  it('renders leadingIcon', () => {
+    expect(render(<TextInput name="search" placeholder={'Search'} leadingIcon={SearchIcon} />)).toMatchSnapshot()
+  })
+
+  it('renders trailingIcon', () => {
+    expect(render(<TextInput name="search" placeholder={'Search'} trailingIcon={SearchIcon} />)).toMatchSnapshot()
+  })
+
   it('should call onChange prop with input value', () => {
     const onChangeMock = jest.fn()
     const component = mount(<TextInput onChange={onChangeMock} value="test" />)