test(component): added spec to tooltip (#331)

Added spec to tooltip and fixed the documentation

#310

Author: gilf

apps/website/src/routes/docs/headless/(components)/tooltip/index.mdx

@@ -10,7 +10,7 @@ import { APITable } from '../../../../../components/api-table/api-table';
 
 # Tooltip
 
-#### A popup that displays information realted to an element when the element receives keyboard focus or the mouse hovers over it.
+#### A tooltip that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
 
 <MainExample>
   ```tsx
@@ -41,7 +41,7 @@ import { APITable } from '../../../../../components/api-table/api-table';
 
 ## Examples
 
-### EXAMPLE: Describing Unlabelled Icon Link
+### EXAMPLE: Describing Icon with Tooltip
 
 <Example1>
   ```tsx
@@ -72,7 +72,7 @@ import { APITable } from '../../../../../components/api-table/api-table';
 
 ## API
 
-### AccordionItem
+### Tooltip
 
 <APITable
   propDescriptors={[
@@ -88,7 +88,7 @@ import { APITable } from '../../../../../components/api-table/api-table';
     },
     {
       name: 'durationMs',
-      type: 'nummber',
+      type: 'number',
       description:
         'Sets a delay duration in milliseconds before the Tooltip is displayed.',
     },

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

@@ -0,0 +1,19 @@
+import { component$ } from '@builder.io/qwik';
+import { Tooltip } from './tooltip';
+
+const TooltipComponent = component$(() => {
+  return <Tooltip content="tooltip message">Please hover me</Tooltip>;
+});
+
+describe('Tooltip', () => {
+  it('INIT', () => {
+    cy.mount(<TooltipComponent />);
+
+    cy.checkA11yForComponent();
+  });
+  it('should render the component', () => {
+    cy.mount(<TooltipComponent />);
+
+    cy.findByRole('tooltip').should('contain', 'tooltip message');
+  });
+});