|
1 | 1 | import {tokenItemToString, TokenizedText} from './TokenizedText.js' |
| 2 | +import {LinksContext, Link} from '../contexts/LinksContext.js' |
2 | 3 | import {unstyled} from '../../../../public/node/output.js' |
3 | 4 | import {render} from '../../testing/ui.js' |
4 | | -import {describe, expect, test} from 'vitest' |
| 5 | +import {describe, expect, test, vi} from 'vitest' |
| 6 | +import supportsHyperlinks from 'supports-hyperlinks' |
5 | 7 |
|
6 | | -import React from 'react' |
| 8 | +import React, {FunctionComponent, useRef} from 'react' |
| 9 | + |
| 10 | +vi.mock('supports-hyperlinks') |
| 11 | + |
| 12 | +// Matches the on-the-wire OSC 8 sequence emitted by `ansiEscapes.link`, |
| 13 | +// which is what `<Link>` ultimately renders when the terminal supports |
| 14 | +// hyperlinks. Format: `ESC ] 8 ; ; URL BEL TEXT ESC ] 8 ; ; BEL`. |
| 15 | +function asOsc8Link(url: string, label?: string) { |
| 16 | + return `\u001b]8;;${url}\u0007${label ?? url}\u001b]8;;\u0007` |
| 17 | +} |
| 18 | + |
| 19 | +// Mirrors the LinksContext that <Banner> sets up at runtime, without pulling |
| 20 | +// the whole Banner border into these tests. |
| 21 | +const WithLinksContext: FunctionComponent<{children: React.ReactNode}> = ({children}) => { |
| 22 | + const links = useRef<Record<string, Link>>({}) |
| 23 | + return ( |
| 24 | + <LinksContext.Provider |
| 25 | + value={{ |
| 26 | + links, |
| 27 | + addLink: (label, url) => { |
| 28 | + const newId = (Object.keys(links.current).length + 1).toString() |
| 29 | + links.current = {...links.current, [newId]: {label, url}} |
| 30 | + return newId |
| 31 | + }, |
| 32 | + }} |
| 33 | + > |
| 34 | + {children} |
| 35 | + </LinksContext.Provider> |
| 36 | + ) |
| 37 | +} |
7 | 38 |
|
8 | 39 | describe('TokenizedText', async () => { |
9 | 40 | test('renders arrays of items separated by spaces', async () => { |
@@ -57,6 +88,148 @@ describe('TokenizedText', async () => { |
57 | 88 | `) |
58 | 89 | }) |
59 | 90 |
|
| 91 | + describe('markdown-link parsing in plain strings', async () => { |
| 92 | + test('renders strings without a markdown link unchanged', async () => { |
| 93 | + vi.mocked(supportsHyperlinks).stdout = false |
| 94 | + |
| 95 | + const {lastFrame} = render( |
| 96 | + <WithLinksContext> |
| 97 | + <TokenizedText item="no link here, just text" /> |
| 98 | + </WithLinksContext>, |
| 99 | + ) |
| 100 | + |
| 101 | + expect(lastFrame()).toBe('no link here, just text') |
| 102 | + }) |
| 103 | + |
| 104 | + test('does not linkify a bare URL — callers must opt in via `[label](url)` or `<url>`', async () => { |
| 105 | + vi.mocked(supportsHyperlinks).stdout = true |
| 106 | + const url = 'https://example.com/docs' |
| 107 | + |
| 108 | + const {lastFrame} = render( |
| 109 | + <WithLinksContext> |
| 110 | + <TokenizedText item={`visit ${url} now`} /> |
| 111 | + </WithLinksContext>, |
| 112 | + ) |
| 113 | + |
| 114 | + expect(lastFrame()).toBe(`visit ${url} now`) |
| 115 | + expect(lastFrame()).not.toContain(']8;;') |
| 116 | + }) |
| 117 | + |
| 118 | + test('replaces an opt-in `[label](url)` with the label and a `[N]` footnote anchor when the terminal does not support hyperlinks', async () => { |
| 119 | + vi.mocked(supportsHyperlinks).stdout = false |
| 120 | + const url = 'https://shopify.dev/docs/apps/build/sales-channels/channel-config-extension#specification-properties' |
| 121 | + |
| 122 | + const {lastFrame} = render( |
| 123 | + <WithLinksContext> |
| 124 | + <TokenizedText item={`Reference: [See specification requirements](${url})`} /> |
| 125 | + </WithLinksContext>, |
| 126 | + ) |
| 127 | + |
| 128 | + expect(lastFrame()).toBe('Reference: See specification requirements [1]') |
| 129 | + expect(lastFrame()).not.toContain(url) |
| 130 | + }) |
| 131 | + |
| 132 | + test('wraps the label of a `[label](url)` in OSC 8 escapes when the terminal supports hyperlinks', async () => { |
| 133 | + vi.mocked(supportsHyperlinks).stdout = true |
| 134 | + const url = 'https://example.com/docs' |
| 135 | + |
| 136 | + const {lastFrame} = render( |
| 137 | + <WithLinksContext> |
| 138 | + <TokenizedText item={`Reference: [docs page](${url})`} /> |
| 139 | + </WithLinksContext>, |
| 140 | + ) |
| 141 | + |
| 142 | + expect(lastFrame()).toContain(asOsc8Link(url, 'docs page')) |
| 143 | + }) |
| 144 | + |
| 145 | + test('renders a label-less `<url>` autolink as a `[N]` anchor and registers the URL in the footnote table', async () => { |
| 146 | + vi.mocked(supportsHyperlinks).stdout = false |
| 147 | + const url = 'https://shopify.dev/docs' |
| 148 | + |
| 149 | + const {lastFrame} = render( |
| 150 | + <WithLinksContext> |
| 151 | + <TokenizedText item={`See specification requirements: <${url}>`} /> |
| 152 | + </WithLinksContext>, |
| 153 | + ) |
| 154 | + |
| 155 | + expect(lastFrame()).toBe('See specification requirements: [1]') |
| 156 | + expect(lastFrame()).not.toContain(url) |
| 157 | + }) |
| 158 | + |
| 159 | + test('parses multiple opt-in links in the same string', async () => { |
| 160 | + vi.mocked(supportsHyperlinks).stdout = false |
| 161 | + const first = 'https://example.com/a' |
| 162 | + const second = 'https://example.com/b' |
| 163 | + |
| 164 | + const {lastFrame} = render( |
| 165 | + <WithLinksContext> |
| 166 | + <TokenizedText item={`see [a](${first}) and <${second}>`} /> |
| 167 | + </WithLinksContext>, |
| 168 | + ) |
| 169 | + |
| 170 | + expect(lastFrame()).toBe('see a [1] and [2]') |
| 171 | + }) |
| 172 | + |
| 173 | + test('parses back-to-back opt-in links separated only by whitespace', async () => { |
| 174 | + vi.mocked(supportsHyperlinks).stdout = false |
| 175 | + const first = 'https://example.com/a' |
| 176 | + const second = 'https://example.com/b' |
| 177 | + |
| 178 | + const {lastFrame} = render( |
| 179 | + <WithLinksContext> |
| 180 | + <TokenizedText item={`<${first}> <${second}>`} /> |
| 181 | + </WithLinksContext>, |
| 182 | + ) |
| 183 | + |
| 184 | + expect(lastFrame()).toBe('[1] [2]') |
| 185 | + }) |
| 186 | + |
| 187 | + test('does not parse markdown links that omit the http(s) scheme', async () => { |
| 188 | + vi.mocked(supportsHyperlinks).stdout = true |
| 189 | + |
| 190 | + const {lastFrame} = render( |
| 191 | + <WithLinksContext> |
| 192 | + <TokenizedText item="see [the section](#anchor) for more" /> |
| 193 | + </WithLinksContext>, |
| 194 | + ) |
| 195 | + |
| 196 | + expect(lastFrame()).toBe('see [the section](#anchor) for more') |
| 197 | + expect(lastFrame()).not.toContain(']8;;') |
| 198 | + }) |
| 199 | + |
| 200 | + test('does not parse opt-in markdown when no LinksContext is present (e.g. outside a Banner)', async () => { |
| 201 | + vi.mocked(supportsHyperlinks).stdout = true |
| 202 | + const url = 'https://example.com/docs' |
| 203 | + |
| 204 | + const {lastFrame} = render(<TokenizedText item={`see [docs](${url}) now`} />) |
| 205 | + |
| 206 | + expect(lastFrame()).toBe(`see [docs](${url}) now`) |
| 207 | + expect(lastFrame()).not.toContain(']8;;') |
| 208 | + }) |
| 209 | + |
| 210 | + test('echoing back a user-supplied URL inside an error message is left as plain text', async () => { |
| 211 | + // Regression: an earlier auto-detection approach would turn the |
| 212 | + // user's bad `--tunnel-url` value into a clickable OSC-8 link, |
| 213 | + // which is misleading. With opt-in markdown the bare URL stays |
| 214 | + // as-is and only the doc reference — which the server marks up — |
| 215 | + // becomes clickable. |
| 216 | + vi.mocked(supportsHyperlinks).stdout = true |
| 217 | + const tunnelUrl = 'https://wrong' |
| 218 | + const docUrl = 'https://shopify.dev/docs/tunnels' |
| 219 | + |
| 220 | + const {lastFrame} = render( |
| 221 | + <WithLinksContext> |
| 222 | + <TokenizedText item={`Invalid tunnel URL: ${tunnelUrl}. See [tunnel docs](${docUrl}).`} /> |
| 223 | + </WithLinksContext>, |
| 224 | + ) |
| 225 | + |
| 226 | + expect(lastFrame()).toContain(`Invalid tunnel URL: ${tunnelUrl}.`) |
| 227 | + expect(lastFrame()).toContain(asOsc8Link(docUrl, 'tunnel docs')) |
| 228 | + // The user-supplied URL must not be wrapped in an OSC 8 escape. |
| 229 | + expect(lastFrame()).not.toContain(`\u001b]8;;${tunnelUrl}`) |
| 230 | + }) |
| 231 | + }) |
| 232 | + |
60 | 233 | describe('tokenItemToString', async () => { |
61 | 234 | test("doesn't add a space before char", async () => { |
62 | 235 | expect(tokenItemToString(['Run', {char: '!'}])).toBe('Run!') |
|
0 commit comments