Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/lukebennett88/luke-ui. luke-ui.pages.dev
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112import { Code } from '@luke-ui/react/code';import { Text } from '@luke-ui/react/text';import { test, expect } from 'vite-plus/test';import { render, visualAppearances } from '../test-utils/render.js';import { captureVisual, captureVisualAppearance, Stack } from '../test-utils/visual.js';
const LONG_CONTENT = 'one two three four five six seven eight nine ten eleven twelve thirteen fourteen fifteen';
function getCodeElement(container: HTMLElement): HTMLElement { const target = container.querySelector('code'); if (!(target instanceof HTMLElement)) throw new Error('Expected a Code element.'); return target;}
// Line clamp needs the text to wrap to produce more than one line, so the rendered box height is// the contract here: there is no DOM/ARIA assertion that can distinguish a wrapped, clamped block// from a single-line one.test('lineClamp of 2 wraps the content and clamps it to two lines', async () => { const { container } = render( <div style={{ inlineSize: '8rem' }}> <Code lineClamp={2}>{LONG_CONTENT}</Code> </div>, ); const element = getCodeElement(container); const singleLineHeight = Number.parseFloat(getComputedStyle(element).lineHeight); const { height } = element.getBoundingClientRect();
expect(height).toBeGreaterThan(singleLineHeight * 1.5); // At this width the content wants about seven lines, so an unclamped box would be far taller. // The bound sits above two padded lines and below three, and `scrollHeight` confirms there is // still overflowing content for the clamp to cut. expect(height).toBeLessThan(singleLineHeight * 3); expect(element.scrollHeight).toBeGreaterThan(height);});
// `Text` emits `textWrap` after `lineClamp`, so `balance`/`pretty` would otherwise let a// single-line clamp wrap. Every single-line clamp value is paired with every wrapping value.for (const lineClamp of [true, 1] as const) { for (const textWrap of ['balance', 'pretty'] as const) { test(`lineClamp of ${String(lineClamp)} stays on one line with textWrap ${textWrap}`, async () => { const { container } = render( <div style={{ inlineSize: '8rem' }}> <Code lineClamp={lineClamp} textWrap={textWrap}> {LONG_CONTENT} </Code> </div>, ); const element = getCodeElement(container); const singleLineHeight = Number.parseFloat(getComputedStyle(element).lineHeight);
expect(element.getBoundingClientRect().height).toBeLessThanOrEqual(singleLineHeight * 1.5); }); }}
test('textWrap still wraps when no single-line clamp is set', async () => { const { container } = render( <div style={{ inlineSize: '8rem' }}> <Code textWrap="balance">{LONG_CONTENT}</Code> </div>, ); const element = getCodeElement(container); const singleLineHeight = Number.parseFloat(getComputedStyle(element).lineHeight);
expect(element.getBoundingClientRect().height).toBeGreaterThan(singleLineHeight * 1.5);});
test('default Code stays on one line with the same long content', async () => { const { container } = render( <div style={{ inlineSize: '8rem' }}> <Code>{LONG_CONTENT}</Code> </div>, ); const element = getCodeElement(container); const singleLineHeight = Number.parseFloat(getComputedStyle(element).lineHeight);
expect(element.getBoundingClientRect().height).toBeLessThanOrEqual(singleLineHeight * 1.5);});
test('kitchen sink', { tags: ['visual'] }, async () => { for (const appearance of visualAppearances) { const { locator } = render( <Stack width="20rem"> <Text> Run <Code>npm install</Code> to install dependencies. </Text> <Text typography="lead"> The <Code>useTheme</Code> hook tracks the active theme. </Text> <Text typography="caption"> Set <Code>data-color-mode</Code> on the root element. </Text> </Stack>, { appearance }, );
await captureVisualAppearance(locator, 'code/kitchen-sink', appearance); }});
test('long content states', { tags: ['visual'] }, async () => { const { locator } = render( <Stack width="10rem"> <Code lineClamp>{LONG_CONTENT}</Code> <Code lineClamp={3}>{LONG_CONTENT}</Code> </Stack>, );
await captureVisual(locator, 'code/long-content');});