successful test of nugget.

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "nuxt.isNuxtApp": false
+}

package.json

@@ -9,6 +9,7 @@
     "@mui/icons-material": "^5.15.10",
     "@mui/material": "^5.15.10",
     "@reduxjs/toolkit": "^2.2.1",
+    "@testing-library/dom": "^9.3.4",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",

pnpm-lock.yaml

@@ -23,6 +23,9 @@ dependencies:
   '@reduxjs/toolkit':
     specifier: ^2.2.1
     version: 2.2.1(react-redux@9.1.0)(react@18.2.0)
+  '@testing-library/dom':
+    specifier: ^9.3.4
+    version: 9.3.4
   '@testing-library/jest-dom':
     specifier: ^5.17.0
     version: 5.17.0

src/components/Nugget.test.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { render, fireEvent, screen} from '@testing-library/react';
+import Nugget from './Nugget';
+
+test('renders Nugget component', () => {
+  const result = render(<Nugget text="Hello, world!" />);
+  expect(result.container.querySelector(".text")?.textContent).toContain("Hello, world!");
+});
+
+test('updates score when up arrow is clicked', () => {
+  const result = render(<Nugget text="Hello, world!" initialScore={0} />);
+  // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+  const upButton = result.container.querySelector(".incScore");
+  if (upButton) fireEvent.click(upButton);
+  expect(result.container.querySelector(".score")?.textContent).toBe("+1");
+});
+
+test('updates score when down arrow is clicked', () => {
+  const result = render(<Nugget text="Hello, world!" initialScore={0} />);
+  // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+  const downButton = result.container.querySelector(".decScore");
+  if (downButton) fireEvent.click(downButton);
+  expect(result.container.querySelector(".score")?.textContent).toBe("-1");
+});

src/components/Nugget.tsx

@@ -14,10 +14,10 @@ export default function Nugget({ text, initialScore }: { text: string, initialSc
             <span className='score'>{score > 0 ? "+" + score : score}</span>
             <span className='buttons'>
             <ButtonGroup size="small" orientation='vertical'>
-                <Button onClick={() => setScore(score + 1)}>
+                <Button onClick={() => setScore(score + 1)} className='incScore'>
                     <KeyboardArrowUpIcon />
                 </Button>
-                <Button onClick={() => setScore(score - 1)}>
+                <Button onClick={() => setScore(score - 1)} className='decScore'>
                     <KeyboardArrowDownIcon />
                 </Button>
             </ButtonGroup>