test: add progress headless first tests

Author: ditadi

packages/kit-headless/src/components/progress/progress-indicator.tsx

@@ -3,19 +3,17 @@ import { getProgressState } from './util';
 import { ProgressContext } from './progress-context';
 
 type ProgressIndicatorElement = PropsOf<'div'>;
-export const Indicator = component$<ProgressIndicatorElement>((props) => {
+export const ProgressIndicator = component$<ProgressIndicatorElement>((props) => {
   const { ...indicatorProps } = props;
 
   const { max, value } = useContext(ProgressContext);
   const translateX = value ? `translateX(-${100 - value}%)` : undefined;
 
   return (
     <div
-      style={{
-        transform: translateX,
-        transition: 'transform 0.3s',
-      }}
-      data-state={getProgressState(value, max)}
+      style={{ transform: translateX }}
+      title="progress_indicator"
+      data-progress={getProgressState(value, max)}
       data-value={value ?? undefined}
       data-max={max}
       {...indicatorProps}

packages/kit-headless/src/components/progress/progress.driver.ts

@@ -0,0 +1,28 @@
+import { type Locator, type Page } from '@playwright/test';
+export type DriverLocator = Locator | Page;
+
+export function createTestDriver<T extends DriverLocator>(rootLocator: T) {
+  const getRoot = () => {
+    return rootLocator;
+  };
+
+  const getProgressIndicator = () => {
+    return getRoot().getByTitle('progress_indicator');
+  };
+
+  const getProgressState = () => {
+    return getProgressIndicator().getAttribute('data-progress');
+  };
+
+  const getProgressValue = () => {
+    return getProgressIndicator().getAttribute('data-value');
+  };
+
+  return {
+    ...rootLocator,
+    getRoot,
+    getProgressIndicator,
+    getProgressState,
+    getProgressValue,
+  };
+}

packages/kit-headless/src/components/progress/progress.test.ts

@@ -0,0 +1,36 @@
+import { expect, test, type Page } from '@playwright/test';
+import { createTestDriver } from './progress.driver';
+
+async function setup(page: Page, exampleName: string) {
+  await page.goto(`/headless/progress/${exampleName}`);
+
+  const driver = createTestDriver(page.getByRole('progressbar'));
+  const { getRoot, getProgressState, getProgressValue, getProgressIndicator } = driver;
+
+  return { driver, getRoot, getProgressState, getProgressValue, getProgressIndicator };
+}
+
+test.describe('Progress Bar usaged', () => {
+  test(`should have root and indicator`, async ({ page }) => {
+    const { driver: d } = await setup(page, 'hero');
+
+    await expect(d.getRoot()).toBeVisible();
+    await expect(d.getProgressIndicator()).toBeVisible();
+  });
+
+  test(`should have progress state loading if is not completed`, async ({ page }) => {
+    const { driver: d } = await setup(page, 'hero');
+
+    expect(d.getProgressIndicator()).toBeVisible();
+    expect(await d.getProgressState()).toBe('loading');
+    expect(await d.getProgressValue()).toBe('30');
+  });
+
+  test(`should have aria attributes`, async ({ page }) => {
+    const { driver: d } = await setup(page, 'hero');
+    await expect(d.getRoot()).toHaveAttribute('aria-valuemin', '0');
+    await expect(d.getRoot()).toHaveAttribute('aria-valuemax', '100');
+    await expect(d.getRoot()).toHaveAttribute('aria-valuenow', '30');
+    await expect(d.getRoot()).toHaveAttribute('aria-valuetext', '30%');
+  });
+});

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

@@ -9,15 +9,22 @@ import {
 import { ProgressContext } from './progress-context';
 
 type ProgressProps = {
+  /** Maximum value of the progress bar.**/
   max?: number;
+
+  /** Current value of the progress bar. **/
   value?: number;
+
+  /** Callback to get the label for the current value. **/
   getValueLabel?(value: number, max: number): string;
 };
 
 type ProgressElement = PropsOf<'div'>;
+
+/** Default max value for progress bar **/
 const DEFAULT_MAX = 100;
 
-export const Root = component$<ProgressProps & ProgressElement>((props) => {
+export const Progress = component$<ProgressProps & ProgressElement>((props) => {
   const {
     max: mapProp,
     value: valueProp,
@@ -38,7 +45,8 @@ export const Root = component$<ProgressProps & ProgressElement>((props) => {
       aria-valuenow={isNumber(value) ? value : undefined}
       aria-valuetext={valueLabel}
       role="progressbar"
-      data-state={getProgressState(value, max)}
+      title="progress-bar"
+      data-progress={getProgressState(value, max)}
       data-value={value ?? undefined}
       data-max={max}
       {...progressProps}

packages/kit-styled/src/components/progress/progress.tsx

@@ -1,16 +1,19 @@
 import { cn } from '@qwik-ui/utils';
-import * as ProgressPrimitive from '@qwik-ui/headless';
+import {
+  Progress as QwikUIProgress,
+  ProgressIndicator as QwikUIProgressIndicator,
+} from '@qwik-ui/headless';
 import { PropsOf, component$ } from '@builder.io/qwik';
 
-export const Progress = component$<PropsOf<typeof ProgressPrimitive.Root>>((props) => {
+export const Progress = component$<PropsOf<typeof QwikUIProgress>>((props) => {
   return (
-    <ProgressPrimitive.Root
+    <QwikUIProgress
       class={cn('bg-secondary relative h-4 w-full overflow-hidden rounded', props?.class)}
     >
-      <ProgressPrimitive.Indicator
+      <QwikUIProgressIndicator
         class="bg-primary h-full w-full flex-1 transition-all"
         style={{ transform: `translateX(-${100 - (props.value || 0)}%)` }}
       />
-    </ProgressPrimitive.Root>
+    </QwikUIProgress>
   );
 });