wire - topic e2e test

assets/components/SidebarFolder.jsx

@@ -6,7 +6,7 @@ export function SidebarFolder({folder, children}) {
 
     return (
         <div className={`collapsible-box collapsible-box--active-within ${open ? 'collapsible-box--open' : 'collapsible-box--closed'}`}>
-            <div className="collapsible-box__header" onClick={() => setOpen(!open)} role='button'>
+            <div className="collapsible-box__header" onClick={() => setOpen(!open)} role='button' data-test-id="toggle-box-button">
                 <h4 className="collapsible-box__header-title">{folder.name}</h4>
                 <div className="collapsible-box__header-caret">
                     <i className="icon--arrow-start"></i>
@@ -24,4 +24,4 @@ export function SidebarFolder({folder, children}) {
 SidebarFolder.propTypes = {
     folder: PropTypes.object,
     children: PropTypes.node,
-};
+};

assets/search/components/SearchBar.tsx

@@ -78,7 +78,7 @@ class SearchBar extends React.Component<any, any> {
                                     <path clipRule="evenodd" d="m9 18c4.9706 0 9-4.0294 9-9 0-4.97056-4.0294-9-9-9-4.97056 0-9 4.02944-9 9 0 4.9706 4.02944 9 9 9zm4.9884-12.58679-3.571 3.57514 3.5826 3.58675-1.4126 1.4143-3.58252-3.5868-3.59233 3.5965-1.41255-1.4142 3.59234-3.59655-3.54174-3.54592 1.41254-1.41422 3.54174 3.54593 3.57092-3.57515z" fill="var(--color-text)" fillRule="evenodd" opacity="1"/>
                                 </svg>
                             </button>
-                            <button className='search__button-submit' type='submit' aria-label={gettext('Search')}>
+                            <button className='search__button-submit' type='submit' aria-label={gettext('Search')} data-test-id="search-submit-button">
                                 <i className="icon--search"></i>
                             </button>
                         </div>

assets/search/components/TopicFolder.tsx

@@ -72,7 +72,8 @@ export function TopicFolder({
         <div
             key={folder._id}
             className="simple-card__group"
-            data-test-id={`folder-card--${folder.name}`}
+            data-test-id="folder-card"
+            data-test-value={folder.name}
             ref={setNodeRef}
         >
             {editing ? (
@@ -95,12 +96,15 @@ export function TopicFolder({
                         <button
                             type="button"
                             className="icon-button icon-button--tertiary"
+                            data-test-id="collapse"
                             title={gettext('Close')}
                             onClick={() => setOpened(false)}
                         ><i className="icon--minus"></i></button>
                     ) : (
                         <button
-                            type="button" className="icon-button icon-button--tertiary"
+                            type="button"
+                            className="icon-button icon-button--tertiary"
+                            data-test-id="expand"
                             title={gettext('Open')}
                             onClick={() => setOpened(true)}
                             disabled={topics.length === 0}
@@ -121,7 +125,9 @@ export function TopicFolder({
                             }}
                             ref={buttonRef}
                             className="icon-button icon-button--tertiary"
-                            aria-label={gettext('Folder Actions')}>
+                            aria-label={gettext('Folder Actions')}
+                            data-test-id="menu"
+                        >
                             <i className='icon--more'></i>
                         </button>
                         {

assets/search/components/TopicFolderActions.tsx

@@ -47,6 +47,8 @@ export function TopicFolderActions({folder, toggleFolderPopover, folderPopover,
                                 toggle(e);
                                 action.callback();
                             }}
+                            data-test-id="action-folder"
+                            data-test-value={action.name}
                         >
                             <i className={'icon--' + action.icon} />
                             {action.name}

assets/search/components/TopicFolderEditor.jsx

@@ -35,6 +35,7 @@ export function TopicFolderEditor ({folder, onSave, onCancel, error}) {
                         type="button"
                         className="icon-button icon-button--secondary icon-button--bordered icon-button--small"
                         aria-label={gettext('Cancel')}
+                        data-test-id="create-folder--cancel-btn"
                         title={gettext('Cancel')}
                         onClick={() => onCancel()}
                     >

assets/search/components/TopicItem.tsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 export function TopicItem({topic, isActive, onClick, newItems}: any) {
     return (
-        <li className="topic-list__item">
+        <li className="topic-list__item" data-test-id="topic-list-item" data-test-value={topic.label}>
             <a className={`topic-list__item-link ${isActive ? 'topic-list__item-link--active' : ''}`}
                 aria-selected={isActive} href=""
                 onClick={(event) => onClick(event, topic)}

assets/user-profile/components/UserProfileApp.tsx

@@ -132,7 +132,7 @@ class UserProfileApp extends React.Component<any, any> {
                             <h5 className="profile__profile-content-title">
                                 {links.find((link: any) => link.active).label}
                             </h5>
-                            <button className="profile__profile-content-close" aria-label={gettext('Close')} role="button" onClick={this.hideModal}>
+                            <button className="profile__profile-content-close" aria-label={gettext('Close')} role="button" onClick={this.hideModal} data-test-id="profile-page-close">
                                 <i className="icon--close-thin" />
                             </button>
                         </section>