07_js-debug/uebungen/u17-19_vitest-shop-tests/package.json

@@ -30,7 +30,7 @@
     "@vitejs/plugin-react": "^6.2.1",
     "@vitest/ui": "^5.1.0",
     "babel-plugin-react-compiler": "^1.0.0",
-    "jsdom": "^30.1.3",
+    "jsdom": "^31.0.0",
     "oxlint": "^1.91.0",
     "typescript": "~7.0.2",
     "vite": "^8.3.6",

07_js-debug/uebungen/u17-19_vitest-shop-tests/src/components/Footer.tsx

@@ -43,8 +43,7 @@ const Footer: React.FC<FooterProps> = ({ navigation = navigationItems }) => {
 
         <div className="footer-copyright">
           <p className="footer-copyright-text">
-            &copy; {new Date().getFullYear()} Vogue Junction, Inc. All rights
-            reserved.
+            &copy; {new Date().getFullYear()} Vogue Junction, Inc. All rights reserved.
           </p>
         </div>
       </div>

07_js-debug/uebungen/u17-19_vitest-shop-tests/src/tests/CategorieSection.test.tsx

@@ -0,0 +1,51 @@
+import { describe, it, expect } from 'vitest';
+import { screen, render } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+
+// Component
+import CategorySection from '../components/CategorySection';
+
+import { fakeCategories as categories } from './__mocks__/categories.mock';
+
+// Arrange - Helper render component
+const renderComponent = () => {
+  render(
+    <MemoryRouter>
+      <CategorySection categories={categories} />
+    </MemoryRouter>,
+  );
+
+  return {
+    links: screen.getAllByRole('link'),
+    images: screen.getAllByRole('img'),
+  };
+};
+
+describe('CategorySection', () => {
+  it('should render the category section heading', () => {
+    render(
+      <MemoryRouter>
+        <CategorySection categories={categories} />
+      </MemoryRouter>,
+    );
+
+    expect(screen.getByText(/Explore by Category/i)).toBeInTheDocument();
+  });
+
+  it('should render all category links and images', () => {
+    // Arrange
+    const { links, images } = renderComponent();
+
+    // Act & Assert
+    expect(links).toHaveLength(3); // Links prüfen
+    expect(images).toHaveLength(3); // Bilder prüfen
+  });
+  it('should render all cateogy titles', () => {
+    // Arrange
+    const { links } = renderComponent();
+    // Act & Assert
+    expect(links[0]).toHaveTextContent('Women Clothing');
+    expect(links[1]).toHaveTextContent('Accessories');
+    expect(links[2]).toHaveTextContent('Men Clothing');
+  });
+});

07_js-debug/uebungen/u17-19_vitest-shop-tests/src/tests/Footer.test.tsx

@@ -0,0 +1,51 @@
+import { describe, it, expect } from 'vitest';
+// import { fireEvent } from '@testing-library/react';
+import { screen, render } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { fakeNavigationItems as navigationItems } from './__mocks__/navItems.mock';
+
+import Footer from '../components/Footer';
+
+// const navigationItems = [
+//   {
+//     name: '&7874',
+//     href: '/&7874',
+//   },
+//   {
+//     name: '.Hallo',
+//     href: '/.Hallo',
+//   },
+//   {
+//     name: '?forEach',
+//     href: '/?forEach',
+//   },
+//   {
+//     name: 'HAkk"O',
+//     href: '/HAkk"O',
+//   },
+// ];
+
+describe('Footer', () => {
+  it('should render the navigations items in the footer', () => {
+    render(
+      <MemoryRouter>
+        <Footer navigation={navigationItems} />
+      </MemoryRouter>,
+    );
+
+    screen.debug();
+
+    navigationItems.forEach((item) => {
+      const spanEl = screen.getByText(item.name);
+      const linkEl = spanEl.parentNode;
+      expect(spanEl).toBeInTheDocument();
+      expect(linkEl).toHaveAttribute('href', item.href);
+    });
+
+    // expect(screen.getByText(navigationItems[0].name)).toBeInTheDocument();
+    // expect(screen.getByRole('link', { name: navigationItems[0].name })).toHaveAttribute(
+    //   'href',
+    //   navigationItems[0].href,
+    // );
+  });
+});

07_js-debug/uebungen/u17-19_vitest-shop-tests/src/tests/ImageGallery.test.tsx

@@ -59,4 +59,32 @@ describe('ImageGallery', () => {
       product.images[2], // 'https://cdn.dummyjson.com/products/images/womens-bags/Prada%20Women%20Bag/3.png',
     );
   });
