feat(ui/docs/header): add linktree dropdown

cuhacking · Nov 7, 2024 · 3e34740 · 3e34740
1 parent 4a80a9f
commit 3e34740
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 0 deletions.
diff --git a/apps/docs-e2e/src/docs.spec.ts b/apps/docs-e2e/src/docs.spec.ts
@@ -22,6 +22,7 @@ const CUHACKING_2025_PLATFORM_GITHUB_INDEX_PAGE_URL = `${GITHUB_BASE_URL}/2025/b
 const CUHACKING_2025_LANDING_PAGE_GITHUB_REPOSITORY_URL = `${GITHUB_BASE_URL}/landing-page`
 
 const CUHACKING_2025_LANDING_PAGE_URL = 'https://cuhacking.ca/'
+const CUHACKING_2025_LINKTREE_URL = 'https://linktr.ee/cuhacking_'
 
 /* ---------------- MOBILE + DESKTOP + TABLET ---------------- */
 test.describe(`Common MOBILE, TABLET and DESKTOP Layout Elements`, {
@@ -153,6 +154,16 @@ test.describe(`Common MOBILE and TABLET Menu Elements`, {
     await clickAndGoToPage(docsLayoutPage, docsLayoutPage.mobileHackerPortalProjectBoardLink, CUHACKING_2025_PLATFORM_GITHUB_PROJECT_BOARD_URL)
   })
 
+  test(`should have linktree button visible from linktree dropdown for mobile/tablet`, async ({ docsLayoutPage }) => {
+    await docsLayoutPage.linktreeDropdownButton.click()
+    await expect(docsLayoutPage.mobileLinktreeLink).toBeVisible()
+  })
+
+  test(`should take user to linktree when linktree button is clicked mobile/tablet`, async ({ docsLayoutPage }) => {
+    await docsLayoutPage.linktreeDropdownButton.click()
+    await clickAndGoToPage(docsLayoutPage, docsLayoutPage.mobileLinktreeLink, CUHACKING_2025_LINKTREE_URL)
+  })
+
   test(`should have github button visible from mobile/tablet menu`, async ({ docsLayoutPage }) => {
     await expect(docsLayoutPage.mobileGithubIcon).toBeVisible()
   })
@@ -255,6 +266,16 @@ test.describe('Unique DESKTOP Header Elements', {
     await clickAndGoToPage(docsLayoutPage, docsLayoutPage.hackerPortalProjectBoardLink, CUHACKING_2025_PLATFORM_GITHUB_PROJECT_BOARD_URL)
   })
 
+  test('should contain Linktree link inside Linktree Dropdown', async ({ docsLayoutPage }) => {
+    await docsLayoutPage.linktreeDropdownButton.click()
+    await expect(docsLayoutPage.linktreeLink).toBeVisible()
+  })
+
+  test('should take user to Linktree when Linktree link inside Linktree Dropdown is clicked', async ({ docsLayoutPage }) => {
+    await docsLayoutPage.linktreeDropdownButton.click()
+    await clickAndGoToPage(docsLayoutPage, docsLayoutPage.linktreeLink, CUHACKING_2025_LINKTREE_URL)
+  })
+
   test('should contain theme toggle in desktop header', async ({ docsLayoutPage }) => {
     await expect(docsLayoutPage.themeToggle).toBeVisible()
   })

diff --git a/apps/docs-e2e/src/pom.ts b/apps/docs-e2e/src/pom.ts
@@ -14,6 +14,8 @@ export class DocsLayout {
   readonly hackerPortalLink: Locator
   readonly hackerPortalSourceLink: Locator
   readonly hackerPortalProjectBoardLink: Locator
+  readonly linktreeDropdownButton: Locator
+  readonly linktreeLink: Locator
   readonly searchBar: Locator
   readonly themeToggle: Locator
   // TODO: add test for language toggle once it's implemented
@@ -34,6 +36,7 @@ export class DocsLayout {
   readonly mobileWebsiteSourceLink: Locator
   readonly mobileGithubIcon: Locator
   readonly mobileHackerPortalProjectBoardLink: Locator
+  readonly mobileLinktreeLink: Locator
 
   // Desktop Sidebar
   readonly sideBarToggle: Locator
@@ -63,6 +66,9 @@ export class DocsLayout {
     this.hackerPortalLink = page.getByRole('dialog').getByRole('link', { name: 'App' })
     this.hackerPortalSourceLink = page.getByRole('dialog').getByRole('link', { name: 'Source' })
     this.hackerPortalProjectBoardLink = page.getByRole('dialog').getByRole('link', { name: 'Project Board' })
+    this.linktreeDropdownButton = page.getByRole('button', { name: 'Linktree' })
+    this.linktreeLink = page.getByRole('dialog').getByRole('link', { name: 'Linktree' })
+
     this.searchBar = page.getByRole('button', { name: 'Search ⌘ K' })
     this.themeToggle = page.getByRole('button', { name: 'Toggle Theme' })
 
@@ -84,6 +90,7 @@ export class DocsLayout {
     this.mobileWebsiteSourceLink = page.getByRole('link', { name: 'Source (legacy)' })
     this.mobileGithubIcon = page.getByRole('link', { name: 'Github', exact: true })
     this.mobileHackerPortalProjectBoardLink = page.getByRole('link', { name: 'Project Board' })
+    this.mobileLinktreeLink = page.getByRole('link', { name: 'Linktree' })
 
     // Desktop Sidebar
     this.sideBarToggle = page.getByLabel('Collapse Sidebar')

diff --git a/apps/docs/src/app/(docs)/layout.config.tsx b/apps/docs/src/app/(docs)/layout.config.tsx
@@ -4,6 +4,7 @@ import {
   Github,
   Laptop as HackerPortalIcon,
   Bird as LandingPageIcon,
+  Trees as LinktreeIcon,
 } from 'lucide-react'
 import Image from 'next/image'
 import type { HomeLayoutProps } from 'fumadocs-ui/home-layout'
@@ -66,6 +67,15 @@ export const baseOptions: HomeLayoutProps = {
         },
       ],
     },
+    {
+      type: 'menu',
+      text: 'Linktree',
+      icon: <LinktreeIcon />,
+      items: [
+        { text: 'Linktree', icon: <LinktreeIcon />, url: 'https://linktr.ee/cuhacking_',
+        },
+      ],
+    },
   ],
 }