Skip to content

Commit

Permalink
Unit tests for playground-web repository (#71)
Browse files Browse the repository at this point in the history
  • Loading branch information
ViragJain3010 authored Oct 16, 2024
1 parent de53cfd commit a5bf2d9
Show file tree
Hide file tree
Showing 13 changed files with 564 additions and 25 deletions.
31 changes: 27 additions & 4 deletions apps/playground-web/components/Footer/Footer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -90,6 +109,7 @@ export default function Footer() {
href="mailto:arpit@dicedb.io"
target="_blank"
className="text-gray-600 hover:text-gray-900"
data-testid="contact-link"
>
Contact Us
</a>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down
133 changes: 133 additions & 0 deletions apps/playground-web/components/Footer/__tests__/Footer.test.tsx
Original file line number Diff line number Diff line change
@@ -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:arpit@dicedb.io',
);

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',
);
});
});
2 changes: 1 addition & 1 deletion apps/playground-web/components/Header/Header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand Down
21 changes: 21 additions & 0 deletions apps/playground-web/components/Header/__tests__/Header.test.tsx
Original file line number Diff line number Diff line change
@@ -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();
});
});
25 changes: 20 additions & 5 deletions apps/playground-web/components/Playground/Playground.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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"
Expand Down
25 changes: 17 additions & 8 deletions apps/playground-web/components/Playground/TerminalUI.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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." />{' '}
Expand Down
Loading

0 comments on commit a5bf2d9

Please sign in to comment.