add data-testids to interactive elements

Author: pettinarip

src/components/Footer.tsx

@@ -323,6 +323,7 @@ const Footer = ({ lastDeployLocaleTimestamp }: FooterProps) => {
           variant="outline"
           isSecondary
           onClick={() => scrollIntoView("body")}
+          data-testid="footer-go-to-top"
         >
           <ChevronUp /> <Translation id="go-to-top" />
         </Button>

src/components/LanguagePicker/MobileCloseBar.tsx

@@ -13,7 +13,12 @@ export const MobileCloseBar = ({ handleClick }: MobileCloseBarProps) => {
 
   return (
     <div className="sticky top-0 flex justify-end bg-background md:hidden">
-      <Button className="self-end p-4" variant="ghost" onClick={handleClick}>
+      <Button
+        className="self-end p-4"
+        variant="ghost"
+        onClick={handleClick}
+        data-testid="mobile-language-picker-close"
+      >
         {t("close")}
       </Button>
     </div>

src/components/LanguagePicker/index.tsx

@@ -174,6 +174,7 @@ const LanguagePickerMenu = ({ languages, onClose, onSelect }) => {
 
       <CommandInput
         placeholder={t("page-languages-filter-placeholder")}
+        data-testid="language-filter-input"
         className="h-9"
         kbdShortcut="\"
       />
@@ -188,6 +189,7 @@ const LanguagePickerMenu = ({ languages, onClose, onSelect }) => {
               key={"item-" + displayInfo.localeOption}
               displayInfo={displayInfo}
               onSelect={onSelect}
+              data-testid={`language-option-${displayInfo.localeOption}`}
             />
           ))}
         </CommandGroup>

src/components/Nav/Mobile/HamburgerButton.tsx

@@ -31,6 +31,7 @@ const HamburgerButton = forwardRef<HTMLButtonElement, HamburgerProps>(
       <Button
         ref={ref}
         id={HAMBURGER_BUTTON_ID}
+        data-testid="mobile-menu-hamburger"
         aria-label={t("aria-toggle-menu-button")}
         className={cn("px-2 py-0 text-body", className)}
         variant="ghost"

src/components/Nav/Mobile/LvlAccordion.tsx

@@ -4,6 +4,7 @@ import * as AccordionPrimitive from "@radix-ui/react-accordion"
 
 import { cn } from "@/lib/utils/cn"
 import { trackCustomEvent } from "@/lib/utils/matomo"
+import { slugify } from "@/lib/utils/url"
 import { cleanPath } from "@/lib/utils/url"
 
 import { Button } from "../../ui/buttons/Button"
@@ -131,6 +132,7 @@ const LvlAccordion = ({
             <AccordionTrigger
               heading={`h${lvl + 1}` as "h2" | "h3" | "h4" | "h5"}
               className={cn("text-body", nestedAccordionSpacingMap[lvl])}
+              data-testid={`accordion-toggle-${slugify(label)}`}
               onClick={() => {
                 trackCustomEvent({
                   eventCategory: "Mobile navigation menu",

src/components/Nav/Mobile/MenuBody.tsx

@@ -3,6 +3,7 @@ import { useLocale } from "next-intl"
 
 import { cn } from "@/lib/utils/cn"
 import { trackCustomEvent } from "@/lib/utils/matomo"
+import { slugify } from "@/lib/utils/url"
 
 import { SECTION_LABELS } from "@/lib/constants"
 
@@ -46,6 +47,7 @@ const MenuBody = ({ linkSections, onToggle }: MenuBodyProps) => {
             >
               <AccordionTrigger
                 className="text-body"
+                data-testid={`menu-section-toggle-${slugify(label)}`}
                 onClick={() => {
                   trackCustomEvent({
                     eventCategory: "Mobile navigation menu",

src/components/Nav/Mobile/MenuFooter.tsx

@@ -29,6 +29,7 @@ const MenuFooter = ({
     <div className="grid w-full grid-cols-3 items-center justify-center">
       <FooterButton
         icon={Search}
+        data-testid="mobile-menu-search-button"
         onClick={() => {
           // Workaround to ensure the input for the search modal can have focus
           onToggle()
@@ -38,12 +39,20 @@ const MenuFooter = ({
         <FooterItemText>{t("search")}</FooterItemText>
       </FooterButton>
 
-      <FooterButton icon={ThemeIcon} onClick={toggleColorMode}>
+      <FooterButton
+        icon={ThemeIcon}
+        data-testid="mobile-menu-theme-toggle"
+        onClick={toggleColorMode}
+      >
         <FooterItemText>{t(themeLabelKey)}</FooterItemText>
       </FooterButton>
 
       <LanguagePicker dialog handleClose={onToggle}>
-        <FooterButton icon={Languages} name={MOBILE_LANGUAGE_BUTTON_NAME}>
+        <FooterButton
+          icon={Languages}
+          data-testid="mobile-menu-language-picker"
+          name={MOBILE_LANGUAGE_BUTTON_NAME}
+        >
           <FooterItemText>{t("languages")}</FooterItemText>
         </FooterButton>
       </LanguagePicker>

src/components/Nav/Mobile/MenuHeader.tsx

@@ -10,7 +10,9 @@ const MenuHeader = () => {
       <SheetTitle className="p-0 text-md uppercase text-body-medium">
         {t("site-title")}
       </SheetTitle>
-      <SheetClose className="w-fit text-md">{t("close")}</SheetClose>
+      <SheetClose className="w-fit text-md" data-testid="mobile-menu-close">
+        {t("close")}
+      </SheetClose>
     </div>
   )
 }

src/components/ui/swiper.tsx

@@ -108,9 +108,9 @@ const SwiperNavigation = React.forwardRef<
   React.HTMLAttributes<HTMLDivElement>
 >((props, ref) => (
   <SwiperNavContainer ref={ref} {...props}>
-    <SwiperPrevButton />
-    <SwiperPaginationDots />
-    <SwiperNextButton />
+    <SwiperPrevButton data-testid="swiper-prev-button" />
+    <SwiperPaginationDots data-testid="swiper-pagination-dots" />
+    <SwiperNextButton data-testid="swiper-next-button" />
   </SwiperNavContainer>
 ))
 SwiperNavigation.displayName = "SwiperNavigation"