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', () => {
render(<App />);
const tab = screen.getByText('Prompt Composer');
const tab = screen.getByText('prompt-composer-tab');
expect(tab).toBeInTheDocument();
});
test('changes tab when clicked', () => {
render(<App />);
const tab = screen.getByText('Prompt Composer');
const tab = screen.getByLabelText('text-prompt-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 (
<>
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
<Tabs value={value} onChange={handleChange} aria-label="prompt-area">
<Tab label="Prompt Composer" {...a11yProps(0)} />
<Tab label="Text Prompt" {...a11yProps(1)} />
<Tabs value={value} onChange={handleChange} aria-label="prompt-selection-tabs">
<Tab label="Prompt Composer" {...a11yProps(0)} aria-label="prompt-composer-tab" />
<Tab label="Text Prompt" {...a11yProps(1)} aria-label="text-prompt-tab" />
</Tabs>
</Box>
<CustomTabPanel value={value} index={0}>
@ -57,7 +57,7 @@ function App() {
</CustomTabPanel>
<CustomTabPanel value={value} index={1}>
<div>
<textarea>{ $textComposition.get() }</textarea>
<textarea aria-label='text-area'>{ $textComposition.get() }</textarea>
</div>
</CustomTabPanel>
</>