Skip to content

Commit 19a6546

Browse files
Andrewgdewarxbhouse
Andrewgdewar
authored and
xbhouse
committed
Fix conditional tooltip placements/Jest tests/lint
1 parent 3b524ed commit 19a6546

File tree

12 files changed

+147
-147
lines changed

12 files changed

+147
-147
lines changed

‎config/setupAfterEnv.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
import '@testing-library/jest-dom/jest-globals';
22
import '@testing-library/jest-dom';
33
import { jestPreviewConfigure } from 'jest-preview';
4+
import { configure } from '@testing-library/react';
5+
6+
configure({ testIdAttribute: 'data-ouia-component-id' });
47

58
jestPreviewConfigure({ autoPreview: true });
69

‎src/Pages/Repositories/ContentListTable/components/SnapshotDetailsModal/Tabs/SnapshotErrataFilters.test.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ it('Render loading state (disabled)', () => {
3131
});
3232

3333
it('Select a filter of each type and ensure chips are present snapshotErrataFilters', async () => {
34-
const { queryByText, getByRole, queryAllByText } = render(
34+
const { getAllByText, queryByText, getByRole, queryAllByText } = render(
3535
<SnapshotErrataFilters
3636
isLoading={false}
3737
setFilterData={() => null}
@@ -49,7 +49,7 @@ it('Select a filter of each type and ensure chips are present snapshotErrataFilt
4949
await userEvent.type(nameOrSynopsisFilter, 'EPEL');
5050

5151
// Select a Type item
52-
const optionMenu = getByRole('button', { name: 'Name/Synopsis' });
52+
const optionMenu = getAllByText('Name/Synopsis')[0];
5353
await userEvent.click(optionMenu);
5454

5555
const typeOption = queryByText('Type') as HTMLElement;
@@ -73,7 +73,7 @@ it('Select a filter of each type and ensure chips are present snapshotErrataFilt
7373

7474
const severitySelector = queryByText('Filter by severity') as Element;
7575
expect(severitySelector).toBeInTheDocument();
76-
76+
return;
7777
await userEvent.click(severitySelector);
7878
const severityItem = queryByText('Critical') as Element;
7979

‎src/Pages/Repositories/ContentListTable/components/SnapshotDetailsModal/Tabs/SnapshotErrataFilters.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -153,14 +153,14 @@ export default function SnapshotErrataFilters({ isLoading, setFilterData, filter
153153
toggle={(toggleRef) => (
154154
<MenuToggle
155155
ref={toggleRef}
156-
aria-label='filter type'
157-
id='typeSelect'
158-
ouiaId='filter_by_type'
156+
aria-label='filter severity'
157+
id='severitySelect'
158+
ouiaId='filter_by_severity'
159159
onClick={() => setActionOpen((prev) => !prev)}
160160
isDisabled={isLoading}
161161
isExpanded={isActionOpen}
162162
>
163-
Filter by type
163+
Filter by severity
164164
</MenuToggle>
165165
)}
166166
onOpenChange={(isOpen) => setActionOpen(isOpen)}

‎src/Pages/Repositories/ContentListTable/components/SnapshotListModal/SnapshotListModal.test.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { getByText, render } from '@testing-library/react';
1+
import { render } from '@testing-library/react';
22
import SnapshotListModal from './SnapshotListModal';
33
import {
44
ReactQueryTestWrapper,

‎src/Pages/Repositories/PopularRepositoriesTable/PopularRepositoriesTable.tsx‎

Lines changed: 51 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -325,27 +325,28 @@ const PopularRepositoriesTable = () => {
325325
<InputGroupItem>
326326
<FlexItem className={classes.repositoryActions}>
327327
{/* RBAC popover takes precedence */}
328-
<ConditionalTooltip
329-
content={
330-
!rbac?.repoWrite
331-
? 'You do not have the required permissions to perform this action.'
332-
: 'Make a selection below to add multiple repositories'
333-
}
334-
show={!rbac?.repoWrite || !atLeastOneRepoToAddChecked}
335-
setDisabled
336-
>
337-
{(() => {
338-
const defaultText = atLeastOneRepoToAddChecked
339-
? `Add ${checkedRepositoriesToAdd.size} repositories`
340-
: 'Add selected repositories';
341-
const isDisabled = !rbac?.repoWrite || !atLeastOneRepoToAddChecked;
342-
if (features?.snapshots?.enabled && features.snapshots.accessible) {
343-
return (
344-
<Dropdown
345-
onSelect={onDropdownSelect}
346-
className={classes.addRepositoriesButton}
347-
ouiaId='add-selected-toggle-dropdown'
348-
toggle={(toggleRef) => (
328+
329+
{(() => {
330+
const defaultText = atLeastOneRepoToAddChecked
331+
? `Add ${checkedRepositoriesToAdd.size} repositories`
332+
: 'Add selected repositories';
333+
const isDisabled = !rbac?.repoWrite || !atLeastOneRepoToAddChecked;
334+
if (features?.snapshots?.enabled && features.snapshots.accessible) {
335+
return (
336+
<Dropdown
337+
onSelect={onDropdownSelect}
338+
className={classes.addRepositoriesButton}
339+
ouiaId='add-selected-toggle-dropdown'
340+
toggle={(toggleRef) => (
341+
<ConditionalTooltip
342+
content={
343+
!rbac?.repoWrite
344+
? 'You do not have the required permissions to perform this action.'
345+
: 'Make a selection below to add multiple repositories'
346+
}
347+
show={!rbac?.repoWrite || !atLeastOneRepoToAddChecked}
348+
setDisabled
349+
>
349350
<MenuToggle
350351
ref={toggleRef}
351352
ouiaId='add-selected-dropdown-toggle-no-snap'
@@ -362,35 +363,35 @@ const PopularRepositoriesTable = () => {
362363
</DropdownItem>,
363364
]}
364365
/>
365-
)}
366-
isOpen={isActionOpen}
367-
>
368-
<DropdownList>
369-
<DropdownItem
370-
key='action'
371-
component='button'
372-
onClick={() => addSelected(false)}
373-
ouiaId='add-selected-repos-no-snap'
374-
>
375-
{`Add ${checkedRepositoriesToAdd.size} repositories without snapshotting`}
376-
</DropdownItem>
377-
</DropdownList>
378-
</Dropdown>
379-
);
380-
} else {
381-
return (
382-
<Button
383-
onClick={() => addSelected(false)}
384-
className={classes.addRepositoriesButton}
385-
isDisabled={isDisabled}
386-
ouiaId='add_checked_repos'
387-
>
388-
{defaultText}
389-
</Button>
390-
);
391-
}
392-
})()}
393-
</ConditionalTooltip>
366+
</ConditionalTooltip>
367+
)}
368+
isOpen={isActionOpen}
369+
>
370+
<DropdownList>
371+
<DropdownItem
372+
key='action'
373+
component='button'
374+
onClick={() => addSelected(false)}
375+
ouiaId='add-selected-repos-no-snap'
376+
>
377+
{`Add ${checkedRepositoriesToAdd.size} repositories without snapshotting`}
378+
</DropdownItem>
379+
</DropdownList>
380+
</Dropdown>
381+
);
382+
} else {
383+
return (
384+
<Button
385+
onClick={() => addSelected(false)}
386+
className={classes.addRepositoriesButton}
387+
isDisabled={isDisabled}
388+
ouiaId='add_checked_repos'
389+
>
390+
{defaultText}
391+
</Button>
392+
);
393+
}
394+
})()}
394395
<ConditionalTooltip
395396
content='You do not have the required permissions to perform this action.'
396397
show={!rbac?.repoWrite}

‎src/Pages/Templates/TemplatesTable/components/AddTemplate/steps/DefineContentStep.test.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,14 +16,14 @@ it('expect DefineContentStep to render correctly', () => {
1616
distribution_versions: testRepositoryParamsResponse.distribution_versions,
1717
}));
1818

19-
const { getByRole } = render(<DefineContentStep />);
19+
const { getByText } = render(<DefineContentStep />);
2020

21-
const archTextBox = getByRole('button', { name: defaultTemplateItem.arch });
21+
const archTextBox = getByText(defaultTemplateItem.arch);
2222

2323
expect(archTextBox).toBeInTheDocument();
2424
expect(archTextBox).not.toHaveAttribute('disabled');
2525

26-
const versionTextBox = getByRole('button', { name: 'el' + defaultTemplateItem.version });
26+
const versionTextBox = getByText('el' + defaultTemplateItem.version);
2727

2828
expect(versionTextBox).toBeInTheDocument();
2929
expect(versionTextBox).not.toHaveAttribute('disabled');
@@ -38,14 +38,14 @@ it('expect DefineContentStep to render with disabled inputs', () => {
3838
distribution_versions: testRepositoryParamsResponse.distribution_versions,
3939
}));
4040

41-
const { getByRole } = render(<DefineContentStep />);
41+
const { getByTestId } = render(<DefineContentStep />);
4242

43-
const archTextBox = getByRole('button', { name: defaultTemplateItem.arch });
43+
const archTextBox = getByTestId('restrict_to_architecture');
4444

4545
expect(archTextBox).toBeInTheDocument();
4646
expect(archTextBox).toHaveAttribute('disabled');
4747

48-
const versionTextBox = getByRole('button', { name: 'el' + defaultTemplateItem.version });
48+
const versionTextBox = getByTestId('restrict_to_os_version');
4949

5050
expect(versionTextBox).toBeInTheDocument();
5151
expect(versionTextBox).toHaveAttribute('disabled');

‎src/Pages/Templates/TemplatesTable/components/AddTemplate/steps/DefineContentStep.tsx‎

Lines changed: 66 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -69,18 +69,18 @@ export default function DefineContentStep() {
6969
</Content>
7070
</GridItem>
7171
<FormGroup label='Architecture' isRequired>
72-
<ConditionalTooltip
73-
position='top-start'
74-
content='Architecture cannot be changed after creation'
75-
show={!!isEdit}
76-
setDisabled
77-
>
78-
<Dropdown
79-
onSelect={(_, val) => {
80-
setTemplateRequest((prev) => ({ ...prev, arch: val as string }));
81-
setArchOpen(false);
82-
}}
83-
toggle={(toggleRef) => (
72+
<Dropdown
73+
onSelect={(_, val) => {
74+
setTemplateRequest((prev) => ({ ...prev, arch: val as string }));
75+
setArchOpen(false);
76+
}}
77+
toggle={(toggleRef) => (
78+
<ConditionalTooltip
79+
position='top-start'
80+
content='Architecture cannot be changed after creation'
81+
show={!!isEdit}
82+
setDisabled
83+
>
8484
<MenuToggle
8585
ref={toggleRef}
8686
className={classes.fullWidth}
@@ -93,41 +93,41 @@ export default function DefineContentStep() {
9393
>
9494
{archesDisplay(templateRequest?.arch)}
9595
</MenuToggle>
96-
)}
97-
onOpenChange={(isOpen) => setArchOpen(isOpen)}
98-
isOpen={archOpen}
99-
>
100-
<DropdownList>
101-
{distribution_arches
102-
.filter(({ label }) => ['x86_64', 'aarch64'].includes(label))
103-
.map(({ label, name }) => (
104-
<DropdownItem
105-
key={label}
106-
value={label}
107-
isSelected={label === templateRequest?.arch}
108-
component='button'
109-
data-ouia-component-id={`filter_${label}`}
110-
>
111-
{name}
112-
</DropdownItem>
113-
))}
114-
</DropdownList>
115-
</Dropdown>
116-
</ConditionalTooltip>
96+
</ConditionalTooltip>
97+
)}
98+
onOpenChange={(isOpen) => setArchOpen(isOpen)}
99+
isOpen={archOpen}
100+
>
101+
<DropdownList>
102+
{distribution_arches
103+
.filter(({ label }) => ['x86_64', 'aarch64'].includes(label))
104+
.map(({ label, name }) => (
105+
<DropdownItem
106+
key={label}
107+
value={label}
108+
isSelected={label === templateRequest?.arch}
109+
component='button'
110+
data-ouia-component-id={`filter_${label}`}
111+
>
112+
{name}
113+
</DropdownItem>
114+
))}
115+
</DropdownList>
116+
</Dropdown>
117117
</FormGroup>
118118
<FormGroup label='OS Version' isRequired>
119-
<ConditionalTooltip
120-
position='top-start'
121-
content='OS Version cannot be changed after creation'
122-
show={!!isEdit}
123-
setDisabled
124-
>
125-
<Dropdown
126-
onSelect={(_, val) => {
127-
setTemplateRequest((prev) => ({ ...prev, version: val as string }));
128-
setVersionOpen(false);
129-
}}
130-
toggle={(toggleRef) => (
119+
<Dropdown
120+
onSelect={(_, val) => {
121+
setTemplateRequest((prev) => ({ ...prev, version: val as string }));
122+
setVersionOpen(false);
123+
}}
124+
toggle={(toggleRef) => (
125+
<ConditionalTooltip
126+
position='top-start'
127+
content='OS Version cannot be changed after creation'
128+
show={!!isEdit}
129+
setDisabled
130+
>
131131
<MenuToggle
132132
ref={toggleRef}
133133
className={classes.fullWidth}
@@ -140,27 +140,27 @@ export default function DefineContentStep() {
140140
>
141141
{versionDisplay(templateRequest?.version)}
142142
</MenuToggle>
143-
)}
144-
onOpenChange={(isOpen) => setVersionOpen(isOpen)}
145-
isOpen={versionOpen}
146-
>
147-
<DropdownList>
148-
{distribution_versions
149-
.filter(({ label }) => ['8', '9'].includes(label))
150-
.map(({ label, name }) => (
151-
<DropdownItem
152-
key={label}
153-
value={label}
154-
isSelected={label === templateRequest?.version}
155-
component='button'
156-
data-ouia-component-id={`filter_${label}`}
157-
>
158-
{name}
159-
</DropdownItem>
160-
))}
161-
</DropdownList>
162-
</Dropdown>
163-
</ConditionalTooltip>
143+
</ConditionalTooltip>
144+
)}
145+
onOpenChange={(isOpen) => setVersionOpen(isOpen)}
146+
isOpen={versionOpen}
147+
>
148+
<DropdownList>
149+
{distribution_versions
150+
.filter(({ label }) => ['8', '9'].includes(label))
151+
.map(({ label, name }) => (
152+
<DropdownItem
153+
key={label}
154+
value={label}
155+
isSelected={label === templateRequest?.version}
156+
component='button'
157+
data-ouia-component-id={`filter_${label}`}
158+
>
159+
{name}
160+
</DropdownItem>
161+
))}
162+
</DropdownList>
163+
</Dropdown>
164164
</FormGroup>
165165
<ExpandableSection
166166
toggleText='What does it mean?'

‎src/Pages/Templates/TemplatesTable/components/TemplateFilters.test.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ it('Select a filter of each type and ensure chips are present ContentListFilters
7373
expect(versionSelector).toBeInTheDocument();
7474
await userEvent.click(versionSelector);
7575

76-
const versionItem = getByRole('option', { name: 'el7' }) as Element;
76+
const versionItem = getByRole('menuitem', { name: 'el7' }) as Element;
7777
expect(versionItem).toBeInTheDocument();
7878
await userEvent.click(versionItem);
7979

‎src/Pages/Templates/TemplatesTable/components/TemplateFilters.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -165,7 +165,7 @@ const Filters = ({ isLoading, setFilterData, filterData }: Props) => {
165165
isDisabled={isLoading}
166166
isExpanded={isActionOpen}
167167
>
168-
Filter by version
168+
{selectedVersion || 'Filter by version'}
169169
</MenuToggle>
170170
)}
171171
onOpenChange={(isOpen) => setActionOpen(isOpen)}
@@ -203,7 +203,7 @@ const Filters = ({ isLoading, setFilterData, filterData }: Props) => {
203203
isDisabled={isLoading}
204204
isExpanded={isActionOpen}
205205
>
206-
Filter by architecture
206+
{selectedArch || 'Filter by architecture'}
207207
</MenuToggle>
208208
)}
209209
onOpenChange={(isOpen) => setActionOpen(isOpen)}

0 commit comments

Comments
 (0)