improve VRT for tags page

packages/app/src/components/Sidebar/SidebarNav.tsx

@@ -15,7 +15,7 @@ type PrimaryItemProps = {
 
 const PrimaryItem: FC<PrimaryItemProps> = (props: PrimaryItemProps) => {
   const {
-    contents, iconName, onItemSelected,
+    contents, label, iconName, onItemSelected,
   } = props;
 
   const { data: currentContents, mutate } = useCurrentSidebarContents();
@@ -31,9 +31,12 @@ const PrimaryItem: FC<PrimaryItemProps> = (props: PrimaryItemProps) => {
     scheduleToPutUserUISettings({ currentSidebarContents: contents });
   }, [contents, mutate, onItemSelected]);
 
+  const labelForTestId = label.toLowerCase().replace(' ', '-');
+
   return (
     <button
       type="button"
+      data-testid={`grw-sidebar-nav-primary-${labelForTestId}`}
       className={`d-block btn btn-primary ${isSelected ? 'active' : ''}`}
       onClick={itemSelectedHandler}
     >

packages/app/src/components/Sidebar/Tag.tsx

@@ -11,7 +11,7 @@ const Tag: FC = () => {
   }, [isOnReload]);
 
   return (
-    <>
+    <div data-testid="grw-sidebar-content-tags">
       <div className="grw-sidebar-content-header p-3 d-flex">
         <h3 className="mb-0">{t('Tags')}</h3>
         <button
@@ -36,7 +36,7 @@ const Tag: FC = () => {
       <div className="grw-container-convertible mb-5 pb-5">
         <TagsList isOnReload={isOnReload} />
       </div>
-    </>
+    </div>
   );
 
 };

packages/app/test/cypress/integration/2-basic-features/access-to-special-page.spec.ts

@@ -12,6 +12,8 @@ context('Access to special pages', () => {
     cy.getCookie('connect.sid').then(cookie => {
       connectSid = cookie?.value;
     });
+    // collapse sidebar
+    cy.collapseSidebar(true);
   });
 
   beforeEach(() => {
@@ -28,6 +30,13 @@ context('Access to special pages', () => {
 
   it('/tags is successfully loaded', () => {
     cy.visit('/tags');
+
+    // open sidebar
+    cy.collapseSidebar(false);
+    // select tags
+    cy.getByTestid('grw-sidebar-nav-primary-tags').click();
+    cy.getByTestid('grw-sidebar-content-tags').should('be.visible');
+
     cy.getByTestid('tags-page').should('be.visible');
     cy.screenshot(`${ssPrefix}-tags`, { capture: 'viewport' });
   });