From 62df72384fd38c6190fc8955d5c5562560fc5aa4 Mon Sep 17 00:00:00 2001
From: simpletron <thongitbk@gmail.com>
Date: Tue, 13 Jul 2021 12:31:55 +0700
Subject: [PATCH] Pass all listeners to render function in CFlex, Stack

---
 packages/chakra-ui-core/src/CFlex/CFlex.js    |   3 +-
 .../src/CFlex/tests/CFlex.test.js             |  63 ++++--
 .../tests/__snapshots__/CFlex.test.js.snap    |  24 +++
 packages/chakra-ui-core/src/CStack/CStack.js  |   3 +-
 .../src/CStack/tests/CStack.test.js           | 146 ++++++++-----
 .../tests/__snapshots__/CStack.test.js.snap   | 199 ++++++++++++++++++
 6 files changed, 366 insertions(+), 72 deletions(-)

diff --git a/packages/chakra-ui-core/src/CFlex/CFlex.js b/packages/chakra-ui-core/src/CFlex/CFlex.js
index d2e577a3..da6a0ea0 100644
--- a/packages/chakra-ui-core/src/CFlex/CFlex.js
+++ b/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)
   }
 }
diff --git a/packages/chakra-ui-core/src/CFlex/tests/CFlex.test.js b/packages/chakra-ui-core/src/CFlex/tests/CFlex.test.js
index e5abcb5b..b5303c63 100644
--- a/packages/chakra-ui-core/src/CFlex/tests/CFlex.test.js
+++ b/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)
+  })
 })
