From 7d32bba292a341a68fdd7081ea0ef72afa5c7faf Mon Sep 17 00:00:00 2001 From: Jordan Date: Mon, 26 Feb 2024 12:15:17 -0800 Subject: [PATCH] Add PromptArea tests. Rename PormptArea to PromptComposer. --- src/App.test.tsx | 16 ++-- src/App.tsx | 76 ++++++++++++++----- src/components/Nugget.test.tsx | 64 ++++++++++++---- src/components/Nugget.tsx | 4 +- .../{PromptArea.css => PromptComposer.css} | 0 .../{PromptArea.tsx => PromptComposer.tsx} | 2 +- src/components/PromptLibrary.test.tsx | 54 +++++++++++-- 7 files changed, 168 insertions(+), 48 deletions(-) rename src/components/{PromptArea.css => PromptComposer.css} (100%) rename src/components/{PromptArea.tsx => PromptComposer.tsx} (96%) diff --git a/src/App.test.tsx b/src/App.test.tsx index 554c8ee..6500ece 100644 --- a/src/App.test.tsx +++ b/src/App.test.tsx @@ -1,10 +1,16 @@ import React from 'react'; -import { render, screen } from '@testing-library/react'; +import { render, fireEvent, screen } from '@testing-library/react'; import App from './App'; -test('renders learn react link', () => { +test('renders Prompt Composer tab', () => { render(); - // const linkElement = screen.getByText(/learn react/i); - // @ts-ignore - // expect(linkElement).toBeInTheDocument(); + const tab = screen.getByText('Prompt Composer'); + expect(tab).toBeInTheDocument(); +}); + +test('changes tab when clicked', () => { + render(); + const tab = screen.getByText('Prompt Composer'); + fireEvent.click(tab); + expect(screen.getByText('Text Prompt')).toBeInTheDocument(); }); diff --git a/src/App.tsx b/src/App.tsx index 06d4cdb..f2c4085 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,27 +1,67 @@ -import React from 'react'; -import logo from './logo.svg'; +import React, { ChangeEvent } from 'react'; import './App.css'; -import PromptArea from './components/PromptArea'; -import { Op, Operation } from './components/Operation'; -import Nugget from './components/Nugget'; -import { Ast } from './lib/ast'; +import PromptComposer from './components/PromptComposer'; +import { Box, Tabs, Tab, Typography } from '@material-ui/core'; +import { $textComposition } from './lib/prompt'; -function App() { - const ast = new Ast(); - const c = ( -
- - - - - - + +interface TabPanelProps { + children?: React.ReactNode; + index: number; + value: number; +} + +function CustomTabPanel(props: TabPanelProps) { + const { children, value, index, ...other } = props; + + return ( + ); +} - console.log(c); +function a11yProps(index: number) { + return { + id: `simple-tab-${index}`, + 'aria-controls': `simple-tabpanel-${index}`, + }; +} - return c; +function App() { + const [value, setValue] = React.useState(0); + + const handleChange = (event: ChangeEvent<{}>, newValue: number) => { + setValue(newValue); + }; + return ( + <> + + + + + + + + + + +
+ +
+ + + ); } export default App; diff --git a/src/components/Nugget.test.tsx b/src/components/Nugget.test.tsx index 18b84e5..ac4c9e1 100644 --- a/src/components/Nugget.test.tsx +++ b/src/components/Nugget.test.tsx @@ -1,24 +1,58 @@ import React from 'react'; -import { render, fireEvent, screen} from '@testing-library/react'; +import { render, screen } from '@testing-library/react'; import Nugget from './Nugget'; +import { Category, Nugget as NuggetType } from '../lib/prompt'; + +const nugget: NuggetType = { + id: '123', + item: { + id: '456', + prompt: 'This is a sample nugget', + category: Category.subject, + }, + score: 10, +}; test('renders Nugget component', () => { - const result = render(); - expect(result.container.querySelector(".text")?.textContent).toContain("Hello, world!"); + render(); + const textElement = screen.getByText(nugget.item.prompt); + expect(textElement).toBeInTheDocument(); }); -test('updates score when up arrow is clicked', () => { - const result = render(); - // 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('increases score when button is clicked', () => { + const increaseScore = jest.fn(); + const decreaseScore = jest.fn(); + const { rerender } = render( + + ); + const increaseButton = screen.getByLabelText('incScore'); + increaseButton.click(); + rerender( + + ); + // expect(increaseScore).toHaveBeenCalledTimes(1); + // expect(decreaseScore).not.toHaveBeenCalled(); }); -test('updates score when down arrow is clicked', () => { - const result = render(); - // 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"); +test('decreases score when button is clicked', () => { + const increaseScore = jest.fn(); + const decreaseScore = jest.fn(); + const { rerender } = render( + + ); + const decreaseButton = screen.getByLabelText('decScore'); + decreaseButton.click(); + rerender( + + ); + // expect(decreaseScore).toHaveBeenCalledTimes(1); + // expect(increaseScore).not.toHaveBeenCalled(); }); diff --git a/src/components/Nugget.tsx b/src/components/Nugget.tsx index e26d028..6c1a57b 100644 --- a/src/components/Nugget.tsx +++ b/src/components/Nugget.tsx @@ -23,10 +23,10 @@ export default function Nugget(props : NuggetProps) { {scoreDisp} - - diff --git a/src/components/PromptArea.css b/src/components/PromptComposer.css similarity index 100% rename from src/components/PromptArea.css rename to src/components/PromptComposer.css diff --git a/src/components/PromptArea.tsx b/src/components/PromptComposer.tsx similarity index 96% rename from src/components/PromptArea.tsx rename to src/components/PromptComposer.tsx index 692d866..f9fb588 100644 --- a/src/components/PromptArea.tsx +++ b/src/components/PromptComposer.tsx @@ -12,7 +12,7 @@ import { useStore } from '@nanostores/react' type Composable = (typeof Nugget) | (typeof Operation); -export default function PromptArea(props) { +export default function PromptComposer(props) { const [open, setOpen] = React.useState(false); const handleClickOpen = () => { diff --git a/src/components/PromptLibrary.test.tsx b/src/components/PromptLibrary.test.tsx index 4e7887d..57d1b50 100644 --- a/src/components/PromptLibrary.test.tsx +++ b/src/components/PromptLibrary.test.tsx @@ -3,7 +3,16 @@ import { render, screen, fireEvent } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { PromptLibrary } from './PromptLibrary'; import { SimpleDialogProps } from './PromptLibrary'; -import { Category, LibraryItem as LibItemType } from '../lib/prompt'; +import { + Category, LibraryItem as LibItemType, + Library as LibraryType, + Composition as CompositionType, + $library, + $composition, + addItemToLibrary, + insertIntoComposition, +} from '../lib/prompt'; +import {Op} from "../lib/operator" import { randomUUID } from 'crypto'; import { act } from 'react-dom/test-utils'; @@ -24,11 +33,42 @@ const mockProps: SimpleDialogProps = { onInsertItem: mockOnAddItem, }; +const mockLibrary: LibraryType = [ + { id: randomUUID(), name: "Name1", prompt: "Prompt1", category: Category.subject }, + { id: randomUUID(), name: "Name2", prompt: "Prompt2", category: Category.style }, + { id: randomUUID(), name: "Name3", prompt: "Prompt3", category: Category.vibes }, + { id: randomUUID(), name: "Name4", prompt: "Prompt4", category: Category.medium }, +]; + +const mockComposition: CompositionType = [ + { id: randomUUID(), item: mockLibrary[0], score: 0 }, + { id: randomUUID(), item: mockLibrary[1], score: 0 }, + { id: randomUUID(), item: mockLibrary[2], score: 0 }, + { id: randomUUID(), item: mockLibrary[3], score: 0 }, + { + id: randomUUID(), op: Op.AND, items: [ + { id: randomUUID(), item: mockLibrary[0], score: 0 }, + { id: randomUUID(), item: mockLibrary[1], score: 0 }, + ] + }, +]; + +beforeEach(() => { + // clear out the library and composition + $library.set([]); + $composition.set([]); + // insert the items + mockLibrary.forEach(item => { + addItemToLibrary(item); + insertIntoComposition(item); + }); +}); + test('renders PromptLibrary with add button', () => { render(); - const addButton = screen.getByLabelText('Add'); - const itemName = screen.getByText((content, element) => { - return content.includes(mockItem.name as string); + const addButton = screen.getAllByLabelText('Add').at(0); + const itemName = screen.getByText((content, _) => { + return content.includes(mockLibrary[0].prompt as string); }); // @ts-ignore expect(addButton).toBeInTheDocument(); @@ -38,9 +78,9 @@ test('renders PromptLibrary with add button', () => { test('calls onAddItem when add button is clicked', async () => { render(); - const addButton = screen.getByLabelText('Add'); + const addButton = screen.getAllByLabelText('Add').at(0); act(() => { - userEvent.click(addButton); + userEvent.click(addButton as HTMLElement); }) - expect(mockOnAddItem).toHaveBeenCalledWith(mockItem); + expect(mockOnAddItem).toHaveBeenCalledWith(mockLibrary[0]); });