@dhasdk/simple-ui 1.0.7 → 1.0.8

package/src/lib/Tooltip--Tooltip.stories.tsx

@@ -0,0 +1,315 @@
+import { Meta, StoryObj, StoryFn } from '@storybook/react';
+import { expect, fn, userEvent, within } from 'storybook/test';
+import React, { Component, ReactNode, useState } from 'react';
+import  { Tooltip, TooltipContent }  from './Tooltip';
+
+// reusable helper function to test that tooltip is and is not present as appropriate
+async function defaultPlay(canvasElement: HTMLElement) {
+  const canvas = within(canvasElement);
+
+  // Find the Paragraph inside the Tooltip component
+  // NOTE: Keeping the explicit timeouts as per the original code
+  await new Promise((resolve) => setTimeout(resolve, 250));
+  const paragraph = canvas.getByRole('status'); // Assuming 'status' is the correct role
+
+  // confirm text 'I am a tooltip' is not visible
+  expect(canvas.queryByText('I am a tooltip!')).toBeNull();
+
+  // Check initial paragraph text
+  // await new Promise((resolve) => setTimeout(resolve, 250));
+  expect(paragraph).toHaveTextContent("I am a paragraph");
+
+  // Hover over the paragraph
+  await new Promise((resolve) => setTimeout(resolve, 250));
+  await userEvent.hover(paragraph);
+
+  expect(canvas.queryByText('I am a tooltip!')).not.toBeNull();
+}
+
+export default {
+  title: 'Components/Tooltip',
+  component: Tooltip,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: 'centered',
+  },
+  argTypes: {
+    className: { control: 'text' },
+    thumbClassName: { control: 'text' },
+    defaultChecked: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+  },
+} as Meta<typeof Tooltip>;
+
+
+export const Default: StoryFn = () => {
+  
+  return (
+    <div className="grid mx-auto w-1/2 p-2 border-2 rounded-sm">
+      <Tooltip>
+        <p role="status">I am a paragraph. I am a paragraph. I am a paragraph. I am a paragraph. I am a paragraph. 
+          I am a paragraph. I am a paragraph. I am a paragraph. I am a paragraph.</p>
+        <p>I'm another paragraph!</p>
+        <TooltipContent>I am a tooltip! <p>I'm a paragraph inside the tooltip!</p></TooltipContent>
+      </Tooltip>
+    </div>
+  );
+};
+
+Default.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+
+  // Find the Paragraph inside the Tooltip component
+  // NOTE: Keeping the explicit timeouts as per the original code
+  await new Promise((resolve) => setTimeout(resolve, 250));
+  const paragraph = canvas.getByRole('status'); // Assuming 'status' is the correct role
+
+  // confirm text 'I am a tooltip' is not visible
+  expect(canvas.queryByText('I am a tooltip!')).toBeNull();
+
+  // Check initial paragraph text
+  // await new Promise((resolve) => setTimeout(resolve, 250));
+  expect(paragraph).toHaveTextContent("I am a paragraph");
+
+  // Hover over the paragraph
+  await new Promise((resolve) => setTimeout(resolve, 250));
+  await userEvent.hover(paragraph);
+
+  expect(canvas.queryByText('I am a tooltip!')).not.toBeNull();
+
+  // Move mouse out ...
+  await new Promise((resolve) => setTimeout(resolve, 250));
+  await userEvent.unhover(paragraph);
+  expect(canvas.queryByText('I am a tooltip!')).toBeNull();
+
+};
+
+
+export const South: StoryFn = () => {
+  
+  return (
+    <div className="grid mx-auto w-1/2 p-2 border-2 rounded-sm">
+      <Tooltip>
+        <p role="status">I am a paragraph. I am a paragraph. I am a paragraph. I am a paragraph. I am a paragraph. 
+          I am a paragraph. I am a paragraph. I am a paragraph. I am a paragraph.</p>
+        <TooltipContent 
+          position='s' 
+          className='bg-blue-200 border-2 border-blue-500 text-blue-700'
+          >I am a tooltip!</TooltipContent>
+      </Tooltip>
+    </div>
+  );
+};
+
+South.play = async ({ canvasElement }) => {
+  defaultPlay(canvasElement);
+};
+
+export const North: StoryFn = () => {
+  
+  return (
+    <div className="grid mx-auto w-1/2 p-2 border-2 rounded-sm">
+      <Tooltip>
+        <p role="status">I am a paragraph. I am a paragraph. I am a paragraph. I am a paragraph. I am a paragraph. 
+          I am a paragraph. I am a paragraph. I am a paragraph. I am a paragraph.</p>
+        <TooltipContent position='n'>I am a tooltip!</TooltipContent>
+      </Tooltip>
+    </div>
+  );
+};
+
+North.play = async ({ canvasElement }) => {
+  defaultPlay(canvasElement);
+};
+
+
+
+export const NorthWest: StoryFn = () => {
+  
+  return (
+    <div className="grid mx-auto w-1/2 p-2 border-2 rounded-sm">
+      <Tooltip>
+        <p role="status">I am a paragraph. I am a paragraph. I am a paragraph. I am a paragraph. I am a paragraph. 
+          I am a paragraph. I am a paragraph. I am a paragraph. I am a paragraph.</p>
+        <TooltipContent position='nw'>I am a tooltip!</TooltipContent>
+      </Tooltip>
+    </div>
+  );
+};
+
+NorthWest.play = async ({ canvasElement }) => {
+  defaultPlay(canvasElement);
+};
+
+export const NorthEast: StoryFn = () => {
+  
+  return (
+    <div className="grid mx-auto w-1/2 p-2 border-2 rounded-sm">
+      <Tooltip>
+        <p role="status">I am a paragraph. I am a paragraph. I am a paragraph. I am a paragraph. I am a paragraph. 
+          I am a paragraph. I am a paragraph. I am a paragraph. I am a paragraph.</p>
+        <TooltipContent position='ne'>I am a tooltip!</TooltipContent>
+      </Tooltip>
+    </div>
+  );
+};
+
+NorthEast.play = async ({ canvasElement }) => {
+  defaultPlay(canvasElement);
+};
+
+export const SouthEast: StoryFn = () => {
+  
+  return (
+    <div className="grid mx-auto w-1/2 p-2 border-2 rounded-sm">
+      <Tooltip>
+        <p role="status">I am a paragraph. I am a paragraph. I am a paragraph. I am a paragraph. I am a paragraph. 
+          I am a paragraph. I am a paragraph. I am a paragraph. I am a paragraph.</p>
+        <TooltipContent position='se'>I am a tooltip!</TooltipContent>
+      </Tooltip>
+    </div>
+  );
+};
+
+SouthEast.play = async ({ canvasElement }) => {
+  defaultPlay(canvasElement);
+};
+
+export const West: StoryFn = () => {
+  
+  return (
+    <div className="grid mx-auto w-1/2 p-2 border-2 rounded-sm">
+      <Tooltip>
+        <p role="status">I am a paragraph. I am a paragraph. I am a paragraph. I am a paragraph. I am a paragraph. 
+          I am a paragraph. I am a paragraph. I am a paragraph. I am a paragraph.</p>
+        <TooltipContent position='w'>I am a tooltip!</TooltipContent>
+      </Tooltip>
+    </div>
+  );
+};
+
+West.play = async ({ canvasElement }) => {
+  defaultPlay(canvasElement);
+};
+
+export const East: StoryFn = () => {
+  
+  return (
+    <div className="grid mx-auto w-1/2 p-2 border-2 rounded-sm">
+      <Tooltip>
+        <p role="status">I am a paragraph. I am a paragraph. I am a paragraph. I am a paragraph. I am a paragraph. 
+          I am a paragraph. I am a paragraph. I am a paragraph. I am a paragraph.</p>
+        <TooltipContent position='e'>I am a tooltip!</TooltipContent>
+      </Tooltip>
+    </div>
+  );
+};
+
+East.play = async ({ canvasElement }) => {
+  defaultPlay(canvasElement);
+};
+
+export const Center: StoryFn = () => {
+  
+  return (
+    <div className="grid mx-auto w-1/2 p-2 border-2 rounded-sm">
+      <Tooltip>
+        <p role="status">I am a paragraph. I am a paragraph. I am a paragraph. I am a paragraph. I am a paragraph. 
+          I am a paragraph. I am a paragraph. I am a paragraph. I am a paragraph.</p>
+        <TooltipContent position='c'>I am a tooltip!</TooltipContent>
+      </Tooltip>
+    </div>
+  );
+};
+
+Center.play = async ({ canvasElement }) => {
+  defaultPlay(canvasElement);
+};
+
+
+export const Content: StoryFn = () => {
+  
+  return (
+    <div className="grid mx-auto w-1/2 p-2 border-2 rounded-sm">
+      <Tooltip>
+        <p role="status">I am a paragraph. I am a paragraph. I am a paragraph. I am a paragraph. I am a paragraph. 
+          I am a paragraph. I am a paragraph. I am a paragraph. I am a paragraph.
+        </p>
+        I'm not a part of an element.
+        <TooltipContent>I am a tooltip! <p>I'm a paragraph inside the tooltip!</p></TooltipContent>
+      </Tooltip>
+    </div>
+  );
+};
+
+
+export const MultiContentElements: StoryFn = () => {
+  
+  return (
+    <div className="grid mx-auto w-1/2 p-2 border-2 rounded-sm">
+      <Tooltip>
+        <>
+        <p role="status">I am a paragraph. I am a paragraph. I am a paragraph. I am a paragraph. I am a paragraph. 
+          I am a paragraph. I am a paragraph. I am a paragraph. I am a paragraph.
+        </p>
+        <p>I'm a 2nd paragraph inside the tooltip</p>
+        </>
+        <TooltipContent>I am a tooltip! <p>I'm a paragraph inside the tooltip!</p></TooltipContent>
+      </Tooltip>
+    </div>
+  );
+};
+
+
+export const TooltipContentError: StoryFn = () => {
+  
+  return (
+    <ErrorBoundary>
+      <div className="grid mx-auto w-1/2 p-2 border-2 rounded-sm">
+        <TooltipContent>I am a tooltip! <p>I'm a paragraph inside the tooltip!</p></TooltipContent>
+      </div>
+    </ErrorBoundary>
+  );
+};
+
+
+
+
+
+
+// Error Boundary definition for Error Checking
+
+interface ErrorBoundaryProps {
+  children: ReactNode;
+}
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+  error: Error | null;
+}
+
+
+class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error: Error) {
+    // Update state so the next render shows the fallback UI.
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: any) {
+    // You can log the error to an error reporting service here.
+    console.error("Error caught in ErrorBoundary:", error, errorInfo);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return <div>Error: {this.state.error?.message}</div>;
+    }
+
+    return this.props.children;
+  }
+}

