diff --git a/src/Components/Input/TextInput.cy.tsx b/src/Components/Input/TextInput.cy.tsx new file mode 100644 index 00000000..338fc400 --- /dev/null +++ b/src/Components/Input/TextInput.cy.tsx @@ -0,0 +1,70 @@ +/// +import { mount } from 'cypress/react' + +import { TextInput } from './TextInput' + +describe('', () => { + + it('renders with default props', () => { + mount() + cy.get('input').should('have.attr', 'type', 'text') + cy.get('input').should('have.attr', 'placeholder', '') + cy.get('input').should('have.attr', 'required') + cy.get('input').should('have.class', 'tw-input') + cy.get('input').should('have.class', 'tw-input-bordered') + cy.get('input').should('have.class', 'tw-w-full') + }) + + it('renders with given labelTitle', () => { + mount() + cy.get('label').should('contain.text', 'Test Title') + }) + + it('renders with given type', () => { + mount() + cy.get('input').should('have.attr', 'type', 'email') + }) + + it('accepts user input', () => { + cy.get('input[name="test-input"]').type('Hello Test') + cy.get('input[name="test-input"]').should('have.value', 'Hello Test') + }) + + it('renders a label, if labelTitle is set', () => { + mount() + cy.contains('Test Label').should('exist') + }) + + it('handles default value correctly', () => { + mount() + cy.get('input[name="test-input"]').should('have.value', 'Default Value') + }) + + it('calls updateFormValue on change', () => { + const onChangeSpy = cy.spy().as('updateFormValueSpy') + mount() + cy.get('input[name="test-input"]').type('Test') + cy.get('@updateFormValueSpy').should('have.been.calledWith', 'Test') + }) + + it('respects the required attribute', () => { + cy.get('input[name="test-input"]').should('have.attr', 'required') + }) + + it('accepts a specific input type', () => { + mount() + cy.get('input[name="test-input"]').should('have.attr', 'type', 'email') + }) + + it('respects the autocomplete attribute', () => { + mount() + cy.get('input[name="test-input"]').should('have.attr', 'autocomplete', 'off') + }) + + it('updates form value on change', () => { + const updateFormValue = cy.stub() + mount() + cy.get('input').type('Hello') + cy.wrap(updateFormValue).should('have.been.calledWith', 'Hello') + }) +})