mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-14 08:45:20 +08:00
4d6a067677
Adds a new component `ion-input-otp` which provides the OTP input functionality - Displays as an input group with multiple boxes accepting a single character - Accepts `type` which determines whether the boxes accept numbers or text/numbers and determines the keyboard to display - Supports changing the displayed keyboard using the `inputmode` property - Accepts a `length` property to control the number of input boxes - Accepts the following properties to change the design: `fill`, `shape`, `size`, `color` - Accepts a `separators` property to show a separator between 1 or more input boxes - Supports the `disabled`, `readonly` and invalid states - Supports limiting the accepted input via the `pattern` property - Emits the following events: `ionInput`, `ionChange`, `ionComplete`, `ionBlur`, `ionFocus` - Exposes the following method: `setFocus` --------- Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> Co-authored-by: Shane <shane@shanessite.net>
72 lines
3.6 KiB
JavaScript
72 lines
3.6 KiB
JavaScript
describe('Inputs', () => {
|
|
beforeEach(() => {
|
|
cy.visit('/inputs')
|
|
})
|
|
it('should have default value', () => {
|
|
cy.get('ion-checkbox').should('have.prop', 'checked').and('eq', false);
|
|
cy.get('ion-toggle').should('have.prop', 'checked').and('eq', false);
|
|
cy.get('ion-input').should('have.prop', 'value').and('eq', '');
|
|
cy.get('ion-input-otp').should('have.prop', 'value').and('eq', '');
|
|
cy.get('ion-range').should('have.prop', 'value').and('deep.eq', { lower: 30, upper: 70 });
|
|
cy.get('ion-textarea').should('have.prop', 'value').and('eq', '');
|
|
cy.get('ion-searchbar').should('have.prop', 'value').and('eq', '');
|
|
cy.get('ion-datetime').should('have.prop', 'value').and('eq', '');
|
|
cy.get('ion-radio-group').should('have.prop', 'value').and('eq', 'red');
|
|
cy.get('ion-segment').should('have.prop', 'value').and('eq', 'dogs');
|
|
cy.get('ion-select').should('have.prop', 'value').and('eq', 'apples');
|
|
});
|
|
|
|
it('should set/reset values', () => {
|
|
cy.get('ion-button#set').click();
|
|
|
|
cy.get('ion-checkbox').should('have.prop', 'checked').and('eq', true);
|
|
cy.get('ion-toggle').should('have.prop', 'checked').and('eq', true);
|
|
cy.get('ion-input').should('have.prop', 'value').and('eq', 'Hello World');
|
|
cy.get('ion-input-otp').should('have.prop', 'value').and('eq', '1234');
|
|
cy.get('ion-range').should('have.prop', 'value').and('deep.eq', { lower: 10, upper: 90 });
|
|
cy.get('ion-textarea').should('have.prop', 'value').and('eq', 'Lorem Ipsum');
|
|
cy.get('ion-searchbar').should('have.prop', 'value').and('eq', 'Search Query');
|
|
cy.get('ion-datetime').should('have.prop', 'value').and('eq', '2019-01-31');
|
|
cy.get('ion-radio-group').should('have.prop', 'value').and('eq', 'blue');
|
|
cy.get('ion-segment').should('have.prop', 'value').and('eq', 'cats');
|
|
cy.get('ion-select').should('have.prop', 'value').and('eq', 'bananas');
|
|
|
|
cy.get('ion-button#reset').click();
|
|
|
|
cy.get('ion-checkbox').should('have.prop', 'checked').and('eq', false);
|
|
cy.get('ion-toggle').should('have.prop', 'checked').and('eq', false);
|
|
cy.get('ion-input').should('have.prop', 'value').and('eq', '');
|
|
cy.get('ion-input-otp').should('have.prop', 'value').and('eq', '');
|
|
cy.get('ion-range').should('have.prop', 'value').and('deep.eq', { lower: 30, upper: 70 });
|
|
cy.get('ion-textarea').should('have.prop', 'value').and('eq', '');
|
|
cy.get('ion-searchbar').should('have.prop', 'value').and('eq', '');
|
|
cy.get('ion-datetime').should('have.prop', 'value').and('eq', '');
|
|
cy.get('ion-radio-group').should('have.prop', 'value').and('eq', 'red');
|
|
cy.get('ion-segment').should('have.prop', 'value').and('eq', 'dogs');
|
|
cy.get('ion-select').should('have.prop', 'value').and('eq', 'apples');
|
|
});
|
|
|
|
describe('updating text input refs', () => {
|
|
it('typing into input should update ref', () => {
|
|
cy.get('ion-input input').type('Hello Input', { scrollBehavior: false });
|
|
|
|
cy.get('#input-ref').should('have.text', 'Hello Input');
|
|
});
|
|
it('typing into input-otp should update ref', () => {
|
|
cy.get('ion-input-otp input').eq(0).type('1234', { scrollBehavior: false });
|
|
|
|
cy.get('#input-otp-ref').should('have.text', '1234');
|
|
});
|
|
it('typing into searchbar should update ref', () => {
|
|
cy.get('ion-searchbar input').type('Hello Searchbar', { scrollBehavior: false });
|
|
|
|
cy.get('#searchbar-ref').should('have.text', 'Hello Searchbar');
|
|
});
|
|
it('typing into textarea should update ref', () => {
|
|
cy.get('ion-textarea textarea').type('Hello Textarea', { scrollBehavior: false });
|
|
|
|
cy.get('#textarea-ref').should('have.text', 'Hello Textarea');
|
|
});
|
|
});
|
|
})
|