test(checkbox-group): add tests for Checkbox Group component

packages/kiwi-core/src/CheckboxGroup/tests/CheckboxGroup.test.js

@@ -0,0 +1,54 @@
+import { Box, Checkbox, CheckboxGroup } from '@/packages/kiwi-core/src'
+import { render, defaultProviders } from '@/tests/test-utils'
+
+// mocks
+import { useId } from '@/packages/kiwi-core/src/utils'
+jest.mock('@/packages/kiwi-core/src/utils/generators.js')
+jest.mock('breadstick/dist/components/Alert/styles.css', () => ({})) // jest tries to import styles and fails...
+
+const renderComponent = (props) => {
+  const base = {
+    components: { Box, Checkbox, CheckboxGroup },
+    provide: () => defaultProviders(),
+    data: () => ({ selectedValues: ['two'] }),
+    template: `
+    <Box w="300px">
+      <CheckboxGroup name="numbers" v-model="selectedValues" variantColor="green" :defaultValue="['two']">
+        <Checkbox data-testid="one" value="one">One</Checkbox>
+        <Checkbox data-testid="two" value="two">Two</Checkbox>
+        <Checkbox data-testid="three" value="three">Three</Checkbox>
+      </CheckboxGroup>
+    </Box>`,
+    ...props
+  }
+  return render(base)
+}
+
+it('should render correctly', () => {
+  useId.mockReturnValueOnce('1')
+  useId.mockReturnValueOnce('2')
+  useId.mockReturnValueOnce('3')
+
+  const { asFragment } = renderComponent()
+
+  expect(asFragment()).toMatchSnapshot()
+})
+
+it('should display children', () => {
+  const { getByText } = renderComponent()
+  expect(getByText('One')).toBeInTheDocument()
+  expect(getByText('Two')).toBeInTheDocument()
+  expect(getByText('Three')).toBeInTheDocument()
+})
+
+test('selectedValues prop works', () => {
+  const { getByTestId } = renderComponent()
+
+  const one = getByTestId('one').querySelector('input')
+  const two = getByTestId('two').querySelector('input')
+  const three = getByTestId('three').querySelector('input')
+
+  expect(one).not.toBeChecked()
+  expect(two).toBeChecked()
+  expect(three).not.toBeChecked()
+})

packages/kiwi-core/src/CheckboxGroup/tests/__snapshots__/CheckboxGroup.test.js.snap

@@ -0,0 +1,217 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render correctly 1`] = `
+<DocumentFragment>
+  <div
+    class="css-1v5z18m"
+  >
+    <div
+      class="css-0"
+      role="group"
+    >
+      <div
+        class="css-1x9mqzb"
+      >
+        <label
+          class="css-1qf83f9"
+          data-testid="one"
+          for="checkbox-1"
+        >
+          <input
+            class="css-0 css-f8n5zr"
+            id="checkbox-1"
+            name="numbers-0"
+            type="checkbox"
+            value="one"
+          />
+          <div
+            aria-hidden="true"
+            class="css-1ra3zj0 css-hpvc67"
+          >
+            <svg
+              class="css-1dx9t0m css-y3asau"
+              role="presentation"
+              viewBox="0 0 24 24"
+            >
+              
+    
+              <g
+                stroke="currentColor"
+                strokewidth="1.5"
+              >
+                
+      
+                <path
+                  d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
+                  fill="none"
+                  strokelinecap="full"
+                />
+                
+      
+                <path
+                  d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
+                  fill="none"
+                  strokelinecap="full"
+                />
+                
+      
+                <circle
+                  cx="12"
+                  cy="12"
+                  fill="none"
+                  r="11.25"
+                  strokemiterlimit="10"
+                />
+                
+    
+              </g>
+              
+    
+            </svg>
+          </div>
+          <div
+            class="css-np4rym"
+          >
+            One
+          </div>
+        </label>
+      </div>
+      <div
+        class="css-1x9mqzb"
+      >
+        <label
+          class="css-1qf83f9"
+          data-testid="two"
+          for="checkbox-2"
+        >
+          <input
+            aria-checked="true"
+            class="css-0 css-f8n5zr"
+            id="checkbox-2"
+            name="numbers-1"
+            type="checkbox"
+            value="two"
+          />
+          <div
+            aria-hidden="true"
+            class="css-1ra3zj0 css-hpvc67"
+          >
+            <svg
+              class="css-1dx9t0m css-y3asau"
+              role="presentation"
+              viewBox="0 0 24 24"
+            >
+              
+    
+              <g
+                stroke="currentColor"
+                strokewidth="1.5"
+              >
+                
+      
+                <path
+                  d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
+                  fill="none"
+                  strokelinecap="full"
+                />
+                
+      
+                <path
+                  d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
+                  fill="none"
+                  strokelinecap="full"
+                />
+                
+      
+                <circle
+                  cx="12"
+                  cy="12"
+                  fill="none"
+                  r="11.25"
+                  strokemiterlimit="10"
+                />
+                
+    
+              </g>
+              
+    
+            </svg>
+          </div>
+          <div
+            class="css-np4rym"
+          >
+            Two
+          </div>
+        </label>
+      </div>
+      <div
+        class="css-13o7eu2"
+      >
+        <label
+          class="css-1qf83f9"
+          data-testid="three"
+          for="checkbox-3"
+        >
+          <input
+            class="css-0 css-f8n5zr"
+            id="checkbox-3"
+            name="numbers-2"
+            type="checkbox"
+            value="three"
+          />
+          <div
+            aria-hidden="true"
+            class="css-1ra3zj0 css-hpvc67"
+          >
+            <svg
+              class="css-1dx9t0m css-y3asau"
+              role="presentation"
+              viewBox="0 0 24 24"
+            >
+              
+    
+              <g
+                stroke="currentColor"
+                strokewidth="1.5"
+              >
+                
+      
+                <path
+                  d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
+                  fill="none"
+                  strokelinecap="full"
+                />
+                
+      
+                <path
+                  d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
+                  fill="none"
+                  strokelinecap="full"
+                />
+                
+      
+                <circle
+                  cx="12"
+                  cy="12"
+                  fill="none"
+                  r="11.25"
+                  strokemiterlimit="10"
+                />
+                
+    
+              </g>
+              
+    
+            </svg>
+          </div>
+          <div
+            class="css-np4rym"
+          >
+            Three
+          </div>
+        </label>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;