test(select): add check for correct id passing

refs #484

Author: HerrBertling

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

@@ -6,7 +6,7 @@ const renderComponent = (props) => {
   const base = {
     data: () => ({ value: 'option1' }),
     components: { CSelect },
-    template: `<CSelect data-testid="select" placeholder="input placeholder" v-model="value" ${inlineAttrs}>
+    template: `<CSelect data-testid="select" id="selectTest" placeholder="input placeholder" v-model="value" ${inlineAttrs}>
       <option value="option1">Option 1</option>
       <option value="option2">Option 2</option>
       <option value="option3">Option 3</option>
@@ -27,3 +27,12 @@ test('disabled select renders correctly', () => {
 
   expect(select).toHaveAttribute('disabled')
 })
+
+test('passes the ID directly to the select and not to the wrapper', () => {
+  renderComponent()
+  const select = screen.getByRole('combobox')
+  const selectWrapper = screen.getByTestId('select')
+
+  expect(select).toHaveAttribute('id')
+  expect(selectWrapper).not.toHaveAttribute('id')
+})

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

@@ -134,6 +134,7 @@ exports[`should render correctly 1`] = `
       class="emotion-1"
       data-chakra-component="CSelectInput"
       datatestid="select"
+      id="selectTest"
       value="option1"
     >
       <option