test: add component tests

Kong · Jan 3, 2024 · e7308af · e7308af
1 parent e5dfe58
commit e7308af
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 75 deletions.
diff --git a/sandbox/App.vue b/sandbox/App.vue
@@ -7,7 +7,7 @@
       <MarkdownUi
         v-model="content"
         :editable="editable"
-        mode="edit"
+        mode="split"
         @cancel="cancelEdit"
         @mode="modeChanged"
         @save="contentSaved"

diff --git a/src/components/MarkdownUi.spec.ts b/src/components/MarkdownUi.spec.ts
@@ -7,29 +7,16 @@ import MarkdownUi from './MarkdownUi.vue'
 import { KUI_BREAKPOINT_PHABLET } from '@kong/design-tokens'
 import type { Theme } from '@/types'
 
-vi.mock('@vueuse/core', async () => {
-  const actual: any = await vi.importActual('@vueuse/core')
-  return {
-    ...actual,
-    // Mock the useScroll composable
-    useScroll: vi.fn(() => ({
-      arrivedState: {
-        left: false,
-        right: false,
-        top: false,
-        bottom: false,
-      },
-    })),
-  }
-})
-
 // Default markdown content
 const defaultText = 'Markdown Content'
 const defaultContent = `# ${defaultText}`
 
-// The markdown content takes roughly 350ms to initialize, so wait in each test.
-// Not ideal.
-const waitForContent = async (timeout = 300): Promise<void> => await new Promise((resolve) => setTimeout(resolve, timeout))
+/**
+ * The markdown content takes roughly 350ms to initialize `markdown-it` and render, so wait in each test that is not in `edit` mode. This isn't ideal.
+ * @param {number} timeout Time, in milliseconds, to wait
+ * @returns {Promise<void>}
+ */
+const waitForContent = async (timeout = 350): Promise<void> => await new Promise((resolve) => setTimeout(resolve, timeout))
 
 // Stub the return value for useMediaQuery to determine if browser is at least phablet width
 const mediaQuerySpy = ({

diff --git a/src/components/MarkdownUi.vue b/src/components/MarkdownUi.vue
@@ -6,19 +6,8 @@
     :class="[`mode-${currentMode}`, `theme-${activeTheme}`, { 'fullscreen': isFullscreen }]"
     data-testid="markdown-ui"
   >
-    <div
-      v-if="editable && currentMode !== 'read'"
-      class="toolbar-overlay left"
-      :class="{ 'overlay-visible': !arrivedState.left }"
-    />
-    <div
-      v-if="editable && currentMode !== 'read'"
-      class="toolbar-overlay right"
-      :class="{ 'overlay-visible': !arrivedState.right }"
-    />
     <MarkdownToolbar
       v-if="editable && currentMode !== 'read'"
-      ref="toolbar"
       @change-mode="(mode: MarkdownMode) => currentMode = mode"
       @format-selection="formatSelection"
       @insert-template="insertTemplate"
@@ -130,7 +119,7 @@ import ToolbarButton from '@/components/toolbar/ToolbarButton.vue'
 import composables from '@/composables'
 import { UNIQUE_ID_INJECTION_KEY, TEXTAREA_ID_INJECTION_KEY, MODE_INJECTION_KEY, EDITABLE_INJECTION_KEY, FULLSCREEN_INJECTION_KEY, HTML_PREVIEW_INJECTION_KEY, THEME_INJECTION_KEY } from '@/injection-keys'
 import { EDITOR_DEBOUNCE_TIMEOUT, TOOLBAR_HEIGHT, NEW_LINE_CHARACTER } from '@/constants'
-import { useMediaQuery, useScroll, useEventListener, usePreferredColorScheme } from '@vueuse/core'
+import { useMediaQuery, useEventListener, usePreferredColorScheme } from '@vueuse/core'
 import { v4 as uuidv4 } from 'uuid'
 import type { MarkdownMode, InlineFormat, MarkdownTemplate, TextAreaInputEvent, Theme } from '@/types'
 import formatHtml from 'html-format'
@@ -424,10 +413,6 @@ watch(() => props.theme, async (theme: Theme) => {
   }
 })
 
-const toolbar = ref<HTMLElement | null>(null)
-// Track the scroll position of the toolbar to show/hide the `.toolbar-overlay`
-const { arrivedState } = useScroll(toolbar)
-
 // Copy the contents of the code block to the clipboard
 const copyCodeBlock = async (e: any): Promise<void> => {
   try {
@@ -496,44 +481,6 @@ const markdownPanesMaxHeight = computed((): string => `${props.maxHeight}px`)
   position: relative;
   width: 100%;
 
-  .toolbar-overlay {
-    bottom: 0;
-    content: '';
-    display: none;
-    height: calc(v-bind('TOOLBAR_HEIGHT') + 1px);
-    pointer-events: none;
-    position: absolute;
-    top: 0;
-    width: 20px;
-
-    // Show an overlay transparency while the toolbar is scrollable
-    @media (max-width: ($kui-breakpoint-phablet - 1px)) {
-      display: block;
-    }
-
-    &.left,
-    &.right {
-      opacity: 0;
-      transition: opacity 0.2s ease-in-out;
-    }
-
-    &.overlay-visible {
-      opacity: 1;
-    }
-
-    &.left {
-      background: linear-gradient(to right, rgba(#000, 0.1), rgba(#000, 0));
-      border-top-left-radius: var(--kui-border-radius-40, $kui-border-radius-40);
-      left: 0;
-    }
-
-    &.right {
-      background: linear-gradient(to right, rgba(#000, 0), rgba(#000, 0.1));
-      border-top-right-radius: var(--kui-border-radius-40, $kui-border-radius-40);
-      right: 0;
-    }
-  }
-
   .markdown-panes {
     box-sizing: border-box;
     display: flex;

diff --git a/src/components/toolbar/MarkdownToolbar.vue b/src/components/toolbar/MarkdownToolbar.vue
@@ -1,9 +1,20 @@
 <template>
   <div
     v-if="editable && mode !== 'read'"
+    ref="toolbar"
     class="markdown-ui-toolbar"
     data-testid="toolbar"
   >
+    <div
+      v-if="editable"
+      class="toolbar-overlay left"
+      :class="{ 'overlay-visible': !arrivedState.left }"
+    />
+    <div
+      v-if="editable"
+      class="toolbar-overlay right"
+      :class="{ 'overlay-visible': !arrivedState.right }"
+    />
     <div class="toolbar-left">
       <div
         class="button-group"
@@ -165,7 +176,7 @@
 import { inject, ref, onMounted, watch } from 'vue'
 import type { Ref } from 'vue'
 import { MODE_INJECTION_KEY, EDITABLE_INJECTION_KEY, FULLSCREEN_INJECTION_KEY, HTML_PREVIEW_INJECTION_KEY, UNIQUE_ID_INJECTION_KEY } from '@/injection-keys'
-import { useMediaQuery } from '@vueuse/core'
+import { useMediaQuery, useScroll } from '@vueuse/core'
 import { TOOLBAR_HEIGHT } from '@/constants'
 import { KUI_BREAKPOINT_PHABLET, KUI_ICON_SIZE_40 } from '@kong/design-tokens'
 import type { MarkdownMode, FormatOption, TemplateOption, InlineFormat, MarkdownTemplate } from '@/types'
@@ -189,6 +200,10 @@ const emit = defineEmits<{
   (e: 'toggle-fullscreen'): void
 }>()
 
+const toolbar = ref<HTMLElement | null>(null)
+// Track the scroll position of the toolbar to show/hide the `.toolbar-overlay`
+const { arrivedState } = useScroll(toolbar)
+
 // Determine if the user is on a wider viewport
 const isPhabletWidth = useMediaQuery(`(min-width: ${KUI_BREAKPOINT_PHABLET})`)
 
@@ -341,6 +356,44 @@ onMounted(() => {
   }
 }
 
+.toolbar-overlay {
+  bottom: 0;
+  content: '';
+  display: none;
+  height: calc(v-bind('TOOLBAR_HEIGHT') + 1px);
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  width: 20px;
+
+  // Show an overlay transparency while the toolbar is scrollable
+  @media (max-width: ($kui-breakpoint-phablet - 1px)) {
+    display: block;
+  }
+
+  &.left,
+  &.right {
+    opacity: 0;
+    transition: opacity 0.2s ease-in-out;
+  }
+
+  &.overlay-visible {
+    opacity: 1;
+  }
+
+  &.left {
+    background: linear-gradient(to right, rgba(#000, 0.1), rgba(#000, 0));
+    border-top-left-radius: var(--kui-border-radius-40, $kui-border-radius-40);
+    left: 0;
+  }
+
+  &.right {
+    background: linear-gradient(to right, rgba(#000, 0), rgba(#000, 0.1));
+    border-top-right-radius: var(--kui-border-radius-40, $kui-border-radius-40);
+    right: 0;
+  }
+}
+
 .sr-only {
   @include sr-only;
 }