diff --git a/packages/ripple-ui-core/cypress/support/component.ts b/packages/ripple-ui-core/cypress/support/component.ts index 619e4d90ab..7fdebbbb83 100644 --- a/packages/ripple-ui-core/cypress/support/component.ts +++ b/packages/ripple-ui-core/cypress/support/component.ts @@ -35,7 +35,9 @@ const RplAppWrapper = { Cypress.Commands.add('mount', (component: any, options = {}) => { return mount(() => { - return h(RplAppWrapper, null, () => h(component, { ...options.props })) + return h(RplAppWrapper, null, () => + h(component, { ...options.props }, { ...options.slots }) + ) }) }) diff --git a/packages/ripple-ui-core/src/components/search-bar/RplSearchBar.cy.ts b/packages/ripple-ui-core/src/components/search-bar/RplSearchBar.cy.ts index 3a75f52f03..0a847534b8 100644 --- a/packages/ripple-ui-core/src/components/search-bar/RplSearchBar.cy.ts +++ b/packages/ripple-ui-core/src/components/search-bar/RplSearchBar.cy.ts @@ -17,4 +17,59 @@ describe('RplSearchBar', () => { cy.get('input#1234').click() cy.get('#1234__menu').should('exist') }) + + it('suggestion slot', () => { + cy.mount(RplSearchBar, { + props: { + ...baseProps, + [`onUpdate:inputValue`]: () => { + console.log('testest') + } + }, + slots: { + suggestion: (props) => `test - ${props.option.option}` + } + }) + cy.get('input#1234').click() + cy.get('#rip').should('contain.text', `test - rip`) + }) + it('updates', () => { + const onChangeSpy = cy.spy().as('onChangeSpy') + cy.mount(RplSearchBar, { + props: { + ...baseProps, + [`onUpdate:inputValue`]: onChangeSpy + } + }) + cy.get('input#1234').type('rip', { delay: 100 }) + cy.get('@onChangeSpy').should('have.been.calledWith', 'rip') + }) + it('debounces input', () => { + const onChangeSpy = cy.spy().as('onChangeSpy1') + cy.mount(RplSearchBar, { + props: { + ...baseProps, + debounce: 1000, + [`onUpdate:inputValue`]: onChangeSpy + } + }) + cy.get('input#1234').type('rip', { delay: 100 }) + cy.wait(1500) + cy.get('input#1234').type('ple', { delay: 100 }) + cy.get('@onChangeSpy1').should('have.callCount', 2) + }) + it('doesnt debounce when turned off', () => { + const onChangeSpy = cy.spy().as('onChangeSpy1') + cy.mount(RplSearchBar, { + props: { + ...baseProps, + debounce: 0, + [`onUpdate:inputValue`]: onChangeSpy + } + }) + cy.get('input#1234').type('rip', { delay: 100 }) + cy.wait(1500) + cy.get('input#1234').type('ple', { delay: 100 }) + cy.get('@onChangeSpy1').should('have.callCount', 6) + }) })