test(separator): adds testing to separator component, fixes silly mistakes found throught tests

Author: NexonTreeHouse

packages/kit-headless/src/components/separator/separator.spec.tsx

@@ -0,0 +1,58 @@
+import { Separator } from './separator';
+
+describe('Critical Functionality', () => {
+  it('INIT', () => {
+    cy.mount(<Separator />);
+
+    cy.checkA11yForComponent();
+  });
+
+  it('GIVEN no orientation prop THEN aria-orientation is set unset', () => {
+    cy.mount(<Separator />);
+
+    cy.findByRole('separator').should('not.have.attr', 'aria-orientation');
+  });
+
+  it("GIVEN orientation prop 'horizontal' THEN aria-orientation is unset", () => {
+    cy.mount(<Separator orientation="horizontal" />);
+
+    cy.findByRole('separator').should('not.have.attr', 'aria-orientation');
+  });
+
+  it("GIVEN orientation prop 'vertical' THEN aria-orientation is set to 'vertical'", () => {
+    cy.mount(<Separator orientation="vertical" />);
+
+    cy.findByRole('separator').should('have.attr', 'aria-orientation', 'vertical');
+  });
+
+  it("GIVEN no orientation prop THEN data-orientation is set to 'horizontal'", () => {
+    cy.mount(<Separator />);
+
+    cy.findByRole('separator').should('not.have.attr', 'aria-orientation');
+  });
+
+  it("GIVEN orientation prop 'horizontal' THEN data-orientation is set to 'horizontal'", () => {
+    cy.mount(<Separator orientation="horizontal" />);
+
+    cy.findByRole('separator').should('not.have.attr', 'aria-orientation');
+  });
+
+  it("GIVEN orientation prop 'vertical' THEN data-orientation is set to 'vertical'", () => {
+    cy.mount(<Separator orientation="vertical" />);
+
+    cy.findByRole('separator').should('have.attr', 'aria-orientation', 'vertical');
+  });
+
+  it("GIVEN decorative prop THEN role is set to 'none' AND aria-orientation is unset", () => {
+    cy.mount(<Separator decorative />);
+
+    cy.findByRole('none').should('not.have.attr', 'aria-orientation');
+  });
+
+  it('GIVEN invalid orientation prop THEN console.warn is called', () => {
+    const consoleSpy = cy.spy(console, 'warn');
+    cy.mount(<Separator orientation={'invalid' as any} />);
+
+    cy.wrap(consoleSpy).should('have.been.calledWithMatch', /Invalid prop 'orientation'/);
+  });
+});

packages/kit-headless/src/components/separator/separator.tsx

@@ -1,10 +1,13 @@
-import { component$, HTMLAttributes, useComputed$ } from '@builder.io/qwik';
+import { QwikIntrinsicElements } from '@builder.io/qwik';
+import { component$, useComputed$ } from '@builder.io/qwik';
 
 const ORIENTATIONS = ['horizontal', 'vertical'] as const;
 
 type Orientation = (typeof ORIENTATIONS)[number];
 
-export interface SeparatorProps extends HTMLAttributes<HTMLElement> {
+type QwikDiv = QwikIntrinsicElements['div'];
+
+export interface SeparatorProps extends QwikDiv {
   /**
    * Either `vertical` or `horizontal`. Defaults to `horizontal`.
    */
@@ -40,18 +43,20 @@ export const Separator = component$(
 
     // `aria-orientation` defaults to `horizontal` so we only need it if `orientation` is vertical
     const ariaOrientation = useComputed$(() =>
-      orientation.value === 'vertical' ? orientation : undefined
+      orientation.value === 'vertical' ? orientation.value : undefined
     );
 
     const semanticProps = useComputed$(() =>
       decorative
         ? { role: 'none' }
         : {
             role: 'separator',
-            'aria-orientation': ariaOrientation
+            'aria-orientation': ariaOrientation.value
           }
     );
 
-    return <div data-orientation={orientation} {...semanticProps} {...props} />;
+    return (
+      <div data-orientation={orientation.value} {...semanticProps.value} {...props} />
+    );
   }
 );