diff --git a/test/browser/adoption.spec.ts b/test/browser/adoption.spec.ts index 7ffd7ca..e982a56 100644 --- a/test/browser/adoption.spec.ts +++ b/test/browser/adoption.spec.ts @@ -30,7 +30,9 @@ test('homepage directs JSON experiments to playground and exposes legal and comm await page.goto('/') await expect(page.getByLabel('JSON input', { exact: true })).toHaveCount(0) await expect( - page.getByRole('link', { name: '★ Star React Data Inspector on GitHub ↗' }), + page + .getByRole('region', { name: 'Useful in your project?', exact: true }) + .getByRole('link', { name: 'Star on GitHub', exact: true }), ).toHaveAttribute( 'href', 'https://github.com/NIPE-Solutions/react-data-inspector', diff --git a/test/browser/website.spec.ts b/test/browser/website.spec.ts index e6cff26..edbd224 100644 --- a/test/browser/website.spec.ts +++ b/test/browser/website.spec.ts @@ -1,6 +1,65 @@ import { test, expect } from '@playwright/test' import AxeBuilder from '@axe-core/playwright' +for (const width of [1280, 390, 320]) { + test(`homepage support links remain usable at ${width}px`, async ({ + page, + browserName, + }) => { + await page.setViewportSize({ width, height: 900 }) + await page.goto('/') + const support = page.getByRole('region', { + name: 'Useful in your project?', + }) + await expect(support).toBeVisible() + expect( + await support.evaluate((node) => node.previousElementSibling?.id), + ).toBe('in-products') + const star = support.getByRole('link', { + name: 'Star on GitHub', + exact: true, + }) + const explore = support.getByRole('link', { + name: 'Explore NIPE Open Source', + exact: true, + }) + await expect(star).toHaveAttribute( + 'href', + 'https://github.com/NIPE-Solutions/react-data-inspector', + ) + await expect(explore).toHaveAttribute( + 'href', + 'https://opensource.nipesolutions.com', + ) + for (const link of [star, explore]) { + const bounds = await link.boundingBox() + expect(bounds!.height).toBeGreaterThanOrEqual(44) + expect(bounds!.width).toBeGreaterThanOrEqual(44) + expect(bounds!.x).toBeGreaterThanOrEqual(0) + expect(bounds!.x + bounds!.width).toBeLessThanOrEqual(width) + expect(await link.evaluate((node) => node.tagName)).toBe('A') + } + await star.focus() + // macOS Safari navigates native links with Option+Tab. + const tab = + browserName === 'webkit' && process.platform === 'darwin' + ? 'Alt+Tab' + : 'Tab' + await page.keyboard.press(tab) + await expect(explore).toBeFocused() + await page.keyboard.press(`Shift+${tab}`) + await expect(star).toBeFocused() + expect( + await star.evaluate((node) => getComputedStyle(node).outlineStyle), + ).not.toBe('none') + if (process.env.CTA_SCREENSHOT_DIR) { + await support.screenshot({ + path: `${process.env.CTA_SCREENSHOT_DIR}/${test.info().project.name}-${width}.png`, + }) + } + }) +} + test('homepage proofs use actual values and safe inspection', async ({ page, }) => { @@ -95,6 +154,9 @@ test('static pages hydrate without errors and documentation links work', async ( ]) { await page.goto(route) await expect(page.getByRole('heading', { level: 1 })).toBeVisible() + await expect( + page.getByRole('region', { name: 'Useful in your project?' }), + ).toHaveCount(route === '/' ? 1 : 0) if (route === '/') await page.getByRole('button', { name: 'Classic', exact: true }).click() } diff --git a/website/App.tsx b/website/App.tsx index 402d38b..4353915 100644 --- a/website/App.tsx +++ b/website/App.tsx @@ -76,6 +76,36 @@ export function App() { +
+

Useful in your project?

+
+

+ If React Data Inspector helps you make sense of your data, a + GitHub star helps other developers discover it. Explore more tools + from NIPE Open Source for your next project. +

+ +

+ Have a real-world edge case?{' '} + + Bring it to the issue tracker. + +

+
+
-
-

- Like where this is going? -
- Help it grow. -

-
-

- React Data Inspector is free, open source, and we're only getting - started. Give it a star and help more developers find it. -

- - ★ Star React Data Inspector on GitHub ↗ - -

- Have a real-world edge case?{' '} - - Bring it to the issue tracker. - -

-
-

A focused primitive. diff --git a/website/story.css b/website/story.css index d675d4a..ff7510f 100644 --- a/website/story.css +++ b/website/story.css @@ -820,10 +820,17 @@ html { .community p { max-width: 60ch; } -.star-link { - display: inline-block; - font-weight: 600; - margin-block: 12px; +.support-links { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 12px 24px; +} +.support-links a { + display: inline-flex; + align-items: center; + min-height: 44px; + padding: 10px 18px; } .doc-article > p, .doc-article > ul,