Merge pull request #13 from gwicho38/sweep/add_tests_for_remaining_co…

…mponents_in_pu

public/javascript/__tests__/bodyComponent.test.js

@@ -0,0 +1,29 @@
+import { render, cleanup } from '@testing-library/dom';
+import '@testing-library/jest-dom/extend-expect';
+import BodyComponent from '../components/body-component';
+
+describe('BodyComponent', () => {
+  let element;
+
+  beforeEach(() => {
+    element = document.createElement('body-component');
+    document.body.appendChild(element);
+  });
+
+  afterEach(cleanup);
+
+  test('renders without crashing', () => {
+    expect(element).toBeInTheDocument();
+  });
+
+  test('renders correct content', () => {
+    const h1 = element.shadowRoot.querySelector('h1');
+    expect(h1).toHaveTextContent('Hello');
+  });
+
+  test('includes CSS stylesheet link', () => {
+    const styleLink = element.shadowRoot.querySelector('style');
+    expect(styleLink).not.toBeNull();
+    expect(styleLink.textContent).toContain('@import "../../stylesheets/body-component.css";');
+  });
+});

public/javascript/__tests__/footerComponent.test.js

@@ -0,0 +1,29 @@
+import { render, cleanup, screen } from '@testing-library/dom';
+import '@testing-library/jest-dom/extend-expect';
+import FooterComponent from '../components/footer-component';
+
+describe('FooterComponent', () => {
+  let element;
+
+  beforeEach(() => {
+    element = document.createElement('footer-component');
+    document.body.appendChild(element);
+  });
+
+  afterEach(cleanup);
+
+  test('renders without crashing', () => {
+    expect(element).toBeInTheDocument();
+  });
+
+  test('renders correct content', () => {
+    const footer = element.shadowRoot.querySelector('footer');
+    expect(footer).toHaveClass('flex justify-center items-center bg-gray-700 text-white p-4');
+    expect(footer).toHaveTextContent('© 2024 My Website. All rights reserved.');
+  });
+
+  test('includes Tailwind CSS stylesheet link', () => {
+    const link = element.shadowRoot.querySelector('link[href="https://cdn.jsdelivr.net/npm/tailwindcss@^2.0/dist/tailwind.min.css"]');
+    expect(link).toBeInTheDocument();
+  });
+});

public/javascript/__tests__/headComponent.test.js

@@ -0,0 +1,19 @@
+import { render, cleanup } from '@testing-library/dom';
+import '@testing-library/jest-dom/extend-expect';
+import HeadComponent from '../components/head-component';
+
+describe('HeadComponent', () => {
+  beforeEach(() => {
+    // Setup before each test. Could be used for initializing data or rendering the component.
+  });
+
+  afterEach(cleanup);
+
+  test('renders without crashing', () => {
+    const { container } = render(<HeadComponent />);
+    expect(container).not.toBeNull();
+    expect(container).toBeInTheDocument();
+  });
+
+  // Additional tests would go here to cover other functionalities and edge cases.
+});

public/javascript/__tests__/headerComponent.test.js

@@ -0,0 +1,29 @@
+import { render, cleanup, screen } from '@testing-library/dom';
+import '@testing-library/jest-dom/extend-expect';
+import HeaderComponent from '../components/header-component';
+
+describe('HeaderComponent', () => {
+  let element;
+
+  beforeEach(() => {
+    element = document.createElement('header-component');
+    document.body.appendChild(element);
+  });
+
+  afterEach(cleanup);
+
+  test('renders without crashing', () => {
+    expect(element).toBeInTheDocument();
+  });
+
+  test('renders correct content', () => {
+    const header = element.shadowRoot.querySelector('header');
+    expect(header).toHaveClass('justify-center items-center bg-blue-500 text-white p-4');
+    expect(header).toHaveTextContent('Welcome to My Website');
+  });
+
+  test('includes Tailwind CSS stylesheet link', () => {
+    const link = element.shadowRoot.querySelector('link[href="https://cdn.jsdelivr.net/npm/tailwindcss@^2.0/dist/tailwind.min.css"]');
+    expect(link).toBeInTheDocument();
+  });
+});

public/javascript/__tests__/main.test.js

