diff --git a/packages/chakra-ui-core/src/CTextarea/CTextarea.js b/packages/chakra-ui-core/src/CTextarea/CTextarea.js index c491a67d..25fbae48 100644 --- a/packages/chakra-ui-core/src/CTextarea/CTextarea.js +++ b/packages/chakra-ui-core/src/CTextarea/CTextarea.js @@ -26,7 +26,7 @@ const CTextarea = { name: 'CTextarea', functional: true, model: { - prop: 'inputValue', + prop: 'value', event: 'change' }, props: { diff --git a/packages/chakra-ui-core/src/CTextarea/tests/CTextarea.test.js b/packages/chakra-ui-core/src/CTextarea/tests/CTextarea.test.js new file mode 100644 index 00000000..fc6d5d29 --- /dev/null +++ b/packages/chakra-ui-core/src/CTextarea/tests/CTextarea.test.js @@ -0,0 +1,40 @@ +import { CTextarea } from '../..' +import { render, screen, userEvent } from '@/tests/test-utils' + +const renderComponent = (props) => { + const inlineAttrs = (props && props.inlineAttrs) || '' + const base = { + data: () => ({ text: 'hello' }), + components: { CTextarea }, + template: ``, + ...props + } + return render(base) +} + +test('should render correctly', () => { + const { asFragment } = renderComponent() + expect(asFragment()).toMatchSnapshot() +}) + +test('v-model works', () => { + renderComponent() + const textarea = screen.getByTestId('textarea') + + userEvent.type(textarea, ' world') + expect(textarea).toHaveValue('hello world') +}) + +test('readonly textarea renders correctly', () => { + renderComponent({ inlineAttrs: 'isReadOnly' }) + const textarea = screen.getByTestId('textarea') + + expect(textarea).toHaveAttribute('readonly') +}) + +test('disabled textarea renders correctly', () => { + renderComponent({ inlineAttrs: 'isDisabled' }) + const textarea = screen.getByTestId('textarea') + + expect(textarea).toHaveAttribute('disabled') +}) diff --git a/packages/chakra-ui-core/src/CTextarea/tests/__snapshots__/CTextarea.test.js.snap b/packages/chakra-ui-core/src/CTextarea/tests/__snapshots__/CTextarea.test.js.snap new file mode 100644 index 00000000..dbc778f6 --- /dev/null +++ b/packages/chakra-ui-core/src/CTextarea/tests/__snapshots__/CTextarea.test.js.snap @@ -0,0 +1,84 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`should render correctly 1`] = ` + + .emotion-0 { + width: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + position: relative; + -webkit-transition: all 0.2s; + transition: all 0.2s; + outline: 2px solid transparent; + outline-offset: 2px; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + font-size: var(--chakra-fontSizes-md); + -webkit-padding-start: var(--chakra-space-4); + padding-inline-start: var(--chakra-space-4); + -webkit-padding-end: var(--chakra-space-4); + padding-inline-end: var(--chakra-space-4); + height: var(--chakra-sizes-10); + line-height: var(--chakra-lineHeights-shorter); + border-radius: var(--chakra-radii-md); + border-width: 1px; + border-color: inherit; + background: var(--chakra-colors-white); + font-family: var(--chakra-fonts-body); + padding-top: 8px; + padding-bottom: 8px; + min-height: 80px; +} + +.emotion-0[aria-readonly=true], +.emotion-0[readonly], +.emotion-0[data-readonly] { + background: var(--chakra-colors-transparent); + box-shadow: none!important; + -webkit-user-select: all; + -moz-user-select: all; + -ms-user-select: all; + user-select: all; +} + +.emotion-0:hover, +.emotion-0[data-hover] { + border-color: var(--chakra-colors-gray-300); +} + +.emotion-0[disabled], +.emotion-0[aria-disabled=true], +.emotion-0[data-disabled] { + opacity: 0.4; + cursor: not-allowed; +} + +.emotion-0:focus, +.emotion-0[data-focus] { + z-index: 1; + border-color: #7db1ff; + box-shadow: 0 0 0 1px #7db1ff; +} + +.emotion-0[aria-invalid=true], +.emotion-0[data-invalid] { + border-color: #e66673; + box-shadow: 0 0 0 1px #e66673; +} + +