feat(c-skip-nav): create tests

Author: TylerAPfledderer

packages/c-skip-nav/src/c-skip-nav.ts

@@ -11,71 +11,81 @@
 import { h, defineComponent } from "vue"
 import {
   chakra,
+  ComponentWithProps,
+  DeepPartial,
+  HTMLChakraProps,
   SystemStyleObject,
   useStyleConfig,
 } from "@chakra-ui/vue-system"
 import { CBox } from "@chakra-ui/vue-next"
 
 const FALLBACK_ID = "chakra-skip-nav"
 
-export const CSkipNavLink = defineComponent({
-  name: "CSkipNavLink",
-  props: {
-    id: {
-      type: String,
-      default: FALLBACK_ID,
+export interface CSkipNavLinkProps extends HTMLChakraProps<"a"> {}
+
+export const CSkipNavLink: ComponentWithProps<DeepPartial<CSkipNavLinkProps>> =
+  defineComponent({
+    name: "CSkipNavLink",
+    props: {
+      id: {
+        type: String,
+        default: FALLBACK_ID,
+      },
     },
-  },
-  setup(props, { slots, attrs }) {
-    function getBaseStyles(styles: any): SystemStyleObject {
-      return {
-        userSelect: "none",
-        border: "0",
-        borderRadius: "md",
-        fontWeight: "semibold",
-        height: "1px",
-        width: "1px",
-        margin: "-1px",
-        padding: "0",
-        outline: "0",
-        overflow: "hidden",
-        position: "absolute",
-        clip: "rect(0 0 0 0)",
-        ...styles,
-        _focus: {
-          clip: "auto",
-          width: "auto",
-          height: "auto",
-          boxShadow: "outline",
-          padding: "1rem",
-          position: "fixed",
-          top: "1.5rem",
-          insetStart: "1.5rem",
-          ...styles["_focusVisible"],
-        },
+    setup(props, { slots, attrs }) {
+      function getBaseStyles(styles: any): SystemStyleObject {
+        return {
+          userSelect: "none",
+          border: "0",
+          borderRadius: "md",
+          fontWeight: "semibold",
+          height: "1px",
+          width: "1px",
+          margin: "-1px",
+          padding: "0",
+          outline: "0",
+          overflow: "hidden",
+          position: "absolute",
+          clip: "rect(0 0 0 0)",
+          ...styles,
+          _focus: {
+            clip: "auto",
+            width: "auto",
+            height: "auto",
+            boxShadow: "outline",
+            padding: "1rem",
+            position: "fixed",
+            top: "1.5rem",
+            insetStart: "1.5rem",
+            ...styles["_focusVisible"],
+          },
+        }
       }
-    }
 
-    const styles = useStyleConfig("SkipLink", props)
+      const styles = useStyleConfig("SkipLink", props)
 
-    return () => {
-      return h(
-        chakra("a", {
-          __css: {
-            ...getBaseStyles(styles.value),
+      return () => {
+        return h(
+          chakra("a", {
+            __css: {
+              ...getBaseStyles(styles.value),
+            },
+          }),
+          {
+            ...attrs,
+            href: `#${props.id}`,
           },
-        }),
-        {
-          ...attrs,
-          href: `#${props.id}`,
-        },
-        slots
-      )
-    }
-  },
-})
+          slots
+        )
+      }
+    },
+  })
+
+export interface CSkipNavContentProps extends HTMLChakraProps<"div"> {}
 
-export const CSkipNavContent = defineComponent({
+export const CSkipNavContent: ComponentWithProps<
+  DeepPartial<CSkipNavContentProps>
+> = defineComponent({
   name: "CSkipNavContent",
   props: {
     id: {
@@ -91,6 +101,7 @@ export const CSkipNavContent = defineComponent({
           ...attrs,
           id: props.id,
           tabIndex: "-1",
+          "data-testid": FALLBACK_ID,
         },
         slots
       )

packages/c-skip-nav/tests/__snapshots__/c-skip-nav.test.ts.snap

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CSkipNavContent should render properly 1`] = `
+<DocumentFragment>
+  <div
+    class="chakra-box css-1avyp1d"
+    data-testid="chakra-skip-nav"
+    id="chakra-skip-nav"
+    tabindex="-1"
+  />
+</DocumentFragment>
+`;
+
+exports[`CSkipNavLink should render properly 1`] = `
+<DocumentFragment>
+  <a
+    class="css-fkbol"
+    href="#chakra-skip-nav"
+  />
+</DocumentFragment>
+`;

packages/c-skip-nav/tests/c-skip-nav.test.ts

@@ -1,7 +1,88 @@
-import { render } from '../../test-utils/src'
-import { CSkipNav } from '../src'
+import {
+  fireEvent,
+  render,
+  screen,
+  userEvent,
+} from "@chakra-ui/vue-test-utils/src"
+import { wait } from "@testing-library/user-event/dist/utils"
+import { Component } from "vue"
+import { CSkipNavContent, CSkipNavLink } from "../src"
 
-it('should render properly', () => {
-  const { asFragment } = render(CSkipNav)
-  expect(asFragment()).toMatchSnapshot()
-})
+const MOCK_INPUT_PLACEHOLDER_TEXT = "Search"
+
+const renderBaseTemplate = (options: Component = {}) => {
+  return render({
+    components: {
+      CSkipNavLink,
+      CSkipNavContent,
+    },
+    template: `
+      <div>
+        <c-skip-nav-link>Skip to Content</c-skip-nav-link>
+        <c-skip-nav-content>
+          <main>
+            <form>
+              <input type="text" placeholder=${MOCK_INPUT_PLACEHOLDER_TEXT} />
+            </form>
+          </main>
+        </c-skip-nav-content>
+      </div>
+    `,
+    ...options,
+  })
+}
+
+const getSkipLink = () => screen.getByText("Skip to Content")
+
+const getContentWrapper = () => screen.getByTestId("chakra-skip-nav")
+
+const triggerSkipLink = async () => {
+  const link = getSkipLink()
+  await fireEvent.keyDown(link, {
+    key: "Enter",
+    code: "Enter",
+  })
+}
+
+describe("CSkipNavLink", () => {
+  it("should render properly", () => {
+    const { asFragment } = render(CSkipNavLink)
+    expect(asFragment()).toMatchSnapshot()
+  })
+})
+
+describe("CSkipNavContent", () => {
+  it("should render properly", () => {
+    const { asFragment } = render(CSkipNavContent)
+    expect(asFragment()).toMatchSnapshot()
+  })
+})
+
+describe("CSkipNav Pair", () => {
+  beforeEach(async () => {
+    renderBaseTemplate()
+    userEvent.tab()
+  })
+  it("should have the user tab to `CSkipNavLink` after initial render", () => {
+    const link = getSkipLink()
+    expect(link).toHaveAttribute("href", "#chakra-skip-nav")
+  })
+
+  it("should have the user navigate from `CSkipNavLink` to `CSkipNavContent` upon selection", async () => {
+    await triggerSkipLink()
+    const contentWrapper = getContentWrapper()
+
+    wait().then(() => {
+      expect(contentWrapper).toHaveFocus()
+    })
+  })
+
+  it("should tab to input after wrapper focus", async () => {
+    await triggerSkipLink()
+    userEvent.tab()
+
+    const input = screen.getByPlaceholderText(MOCK_INPUT_PLACEHOLDER_TEXT)
+
+    expect(input).toHaveFocus()
+  })
+})