diff --git a/config/cspell.config.json b/config/cspell.config.json index ad425b45..2ce33a73 100644 --- a/config/cspell.config.json +++ b/config/cspell.config.json @@ -19,6 +19,7 @@ "mturley", "nocolor", "ouia", + "ouiaid", "paramiko", "patternfly", "pbrun", @@ -32,9 +33,11 @@ "runas", "scanjob", "srcset", + "sslv", "tabindex", "tbody", "thead", + "tlsv", "touchspin", "vals", "valuetext" diff --git a/src/components/simpleDropdown/__tests__/__snapshots__/simpleDropdown.test.tsx.snap b/src/components/simpleDropdown/__tests__/__snapshots__/simpleDropdown.test.tsx.snap index 023efbd4..aa747441 100644 --- a/src/components/simpleDropdown/__tests__/__snapshots__/simpleDropdown.test.tsx.snap +++ b/src/components/simpleDropdown/__tests__/__snapshots__/simpleDropdown.test.tsx.snap @@ -37,7 +37,7 @@ exports[`SimpleDropdown should display items and allow selecting after toggle is
  • `; +exports[`SimpleDropdown should have a ouia id: button_ouiaid 1`] = ` + +`; + +exports[`SimpleDropdown should have dropdown items with ouia id: expanded_ouiaid 1`] = ` + + +
    +
    + +
    +
    +     +`; + exports[`SimpleDropdown should render a basic component: basic 1`] = ` { expect(component.querySelector('button > span')).toMatchSnapshot('label'); }); + it('should have a ouia id', async () => { + const props = { + label: 'lorem ipsum', + menuToggleOuiaId: 'lorem_ipsum' + }; + const component = await shallowComponent(); + expect(component.querySelector('button')).toMatchSnapshot('button_ouiaid'); + }); + + it('should have dropdown items with ouia id', async () => { + const user = userEvent.setup(); + + const props = { + label: 'lorem ipsum', + menuToggleOuiaId: 'lorem_ipsum', + dropdownItems: [ + { item: 'dolor', ouiaId: 'ouia-dolor' }, + { item: 'sit', ouiaId: 'ouia-sit' } + ] + }; + + const { asFragment } = render(); + + await user.click(screen.getByText(props.label)); + expect(asFragment()).toMatchSnapshot('expanded_ouiaid'); + }); + it('should display items and allow selecting after toggle is clicked', async () => { const user = userEvent.setup(); const onMockSelect = jest.fn(); @@ -28,7 +55,7 @@ describe('SimpleDropdown', () => { const props = { label: 'Lorem ipsum', onSelect: onMockSelect, - dropdownItems: ['dolor', 'sit'] + dropdownItems: [{ item: 'dolor' }, { item: 'sit' }] }; const { asFragment } = render(); diff --git a/src/components/simpleDropdown/simpleDropdown.tsx b/src/components/simpleDropdown/simpleDropdown.tsx index add58137..82f4744c 100644 --- a/src/components/simpleDropdown/simpleDropdown.tsx +++ b/src/components/simpleDropdown/simpleDropdown.tsx @@ -15,9 +15,15 @@ import { type MenuToggleProps } from '@patternfly/react-core'; +interface SimpleDropdownItemProps { + item: string; + ouiaId?: number | string; +} + interface SimpleDropdownProps { label: string; - dropdownItems?: string[]; + menuToggleOuiaId?: number | string; + dropdownItems?: SimpleDropdownItemProps[]; ariaLabel?: string; onSelect?: (item: string) => void; variant?: MenuToggleProps['variant']; @@ -26,6 +32,7 @@ interface SimpleDropdownProps { const SimpleDropdown: React.FC = ({ label, + menuToggleOuiaId, dropdownItems, ariaLabel = 'Dropdown menu', onSelect = Function.prototype, @@ -50,6 +57,7 @@ const SimpleDropdown: React.FC = ({ variant={variant} aria-label={ariaLabel} isDisabled={!dropdownItems || dropdownItems.length === 0} + data-ouia-component-id={menuToggleOuiaId} > {label} @@ -57,8 +65,8 @@ const SimpleDropdown: React.FC = ({ > {Array.isArray(dropdownItems) && - dropdownItems.map(item => ( - onSelect(item)}> + dropdownItems.map(({ item, ouiaId }) => ( + onSelect(item)} ouiaId={ouiaId}> {item} ))} diff --git a/src/components/typeAheadCheckboxes/typeaheadCheckboxes.tsx b/src/components/typeAheadCheckboxes/typeaheadCheckboxes.tsx index 503dce9d..5d7651bc 100644 --- a/src/components/typeAheadCheckboxes/typeaheadCheckboxes.tsx +++ b/src/components/typeAheadCheckboxes/typeaheadCheckboxes.tsx @@ -24,13 +24,15 @@ interface TypeaheadCheckboxesProps { options: { value: string; label: string }[]; selectedOptions?: string[]; placeholder?: string; + menuToggleOuiaId?: number | string; } const TypeaheadCheckboxes: React.FC = ({ onChange = Function.prototype, options, selectedOptions = [], - placeholder = '0 items selected' + placeholder = '0 items selected', + menuToggleOuiaId }) => { const [isOpen, setIsOpen] = useState(false); const [inputValue, setInputValue] = useState(''); @@ -156,7 +158,14 @@ const TypeaheadCheckboxes: React.FC = ({ }, [selected, placeholder]); const toggle = (toggleRef: React.Ref) => ( - + = ({ role="combobox" isExpanded={isOpen} aria-controls="select-multi-typeahead-checkbox-listbox" + data-ouia-component-id="credentials_list_input" /> {selected.length > 0 && ( @@ -182,6 +192,7 @@ const TypeaheadCheckboxes: React.FC = ({ textInputRef?.current?.focus(); }} aria-label="Clear input value" + ouiaId="credentials_list_toggle_button" > diff --git a/src/components/viewLayout/__tests__/__snapshots__/viewLayoutToolbar.test.tsx.snap b/src/components/viewLayout/__tests__/__snapshots__/viewLayoutToolbar.test.tsx.snap index f99ab542..310d0abb 100644 --- a/src/components/viewLayout/__tests__/__snapshots__/viewLayoutToolbar.test.tsx.snap +++ b/src/components/viewLayout/__tests__/__snapshots__/viewLayoutToolbar.test.tsx.snap @@ -107,7 +107,6 @@ exports[`ViewToolbar should render a basic component: basic 1`] = ` isPlain={true} onOpenChange={[Function]} onSelect={[Function]} - ouiaId="user_dropdown" popperProps={ { "position": "right", @@ -116,6 +115,7 @@ exports[`ViewToolbar should render a basic component: basic 1`] = ` toggle={[Function]} > @@ -136,10 +136,10 @@ exports[`ViewToolbar should render a basic component: basic 1`] = ` isOpen={false} onOpenChange={[Function]} onSelect={[Function]} - ouiaId="user_dropdown" toggle={[Function]} > diff --git a/src/components/viewLayout/viewLayoutToolbar.tsx b/src/components/viewLayout/viewLayoutToolbar.tsx index 0cd1a3aa..f306e55d 100644 --- a/src/components/viewLayout/viewLayoutToolbar.tsx +++ b/src/components/viewLayout/viewLayoutToolbar.tsx @@ -152,13 +152,13 @@ const AppToolbar: React.FC = ({ useLogout = useLogoutApi, useUs onClick={() => setKebabDropdownOpen(prev => !prev)} isExpanded={kebabDropdownOpen} style={{ width: 'auto' }} + data-ouia-component-id="user_dropdown_button" > )} - ouiaId="user_dropdown" > - + Logout @@ -169,7 +169,6 @@ const AppToolbar: React.FC = ({ useLogout = useLogoutApi, useUs onSelect={onUserDropdownSelect} onOpenChange={(isOpen: boolean) => setUserDropdownOpen(isOpen)} isOpen={userDropdownOpen} - ouiaId="user_dropdown" toggle={toggleRef => ( = ({ useLogout = useLogoutApi, useUs variant="plain" onClick={() => setUserDropdownOpen(prev => !prev)} isExpanded={userDropdownOpen} + data-ouia-component-id="user_dropdown_button" >
    @@ -185,7 +185,7 @@ const AppToolbar: React.FC = ({ useLogout = useLogoutApi, useUs )} > - + Logout diff --git a/src/views/credentials/__tests__/__snapshots__/addCredentialModal.test.tsx.snap b/src/views/credentials/__tests__/__snapshots__/addCredentialModal.test.tsx.snap index 9f958521..1df6b1fa 100644 --- a/src/views/credentials/__tests__/__snapshots__/addCredentialModal.test.tsx.snap +++ b/src/views/credentials/__tests__/__snapshots__/addCredentialModal.test.tsx.snap @@ -106,6 +106,7 @@ exports[`CredentialFormFields should render a basic component: basic 1`] = ` isRequired={true} name="name" onChange={[Function]} + ouiaId="cred_name" placeholder="Enter a name for the credential" type="text" /> @@ -117,12 +118,19 @@ exports[`CredentialFormFields should render a basic component: basic 1`] = ` @@ -138,6 +146,7 @@ exports[`CredentialFormFields should render a basic component: basic 1`] = ` isRequired={true} name="username" onChange={[Function]} + ouiaId="username" placeholder="Enter username" /> @@ -151,6 +160,7 @@ exports[`CredentialFormFields should render a basic component: basic 1`] = ` isRequired={true} name="password" onChange={[Function]} + ouiaId="password" placeholder="Enter password" type="password" /> @@ -164,19 +174,47 @@ exports[`CredentialFormFields should render a basic component: basic 1`] = ` @@ -189,6 +227,7 @@ exports[`CredentialFormFields should render a basic component: basic 1`] = ` id="become_user" name="become_user" onChange={[Function]} + ouiaId="become_user" placeholder="Enter become user (optional)" type="text" /> @@ -201,6 +240,7 @@ exports[`CredentialFormFields should render a basic component: basic 1`] = ` id="become_password" name="become_password" onChange={[Function]} + ouiaId="become_password" placeholder="Enter become password (optional)" type="password" /> @@ -221,6 +261,7 @@ exports[`CredentialFormFields should render ansible form appropriately: ansible, isRequired={true} name="name" onChange={[Function]} + ouiaId="cred_name" placeholder="Enter a name for the credential" type="text" /> @@ -236,6 +277,7 @@ exports[`CredentialFormFields should render ansible form appropriately: ansible, isRequired={true} name="username" onChange={[Function]} + ouiaId="username" placeholder="Enter username" /> @@ -249,6 +291,7 @@ exports[`CredentialFormFields should render ansible form appropriately: ansible, isRequired={true} name="password" onChange={[Function]} + ouiaId="password" placeholder="Enter password" type="password" /> @@ -269,6 +312,7 @@ exports[`CredentialFormFields should render satellite form appropriately: satell isRequired={true} name="name" onChange={[Function]} + ouiaId="cred_name" placeholder="Enter a name for the credential" type="text" /> @@ -284,6 +328,7 @@ exports[`CredentialFormFields should render satellite form appropriately: satell isRequired={true} name="username" onChange={[Function]} + ouiaId="username" placeholder="Enter username" /> @@ -297,6 +342,7 @@ exports[`CredentialFormFields should render satellite form appropriately: satell isRequired={true} name="password" onChange={[Function]} + ouiaId="password" placeholder="Enter password" type="password" /> @@ -317,6 +363,7 @@ exports[`CredentialFormFields should render specific to authType for type networ isRequired={true} name="name" onChange={[Function]} + ouiaId="cred_name" placeholder="Enter a name for the credential" type="text" /> @@ -328,12 +375,19 @@ exports[`CredentialFormFields should render specific to authType for type networ @@ -349,6 +403,7 @@ exports[`CredentialFormFields should render specific to authType for type networ isRequired={true} name="username" onChange={[Function]} + ouiaId="username" placeholder="Enter username" /> @@ -358,6 +413,7 @@ exports[`CredentialFormFields should render specific to authType for type networ label="SSH Key" >