Skip to content

Commit a5bf2d9

Browse files
ViragJain3010ViragJain3010
authored
Unit tests for playground-web repository (#71)
1 parent de53cfd commit a5bf2d9

File tree

13 files changed

+564
-25
lines changed

13 files changed

+564
-25
lines changed

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

Lines changed: 27 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,25 +9,40 @@ import Link from 'next/link';
99

1010
export default function Footer() {
1111
return (
12-
<footer className="bg-white border-t border-gray-100 py-12">
12+
<footer
13+
className="bg-white border-t border-gray-100 py-12"
14+
data-testid="footer"
15+
>
1316
<div className="container mx-auto px-4">
1417
<div className="grid grid-cols-1 md:grid-cols-4 gap-8">
1518
<div>
16-
<h3 className="text-gray-500 font-semibold mb-4 text-center">
19+
<h3
20+
className="text-gray-500 font-semibold mb-4 text-center"
21+
data-testid="footer-heading"
22+
>
1723
DiceDB
1824
</h3>
1925
<Link
2026
href="https://dicedb.io/get-started/installation/"
2127
target="_blank"
28+
data-testid="get-started-link"
2229
>
23-
<Button className="w-full !bg-red-600 hover:!bg-red-700 !text-white">
30+
<Button
31+
className="w-full !bg-red-600 hover:!bg-red-700 !text-white"
32+
data-testid="get-started-button"
33+
>
2434
Get Started →
2535
</Button>
2636
</Link>
27-
<Link href="https://github.com/dicedb/dice" target="_blank">
37+
<Link
38+
href="https://github.com/dicedb/dice"
39+
target="_blank"
40+
data-testid="github-link"
41+
>
2842
<Button
2943
variant="outline"
3044
className="!w-full mt-2 !border-1 !border-gray-700 bg-blue-50 hover:text-blue text-black hover:text-blue-600"
45+
data-testid="github-button"
3146
>
3247
<GitHub className="mr-2 h-4 w-4" /> GitHub (4k+)
3348
</Button>
@@ -42,6 +57,7 @@ export default function Footer() {
4257
href="https://dicedb.io/get-started/installation"
4358
target="_blank"
4459
className="text-gray-600 hover:text-gray-900"
60+
data-testid="quickstart-link"
4561
>
4662
Quickstart
4763
</a>
@@ -51,6 +67,7 @@ export default function Footer() {
5167
href="https://dicedb.io/commands/get"
5268
target="_blank"
5369
className="text-gray-600 hover:text-gray-900"
70+
data-testid="commands-link"
5471
>
5572
Commands
5673
</a>
@@ -60,6 +77,7 @@ export default function Footer() {
6077
href="https://github.com/DiceDB/dice/tree/master/examples/leaderboard-go"
6178
target="_blank"
6279
className="text-gray-600 hover:text-gray-900"
80+
data-testid="examples-link"
6381
>
6482
Examples
6583
</a>
@@ -75,6 +93,7 @@ export default function Footer() {
7593
href="https://github.com/DiceDB/dice/tree/master/examples/leaderboard-go"
7694
target="_blank"
7795
className="text-gray-600 hover:text-gray-900"
96+
data-testid="leaderboard-link"
7897
>
7998
Real-time Leaderboard
8099
</a>
@@ -90,6 +109,7 @@ export default function Footer() {
90109
href="mailto:[email protected]"
91110
target="_blank"
92111
className="text-gray-600 hover:text-gray-900"
112+
data-testid="contact-link"
93113
>
94114
Contact Us
95115
</a>
@@ -101,6 +121,7 @@ export default function Footer() {
101121
target="_blank"
102122
className="text-gray-400 hover:text-gray-600"
103123
aria-label="People"
124+
data-testid="people-icon-link"
104125
>
105126
<People className="h-6 w-6" />
106127
</a>
@@ -109,6 +130,7 @@ export default function Footer() {
109130
target="_blank"
110131
className="text-gray-400 hover:text-gray-600"
111132
aria-label="Twitter"
133+
data-testid="twitter-icon-link"
112134
>
113135
<Twitter className="h-6 w-6" />
114136
</a>
@@ -117,6 +139,7 @@ export default function Footer() {
117139
target="_blank"
118140
className="text-gray-400 hover:text-gray-600"
119141
aria-label="GitHub"
142+
data-testid="github-icon-link"
120143
>
121144
<GitHub className="h-6 w-6" />
122145
</a>

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

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
import '@testing-library/jest-dom';
2+
import { render, screen } from '@testing-library/react';
3+
import Footer from '../Footer';
4+
5+
const setupTest = () => {
6+
const utils = render(<Footer />);
7+
8+
const footerElement = screen.getByTestId('footer');
9+
const headingElement = screen.getByTestId('footer-heading');
10+
const getStartedLinkElement = screen.getByTestId('get-started-link');
11+
const getStartedButtonElement = screen.getByTestId('get-started-button');
12+
const githubLinkElement = screen.getByTestId('github-link');
13+
const githubButtonElement = screen.getByTestId('github-button');
14+
const quickStartLinkElement = screen.getByTestId('quickstart-link');
15+
const commandsLinkElement = screen.getByTestId('commands-link');
16+
const examplesLinkElement = screen.getByTestId('examples-link');
17+
const leaderboardLinkElement = screen.getByTestId('leaderboard-link');
18+
const contactLinkElement = screen.getByTestId('contact-link');
19+
const peopleIconLinkElement = screen.getByTestId('people-icon-link');
20+
const twitterIconLinkElement = screen.getByTestId('twitter-icon-link');
21+
const githubIconLinkElement = screen.getByTestId('github-icon-link');
22+
23+
return {
24+
footerElement,
25+
headingElement,
26+
getStartedLinkElement,
27+
getStartedButtonElement,
28+
githubLinkElement,
29+
githubButtonElement,
30+
quickStartLinkElement,
31+
commandsLinkElement,
32+
examplesLinkElement,
33+
leaderboardLinkElement,
34+
contactLinkElement,
35+
peopleIconLinkElement,
36+
twitterIconLinkElement,
37+
githubIconLinkElement,
38+
...utils,
39+
};
40+
};
41+
42+
describe('Footer component', () => {
43+
it('renders the footer component', () => {
44+
const {
45+
footerElement,
46+
headingElement,
47+
getStartedLinkElement,
48+
getStartedButtonElement,
49+
githubLinkElement,
50+
githubButtonElement,
51+
quickStartLinkElement,
52+
commandsLinkElement,
53+
examplesLinkElement,
54+
leaderboardLinkElement,
55+
contactLinkElement,
56+
peopleIconLinkElement,
57+
twitterIconLinkElement,
58+
githubIconLinkElement,
59+
} = setupTest();
60+
61+
// Assert footer and its heading are present
62+
expect(footerElement).toBeInTheDocument();
63+
expect(headingElement).toBeInTheDocument();
64+
expect(headingElement).toHaveTextContent('DiceDB');
65+
66+
// Assert 'Get Started' button and link
67+
expect(getStartedLinkElement).toBeInTheDocument();
68+
expect(getStartedButtonElement).toBeInTheDocument();
69+
expect(getStartedLinkElement).toHaveAttribute(
70+
'href',
71+
'https://dicedb.io/get-started/installation/',
72+
);
73+
74+
// Assert GitHub button and link
75+
expect(githubLinkElement).toBeInTheDocument();
76+
expect(githubButtonElement).toBeInTheDocument();
77+
expect(githubLinkElement).toHaveAttribute(
78+
'href',
79+
'https://github.com/dicedb/dice',
80+
);
81+
82+
// Assert developer section links
83+
expect(quickStartLinkElement).toBeInTheDocument();
84+
expect(quickStartLinkElement).toHaveAttribute(
85+
'href',
86+
'https://dicedb.io/get-started/installation',
87+
);
88+
89+
expect(commandsLinkElement).toBeInTheDocument();
90+
expect(commandsLinkElement).toHaveAttribute(
91+
'href',
92+
'https://dicedb.io/commands/get',
93+
);
94+
95+
expect(examplesLinkElement).toBeInTheDocument();
96+
expect(examplesLinkElement).toHaveAttribute(
97+
'href',
98+
'https://github.com/DiceDB/dice/tree/master/examples/leaderboard-go',
99+
);
100+
101+
// Assert examples section link
102+
expect(leaderboardLinkElement).toBeInTheDocument();
103+
expect(leaderboardLinkElement).toHaveAttribute(
104+
'href',
105+
'https://github.com/DiceDB/dice/tree/master/examples/leaderboard-go',
106+
);
107+
108+
// Assert social media and contact section
109+
expect(contactLinkElement).toBeInTheDocument();
110+
expect(contactLinkElement).toHaveAttribute(
111+
'href',
112+
'mailto:[email protected]',
113+
);
114+
115+
expect(peopleIconLinkElement).toBeInTheDocument();
116+
expect(peopleIconLinkElement).toHaveAttribute(
117+
'href',
118+
'https://discord.gg/6r8uXWtXh7',
119+
);
120+
121+
expect(twitterIconLinkElement).toBeInTheDocument();
122+
expect(twitterIconLinkElement).toHaveAttribute(
123+
'href',
124+
'https://twitter.com/thedicedb',
125+
);
126+
127+
expect(githubIconLinkElement).toBeInTheDocument();
128+
expect(githubIconLinkElement).toHaveAttribute(
129+
'href',
130+
'https://github.com/dicedb/dice',
131+
);
132+
});
133+
});

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
export default function Header() {
44
return (
5-
<header className="flex items-center mb-4">
5+
<header data-testid="header" className="flex items-center mb-4">
66
<h1 className="text-2xl font-bold">DiceDB PlayGround</h1>
77
</header>
88
);

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

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import '@testing-library/jest-dom';
2+
import { render, screen } from '@testing-library/react';
3+
import Header from '../Header';
4+
5+
const setupTest = () => {
6+
const utils = render(<Header />);
7+
8+
const headerElement = screen.getByTestId('header');
9+
10+
return {
11+
headerElement,
12+
...utils,
13+
};
14+
};
15+
16+
describe('Header component', () => {
17+
it('should render header', () => {
18+
const { headerElement } = setupTest();
19+
expect(headerElement).toBeInTheDocument();
20+
});
21+
});

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

Lines changed: 20 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,27 @@ import { TerminalUI } from './TerminalUI';
88

99
export default function Playground() {
1010
return (
11-
<div className="container mx-auto flex flex-col flex-grow min-h-screen bg-white text-gray-900">
11+
<div
12+
data-testid="playground"
13+
className="container mx-auto flex flex-col flex-grow min-h-screen bg-white text-gray-900"
14+
>
1215
<Header />
1316

14-
<main className="flex flex-col lg:flex-row gap-10 flex-grow overflow-hidden px-4">
17+
<main
18+
data-testid="playground-main"
19+
className="flex flex-col lg:flex-row gap-10 flex-grow overflow-hidden px-4"
20+
>
1521
<div className="w-full lg:w-7/12 flex flex-col">
1622
<TerminalUI />
1723
</div>
18-
<div className="w-full lg:w-5/12 flex flex-col">
19-
<div className="flex-grow border border-gray-400 bg-gray-100 p-4 rounded-lg shadow-md mb-4">
24+
<div
25+
data-testid="searchbox-container"
26+
className="w-full lg:w-5/12 flex flex-col"
27+
>
28+
<div
29+
data-testid="searchbox-wrapper"
30+
className="flex-grow border border-gray-400 bg-gray-100 p-4 rounded-lg shadow-md mb-4"
31+
>
2032
<SearchBox />
2133
</div>
2234
</div>
@@ -27,7 +39,10 @@ export default function Playground() {
2739

2840
function Header() {
2941
return (
30-
<header className="navbar flex items-center justify-between py-5">
42+
<header
43+
data-testid="playground-header"
44+
className="navbar flex items-center justify-between py-5"
45+
>
3146
<div className="flex items-center">
3247
<Image
3348
src="/images/dicedb-logo-light.png"

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

Lines changed: 17 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,22 +4,25 @@ import { formatTime } from '@/shared/utils/commonUtils';
44
import { useTimer } from '@/shared/hooks/useTimer';
55
import { useState } from 'react';
66
import Tooltip from '../Overlays/Tooltip';
7-
export function TerminalUI() {
8-
const [commandsLeft, setCommandsLeft] = useState(1000);
7+
export function TerminalUI({ initialCommandsLeft = 1000 }) {
8+
const [commandsLeft, setCommandsLeft] = useState(initialCommandsLeft);
99
const decreaseCommandsLeft = () => {
1010
setCommandsLeft((prev) => (prev > 0 ? prev - 1 : 0));
1111
};
1212
return (
1313
<>
14-
<div className="bg-gray-900 rounded-lg">
14+
<div className="bg-gray-900 rounded-lg" data-testid="terminal-container">
1515
<div className="bg-gray-900 px-4 py-4 flex items-center rounded-lg">
16-
<div className="flex space-x-2">
16+
<div className="flex space-x-2" data-testid="dice-icons">
1717
<Dice5 className="w-4 h-4 bg-red-500" />
1818
<Dice1 className="w-4 h-4 bg-yellow-500" />
1919
<Dice3 className="w-4 h-4 bg-green-500" />
2020
</div>
2121
</div>
22-
<div className="h-64 md:h-[30rem] bg-gray-100 rounded-lg overflow-hidden shadow-md">
22+
<div
23+
className="h-64 md:h-[30rem] bg-gray-100 rounded-lg overflow-hidden shadow-md"
24+
data-testid="shell-container"
25+
>
2326
<Shell decreaseCommandsLeft={decreaseCommandsLeft} />
2427
</div>
2528
</div>
@@ -31,17 +34,23 @@ export function TerminalUI() {
3134
function TerminalCounter({ commandsLeft }: { commandsLeft: number }) {
3235
const { timeLeft } = useTimer(15 * 60);
3336
return (
34-
<div className="flex flex-col">
37+
<div className="flex flex-col" data-testid="terminal-counter">
3538
<div className="flex flex-row justify-between text-gray-900 mt-4">
3639
<div className="flex flex-row items-center space-x-2">
37-
<div className="flex items-center justify-between border border-gray-400 text-sm bg-transparent p-3 rounded-lg">
40+
<div
41+
className="flex items-center justify-between border border-gray-400 text-sm bg-transparent p-3 rounded-lg"
42+
data-testid="cleanup-timer"
43+
>
3844
<span>Cleanup in: {formatTime(timeLeft)} mins</span>
3945
</div>
4046
<Tooltip message="The time remaining until cleanup is initiated." />
4147
</div>
4248

4349
<div className="flex flex-row items-center space-x-2">
44-
<div className="flex items-center justify-between border border-gray-400 text-sm bg-transparent p-3 rounded-lg">
50+
<div
51+
className="flex items-center justify-between border border-gray-400 text-sm bg-transparent p-3 rounded-lg"
52+
data-testid="commands-left"
53+
>
4554
<span>Commands left: {commandsLeft}</span>
4655
</div>
4756
<Tooltip message="The number of commands you can execute before cleanup." />{' '}

0 commit comments

Comments
 (0)