From 58e004dab640afc50fce43646feb2d6e016f640f Mon Sep 17 00:00:00 2001 From: SoonIter Date: Wed, 8 Jan 2025 18:03:08 +0800 Subject: [PATCH 1/5] chore: update --- e2e/fixtures/hide-nav-bar/doc/index.mdx | 8 ++ e2e/fixtures/hide-nav-bar/package.json | 16 ++++ .../hide-nav-bar/rspress-hide-auto.config.ts | 29 +++++++ e2e/fixtures/hide-nav-bar/rspress.config.ts | 29 +++++++ e2e/fixtures/hide-nav-bar/tsconfig.json | 1 + e2e/tests/hide-nav-bar.test.ts | 80 +++++++++++++++++++ e2e/tests/nav-link-item-with-hash.test.ts | 32 -------- e2e/utils/runCommands.ts | 21 +++-- .../src/components/Nav/index.tsx | 3 + 9 files changed, 179 insertions(+), 40 deletions(-) create mode 100644 e2e/fixtures/hide-nav-bar/doc/index.mdx create mode 100644 e2e/fixtures/hide-nav-bar/package.json create mode 100644 e2e/fixtures/hide-nav-bar/rspress-hide-auto.config.ts create mode 100644 e2e/fixtures/hide-nav-bar/rspress.config.ts create mode 100644 e2e/fixtures/hide-nav-bar/tsconfig.json create mode 100644 e2e/tests/hide-nav-bar.test.ts diff --git a/e2e/fixtures/hide-nav-bar/doc/index.mdx b/e2e/fixtures/hide-nav-bar/doc/index.mdx new file mode 100644 index 000000000..a0f618181 --- /dev/null +++ b/e2e/fixtures/hide-nav-bar/doc/index.mdx @@ -0,0 +1,8 @@ +--- +pageType: custom +--- + +
contentA
+ +
A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF A LOT OF CONTENT A LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF A LOT OF CONTENT A LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENT
+
contentC
diff --git a/e2e/fixtures/hide-nav-bar/package.json b/e2e/fixtures/hide-nav-bar/package.json new file mode 100644 index 000000000..f2d8e3046 --- /dev/null +++ b/e2e/fixtures/hide-nav-bar/package.json @@ -0,0 +1,16 @@ +{ + "name": "@rspress-fixture/rspress-nav-with-hash", + "version": "1.0.0", + "private": true, + "scripts": { + "dev": "rspress dev", + "build": "rspress build", + "preview": "rspress preview" + }, + "dependencies": { + "rspress": "workspace:*" + }, + "devDependencies": { + "@types/node": "^18.11.17" + } +} diff --git a/e2e/fixtures/hide-nav-bar/rspress-hide-auto.config.ts b/e2e/fixtures/hide-nav-bar/rspress-hide-auto.config.ts new file mode 100644 index 000000000..463e4db25 --- /dev/null +++ b/e2e/fixtures/hide-nav-bar/rspress-hide-auto.config.ts @@ -0,0 +1,29 @@ +import * as path from 'node:path'; +import { defineConfig } from 'rspress/config'; + +export default defineConfig({ + root: path.join(__dirname, 'doc'), + route: { + cleanUrls: true, + }, + themeConfig: { + hideNavbar: 'auto', + nav: [ + { + text: 'PageA', + link: '#pageA', + position: 'right', + }, + { + text: 'PageB', + link: '#pageB', + position: 'right', + }, + { + text: 'PageC', + link: '#pageC', + position: 'right', + }, + ], + }, +}); diff --git a/e2e/fixtures/hide-nav-bar/rspress.config.ts b/e2e/fixtures/hide-nav-bar/rspress.config.ts new file mode 100644 index 000000000..896fe369f --- /dev/null +++ b/e2e/fixtures/hide-nav-bar/rspress.config.ts @@ -0,0 +1,29 @@ +import * as path from 'node:path'; +import { defineConfig } from 'rspress/config'; + +export default defineConfig({ + root: path.join(__dirname, 'doc'), + route: { + cleanUrls: true, + }, + themeConfig: { + hideNavbar: 'never', + nav: [ + { + text: 'PageA', + link: '#pageA', + position: 'right', + }, + { + text: 'PageB', + link: '#pageB', + position: 'right', + }, + { + text: 'PageC', + link: '#pageC', + position: 'right', + }, + ], + }, +}); diff --git a/e2e/fixtures/hide-nav-bar/tsconfig.json b/e2e/fixtures/hide-nav-bar/tsconfig.json new file mode 100644 index 000000000..0967ef424 --- /dev/null +++ b/e2e/fixtures/hide-nav-bar/tsconfig.json @@ -0,0 +1 @@ +{} diff --git a/e2e/tests/hide-nav-bar.test.ts b/e2e/tests/hide-nav-bar.test.ts new file mode 100644 index 000000000..27bf73e57 --- /dev/null +++ b/e2e/tests/hide-nav-bar.test.ts @@ -0,0 +1,80 @@ +import { expect, test } from '@playwright/test'; +import path from 'node:path'; +import { getPort, killProcess, runDevCommand } from '../utils/runCommands'; + +const fixtureDir = path.resolve(__dirname, '../fixtures'); + +test.describe('basic test', async () => { + let appPort; + let app; + async function launchApp(configFile: string) { + const appDir = path.join(fixtureDir, 'hide-nav-bar'); + appPort = await getPort(); + app = await runDevCommand(appDir, appPort, configFile); + } + + test.afterAll(async () => { + if (app) { + await killProcess(app); + } + }); + + test('Navigate with an hash as link', async ({ page }) => { + await launchApp('./rspress.config.ts'); + await page.goto(`http://localhost:${appPort}/`); + + await page.locator('.rspress-nav-menu a').first().click(); + expect(page.url()).toContain('index#pageA'); + + await page.locator('.rspress-nav-menu a').nth(1).click(); + expect(page.url()).toContain('index#pageB'); + }); + + test('Close the hamburger menu when clicking on an item in mobile view', async ({ + page, + }) => { + await launchApp('./rspress.config.ts'); + await page.setViewportSize({ width: 375, height: 812 }); + + await page.goto(`http://localhost:${appPort}/`); + + await page.locator('.rspress-mobile-hamburger').click(); + await expect(page.locator('.rspress-nav-screen')).toBeVisible(); + + await page.getByRole('link', { name: 'PageC' }).click(); + await expect(page.locator('.rspress-nav-screen')).not.toBeVisible(); + }); + + test('Navbar should be visible on mobile when we scroll down with hideNavbar to never', async ({ + page, + }) => { + await launchApp('./rspress.config.ts'); + await page.setViewportSize({ width: 375, height: 812 }); + + await page.goto(`http://localhost:${appPort}/`); + + await page.evaluate(() => { + window.scrollBy(0, 800); + }); + + // Allow to check if the rspress-nav is in the viewport + // toBeVisible() doesn't work here because it check the visibility and the display property + const isInViewport = await page.evaluate(sel => { + const element = document.querySelector(sel); + + if (!element) return false; + + const rect = element.getBoundingClientRect(); + return ( + rect.top >= 0 && + rect.left >= 0 && + rect.bottom <= + (window.innerHeight || document.documentElement.clientHeight) && + rect.right <= + (window.innerWidth || document.documentElement.clientWidth) + ); + }, '.rspress-nav'); + + expect(isInViewport).toBeTruthy(); + }); +}); diff --git a/e2e/tests/nav-link-item-with-hash.test.ts b/e2e/tests/nav-link-item-with-hash.test.ts index 6e8416765..e51fbee93 100644 --- a/e2e/tests/nav-link-item-with-hash.test.ts +++ b/e2e/tests/nav-link-item-with-hash.test.ts @@ -42,36 +42,4 @@ test.describe('basic test', async () => { await page.getByRole('link', { name: 'PageC' }).click(); await expect(page.locator('.rspress-nav-screen')).not.toBeVisible(); }); - - test('Navbar should be visible on mobile when we scroll down with hideNavbar to never', async ({ - page, - }) => { - await page.setViewportSize({ width: 375, height: 812 }); - - await page.goto(`http://localhost:${appPort}/`); - - await page.evaluate(() => { - window.scrollBy(0, 800); - }); - - // Allow to check if the rspress-nav is in the viewport - // toBeVisible() doesn't work here because it check the visibility and the display property - const isInViewport = await page.evaluate(sel => { - const element = document.querySelector(sel); - - if (!element) return false; - - const rect = element.getBoundingClientRect(); - return ( - rect.top >= 0 && - rect.left >= 0 && - rect.bottom <= - (window.innerHeight || document.documentElement.clientHeight) && - rect.right <= - (window.innerWidth || document.documentElement.clientWidth) - ); - }, '.rspress-nav'); - - expect(isInViewport).toBeTruthy(); - }); }); diff --git a/e2e/utils/runCommands.ts b/e2e/utils/runCommands.ts index 1baff9be6..28d380089 100644 --- a/e2e/utils/runCommands.ts +++ b/e2e/utils/runCommands.ts @@ -9,18 +9,19 @@ export interface CommandOptions { env: Record; } -export type Command = 'dev' | 'build' | 'preview'; +export type Command = 'dev' | `dev -- -c ${string}` | 'build' | 'preview'; export function sleep(ms: number) { return new Promise(resolve => setTimeout(resolve, ms)); } -export async function runCommand( +export async function runNpmScript( commandName: Command, options: CommandOptions, ) { + const command = commandName.split(' ')[0]; return new Promise((resolve, reject) => { - const instance = spawn('npm', ['run', commandName], { + const instance = spawn('npm', ['run', ...commandName.split(' ')], { cwd: options.appDir, env: { TEST: '1', @@ -45,7 +46,7 @@ export async function runCommand( build: /Pages rendered/, }; - if (bootupMarkers[commandName].test(message)) { + if (bootupMarkers[command].test(message)) { if (!didResolve) { didResolve = true; resolve(instance); @@ -80,8 +81,12 @@ export async function runCommand( }); } -export async function runDevCommand(appDir: string, port: number) { - return runCommand('dev', { +export async function runDevCommand( + appDir: string, + port: number, + configFile?: string, +) { + return runNpmScript(configFile ? `dev -- -c ${configFile}` : 'dev', { appDir, env: { PORT: port.toString(), @@ -90,14 +95,14 @@ export async function runDevCommand(appDir: string, port: number) { } export async function runBuildCommand(appDir: string) { - return runCommand('build', { + return runNpmScript('build', { appDir, env: {}, }); } export async function runPreviewCommand(appDir: string, port: number) { - return runCommand('preview', { + return runNpmScript('preview', { appDir, env: { PORT: port.toString(), diff --git a/packages/theme-default/src/components/Nav/index.tsx b/packages/theme-default/src/components/Nav/index.tsx index 0109fe8c9..de63a6559 100644 --- a/packages/theme-default/src/components/Nav/index.tsx +++ b/packages/theme-default/src/components/Nav/index.tsx @@ -128,6 +128,9 @@ export function Nav(props: NavProps) { const computeNavPosition = () => { // On doc page we have the menu bar that is already sticky + if (!isMobile) { + return 'sticky'; + } if (siteData.themeConfig.hideNavbar === 'never' && page.pageType !== 'doc') return 'sticky'; From 170ce88119de3f4acac3a824efbaab47d346c027 Mon Sep 17 00:00:00 2001 From: SoonIter Date: Wed, 8 Jan 2025 18:05:35 +0800 Subject: [PATCH 2/5] chore: update --- e2e/fixtures/hide-nav-bar/doc/index.mdx | 5 +---- e2e/tests/hide-nav-bar.test.ts | 27 ------------------------- 2 files changed, 1 insertion(+), 31 deletions(-) diff --git a/e2e/fixtures/hide-nav-bar/doc/index.mdx b/e2e/fixtures/hide-nav-bar/doc/index.mdx index a0f618181..dd43b62f7 100644 --- a/e2e/fixtures/hide-nav-bar/doc/index.mdx +++ b/e2e/fixtures/hide-nav-bar/doc/index.mdx @@ -2,7 +2,4 @@ pageType: custom --- -
contentA
- -
A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF A LOT OF CONTENT A LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF A LOT OF CONTENT A LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENT
-
contentC
+A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF A LOT OF CONTENT A LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF A LOT OF CONTENT A LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENT diff --git a/e2e/tests/hide-nav-bar.test.ts b/e2e/tests/hide-nav-bar.test.ts index 27bf73e57..1e0e2789d 100644 --- a/e2e/tests/hide-nav-bar.test.ts +++ b/e2e/tests/hide-nav-bar.test.ts @@ -18,33 +18,6 @@ test.describe('basic test', async () => { await killProcess(app); } }); - - test('Navigate with an hash as link', async ({ page }) => { - await launchApp('./rspress.config.ts'); - await page.goto(`http://localhost:${appPort}/`); - - await page.locator('.rspress-nav-menu a').first().click(); - expect(page.url()).toContain('index#pageA'); - - await page.locator('.rspress-nav-menu a').nth(1).click(); - expect(page.url()).toContain('index#pageB'); - }); - - test('Close the hamburger menu when clicking on an item in mobile view', async ({ - page, - }) => { - await launchApp('./rspress.config.ts'); - await page.setViewportSize({ width: 375, height: 812 }); - - await page.goto(`http://localhost:${appPort}/`); - - await page.locator('.rspress-mobile-hamburger').click(); - await expect(page.locator('.rspress-nav-screen')).toBeVisible(); - - await page.getByRole('link', { name: 'PageC' }).click(); - await expect(page.locator('.rspress-nav-screen')).not.toBeVisible(); - }); - test('Navbar should be visible on mobile when we scroll down with hideNavbar to never', async ({ page, }) => { From 0e47f4c974d2be6d83c7cae0c7a68ccd89ed88ec Mon Sep 17 00:00:00 2001 From: SoonIter Date: Wed, 8 Jan 2025 18:10:51 +0800 Subject: [PATCH 3/5] chore: update --- e2e/fixtures/hide-nav-bar/package.json | 2 +- pnpm-lock.yaml | 20 +++++++++++++++++++- 2 files changed, 20 insertions(+), 2 deletions(-) diff --git a/e2e/fixtures/hide-nav-bar/package.json b/e2e/fixtures/hide-nav-bar/package.json index f2d8e3046..12e0ccc16 100644 --- a/e2e/fixtures/hide-nav-bar/package.json +++ b/e2e/fixtures/hide-nav-bar/package.json @@ -1,5 +1,5 @@ { - "name": "@rspress-fixture/rspress-nav-with-hash", + "name": "@rspress-fixture/rspress-hide-nav-bar", "version": "1.0.0", "private": true, "scripts": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index fa1f1c0f9..ad9af15fd 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -239,6 +239,16 @@ importers: specifier: ^18.11.17 version: 18.11.17 + e2e/fixtures/hide-nav-bar: + dependencies: + rspress: + specifier: workspace:* + version: link:../../../packages/cli + devDependencies: + '@types/node': + specifier: ^18.11.17 + version: 18.11.17 + e2e/fixtures/i18n: dependencies: rspress: @@ -8301,6 +8311,14 @@ snapshots: optionalDependencies: vite: 5.4.0(@types/node@18.11.17)(sass-embedded@1.82.0)(terser@5.31.6) + '@vitest/mocker@2.1.8(vite@5.4.0(@types/node@22.10.2)(sass-embedded@1.82.0)(terser@5.31.6))': + dependencies: + '@vitest/spy': 2.1.8 + estree-walker: 3.0.3 + magic-string: 0.30.14 + optionalDependencies: + vite: 5.4.0(@types/node@22.10.2)(sass-embedded@1.82.0)(terser@5.31.6) + '@vitest/pretty-format@2.1.8': dependencies: tinyrainbow: 1.2.0 @@ -12133,7 +12151,7 @@ snapshots: vitest@2.1.8(@types/node@22.10.2)(sass-embedded@1.82.0)(terser@5.31.6): dependencies: '@vitest/expect': 2.1.8 - '@vitest/mocker': 2.1.8(vite@5.4.0(@types/node@18.11.17)(sass-embedded@1.82.0)(terser@5.31.6)) + '@vitest/mocker': 2.1.8(vite@5.4.0(@types/node@22.10.2)(sass-embedded@1.82.0)(terser@5.31.6)) '@vitest/pretty-format': 2.1.8 '@vitest/runner': 2.1.8 '@vitest/snapshot': 2.1.8 From 1ec8d6693e30d57fcfd74ebabb6581806708e834 Mon Sep 17 00:00:00 2001 From: SoonIter Date: Thu, 9 Jan 2025 12:13:49 +0800 Subject: [PATCH 4/5] test(e2e): add e2e test --- e2e/fixtures/hide-nav-bar/doc/index.mdx | 96 ++++++++++++++++++- .../hide-nav-bar/rspress-hide-auto.config.ts | 18 +--- e2e/fixtures/hide-nav-bar/rspress.config.ts | 18 +--- e2e/tests/hide-nav-bar.test.ts | 57 ++++++----- 4 files changed, 130 insertions(+), 59 deletions(-) diff --git a/e2e/fixtures/hide-nav-bar/doc/index.mdx b/e2e/fixtures/hide-nav-bar/doc/index.mdx index dd43b62f7..e7e195e70 100644 --- a/e2e/fixtures/hide-nav-bar/doc/index.mdx +++ b/e2e/fixtures/hide-nav-bar/doc/index.mdx @@ -2,4 +2,98 @@ pageType: custom --- -A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF A LOT OF CONTENT A LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF CONTENT A LOT OF A LOT OF CONTENT A LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENTA LOT OF CONTENT +A LOT OF CONTENT + +A LOT OF CONTENT + +A LOT OF CONTENT + +A LOT OF CONTENT + +A LOT OF CONTENT + +A LOT OF CONTENT + +A LOT OF CONTENT + +A LOT OF CONTENT + +A LOT OF CONTENT + +A LOT OF CONTENT + +A LOT OF CONTENT + +A LOT OF CONTENT + +A LOT OF CONTENT + +A LOT OF CONTENT + +A LOT OF CONTENT + +A LOT OF CONTENT + +A LOT OF CONTENT + +A LOT OF CONTENT + +A LOT OF CONTENT + +A LOT OF CONTENT + +A LOT OF CONTENT + +A LOT OF CONTENT + +A LOT OF CONTENT + +A LOT OF CONTENT + +A LOT OF CONTENT + +A LOT OF CONTENT + +A LOT OF CONTENT + +A LOT OF CONTENT + +A LOT OF CONTENT + +A LOT OF CONTENT + +A LOT OF CONTENT + +A LOT OF CONTENT + +A LOT OF CONTENT + +A LOT OF CONTENT + +A LOT OF CONTENT + +A LOT OF CONTENT + +A LOT OF CONTENT + +A LOT OF CONTENT + +A LOT OF CONTENT + +A LOT OF CONTENT + +A LOT OF CONTENT + +A LOT OF CONTENT + +A LOT OF CONTENT + +A LOT OF CONTENT + +A LOT OF CONTENT + +A LOT OF CONTENT + +A LOT OF CONTENT + +A LOT OF CONTENT diff --git a/e2e/fixtures/hide-nav-bar/rspress-hide-auto.config.ts b/e2e/fixtures/hide-nav-bar/rspress-hide-auto.config.ts index 463e4db25..627dec4a2 100644 --- a/e2e/fixtures/hide-nav-bar/rspress-hide-auto.config.ts +++ b/e2e/fixtures/hide-nav-bar/rspress-hide-auto.config.ts @@ -8,22 +8,6 @@ export default defineConfig({ }, themeConfig: { hideNavbar: 'auto', - nav: [ - { - text: 'PageA', - link: '#pageA', - position: 'right', - }, - { - text: 'PageB', - link: '#pageB', - position: 'right', - }, - { - text: 'PageC', - link: '#pageC', - position: 'right', - }, - ], + nav: [], }, }); diff --git a/e2e/fixtures/hide-nav-bar/rspress.config.ts b/e2e/fixtures/hide-nav-bar/rspress.config.ts index 896fe369f..70c9732cb 100644 --- a/e2e/fixtures/hide-nav-bar/rspress.config.ts +++ b/e2e/fixtures/hide-nav-bar/rspress.config.ts @@ -8,22 +8,6 @@ export default defineConfig({ }, themeConfig: { hideNavbar: 'never', - nav: [ - { - text: 'PageA', - link: '#pageA', - position: 'right', - }, - { - text: 'PageB', - link: '#pageB', - position: 'right', - }, - { - text: 'PageC', - link: '#pageC', - position: 'right', - }, - ], + nav: [], }, }); diff --git a/e2e/tests/hide-nav-bar.test.ts b/e2e/tests/hide-nav-bar.test.ts index 1e0e2789d..8682876fc 100644 --- a/e2e/tests/hide-nav-bar.test.ts +++ b/e2e/tests/hide-nav-bar.test.ts @@ -1,8 +1,15 @@ -import { expect, test } from '@playwright/test'; +import { expect, type Page, test } from '@playwright/test'; import path from 'node:path'; import { getPort, killProcess, runDevCommand } from '../utils/runCommands'; const fixtureDir = path.resolve(__dirname, '../fixtures'); +async function isNavBarVisible(page: Page): Promise { + const nav = await page.$('.rspress-nav'); + const className: string = await nav?.evaluate(el => el.className); + console.log(className); + + return !className.includes('hidden'); +} test.describe('basic test', async () => { let appPort; @@ -18,6 +25,23 @@ test.describe('basic test', async () => { await killProcess(app); } }); + + test('hideNavBar: "auto" should work', async ({ page }) => { + await launchApp('./rspress-hide-auto.config.ts'); + await page.goto(`http://localhost:${appPort}/`); + + // scroll down + await page.mouse.wheel(0, 100); + await page.waitForTimeout(100); + await page.mouse.wheel(0, 100); + await page.waitForTimeout(100); + await page.mouse.wheel(0, 100); + await page.waitForTimeout(100); + + const isVisible = await isNavBarVisible(page); + expect(isVisible).toBeFalsy(); + }); + test('Navbar should be visible on mobile when we scroll down with hideNavbar to never', async ({ page, }) => { @@ -26,28 +50,13 @@ test.describe('basic test', async () => { await page.goto(`http://localhost:${appPort}/`); - await page.evaluate(() => { - window.scrollBy(0, 800); - }); - - // Allow to check if the rspress-nav is in the viewport - // toBeVisible() doesn't work here because it check the visibility and the display property - const isInViewport = await page.evaluate(sel => { - const element = document.querySelector(sel); - - if (!element) return false; - - const rect = element.getBoundingClientRect(); - return ( - rect.top >= 0 && - rect.left >= 0 && - rect.bottom <= - (window.innerHeight || document.documentElement.clientHeight) && - rect.right <= - (window.innerWidth || document.documentElement.clientWidth) - ); - }, '.rspress-nav'); - - expect(isInViewport).toBeTruthy(); + // scroll down + await page.mouse.wheel(0, 100); + await page.waitForTimeout(100); + await page.mouse.wheel(0, 100); + await page.waitForTimeout(100); + await page.mouse.wheel(0, 100); + + expect(await isNavBarVisible(page)).toBeTruthy(); }); }); From f40b6d1d2e545449fde4035340301c69560cc349 Mon Sep 17 00:00:00 2001 From: SoonIter Date: Thu, 9 Jan 2025 14:35:04 +0800 Subject: [PATCH 5/5] chore: scroll down --- e2e/tests/hide-nav-bar.test.ts | 29 +++++++++++------------------ 1 file changed, 11 insertions(+), 18 deletions(-) diff --git a/e2e/tests/hide-nav-bar.test.ts b/e2e/tests/hide-nav-bar.test.ts index 8682876fc..ba04edef4 100644 --- a/e2e/tests/hide-nav-bar.test.ts +++ b/e2e/tests/hide-nav-bar.test.ts @@ -6,11 +6,18 @@ const fixtureDir = path.resolve(__dirname, '../fixtures'); async function isNavBarVisible(page: Page): Promise { const nav = await page.$('.rspress-nav'); const className: string = await nav?.evaluate(el => el.className); - console.log(className); return !className.includes('hidden'); } +async function scrollDown(page: Page) { + // Simulate the scrolling of people + await page.mouse.wheel(0, 100); + await page.waitForTimeout(100); + await page.mouse.wheel(0, 100); + await page.waitForTimeout(100); +} + test.describe('basic test', async () => { let appPort; let app; @@ -30,16 +37,8 @@ test.describe('basic test', async () => { await launchApp('./rspress-hide-auto.config.ts'); await page.goto(`http://localhost:${appPort}/`); - // scroll down - await page.mouse.wheel(0, 100); - await page.waitForTimeout(100); - await page.mouse.wheel(0, 100); - await page.waitForTimeout(100); - await page.mouse.wheel(0, 100); - await page.waitForTimeout(100); - - const isVisible = await isNavBarVisible(page); - expect(isVisible).toBeFalsy(); + await scrollDown(page); + expect(await isNavBarVisible(page)).toBeFalsy(); }); test('Navbar should be visible on mobile when we scroll down with hideNavbar to never', async ({ @@ -50,13 +49,7 @@ test.describe('basic test', async () => { await page.goto(`http://localhost:${appPort}/`); - // scroll down - await page.mouse.wheel(0, 100); - await page.waitForTimeout(100); - await page.mouse.wheel(0, 100); - await page.waitForTimeout(100); - await page.mouse.wheel(0, 100); - + await scrollDown(page); expect(await isNavBarVisible(page)).toBeTruthy(); }); });