diff --git a/code/frameworks/nextjs/src/export-mocks/link/index.tsx b/code/frameworks/nextjs/src/export-mocks/link/index.tsx index 56ef92af0438..0b0cfef2760d 100644 --- a/code/frameworks/nextjs/src/export-mocks/link/index.tsx +++ b/code/frameworks/nextjs/src/export-mocks/link/index.tsx @@ -64,3 +64,7 @@ MockLink.displayName = 'NextLink'; export default MockLink; export { MockLink as Link }; + +export const useLinkStatus = fn((): { pending: boolean } => ({ pending: false })).mockName( + 'next/link::useLinkStatus' +); diff --git a/code/frameworks/nextjs/template/stories/Link.stories.tsx b/code/frameworks/nextjs/template/stories/Link.stories.tsx index 23fd174dd010..17c8203980e6 100644 --- a/code/frameworks/nextjs/template/stories/Link.stories.tsx +++ b/code/frameworks/nextjs/template/stories/Link.stories.tsx @@ -1,8 +1,10 @@ import React from 'react'; import type { Meta, StoryObj } from '@storybook/nextjs'; +import { useLinkStatus as mockUseLinkStatus } from '@storybook/nextjs/link.mock'; -import Link from 'next/link'; +import Link, { useLinkStatus } from 'next/link'; +import { expect, within } from 'storybook/test'; import style from './Link.stories.module.css'; @@ -77,3 +79,33 @@ export const InAppDir: Story = { }, }, }; + +function LinkStatusComponent() { + const { pending } = useLinkStatus(); + return
{pending ? 'Pending' : 'Idle'}
; +} + +export const DefaultLinkStatus: Story = { + render: () => , + parameters: { + nextjs: { appDirectory: true }, + }, + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + await expect(canvas.getByText('Idle')).toBeInTheDocument(); + }, +}; + +export const PendingLinkStatus: Story = { + render: () => , + parameters: { + nextjs: { appDirectory: true }, + }, + beforeEach() { + mockUseLinkStatus.mockReturnValue({ pending: true }); + }, + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + await expect(canvas.getByText('Pending')).toBeInTheDocument(); + }, +};