Unit tests for playground-web repository

apps/playground-web/components/Footer/Footer.tsx

@@ -9,25 +9,40 @@ import Link from 'next/link';
 
 export default function Footer() {
   return (
-    <footer className="bg-white border-t border-gray-100 py-12">
+    <footer
+      className="bg-white border-t border-gray-100 py-12"
+      data-testid="footer"
+    >
       <div className="container mx-auto px-4">
         <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
           <div>
-            <h3 className="text-gray-500 font-semibold mb-4 text-center">
+            <h3
+              className="text-gray-500 font-semibold mb-4 text-center"
+              data-testid="footer-heading"
+            >
               DiceDB
             </h3>
             <Link
               href="https://dicedb.io/get-started/installation/"
               target="_blank"
+              data-testid="get-started-link"
             >
-              <Button className="w-full !bg-red-600 hover:!bg-red-700 !text-white">
+              <Button
+                className="w-full !bg-red-600 hover:!bg-red-700 !text-white"
+                data-testid="get-started-button"
+              >
                 Get Started →
               </Button>
             </Link>
-            <Link href="https://github.com/dicedb/dice" target="_blank">
+            <Link
+              href="https://github.com/dicedb/dice"
+              target="_blank"
+              data-testid="github-link"
+            >
               <Button
                 variant="outline"
                 className="!w-full mt-2 !border-1 !border-gray-700 bg-blue-50 hover:text-blue text-black hover:text-blue-600"
+                data-testid="github-button"
               >
                 <GitHub className="mr-2 h-4 w-4" /> GitHub (4k+)
               </Button>
@@ -42,6 +57,7 @@ export default function Footer() {
                   href="https://dicedb.io/get-started/installation"
                   target="_blank"
                   className="text-gray-600 hover:text-gray-900"
+                  data-testid="quickstart-link"
                 >
                   Quickstart
                 </a>
@@ -51,6 +67,7 @@ export default function Footer() {
                   href="https://dicedb.io/commands/get"
                   target="_blank"
                   className="text-gray-600 hover:text-gray-900"
+                  data-testid="commands-link"
                 >
                   Commands
                 </a>
@@ -60,6 +77,7 @@ export default function Footer() {
                   href="https://github.com/DiceDB/dice/tree/master/examples/leaderboard-go"
                   target="_blank"
                   className="text-gray-600 hover:text-gray-900"
+                  data-testid="examples-link"
                 >
                   Examples
                 </a>
@@ -75,6 +93,7 @@ export default function Footer() {
                   href="https://github.com/DiceDB/dice/tree/master/examples/leaderboard-go"
                   target="_blank"
                   className="text-gray-600 hover:text-gray-900"
+                  data-testid="leaderboard-link"
                 >
                   Real-time Leaderboard
                 </a>
@@ -90,6 +109,7 @@ export default function Footer() {
                   href="mailto:[email protected]"
                   target="_blank"
                   className="text-gray-600 hover:text-gray-900"
+                  data-testid="contact-link"
                 >
                   Contact Us
                 </a>
@@ -101,6 +121,7 @@ export default function Footer() {
                 target="_blank"
                 className="text-gray-400 hover:text-gray-600"
                 aria-label="People"
+                data-testid="people-icon-link"
               >
                 <People className="h-6 w-6" />
               </a>
@@ -109,6 +130,7 @@ export default function Footer() {
                 target="_blank"
                 className="text-gray-400 hover:text-gray-600"
                 aria-label="Twitter"
+                data-testid="twitter-icon-link"
               >
                 <Twitter className="h-6 w-6" />
               </a>
@@ -117,6 +139,7 @@ export default function Footer() {
                 target="_blank"
                 className="text-gray-400 hover:text-gray-600"
                 aria-label="GitHub"
+                data-testid="github-icon-link"
               >
                 <GitHub className="h-6 w-6" />
               </a>

apps/playground-web/components/Footer/__tests__/Footer.test.tsx

@@ -0,0 +1,133 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import Footer from '../Footer';
+
+const setupTest = () => {
+  const utils = render(<Footer />);
+
+  const footerElement = screen.getByTestId('footer');
+  const headingElement = screen.getByTestId('footer-heading');
+  const getStartedLinkElement = screen.getByTestId('get-started-link');
+  const getStartedButtonElement = screen.getByTestId('get-started-button');
+  const githubLinkElement = screen.getByTestId('github-link');
+  const githubButtonElement = screen.getByTestId('github-button');
+  const quickStartLinkElement = screen.getByTestId('quickstart-link');
+  const commandsLinkElement = screen.getByTestId('commands-link');
+  const examplesLinkElement = screen.getByTestId('examples-link');
+  const leaderboardLinkElement = screen.getByTestId('leaderboard-link');
+  const contactLinkElement = screen.getByTestId('contact-link');
+  const peopleIconLinkElement = screen.getByTestId('people-icon-link');
+  const twitterIconLinkElement = screen.getByTestId('twitter-icon-link');
+  const githubIconLinkElement = screen.getByTestId('github-icon-link');
+
+  return {
+    footerElement,
+    headingElement,
+    getStartedLinkElement,
+    getStartedButtonElement,
+    githubLinkElement,
+    githubButtonElement,
+    quickStartLinkElement,
+    commandsLinkElement,
+    examplesLinkElement,
+    leaderboardLinkElement,
+    contactLinkElement,
+    peopleIconLinkElement,
+    twitterIconLinkElement,
+    githubIconLinkElement,
+    ...utils,
+  };
+};
+
+describe('Footer component', () => {
+  it('renders the footer component', () => {
+    const {
+      footerElement,
+      headingElement,
+      getStartedLinkElement,
+      getStartedButtonElement,
+      githubLinkElement,
+      githubButtonElement,
+      quickStartLinkElement,
+      commandsLinkElement,
+      examplesLinkElement,
+      leaderboardLinkElement,
+      contactLinkElement,
+      peopleIconLinkElement,
+      twitterIconLinkElement,
+      githubIconLinkElement,
+    } = setupTest();
+
+    // Assert footer and its heading are present
+    expect(footerElement).toBeInTheDocument();
+    expect(headingElement).toBeInTheDocument();
+    expect(headingElement).toHaveTextContent('DiceDB');
+
+    // Assert 'Get Started' button and link
+    expect(getStartedLinkElement).toBeInTheDocument();
+    expect(getStartedButtonElement).toBeInTheDocument();
+    expect(getStartedLinkElement).toHaveAttribute(
+      'href',
+      'https://dicedb.io/get-started/installation/',
+    );
+
+    // Assert GitHub button and link
+    expect(githubLinkElement).toBeInTheDocument();
+    expect(githubButtonElement).toBeInTheDocument();
+    expect(githubLinkElement).toHaveAttribute(
+      'href',
+      'https://github.com/dicedb/dice',
+    );
+
+    // Assert developer section links
+    expect(quickStartLinkElement).toBeInTheDocument();
+    expect(quickStartLinkElement).toHaveAttribute(
+      'href',
+      'https://dicedb.io/get-started/installation',
+    );
+
+    expect(commandsLinkElement).toBeInTheDocument();
+    expect(commandsLinkElement).toHaveAttribute(
+      'href',
+      'https://dicedb.io/commands/get',
+    );
+
+    expect(examplesLinkElement).toBeInTheDocument();
+    expect(examplesLinkElement).toHaveAttribute(
+      'href',
+      'https://github.com/DiceDB/dice/tree/master/examples/leaderboard-go',
+    );
+
+    // Assert examples section link
+    expect(leaderboardLinkElement).toBeInTheDocument();
+    expect(leaderboardLinkElement).toHaveAttribute(
+      'href',
+      'https://github.com/DiceDB/dice/tree/master/examples/leaderboard-go',
+    );
+
+    // Assert social media and contact section
+    expect(contactLinkElement).toBeInTheDocument();
+    expect(contactLinkElement).toHaveAttribute(
+      'href',
+      'mailto:[email protected]',
+    );
+
+    expect(peopleIconLinkElement).toBeInTheDocument();
+    expect(peopleIconLinkElement).toHaveAttribute(
+      'href',
+      'https://discord.gg/6r8uXWtXh7',
+    );
+
+    expect(twitterIconLinkElement).toBeInTheDocument();
+    expect(twitterIconLinkElement).toHaveAttribute(
+      'href',
+      'https://twitter.com/thedicedb',
+    );
+
+    expect(githubIconLinkElement).toBeInTheDocument();
+    expect(githubIconLinkElement).toHaveAttribute(
+      'href',
+      'https://github.com/dicedb/dice',
+    );
+  });
+});

apps/playground-web/components/Header/Header.tsx

@@ -2,7 +2,7 @@
 
 export default function Header() {
   return (
-    <header className="flex items-center mb-4">
+    <header data-testid="header" className="flex items-center mb-4">
       <h1 className="text-2xl font-bold">DiceDB PlayGround</h1>
     </header>
   );

apps/playground-web/components/Header/__tests__/Header.test.tsx

@@ -0,0 +1,21 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import Header from '../Header';
+
+const setupTest = () => {
+  const utils = render(<Header />);
+
+  const headerElement = screen.getByTestId('header');
+
+  return {
+    headerElement,
+    ...utils,
+  };
+};
+
+describe('Header component', () => {
+  it('should render header', () => {
+    const { headerElement } = setupTest();
+    expect(headerElement).toBeInTheDocument();
+  });
+});

apps/playground-web/components/Playground/Playground.tsx

@@ -8,15 +8,27 @@ import { TerminalUI } from './TerminalUI';
 
 export default function Playground() {
   return (
-    <div className="container mx-auto flex flex-col flex-grow min-h-screen bg-white text-gray-900">
+    <div
+      data-testid="playground"
+      className="container mx-auto flex flex-col flex-grow min-h-screen bg-white text-gray-900"
+    >
       <Header />
 
-      <main className="flex flex-col lg:flex-row gap-10 flex-grow overflow-hidden px-4">
+      <main
+        data-testid="playground-main"
+        className="flex flex-col lg:flex-row gap-10 flex-grow overflow-hidden px-4"
+      >
         <div className="w-full lg:w-7/12 flex flex-col">
           <TerminalUI />
         </div>
-        <div className="w-full lg:w-5/12 flex flex-col">
-          <div className="flex-grow border border-gray-400 bg-gray-100 p-4 rounded-lg shadow-md mb-4">
+        <div
+          data-testid="searchbox-container"
+          className="w-full lg:w-5/12 flex flex-col"
+        >
+          <div
+            data-testid="searchbox-wrapper"
+            className="flex-grow border border-gray-400 bg-gray-100 p-4 rounded-lg shadow-md mb-4"
+          >
             <SearchBox />
           </div>
         </div>
@@ -27,7 +39,10 @@ export default function Playground() {
 
 function Header() {
   return (
-    <header className="navbar flex items-center justify-between py-5">
+    <header
+      data-testid="playground-header"
+      className="navbar flex items-center justify-between py-5"
+    >
       <div className="flex items-center">
         <Image
           src="/images/dicedb-logo-light.png"

apps/playground-web/components/Playground/TerminalUI.tsx

@@ -4,22 +4,25 @@ import { formatTime } from '@/shared/utils/commonUtils';
 import { useTimer } from '@/shared/hooks/useTimer';
 import { useState } from 'react';
 import Tooltip from '../Overlays/Tooltip';
-export function TerminalUI() {
-  const [commandsLeft, setCommandsLeft] = useState(1000);
+export function TerminalUI({ initialCommandsLeft = 1000 }) {
+  const [commandsLeft, setCommandsLeft] = useState(initialCommandsLeft);
   const decreaseCommandsLeft = () => {
     setCommandsLeft((prev) => (prev > 0 ? prev - 1 : 0));
   };
   return (
     <>
-      <div className="bg-gray-900 rounded-lg">
+      <div className="bg-gray-900 rounded-lg" data-testid="terminal-container">
         <div className="bg-gray-900 px-4 py-4 flex items-center rounded-lg">
-          <div className="flex space-x-2">
+          <div className="flex space-x-2" data-testid="dice-icons">
             <Dice5 className="w-4 h-4 bg-red-500" />
             <Dice1 className="w-4 h-4 bg-yellow-500" />
             <Dice3 className="w-4 h-4 bg-green-500" />
           </div>
         </div>
-        <div className="h-64 md:h-[30rem] bg-gray-100 rounded-lg overflow-hidden shadow-md">
+        <div
+          className="h-64 md:h-[30rem] bg-gray-100 rounded-lg overflow-hidden shadow-md"
+          data-testid="shell-container"
+        >
           <Shell decreaseCommandsLeft={decreaseCommandsLeft} />
         </div>
       </div>
@@ -31,17 +34,23 @@ export function TerminalUI() {
 function TerminalCounter({ commandsLeft }: { commandsLeft: number }) {
   const { timeLeft } = useTimer(15 * 60);
   return (
-    <div className="flex flex-col">
+    <div className="flex flex-col" data-testid="terminal-counter">
       <div className="flex flex-row justify-between text-gray-900 mt-4">
         <div className="flex flex-row items-center space-x-2">
-          <div className="flex items-center justify-between border border-gray-400 text-sm bg-transparent p-3 rounded-lg">
+          <div
+            className="flex items-center justify-between border border-gray-400 text-sm bg-transparent p-3 rounded-lg"
+            data-testid="cleanup-timer"
+          >
             <span>Cleanup in: {formatTime(timeLeft)} mins</span>
           </div>
           <Tooltip message="The time remaining until cleanup is initiated." />
         </div>
 
         <div className="flex flex-row items-center space-x-2">
-          <div className="flex items-center justify-between border border-gray-400 text-sm bg-transparent p-3 rounded-lg">
+          <div
+            className="flex items-center justify-between border border-gray-400 text-sm bg-transparent p-3 rounded-lg"
+            data-testid="commands-left"
+          >
             <span>Commands left: {commandsLeft}</span>
           </div>
           <Tooltip message="The number of commands you can execute before cleanup." />{' '}