package/src/lib/Tooltip.spec.tsx

@@ -0,0 +1,307 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { vi } from 'vitest';
+// import '@testing-library/jest-dom';
+import { axe } from "vitest-axe";
+import { Tooltip, TooltipContent, TooltipProps, TooltipContentProps } from './Tooltip';
+import { cp } from 'fs';
+import { createRef } from 'react';
+
+// getByText is synchronous
+// findByText is asynchronous
+
+describe('Tooltip Component', () => {
+
+  const renderComponent = (props: Partial<TooltipProps | TooltipContentProps> = {}) =>
+    render(
+      <Tooltip>
+        <button>Hover me</button>
+        <TooltipContent>Tooltip text</TooltipContent>
+      </Tooltip>
+    );
+
+  // PASSING
+  it('should render the trigger element', () => {
+    renderComponent();
+
+    expect(screen.getByText('Hover me')).toBeInTheDocument();
+    expect(screen.queryByText('Tooltip text')).not.toBeInTheDocument();
+  });
+
+  // PASSING
+  it('should have no accessibility violations when tooltip is not visible', async () => {
+    const { container } = renderComponent()
+
+    expect(screen.getByText('Hover me')).toBeInTheDocument();
+    expect(screen.queryByText('Tooltip text')).not.toBeInTheDocument();
+
+    const accessibilityResults = await axe(container);
+    expect(accessibilityResults).toHaveNoViolations();
+  });
+
+  // PASSING - USES A RE-RENDER TO FIND COMPONENT AND TEST
+  it('should show tooltip content on hover', async () => {
+
+    renderComponent();
+    const triggerButton = screen.getByText('Hover me');
+    const tooltipContainer = triggerButton.parentElement as HTMLElement;
+
+    fireEvent.mouseEnter(tooltipContainer);
+    await new Promise((resolve) => setTimeout(resolve, 100));
+    expect(screen.getByText('Tooltip text')).toBeInTheDocument();
+  });
+
+  // PASSING
+  it('should show tooltip content after specified delay', async () => {
+    render(
+      <Tooltip delay={250}>
+        <button>Hover me</button>
+        <TooltipContent>Tooltip text</TooltipContent>
+      </Tooltip>
+    );
+
+    const triggerButton = screen.getByText('Hover me');
+    const tooltipContainer = triggerButton.parentElement as HTMLElement;
+
+    fireEvent.mouseEnter(tooltipContainer);
+
+    const toolTipEl = await screen.findByText('Tooltip text', {}, {timeout: 300});
+    expect(toolTipEl).toBeInTheDocument();
+  });
+
+  // PASSING
+  it('should hide tooltip content on mouse leave', async () => {
+    renderComponent();
+
+    const tooltipContainer = screen.getByText('Hover me').parentElement as HTMLElement;
+
+    // Show tooltip
+    fireEvent.mouseEnter(tooltipContainer);
+
+    const toolTipEl = await screen.findByText('Tooltip text', {}, {timeout: 300});
+    expect(toolTipEl).toBeInTheDocument();
+
+    // Hide tooltip
+    fireEvent.mouseLeave(tooltipContainer);
+
+    expect(toolTipEl).not.toBeInTheDocument();
+  });
+
+  // PASSING
+  it('should show tooltip on focus and hide on blur for keyboard accessibility', async () => {
+    renderComponent();
+
+    const tooltipContainer = screen.getByText('Hover me').parentElement as HTMLElement;
+
+    // Show tooltip on focus
+    fireEvent.focus(tooltipContainer);
+
+    const toolTipEl = await screen.findByText('Tooltip text', {}, {timeout: 300});
+    expect(toolTipEl).toBeInTheDocument();
+
+    // Hide tooltip on blur
+    fireEvent.blur(tooltipContainer);
+
+    expect(screen.queryByText('Tooltip text')).not.toBeInTheDocument();
+  });
+
+  // PASSING
+  it('should apply custom className to Tooltip wrapper', () => {
+    render(
+      <Tooltip className="custom-tooltip-class">
+        <button>Hover me</button>
+        <TooltipContent>Tooltip text</TooltipContent>
+      </Tooltip>
+    );
+
+    const tooltipContainer = screen.getByText('Hover me').parentElement as HTMLElement;
+    expect(tooltipContainer).toHaveClass('custom-tooltip-class');
+  });
+
+  it('renders a tooltip with invalid children', () => {
+    expect(() => render(
+      <>
+        <TooltipContent/>
+        <Tooltip children={false} className="custom-tooltip-class"/>
+      </>
+    )).toThrowError();
+  });
+
+  // PASSING
+  it('should pass accessibility audit when open', async () => {
+    const { container } = renderComponent()
+
+    const triggerButton = screen.getByText('Hover me');
+    const tooltipContainer = triggerButton.parentElement as HTMLElement;
+
+    fireEvent.focus(triggerButton);
+    fireEvent.mouseEnter(tooltipContainer);
+
+    const toolTipEl = await screen.findByText('Tooltip text', {}, {timeout: 300});
+    expect(toolTipEl).toBeInTheDocument();
+
+    expect(screen.getByText('Tooltip text')).toBeInTheDocument();
+
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+
+  it('should handle multiple children correctly', async () => {
+    render(
+      <Tooltip>
+        <div>
+          <button>Hover me</button>
+          <span>Extra content</span>
+        </div>
+        <TooltipContent>Tooltip text</TooltipContent>
+      </Tooltip>
+    );
+
+    expect(screen.getByText('Hover me')).toBeInTheDocument();
+    expect(screen.getByText('Extra content')).toBeInTheDocument();
+    expect(screen.queryByText('Tooltip text')).not.toBeInTheDocument();
+
+    fireEvent.mouseEnter(screen.getByText('Hover me').closest('div')?.parentElement as HTMLElement);
+
+    const toolTipEl = await screen.findByText('Tooltip text', {}, {timeout: 300});
+    expect(toolTipEl).toBeInTheDocument();
+  });
+});
+
+
+/*
+    const toolTipEl = await screen.findByText('Tooltip text', {}, {timeout: 300});
+    expect(toolTipEl).toBeInTheDocument();
+
+    expect(screen.getByText('Tooltip text')).toBeInTheDocument();
+
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+*/
+
+describe('TooltipContent Component', () => {
+
+  it('should apply position classes based on position prop', async () => {
+    const { rerender } = render(<Tooltip><p>Hover me</p><TooltipContent position="n">North tooltip</TooltipContent></Tooltip>);
+
+    // Test Northern position
+    const triggerButton = screen.getByText('Hover me');
+    const tooltipContainer = triggerButton.parentElement as HTMLElement;
+
+    fireEvent.focus(triggerButton);
+    fireEvent.mouseEnter(tooltipContainer);
+
+    let toolTipEl = await screen.findByText('North tooltip', {}, {timeout: 300});
+    expect(screen.getByText('North tooltip')).toHaveClass('left-1/2');
+    expect(screen.getByText('North tooltip')).toHaveClass('-translate-y-full');
+
+    // Test Southern position
+    rerender(<Tooltip><p>Hover me</p><TooltipContent position="s">South tooltip</TooltipContent></Tooltip>);
+
+    fireEvent.focus(triggerButton);
+    fireEvent.mouseEnter(tooltipContainer);
+
+    toolTipEl = await screen.findByText('South tooltip', {}, {timeout: 300});
+    expect(screen.getByText('South tooltip')).toHaveClass('top-full');
+    expect(screen.getByText('South tooltip')).toHaveClass('-translate-x-1/2');
+
+
+    // Test East position
+    rerender(<Tooltip><p>Hover me</p><TooltipContent position="e">East tooltip</TooltipContent></Tooltip>);
+
+    fireEvent.focus(triggerButton);
+    fireEvent.mouseEnter(tooltipContainer);
+
+    toolTipEl = await screen.findByText('East tooltip', {}, {timeout: 300});
+    expect(screen.getByText('East tooltip')).toHaveClass('-right-2');
+    expect(screen.getByText('East tooltip')).toHaveClass('translate-x-full');
+
+    // Test West position
+    rerender(<Tooltip><p>Hover me</p><TooltipContent position="w">West tooltip</TooltipContent></Tooltip>);
+
+    fireEvent.focus(triggerButton);
+    fireEvent.mouseEnter(tooltipContainer);
+
+    toolTipEl = await screen.findByText('West tooltip', {}, {timeout: 300});
+    expect(screen.getByText('West tooltip')).toHaveClass('-translate-x-full');
+    expect(screen.getByText('West tooltip')).toHaveClass('-left-2');
+
+    // Test NW Position
+    rerender(<Tooltip><p>Hover me</p><TooltipContent position="nw">NW tooltip</TooltipContent></Tooltip>);
+
+    fireEvent.focus(triggerButton);
+    fireEvent.mouseEnter(tooltipContainer);
+
+    toolTipEl = await screen.findByText('NW tooltip', {}, {timeout: 300});
+    expect(screen.getByText('NW tooltip')).toHaveClass('left-0');
+    expect(screen.getByText('NW tooltip')).toHaveClass('-translate-y-full');
+
+    // Test SE Position
+    rerender(<Tooltip><p>Hover me</p><TooltipContent position="se">SE tooltip</TooltipContent></Tooltip>);
+
+    fireEvent.focus(triggerButton);
+    fireEvent.mouseEnter(tooltipContainer);
+
+    toolTipEl = await screen.findByText('SE tooltip', {}, {timeout: 300});
+    expect(screen.getByText('SE tooltip')).toHaveClass('right-0');
+    expect(screen.getByText('SE tooltip')).toHaveClass('top-full');
+
+    // Test NE Position
+    rerender(<Tooltip><p>Hover me</p><TooltipContent position="ne">NE tooltip</TooltipContent></Tooltip>);
+
+    fireEvent.focus(triggerButton);
+    fireEvent.mouseEnter(tooltipContainer);
+
+    toolTipEl = await screen.findByText('NE tooltip', {}, {timeout: 300});
+    expect(screen.getByText('NE tooltip')).toHaveClass('right-0');
+    expect(screen.getByText('NE tooltip')).toHaveClass('-translate-y-full');
+
+    // Test Center Position
+    rerender(<Tooltip><p>Hover me</p><TooltipContent position="c">Center tooltip</TooltipContent></Tooltip>);
+
+    fireEvent.focus(triggerButton);
+    fireEvent.mouseEnter(tooltipContainer);
+
+    toolTipEl = await screen.findByText('Center tooltip', {}, {timeout: 300});
+    expect(screen.getByText('Center tooltip')).toHaveClass('left-1/2');
+    expect(screen.getByText('Center tooltip')).toHaveClass('top-1/2');
+  });
+
+  it('should apply custom className to TooltipContent', async () => {
+    render(
+      <Tooltip><p>Hover me</p><TooltipContent className="custom-content-class">Tooltip content</TooltipContent></Tooltip>
+    );
+    fireEvent.mouseEnter(screen.getByText('Hover me').closest('p')?.parentElement as HTMLElement);
+    const toolTipEl = await screen.findByText('Tooltip content', {}, {timeout: 300});
+    expect(toolTipEl).toHaveClass('custom-content-class');
+  });
+
+  // PASSING
+  it('should have proper ARIA attributes for accessibility', async () => {
+    render(<Tooltip><p>Hover me</p><TooltipContent>Accessible tooltip</TooltipContent></Tooltip>);
+
+    // hover over paragraph
+    fireEvent.mouseEnter(screen.getByText('Hover me').closest('p')?.parentElement as HTMLElement);
+
+    const tooltip = await screen.findByRole('tooltip');
+    expect(tooltip).toBeInTheDocument();
+    expect(tooltip).toHaveTextContent('Accessible tooltip');
+  });
+
+  it('should pass accessibility audit', async () => {
+    const { container } = render(
+      <Tooltip><p>Hover me</p><TooltipContent>Tooltip content</TooltipContent></Tooltip>
+    );
+
+    const triggerButton = screen.getByText('Hover me');
+    const tooltipContainer = triggerButton.parentElement as HTMLElement;
+
+    const p = await screen.findByText('Hover me', {}, {timeout: 300});
+    expect(p).toBeInTheDocument();
+
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+});
+