+  it('should change the main image when arrow keys are pressed', async () => {
+    // Arrange
+    const { mainImage } = renderComponent();
+
+    const user = userEvent.setup();
+    // Act
+    await user.keyboard('{ArrowRight}');
+    expect(mainImage).toHaveAttribute('src', product.images[1]);
+    await user.keyboard('{ArrowRight}');
+    expect(mainImage).toHaveAttribute('src', product.images[2]);
+
+    await user.keyboard('{ArrowLeft}');
+    expect(mainImage).toHaveAttribute('src', product.images[1]);
+
+    await user.keyboard('{ArrowLeft}');
+    expect(mainImage).toHaveAttribute('src', product.images[0]);
+  });
+  it('should change from first image to last image and from last to first when arrow keys are pressed (infinite carousel)', async () => {
+    // Arrange
+    const { mainImage } = renderComponent();
+    const user = userEvent.setup();
+    // Act
+    expect(mainImage).toHaveAttribute('src', product.images[0]);
+    await user.keyboard('{ArrowLeft}');
+    expect(mainImage).toHaveAttribute('src', product.images[product.images.length - 1]);
+    await user.keyboard('{ArrowRight}');
+    expect(mainImage).toHaveAttribute('src', product.images[0]);
+  });
 });

07_js-debug/uebungen/u17-19_vitest-shop-tests/src/tests/__mocks__/navItems.mock.ts

@@ -0,0 +1,23 @@
+type NavigationItem = {
+  name: string;
+  href: string;
+};
+
+export const fakeNavigationItems: NavigationItem[] = [
+  {
+    name: 'Home',
+    href: '/',
+  },
+  {
+    name: 'Women',
+    href: '/women',
+  },
+  {
+    name: 'Men',
+    href: '/men',
+  },
+  {
+    name: 'Accessories',
+    href: '/accessories',
+  },
+];

07_js-debug/unterricht/tag44/01_vitest-shop/package.json

@@ -30,7 +30,7 @@
     "@vitejs/plugin-react": "^6.2.1",
     "@vitest/ui": "^5.1.0",
     "babel-plugin-react-compiler": "^1.0.0",
-    "jsdom": "^30.1.3",
+    "jsdom": "^31.0.0",
     "oxlint": "^1.91.0",
     "typescript": "~7.0.2",
     "vite": "^8.3.6",

07_js-debug/unterricht/tag44/01_vitest-shop/src/tests/ProductList.test.tsx

@@ -1,13 +1,11 @@
 import { describe, it, expect } from 'vitest';
 
-import { fakeProducts } from './__mocks__/products.mock';
+import { fakeProducts as products } from './__mocks__/products.mock';
 import ProductList from '../components/ProductList';
 import { render, screen } from '@testing-library/react';
 
 import { MemoryRouter } from 'react-router-dom';
 
-const products = fakeProducts;
-
 describe('ProductList', () => {
   it('should render the correct number of products', () => {
     render(
@@ -16,7 +14,7 @@ describe('ProductList', () => {
       </MemoryRouter>,
     );
 
-    // screen.debug();
+    screen.debug();
     const headings = screen.getAllByRole('heading', { level: 3 });
 
     expect(headings).toHaveLength(products.length);

07_js-debug/unterricht/tag44/01_vitest-shop/src/tests/multiply.test.ts

@@ -2,7 +2,8 @@ import { describe, expect, it } from 'vitest';
 import { multiply } from '../utils/helpers';
 
 describe('multiply', () => {
-  it('should return 10 when 2 and 5 are passed', () => {
+  // Test Cases
+  it('Multiply function should return 10 when 2 and 5 are passed', () => {
     expect(multiply(2, 5)).toBe(10);
   });
   it('should return a number', () => {