chore(separator): add test

packages/components/separator/src/separator.test.ts

@@ -0,0 +1,46 @@
+import { describe, expect, it } from 'vitest'
+import { mount, shallowMount } from '@vue/test-utils'
+import { OkuSeparator } from './separator'
+
+describe('OkuSeparator', () => {
+ const wrapper = mount(OkuSeparator)
+
+ it('renders correctly', async () => {
+ expect(wrapper.html()).toBe(`<div role="separator" data-orientation="horizontal">
+ <!---->
+</div>`)
+ })
+
+ it('renders ref correctly', async () => {
+ // TODO: outerHTML is not available on VueWrapper
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+ // @ts-expect-error
+ expect(wrapper.vm.innerRef.outerHTML).toBe('<div role="separator" data-orientation="horizontal"><!----></div>')
+ })
+
+ it('sets role as separator without decorative', async () => {
+ expect(wrapper.attributes('role')).toBe('separator')
+ })
+
+ it('sets default orientation horizontal', async () => {
+ expect(wrapper.attributes('data-orientation')).toBe('horizontal')
+ })
+
+ it('sets role as none on adding decorative', async () => {
+ const wrapper = shallowMount(OkuSeparator, {
+ propsData: {
+ decorative: true,
+ },
+ })
+ expect(wrapper.attributes('role')).toBe('none')
+ })
+
+ it('sets orientation vertical', async () => {
+ const wrapper = shallowMount(OkuSeparator, {
+ propsData: {
+ orientation: 'vertical',
+ },
+ })
+ expect(wrapper.attributes('data-orientation')).toBe('vertical')
+ })
+})

packages/components/separator/src/separator.ts

@@ -48,6 +48,7 @@ const Separator = defineComponent({
  // `aria-orientation` defaults to `horizontal` so we only need it if `orientation` is vertical
  const ariaOrientation = orientation === 'vertical' ? orientation : undefined
  const semanticProps = props.decorative ? { role: 'none' } : { 'aria-orientation': ariaOrientation, 'role': 'separator' }
+ const dataOrientation = { 'data-orientation': orientation }
 
  const innerRef = ref<ComponentPublicInstance>()
 
@@ -62,13 +63,15 @@ const Separator = defineComponent({
  ...attrs,
  ref: innerRef,
  ...semanticProps,
- dataOrientation: orientation,
+ ...dataOrientation,
  style: {
  ...domProps,
  border: 'none',
  },
  },
- slots.default?.(),
+ {
+ default: () => slots.default?.(),
+ },
  )
 
  return originalReturn as unknown as {