Testing componentes to use in Testing

1-hello-basic.tsx

import { component$ } from '@builder.io/qwik';

export const Hello = component$(() => {
  return <div>Hello World with Qwik!</div>
});

2-hello-props.tsx

import { component$ } from '@builder.io/qwik';

export interface IndexProps {
  name: string
}

export const HelloWithProps = component$<IndexProps>((props) => {
  return (
    <div>
      Hello { props.name} to work in Qwik!
    </div>
  );
});

3-products.ts

export const PRODUCTS = [
  {
    "name":"Smartphone XYZ",
    "description":"Un potente smartphone con una cámara de alta resolución y un rendimiento excepcional.",
    "category":"Electrónica",
    "tags":["Teléfono móvil", "Cámara", "Pantalla táctil", "Android", "iOS"],
    "price":699.99
  },
  {
    "name":"Laptop UltraBook Pro",
    "description":"Una laptop ultraligera con un diseño elegante y un potente procesador.",
    "category":"Informática",
    "tags":["Portátil", "Ultrabook", "Windows", "MacOS", "Rendimiento"],
    "price":1299.00
  },
  {
    "name":"Auriculares Inalámbricos Aurora",
    "description":"Auriculares inalámbricos con cancelación de ruido y calidad de sonido excepcional.",
    "category":"Audio",
    "tags":["Auriculares", "Inalámbricos", "Cancelación de ruido", "Audio de alta calidad"],
    "price":199.99
  },
  {
    "name":"Smart TV Crystal 4K",
    "description":"Una Smart TV con una impresionante calidad de imagen 4K y acceso a aplicaciones de transmisión.",
    "category":"Electrónica",
    "tags":["Televisor", "4K", "Smart TV", "Streaming", "Pantalla grande"],
    "price":899.00
  },
  {
    "name":"Cámara DSLR Profesional",
    "description":"Una cámara DSLR de nivel profesional con capacidades avanzadas de fotografía y video.",
    "category":"Fotografía",
    "tags":["Cámara", "DSLR", "Fotografía", "Video", "Profesional"],
    "price":1499.00
  }
];

4-list-products.tsx

import { component$ } from "@builder.io/qwik";

interface ProductItem {
  name: string;
  description: string;
  category: string;
  tags: Array<string>;
  price: number;
}

interface ProductsProps {
  list: Array<ProductItem>;
}

export const List = component$<ProductsProps>((props) => {
  const { list } = props;
  return (
    <div>
      <h1>Lista de productos en venta ({list.length})</h1>
      <ul>
        {list.map((product: ProductItem) => {
          return (
            <li key={product.name.toLowerCase()} item-type="product">
              {product.name} - {product.price}
            </li>
          );
        })}
      </ul>
    </div>
  );
});

5-counter.tsx

import { component$, useStore, $ } from "@builder.io/qwik";

export const Counter = component$(() => {
  const state = useStore({
    count: 0,
  });

  const increment = $(() => state.count++);

  return (
    <>
      <button class="increment" onClick$={increment}>
        +
      </button>
      <div class="count">{state.count}</div>
    </>
  );
});

6-counter-hook.tsx

import { component$ } from "@builder.io/qwik";
import { useCounter } from "~/hooks/useCounter";
export const CounterWithHook = component$(() => {
  const { increment, counter, reset } = useCounter(0);
  return (
    <>
      <button class="increment" onClick$={increment}>
        +
      </button>
      <button class="reset" onClick$={reset}>
        Reset
      </button>
      <div class="count">{counter.value}</div>
    </>
  );
});

7-hooks-useCounter.tsx

import { useSignal, $ } from "@builder.io/qwik";

const useCounter = (initialValue = 0) => {
  // 1
  const counter = useSignal(initialValue);

  // 2
  const increment = $(() => {
    counter.value++;
  });
  const reset = $(() => (counter.value = 0));

  // 3
  return {
    counter,
    increment,
    reset,
  };
};

export { useCounter };

8-input-text.tsx

import { component$, useSignal } from '@builder.io/qwik';

export const InputText = component$(() => {
  const githubUser = useSignal('BuilderIO');
  return (
    <main>
      <p>
        <label>
          GitHub username:
          <input
            value={githubUser.value}
            onInput$={(ev) => githubUser.value = (ev.target as HTMLInputElement).value}
          />
        </label>
      </p>
      <p>
        Select username: <span class='current-user'>{githubUser.value}</span>
      </p>
    </main>
  );
});