feat: Pass all listeners to render function in CFlex, Stack

.changeset/silly-lemons-draw.md

@@ -0,0 +1,5 @@
+---
+"@chakra-ui/vue": patch
+---
+
+Pass all listeners to render function in CFlex, Stack

packages/chakra-ui-core/src/CFlex/CFlex.js

@@ -38,7 +38,8 @@ const CFlex = {
   render (h) {
     return h(this.as, {
       class: this.className,
-      attrs: this.computedAttrs
+      attrs: this.computedAttrs,
+      on: this.computedListeners
     }, this.$slots.default)
   }
 }

packages/chakra-ui-core/src/CFlex/tests/CFlex.test.js

@@ -1,5 +1,5 @@
 import CFlex from '..'
-import { render, screen } from '@/tests/test-utils'
+import { render, screen, userEvent } from '@/tests/test-utils'
 
 const renderComponent = (props) => {
   const inlineAttrs = (props && props.inlineAttrs) || ''
@@ -11,21 +11,56 @@ const renderComponent = (props) => {
   return render(base)
 }
 
-it('should render correctly', () => {
-  const { asFragment } = renderComponent()
+describe('CFlex', () => {
+  it('should render correctly', () => {
+    const { asFragment } = renderComponent()
 
-  expect(asFragment()).toMatchSnapshot()
-})
+    expect(asFragment()).toMatchSnapshot()
+  })
+
+  it('should change styles', () => {
+    const inlineAttrs = 'align="center" justify="center" direction="column"'
+    const { asFragment } = renderComponent({ inlineAttrs })
+
+    expect(asFragment()).toMatchSnapshot()
+
+    const flex = screen.getByTestId('flex')
+    expect(flex).toHaveStyle('display: flex')
+    expect(flex).toHaveStyle('align-items: center')
+    expect(flex).toHaveStyle('justify-content: center')
+    expect(flex).toHaveStyle('flex-direction: column')
+  })
+
+  it('should preserve inherited event listeners', async () => {
+    const handleClick = jest.fn()
+    renderComponent({
+      inlineAttrs: '@click="handleClick"',
+      methods: {
+        handleClick
+      }
+    })
 
-it('should change styles', () => {
-  const inlineAttrs = 'align="center" justify="center" direction="column"'
-  const { asFragment } = renderComponent({ inlineAttrs })
+    await userEvent.click(screen.getByTestId('flex'))
+    expect(handleClick).toHaveBeenCalledTimes(1)
+  })
 
-  expect(asFragment()).toMatchSnapshot()
+  it('should preserve inherited event listeners with custom `as` component', async () => {
+    const handleSubmit = jest.fn((event) => {
+      expect(event.target).toBe(screen.getByTestId('flex-as-form'))
+    })
+    renderComponent({
+      template: `
+        <CFlex as="form" @submit.prevent="handleSubmit" data-testid="flex-as-form">
+          <input value="some-value" name="some-key" />
+          <button type="submit" value="submit" data-testid="form-submit-btn" />
+        </CFlex>
+      `,
+      methods: {
+        handleSubmit
+      }
+    })
 
-  const flex = screen.getByTestId('flex')
-  expect(flex).toHaveStyle('display: flex')
-  expect(flex).toHaveStyle('align-items: center')
-  expect(flex).toHaveStyle('justify-content: center')
-  expect(flex).toHaveStyle('flex-direction: column')
+    await userEvent.click(screen.getByTestId('form-submit-btn'))
+    expect(handleSubmit).toHaveBeenCalledTimes(1)
+  })
 })

packages/chakra-ui-core/src/CFlex/tests/__snapshots__/CFlex.test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`should change styles 1`] = `
+exports[`CFlex should change styles 1`] = `
 <DocumentFragment>
   <div
     class="css-u6v8er"
@@ -12,7 +12,7 @@ exports[`should change styles 1`] = `
 </DocumentFragment>
 `;
 
-exports[`should render correctly 1`] = `
+exports[`CFlex should render correctly 1`] = `
 <DocumentFragment>
   <div
     class="css-k008qs"

packages/chakra-ui-core/src/CStack/CStack.js

@@ -131,7 +131,8 @@ const CStack = {
         justify: this.justify,
         direction: this._direction
       },
-      attrs: this.computedAttrs
+      attrs: this.computedAttrs,
+      on: this.computedListeners
     }, stackables)
   }
 }

