tests: back to top test resolved

Author: CodeWithEmad

components/BackToTop.tsx

@@ -36,6 +36,7 @@ export const BackToTop = () => {
 
   return (
     <button
+      id='back-to-top'
       onClick={scrollToTop}
       className={`fixed right-4 bottom-4 z-50 rounded-full bg-blue-500 p-2 text-white shadow-lg ${
         isVisible ? 'animate-fade-in opacity-100 hover:cursor-pointer' : 'animate-fade-out opacity-0'

tests/general.spec.ts

@@ -20,9 +20,17 @@ test.describe('General Tests', () => {
 
   test('Back to top button functionality', async ({ page }) => {
     // Initially button should not be visible
-    const backToTopButton = page.getByRole('button', { name: 'Back to top' })
+    const backToTopButton = page.locator('#back-to-top')
     await expect(backToTopButton).not.toBeVisible()
 
+    // Click on the category containers to add enough content to scroll
+    // class category-container
+    const categoryContainers = page.locator('.category-container')
+    const containerCount = await categoryContainers.count()
+    for (let i = 0; i < containerCount; i++) {
+      await categoryContainers.nth(i).click()
+    }
+
     // Scroll down to make the button appear
     await page.evaluate(() => {
       window.scrollTo(0, 1000)