diff --git a/apps/docs-e2e/src/docs.spec.ts b/apps/docs-e2e/src/docs.spec.ts index 4198cc8a..7af56550 100644 --- 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 index 6cbc90c9..137461ac 100644 --- 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 index 1b26995d..f5808507 100644 --- 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: , + items: [ + { text: 'Linktree', icon: , url: 'https://linktr.ee/cuhacking_', + }, + ], + }, ], }