packages/chakra-ui-core/src/CStack/tests/CStack.test.js

@@ -1,5 +1,5 @@
 import { CStack, CBox, CHeading, CText } from '../..'
-import { render, getTagName, screen } from '@/tests/test-utils'
+import { render, getTagName, screen, userEvent } from '@/tests/test-utils'
 
 const renderComponent = (props) => {
   const inlineAttrs = (props && props.inlineAttrs) || ''
@@ -21,68 +21,102 @@ const renderComponent = (props) => {
   return render(base)
 }
 
-it('should render correctly', () => {
-  const { asFragment } = renderComponent()
-  expect(asFragment()).toMatchSnapshot()
-})
+describe('CStack', () => {
+  it('should render correctly', () => {
+    const { asFragment } = renderComponent()
+    expect(asFragment()).toMatchSnapshot()
+  })
 
-it('should render empty children correctly', () => {
-  const { asFragment } = renderComponent({
-    template: '<c-stack></c-stack>'
+  it('should render empty children correctly', () => {
+    const { asFragment } = renderComponent({
+      template: '<c-stack></c-stack>'
+    })
+    expect(asFragment()).toMatchSnapshot()
   })
-  expect(asFragment()).toMatchSnapshot()
-})
 
-it('should default to vertical stack', () => {
-  renderComponent()
-  const stack = screen.getByTestId('stack')
-  expect(stack).toHaveStyle('display: flex')
-  expect(stack).toHaveStyle('flex-direction: column')
-})
+  it('should default to vertical stack', () => {
+    renderComponent()
+    const stack = screen.getByTestId('stack')
+    expect(stack).toHaveStyle('display: flex')
+    expect(stack).toHaveStyle('flex-direction: column')
+  })
 
-it('should not space last child', () => {
-  renderComponent()
-  const stack = screen.getByTestId('stack')
-  expect(stack).not.toHaveStyle('margin-bottom: 0.5rem')
-})
+  it('should not space last child', () => {
+    renderComponent()
+    const stack = screen.getByTestId('stack')
+    expect(stack).not.toHaveStyle('margin-bottom: 0.5rem')
+  })
 
-it('should should stack horizontally if isInline', () => {
-  const inlineAttrs = 'is-inline'
-  renderComponent({ inlineAttrs })
-  const stack = screen.getByTestId('stack')
-  expect(stack).toHaveStyle('display: flex')
-  expect(stack).toHaveStyle('flex-direction: row')
-})
+  it('should should stack horizontally if isInline', () => {
+    const inlineAttrs = 'is-inline'
+    renderComponent({ inlineAttrs })
+    const stack = screen.getByTestId('stack')
+    expect(stack).toHaveStyle('display: flex')
+    expect(stack).toHaveStyle('flex-direction: row')
+  })
 
-it('should should stack native html elements', () => {
-  const { asFragment } = renderComponent({
-    template: `
-      <CStack data-testid="stack">
-        <CText mt="4">The future can be even brighter but a goal without a plan is just a wish</CText>
-        <p data-testid="stacked-p">I am a happy paragraph element</p>
-        <h3 data-testid="stacked-h3">I am a jolly heading element</h3>
-        <CText mt="4">You deserve good things. With a whooping 10-15% interest rate per annum, grow your savings on your own terms with our completely automated process</CText>
-      </CStack>
-    `
+  it('should should stack native html elements', () => {
+    const { asFragment } = renderComponent({
+      template: `
+        <CStack data-testid="stack">
+          <CText mt="4">The future can be even brighter but a goal without a plan is just a wish</CText>
+          <p data-testid="stacked-p">I am a happy paragraph element</p>
+          <h3 data-testid="stacked-h3">I am a jolly heading element</h3>
+          <CText mt="4">You deserve good things. With a whooping 10-15% interest rate per annum, grow your savings on your own terms with our completely automated process</CText>
+        </CStack>
+      `
+    })
+
+    expect(asFragment()).toMatchSnapshot()
   })
 
-  expect(asFragment()).toMatchSnapshot()
-})
+  // Cannot use `it.each` because it cannot accept
+  // component as interpolated variable
+  it.each`
+    as
+    ${'section'}
+    ${'nav'}}
+  `(
+    'should render CStack with element as $as',
+    ({ as }) => {
+      const inlineAttrs = `as="${as}"`
+      const { asFragment } = renderComponent({ inlineAttrs })
+      const stack = screen.getByTestId('stack')
+      expect(getTagName(stack)).toEqual(as)
+      expect(asFragment()).toMatchSnapshot()
+    }
+  )
 
-// Cannot use `it.each` because it cannot accept
-// component as interpolated variable
+  it('should preserve inherited event listeners', async () => {
+    const handleClick = jest.fn()
+    renderComponent({
+      inlineAttrs: '@click="handleClick"',
+      methods: {
+        handleClick
+      }
+    })
 
-it.each`
-  as
-  ${'section'}
-  ${'nav'}}
-`(
-  'should render CStack with element as $as',
-  ({ as }) => {
-    const inlineAttrs = `as="${as}"`
-    const { asFragment } = renderComponent({ inlineAttrs })
-    const stack = screen.getByTestId('stack')
-    expect(getTagName(stack)).toEqual(as)
-    expect(asFragment()).toMatchSnapshot()
-  }
-)
+    await userEvent.click(screen.getByTestId('stack'))
+    expect(handleClick).toHaveBeenCalledTimes(1)
+  })
+
+  it('should preserve inherited event listeners with custom `as` component', async () => {
+    const handleSubmit = jest.fn((event) => {
+      expect(event.target).toBe(screen.getByTestId('stack-as-form'))
+    })
+    renderComponent({
+      template: `
+        <CStack as="form" @submit.prevent="handleSubmit" data-testid="stack-as-form">
+          <input value="some-value" name="some-key" />
+          <button type="submit" value="submit" data-testid="form-submit-btn" />
+        </CStack>
+      `,
+      methods: {
+        handleSubmit
+      }
+    })
+
+    await userEvent.click(screen.getByTestId('form-submit-btn'))
+    expect(handleSubmit).toHaveBeenCalledTimes(1)
+  })
+})

packages/chakra-ui-core/src/CStack/tests/__snapshots__/CStack.test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`should render CStack with element as nav 1`] = `
+exports[`CStack should render CStack with element as nav 1`] = `
 <DocumentFragment>
   <nav
     class="css-j7qwjs css-0"
@@ -49,7 +49,7 @@ exports[`should render CStack with element as nav 1`] = `
 </DocumentFragment>
 `;
 
-exports[`should render CStack with element as section 1`] = `
+exports[`CStack should render CStack with element as section 1`] = `
 <DocumentFragment>
   <section
     class="css-j7qwjs css-0"
@@ -98,7 +98,7 @@ exports[`should render CStack with element as section 1`] = `
 </DocumentFragment>
 `;
 
-exports[`should render correctly 1`] = `
+exports[`CStack should render correctly 1`] = `
 <DocumentFragment>
   <div
     class="css-j7qwjs css-0"
@@ -147,7 +147,7 @@ exports[`should render correctly 1`] = `
 </DocumentFragment>
 `;
 
-exports[`should render empty children correctly 1`] = `
+exports[`CStack should render empty children correctly 1`] = `
 <DocumentFragment>
   <div
     class="css-j7qwjs css-0"
@@ -156,7 +156,7 @@ exports[`should render empty children correctly 1`] = `
 </DocumentFragment>
 `;
 
-exports[`should should stack native html elements 1`] = `
+exports[`CStack should should stack native html elements 1`] = `
 <DocumentFragment>
   <div
     class="css-j7qwjs css-0"