diff --git a/packages/chakra-ui-core/src/CFlex/tests/__snapshots__/CFlex.test.js.snap b/packages/chakra-ui-core/src/CFlex/tests/__snapshots__/CFlex.test.js.snap
index e8a51e8b..8d4daeda 100644
--- a/packages/chakra-ui-core/src/CFlex/tests/__snapshots__/CFlex.test.js.snap
+++ b/packages/chakra-ui-core/src/CFlex/tests/__snapshots__/CFlex.test.js.snap
@@ -1,5 +1,29 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`CFlex should change styles 1`] = `
+<DocumentFragment>
+  <div
+    class="css-u6v8er"
+    data-chakra-component="CFlex"
+    data-testid="flex"
+  >
+    Flex Me
+  </div>
+</DocumentFragment>
+`;
+
+exports[`CFlex should render correctly 1`] = `
+<DocumentFragment>
+  <div
+    class="css-k008qs"
+    data-chakra-component="CFlex"
+    data-testid="flex"
+  >
+    Flex Me
+  </div>
+</DocumentFragment>
+`;
+
 exports[`should change styles 1`] = `
 <DocumentFragment>
   <div
diff --git a/packages/chakra-ui-core/src/CStack/CStack.js b/packages/chakra-ui-core/src/CStack/CStack.js
index 2af60153..32dda2cd 100644
--- a/packages/chakra-ui-core/src/CStack/CStack.js
+++ b/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)
   }
 }
diff --git a/packages/chakra-ui-core/src/CStack/tests/CStack.test.js b/packages/chakra-ui-core/src/CStack/tests/CStack.test.js
index abb9eb29..17953ead 100644
--- a/packages/chakra-ui-core/src/CStack/tests/CStack.test.js
+++ b/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)
+  })
+})
diff --git a/packages/chakra-ui-core/src/CStack/tests/__snapshots__/CStack.test.js.snap b/packages/chakra-ui-core/src/CStack/tests/__snapshots__/CStack.test.js.snap
index f0ccd760..b0f700ce 100644
--- a/packages/chakra-ui-core/src/CStack/tests/__snapshots__/CStack.test.js.snap
+++ b/packages/chakra-ui-core/src/CStack/tests/__snapshots__/CStack.test.js.snap
@@ -1,5 +1,204 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`CStack should render CStack with element as nav 1`] = `
+<DocumentFragment>
+  <nav
+    class="css-j7qwjs css-0"
+    data-chakra-component="CStack"
+    data-testid="stack"
+  >
+    <div
+      class="css-dtyjrz"
+      data-chakra-component="CBox"
+      data-testid="stack-child-1"
+    >
+      <h2
+        class="css-aku8fb"
+        data-chakra-component="CHeading"
+      >
+        Plan Money
+      </h2>
+       
+      <p
+        class="css-18iq2bq"
+        data-chakra-component="CText"
+      >
+        The future can be even brighter but a goal without a plan is just a wish
+      </p>
+    </div>
+    <div
+      class="css-1ipbp6k"
+      data-chakra-component="CBox"
+      data-testid="stack-child-2"
+    >
+      <h2
+        class="css-aku8fb"
+        data-chakra-component="CHeading"
+      >
+        Save Money
+      </h2>
+       
+      <p
+        class="css-18iq2bq"
+        data-chakra-component="CText"
+      >
+        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
+      </p>
+    </div>
+  </nav>
+</DocumentFragment>
+`;
+
+exports[`CStack should render CStack with element as section 1`] = `
+<DocumentFragment>
+  <section
+    class="css-j7qwjs css-0"
+    data-chakra-component="CStack"
+    data-testid="stack"
+  >
+    <div
+      class="css-dtyjrz"
+      data-chakra-component="CBox"
+      data-testid="stack-child-1"
+    >
+      <h2
+        class="css-aku8fb"
+        data-chakra-component="CHeading"
+      >
+        Plan Money
+      </h2>
+       
+      <p
+        class="css-18iq2bq"
+        data-chakra-component="CText"
+      >
+        The future can be even brighter but a goal without a plan is just a wish
+      </p>
+    </div>
+    <div
+      class="css-1ipbp6k"
+      data-chakra-component="CBox"
+      data-testid="stack-child-2"
+    >
+      <h2
+        class="css-aku8fb"
+        data-chakra-component="CHeading"
+      >
+        Save Money
+      </h2>
+       
+      <p
+        class="css-18iq2bq"
+        data-chakra-component="CText"
+      >
+        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
+      </p>
+    </div>
+  </section>
+</DocumentFragment>
+`;
+
+exports[`CStack should render correctly 1`] = `
+<DocumentFragment>
+  <div
+    class="css-j7qwjs css-0"
+    data-chakra-component="CStack"
+    data-testid="stack"
+  >
+    <div
+      class="css-dtyjrz"
+      data-chakra-component="CBox"
+      data-testid="stack-child-1"
+    >
+      <h2
+        class="css-aku8fb"
+        data-chakra-component="CHeading"
+      >
+        Plan Money
+      </h2>
+       
+      <p
+        class="css-18iq2bq"
+        data-chakra-component="CText"
+      >
+        The future can be even brighter but a goal without a plan is just a wish
+      </p>
+    </div>
+    <div
+      class="css-1ipbp6k"
+      data-chakra-component="CBox"
+      data-testid="stack-child-2"
+    >
+      <h2
+        class="css-aku8fb"
+        data-chakra-component="CHeading"
+      >
+        Save Money
+      </h2>
+       
+      <p
+        class="css-18iq2bq"
+        data-chakra-component="CText"
+      >
+        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
+      </p>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`CStack should render empty children correctly 1`] = `
+<DocumentFragment>
+  <div
+    class="css-j7qwjs css-0"
+    data-chakra-component="CStack"
+  />
+</DocumentFragment>
+`;
+
+exports[`CStack should should stack native html elements 1`] = `
+<DocumentFragment>
+  <div
+    class="css-j7qwjs css-0"
+    data-chakra-component="CStack"
+    data-testid="stack"
+  >
+    <p
+      class="css-16ec2e8"
+      data-chakra-component="CText"
+    >
+      The future can be even brighter but a goal without a plan is just a wish
+    </p>
+    <div
+      class="css-cet0rr"
+      data-chakra-component="CBox"
+    >
+      <p
+        data-testid="stacked-p"
+      >
+        I am a happy paragraph element
+      </p>
+    </div>
+    <div
+      class="css-cet0rr"
+      data-chakra-component="CBox"
+    >
+      <h3
+        data-testid="stacked-h3"
+      >
+        I am a jolly heading element
+      </h3>
+    </div>
+    <p
+      class="css-18iq2bq"
+      data-chakra-component="CText"
+    >
+      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
+    </p>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`should render CStack with element as nav 1`] = `
 <DocumentFragment>
   <nav