test(colomode): add colormode tests

Author: codebender828

packages/c-color-mode/tests/__snapshots__/c-color-mode.test.ts.snap

@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should toggle colormode 1`] = `
+<DocumentFragment>
+  <div>
+    <div
+      data-testid="colormode"
+    >
+      dark
+    </div>
+    <button
+      data-testid="toggle"
+    >
+      Toggle color mode
+    </button>
+  </div>
+</DocumentFragment>
+`;

packages/c-color-mode/tests/c-color-mode.test.ts

@@ -1,6 +1,34 @@
-import { CColorMode } from '../'
+import { defineComponent, nextTick } from 'vue'
+import { render, userEvent } from '../../test-utils/src'
+import { useColorMode } from '../src'
 
+const renderComponent = (props?: any) => {
+  const base = defineComponent({
+    template: `
+      <div>
+        <div data-testid="colormode"> {{ colorMode }} </div>
+        <button data-testid="toggle" @click="toggleColorMode">Toggle color mode</button>
+      </div>
+    `,
+    setup() {
+      const { colorMode, toggleColorMode } = useColorMode()
+      return {
+        colorMode,
+        toggleColorMode,
+      }
+    },
+    ...props,
+  })
+  return render(base)
+}
 
-it('should be truthy', () => {
-  expect(1).toBe(1)
-})
+it('should toggle colormode', async () => {
+  const { getByTestId, asFragment } = renderComponent()
+  expect(getByTestId('colormode').textContent).toBe('light')
+
+  await userEvent.click(getByTestId('toggle'))
+  await nextTick()
+  expect(getByTestId('colormode').textContent).toBe('dark')
+
+  expect(asFragment()).toMatchSnapshot()
+})