added labels to components.

This commit is contained in:
Jordan 2024-02-26 12:19:55 -08:00
parent 7d32bba292
commit b0c70f6d17
2 changed files with 7 additions and 7 deletions

View File

@ -4,13 +4,13 @@ import App from './App';
test('renders Prompt Composer tab', () => { test('renders Prompt Composer tab', () => {
render(<App />); render(<App />);
const tab = screen.getByText('Prompt Composer'); const tab = screen.getByText('prompt-composer-tab');
expect(tab).toBeInTheDocument(); expect(tab).toBeInTheDocument();
}); });
test('changes tab when clicked', () => { test('changes tab when clicked', () => {
render(<App />); render(<App />);
const tab = screen.getByText('Prompt Composer'); const tab = screen.getByLabelText('text-prompt-tab');
fireEvent.click(tab); fireEvent.click(tab);
expect(screen.getByText('Text Prompt')).toBeInTheDocument(); expect(screen.getByLabelText('text-area')).toBeInTheDocument();
}); });

View File

@ -47,9 +47,9 @@ function App() {
return ( return (
<> <>
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}> <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
<Tabs value={value} onChange={handleChange} aria-label="prompt-area"> <Tabs value={value} onChange={handleChange} aria-label="prompt-selection-tabs">
<Tab label="Prompt Composer" {...a11yProps(0)} /> <Tab label="Prompt Composer" {...a11yProps(0)} aria-label="prompt-composer-tab" />
<Tab label="Text Prompt" {...a11yProps(1)} /> <Tab label="Text Prompt" {...a11yProps(1)} aria-label="text-prompt-tab" />
</Tabs> </Tabs>
</Box> </Box>
<CustomTabPanel value={value} index={0}> <CustomTabPanel value={value} index={0}>
@ -57,7 +57,7 @@ function App() {
</CustomTabPanel> </CustomTabPanel>
<CustomTabPanel value={value} index={1}> <CustomTabPanel value={value} index={1}>
<div> <div>
<textarea>{ $textComposition.get() }</textarea> <textarea aria-label='text-area'>{ $textComposition.get() }</textarea>
</div> </div>
</CustomTabPanel> </CustomTabPanel>
</> </>