Add Extension Sidebar Test (#22)

package.json

@@ -25,6 +25,7 @@
   },
   "devDependencies": {
     "@rollup/plugin-typescript": "11.1.5",
+    "@testing-library/jest-dom": "^6.4.1",
     "@testing-library/react": "14.0.0",
     "@types/chrome": "0.0.251",
     "@types/node": "20.8.10",

src/pages/content/sidebar/app.test.tsx

@@ -1,16 +1,81 @@
-import { describe, test } from 'vitest';
+import { describe, test, expect } from 'vitest';
 import { render, screen } from '@testing-library/react';
-import App from '@pages/content/sidebar/app';
+import App from './app';
 
-describe('appTest', () => {
-  test('render text', () => {
-    // given
-    const text = 'content view';
+describe('contentSidebar', () => {
+  test('test structure', () => {
+    render(<App />);
+
+    // Test that the toggle element exists and has the correct id
+    const toggle = screen.getByTestId('test-tobethebest-toggle');
+    expect(toggle).toBeInTheDocument();
+    expect(toggle.id).toBe('tobethebest-toggle');
+
+    // Test that the sidebar element exists and has the correct id
+    const sidebar = screen.getByTestId('test-tobethebest-sidebar');
+    expect(sidebar).toBeInTheDocument();
+    expect(sidebar.id).toBe('tobethebest-sidebar');
+
+    // Test that the sidebar container element exists and has the correct id
+    const sidebarContainer = screen.getByTestId('test-tobethebest-sidebar__container');
+    expect(sidebarContainer).toBeInTheDocument();
+    expect(sidebarContainer.id).toBe('tobethebest-sidebar__container');
 
-    // when
+    // Test that the sidebar header element exists and has the correct id
+    const sidebarHeader = screen.getByTestId('test-tobethebest-sidebar-header');
+    expect(sidebarHeader).toBeInTheDocument();
+    expect(sidebarHeader.id).toBe('tobethebest-sidebar-header');
+
+    // Test that the sidebar teambuilder element exists and has the correct id
+    const sidebarTeambuilder = screen.getByTestId('test-tobethebest-sidebar-teambuilder');
+    expect(sidebarTeambuilder).toBeInTheDocument();
+    expect(sidebarTeambuilder.id).toBe('tobethebest-sidebar-teambuilder');
+
+    // Test that the sidebar resources element exists and has the correct id
+    const sidebarResources = screen.getByTestId('test-tobethebest-sidebar-resources');
+    expect(sidebarResources).toBeInTheDocument();
+    expect(sidebarResources.id).toBe('tobethebest-sidebar-resources');
+  });
+
+  test('test content', () => {
     render(<App />);
 
-    // then
-    screen.getByText(text);
+    // Test that the toggle div contains a child paragraph
+    const toggle = screen.getByTestId('test-tobethebest-toggle');
+    const toggleParagraph = toggle.querySelector('p#tobethebest-toggle__text');
+    expect(toggleParagraph).toBeInTheDocument();
+    expect(toggleParagraph.textContent).toBe('ToBeTheBest');
+
+    // Test that the sidebar header contains a child h1
+    const sidebarHeader = screen.getByTestId('test-tobethebest-sidebar-header');
+    const sidebarHeaderH1 = sidebarHeader.querySelector('h1');
+    expect(sidebarHeaderH1).toBeInTheDocument();
+    expect(sidebarHeaderH1.textContent).toBe('ToBeTheBest');
+
+    // Test that the sidebar teambuilder contains a child h2 and button
+    const sidebarTeambuilder = screen.getByTestId('test-tobethebest-sidebar-teambuilder');
+    const sidebarTeambuilderH2 = sidebarTeambuilder.querySelector('h2');
+    expect(sidebarTeambuilderH2).toBeInTheDocument();
+    expect(sidebarTeambuilderH2.textContent).toBe('Team Builder');
+    const sidebarTeambuilderButton = sidebarTeambuilder.querySelector('button');
+    expect(sidebarTeambuilderButton).toBeInTheDocument();
+    expect(sidebarTeambuilderButton.id).toBe('tobethebest-teambuilder-button');
+    expect(sidebarTeambuilderButton.textContent).toBe('Create Team');
+
+    // Test that the sidebar resources contains a child h2 and three buttons
+    const sidebarResources = screen.getByTestId('test-tobethebest-sidebar-resources');
+    const sidebarResourcesH2 = sidebarResources.querySelector('h2');
+    expect(sidebarResourcesH2).toBeInTheDocument();
+    expect(sidebarResourcesH2.textContent).toBe('Resources');
+    const sidebarResourcesButtons = sidebarResources.querySelectorAll('button');
+    expect(sidebarResourcesButtons).toHaveLength(3);
+    expect(sidebarResourcesButtons[0].id).toBe('tobethebest-website-button');
+    expect(sidebarResourcesButtons[0].textContent).toBe('Website');
+    expect(sidebarResourcesButtons[1].id).toBe('tobethebest-wiki-button');
+    expect(sidebarResourcesButtons[1].textContent).toBe('Wiki');
+    expect(sidebarResourcesButtons[2].id).toBe('tobethebest-github-button');
+    expect(sidebarResourcesButtons[2].textContent).toBe('Github');
+
   });
 });
+

src/pages/content/sidebar/app.tsx

@@ -13,19 +13,19 @@ export default function App() {
 
   return (
     <>
-      <div id="tobethebest-toggle" className={toggled ? '' : 'active'} onMouseEnter={handleToggle}>
+      <div id="tobethebest-toggle" data-testid="test-tobethebest-toggle" className={toggled ? '' : 'active'} onMouseEnter={handleToggle}>
         <p id="tobethebest-toggle__text">ToBeTheBest</p>
       </div>
-      <div id="tobethebest-sidebar" className={toggled ? 'active' : ''} onMouseLeave={handleToggle}>
-        <div id="tobethebest-sidebar__container">
-            <div id="tobethebest-sidebar-header" className="tobethebest-sidebar__component">
+      <div id="tobethebest-sidebar" data-testid="test-tobethebest-sidebar" className={toggled ? 'active' : ''} onMouseLeave={handleToggle}>
+        <div id="tobethebest-sidebar__container" data-testid="test-tobethebest-sidebar__container">
+            <div id="tobethebest-sidebar-header" data-testid="test-tobethebest-sidebar-header" className="tobethebest-sidebar__component">
                 <h1>ToBeTheBest</h1>
             </div>
-            <div id="tobethebest-sidebar-teambuilder" className="tobethebest-sidebar__component">
+            <div id="tobethebest-sidebar-teambuilder" data-testid="test-tobethebest-sidebar-teambuilder" className="tobethebest-sidebar__component">
                 <h2>Team Builder</h2>
                 <button id="tobethebest-teambuilder-button">Create Team</button>
             </div>
-            <div id="tobethebest-sidebar-resources" className="tobethebest-sidebar__component">
+            <div id="tobethebest-sidebar-resources" data-testid="test-tobethebest-sidebar-resources" className="tobethebest-sidebar__component">
                 <h2>Resources</h2>
                 <button id="tobethebest-website-button">Website</button>
                 <button id="tobethebest-wiki-button">Wiki</button>

test/setup.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom/vitest";

tsconfig.json

@@ -25,5 +25,5 @@
       "virtual:reload-on-update-in-view": ["./src/global.d.ts"]
     }
   },
-  "include": ["src", "utils", "vite.config.ts", "node_modules/@types"]
+  "include": ["src", "test", "utils", "vite.config.ts", "node_modules/@types"]
 }

vite.config.ts

@@ -72,7 +72,7 @@ export default defineConfig({
     globals: true,
     environment: 'jsdom',
     include: ['**/*.test.ts', '**/*.test.tsx'],
-    setupFiles: './test-utils/vitest.setup.js',
+    setupFiles: './test/setup.ts',
   },
 });