added labels to components.
This commit is contained in:
parent
7d32bba292
commit
b0c70f6d17
@ -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();
|
||||||
});
|
});
|
||||||
|
@ -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>
|
||||||
</>
|
</>
|
||||||
|
Loading…
Reference in New Issue
Block a user