@@ -0,0 +1,71 @@
+import { fireEvent } from '@testing-library/dom';
+import '@testing-library/jest-dom/extend-expect';
+
+jest.mock('Isotope');
+jest.mock('GLightbox');
+jest.mock('Swiper');
+jest.mock('AOS', () => ({
+  init: jest.fn(),
+}));
+
+describe('main.js', () => {
+  beforeEach(() => {
+    document.body.innerHTML = `
+      <div id="navbar"></div>
+      <a href="#" class="back-to-top"></a>
+      <a href="#" class="mobile-nav-toggle bi-list"></a>
+      <div class="portfolio-container"></div>
+      <div class="skills-content"></div>
+      <div class="typed" data-typed-items="Item1,Item2"></div>
+      <div id="preloader"></div>
+    `;
+    require('../main');
+  });
+
+  test('initializes without crashing', () => {
+    expect(document.querySelector('.back-to-top')).not.toHaveClass('active');
+  });
+
+  test('window load events trigger correctly', () => {
+    fireEvent.load(window);
+    expect(document.querySelector('#preloader')).toBeNull();
+    expect(AOS.init).toHaveBeenCalled();
+  });
+
+  test('scroll events trigger navbar links active state', () => {
+    document.body.innerHTML += '<section id="testSection" style="height: 1000px;"></section>';
+    const navbarLink = document.createElement('a');
+    navbarLink.className = 'scrollto';
+    navbarLink.href = '#testSection';
+    document.querySelector('#navbar').appendChild(navbarLink);
+
+    fireEvent.scroll(window, { target: { scrollY: 500 } });
+    expect(navbarLink).toHaveClass('active');
+  });
+
+  test('clicking on mobile-nav-toggle toggles classes', () => {
+    const mobileNavToggle = document.querySelector('.mobile-nav-toggle');
+    fireEvent.click(mobileNavToggle);
+    expect(document.body).toHaveClass('mobile-nav-active');
+    expect(mobileNavToggle).toHaveClass('bi-x');
+  });
+
+  test('clicking on .scrollto link calls scrollto function', () => {
+    const scrollLink = document.createElement('a');
+    scrollLink.className = 'scrollto';
+    scrollLink.href = '#testSection';
+    document.body.appendChild(scrollLink);
+
+    fireEvent.click(scrollLink);
+    // Since we cannot actually test scrolling, we check if the default action was prevented.
+    expect(scrollLink).toHaveAttribute('href', '#testSection');
+  });
+
+  test('back to top button shows/hides on scroll', () => {
+    fireEvent.scroll(window, { target: { scrollY: 101 } });
+    expect(document.querySelector('.back-to-top')).toHaveClass('active');
+
+    fireEvent.scroll(window, { target: { scrollY: 0 } });
+    expect(document.querySelector('.back-to-top')).not.toHaveClass('active');
+  });
+});

public/javascript/__tests__/mainComponent.test.js

@@ -0,0 +1,38 @@
+import { render, cleanup } from '@testing-library/dom';
+import '@testing-library/jest-dom/extend-expect';
+import MainComponent from '../components/main-component';
+
+describe('MainComponent', () => {
+  let element;
+
+  beforeEach(() => {
+    element = document.createElement('main-component');
+    document.body.appendChild(element);
+  });
+
+  afterEach(cleanup);
+
+  test('renders without crashing', () => {
+    expect(element).toBeInTheDocument();
+  });
+
+  test('renders header-component', () => {
+    const headerComponent = element.shadowRoot.querySelector('header-component');
+    expect(headerComponent).toBeInTheDocument();
+  });
+
+  test('renders body-component', () => {
+    const bodyComponent = element.shadowRoot.querySelector('body-component');
+    expect(bodyComponent).toBeInTheDocument();
+  });
+
+  test('renders footer-component', () => {
+    const footerComponent = element.shadowRoot.querySelector('footer-component');
+    expect(footerComponent).toBeInTheDocument();
+  });
+
+  test('includes CSS stylesheet link', () => {
+    const styleLink = element.shadowRoot.querySelector('style');
+    expect(styleLink.textContent).toContain('@import "../../stylesheets/main-component.css";');
+  });
+});

public/javascript/__tests__/setupTests.js

@@ -0,0 +1,2 @@
+// setupTests.js
+import '@testing-library/jest-dom/extend-expect';