06_js-debug/uebungen/u17-19_shop-vitest/package.json

@@ -20,14 +20,14 @@
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "^16.3.2",
-    "@testing-library/user-event": "^14.6.5",
+    "@testing-library/user-event": "^14.6.6",
     "@types/react": "^19.2.18",
-    "@types/react-dom": "^19.2.4",
+    "@types/react-dom": "^19.2.5",
     "@typescript-eslint/eslint-plugin": "^8.67.0",
     "@typescript-eslint/parser": "^8.67.0",
     "@vitejs/plugin-react": "^6.1.0",
     "@vitest/ui": "^4.1.11",
-    "eslint": "^10.8.1",
+    "eslint": "^10.9.0",
     "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-react-refresh": "^0.5.4",
     "jsdom": "^30.0.1",

06_js-debug/uebungen/u17-19_shop-vitest/src/tests/CategorySection.test.tsx

@@ -0,0 +1,36 @@
+import { it, expect, describe } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/vitest';
+import CategorySection from '../components/CategorySection';
+import { fakeCategories } from './__mocks__/categories.mock';
+import { MemoryRouter } from 'react-router-dom';
+
+const categories = fakeCategories;
+
+describe('CategorySection', () => {
+  it('should render the heading right', () => {
+    render(
+      <MemoryRouter>
+        <CategorySection categories={categories} />
+      </MemoryRouter>,
+    );
+
+    screen.debug();
+
+    expect(screen.getByText(/Explore by Category/i)).toBeInTheDocument();
+  });
+
+  it('should have 3 links and 3 pics', () => {
+    render(
+      <MemoryRouter>
+        <CategorySection categories={categories} />
+      </MemoryRouter>,
+    );
+
+    const imgs = screen.getAllByRole('img');
+    const links = screen.getAllByRole('link');
+
+    expect(imgs).toHaveLength(3); //.length()
+    expect(links).toHaveLength(3);
+  });
+});

06_js-debug/uebungen/u17-19_shop-vitest/src/tests/Footer.test.tsx

@@ -0,0 +1,32 @@
+import { it, expect, describe } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/vitest';
+import { MemoryRouter } from 'react-router-dom';
+import { fakeNavItems } from './__mocks__/navItems.mock';
+
+import Footer from '../components/Footer';
+
+const navItems = fakeNavItems;
+
+describe('Footer', () => {
+  it('should render the navigation items in the footer', () => {
+    render(
+      <MemoryRouter>
+        <Footer navigation={navItems} />
+      </MemoryRouter>,
+    );
+    screen.debug();
+
+    navItems.forEach((item) => {
+      const spanEl = screen.getByText(item.name);
+      const linkEl = spanEl.parentElement;
+      expect(spanEl).toBeInTheDocument();
+      expect(linkEl).toHaveAttribute('href', item.href);
+    });
+
+    // expect(screen.getByText(navItems[0].name)).toBeInTheDocument();
+    // expect(screen.getByText(navItems[1].name)).toBeInTheDocument();
+    // expect(screen.getByText(navItems[2].name)).toBeInTheDocument();
+    // expect(screen.getByText(navItems[3].name)).toBeInTheDocument();
+  });
+});

06_js-debug/uebungen/u17-19_shop-vitest/src/tests/ImageGallery.test.tsx

@@ -57,4 +57,49 @@ describe('ImageGallery', () => {
       'https://cdn.dummyjson.com/products/images/womens-bags/Prada%20Women%20Bag/3.png',
     );
   });
+
+  // Aro
+  it('should display the second image when the arrow key right is pressed', async () => {
+    const { images } = renderComponent();
+    const mainImage = images[images.length - 1];
+
+    const user = userEvent.setup();
+
+    expect(mainImage).toHaveAttribute('src', product.images[0]);
+
+    await user.keyboard('{ArrowRight}');
+
+    expect(mainImage).toBeInTheDocument();
+    expect(mainImage).toHaveAttribute('src', product.images[1]);
+  });
+
+  it('should display the first image wenn pressing arrow key right and than arrow key left', async () => {
+    const { images } = renderComponent();
+    const mainImage = images[images.length - 1];
+
+    const user = userEvent.setup();
+
+    expect(mainImage).toHaveAttribute('src', product.images[0]);
+    await user.keyboard('{ArrowRight}');
+
+    expect(mainImage).toHaveAttribute('src', product.images[1]);
+
+    await user.keyboard('{ArrowLeft}');
+
+    expect(mainImage).toBeInTheDocument();
+    expect(mainImage).toHaveAttribute('src', product.images[0]);
+  });
+
+  it('should display last image after pressing arrow key left', async () => {
+    const { images } = renderComponent();
+    const mainImage = images[images.length - 1];
+
+    const user = userEvent.setup();
+
+    expect(mainImage).toHaveAttribute('src', product.images[0]);
+    await user.keyboard('{ArrowLeft}');
+
+    expect(mainImage).toBeInTheDocument();
+    expect(mainImage).toHaveAttribute('src', product.images[product.images.length - 1]);
+  });
 });

06_js-debug/uebungen/u17-19_shop-vitest/src/tests/__mocks__/categories.mock.ts

@@ -0,0 +1,21 @@
+export const fakeCategories = [
+  {
+    imgSrc: 'https://images.unsplash.com/photo-1530011940847-04cba36df39f?q=80&w=1920',
+    imgAlt: 'Two female models sitting on a bed. Photo by Billie (@billiebodybrand) on Unsplash.',
+    href: '/women',
+    linkText: 'Women Clothing',
+  },
+  {
+    imgSrc: 'https://images.unsplash.com/photo-1595909315417-2edd382a56dc?q=80&w=1920',
+    imgAlt:
+      'Jumping rope, smartphone, sports bra, a pair of sneakers, and a water bottle. Photo by erica steeves on Unsplash.',
+    href: '/accessories',
+    linkText: 'Accessories',
+  },
+  {
+    imgSrc: 'https://images.unsplash.com/photo-1467779009031-53938b78ca38?q=80&w=1920',
+    imgAlt: 'Group of men sitting in a van. Photo by Luke Porter on Unsplash.',
+    href: '/men',
+    linkText: 'Men Clothing',
+  },
+];

06_js-debug/uebungen/u17-19_shop-vitest/src/tests/__mocks__/navItems.mock.ts

@@ -0,0 +1,18 @@
+export const fakeNavItems = [
+  {
+    name: 'Home 1',
+    href: '/',
+  },
+  {
+    name: 'Women 1',
+    href: '/women1',
+  },
+  {
+    name: 'Men 1',
+    href: '/men1',
+  },
+  {
+    name: 'Accessories 1',
+    href: '/accessories1',
+  },
+];