From 94cc03710aa00ef4012d392c4756d77625f23e64 Mon Sep 17 00:00:00 2001 From: Uttej V S K Date: Thu, 10 Apr 2025 17:36:48 -0500 Subject: [PATCH 1/5] hero blueprints react --- .../src/snippet-tests/blueprints-hero.spec.ts | 51 +++++++++++++++++++ packages/sdks/snippets/react/src/main.tsx | 5 ++ .../react/src/routes/blueprints/Hero.tsx | 33 ++++++++++++ 3 files changed, 89 insertions(+) create mode 100644 packages/sdks-tests/src/snippet-tests/blueprints-hero.spec.ts create mode 100644 packages/sdks/snippets/react/src/routes/blueprints/Hero.tsx diff --git a/packages/sdks-tests/src/snippet-tests/blueprints-hero.spec.ts b/packages/sdks-tests/src/snippet-tests/blueprints-hero.spec.ts new file mode 100644 index 00000000000..9e7708b4472 --- /dev/null +++ b/packages/sdks-tests/src/snippet-tests/blueprints-hero.spec.ts @@ -0,0 +1,51 @@ +import { expect } from '@playwright/test'; +import { test } from '../helpers/index.js'; + +test.describe('Hero Section', () => { + test.beforeEach(async ({ page, packageName }) => { + test.skip( + [ + 'react-native-74', + 'react-native-76-fabric', + 'solid', + 'solid-start', + 'qwik-city', + 'react-sdk-next-pages', + 'remix', + 'hydrogen', + 'react-sdk-next-14-app', + 'react-sdk-next-15-app', + 'nextjs-sdk-next-app', + 'vue', + 'nuxt', + 'svelte', + 'sveltekit', + 'angular-16', + 'angular-16-ssr', + 'angular-19-ssr', + 'gen1-react', + 'gen1-remix', + 'gen1-next14-pages', + 'gen1-next15-app', + ].includes(packageName) + ); + await page.goto('/event'); + }); + + test('should display the hero section with title and call-to-action', async ({ page }) => { + await page.waitForLoadState('networkidle'); + + const heading = page.getByText('Find the best shoes in town'); + await expect(heading).toBeVisible(); + + const ctaButton = page.getByRole('button', { name: 'Buy now' }); + await expect(ctaButton).toBeVisible(); + await expect(ctaButton).toBeEnabled(); + }); + + test('should display hero image', async ({ page }) => { + const productImage = page.getByRole('presentation'); + await expect(productImage).toBeVisible(); + await expect(productImage).toHaveAttribute('src', /.+/); + }); +}); diff --git a/packages/sdks/snippets/react/src/main.tsx b/packages/sdks/snippets/react/src/main.tsx index d2a9af872b3..d122cbc4c8e 100644 --- a/packages/sdks/snippets/react/src/main.tsx +++ b/packages/sdks/snippets/react/src/main.tsx @@ -3,6 +3,7 @@ import ReactDOM from 'react-dom/client'; import { createBrowserRouter, RouterProvider } from 'react-router-dom'; import AnnouncementBar from './routes/AnnouncementBar.tsx'; import BlogArticle from './routes/blueprints/BlogArticle.tsx'; +import Hero from './routes/blueprints/Hero.tsx'; import ProductDetails from './routes/blueprints/ProductDetails.tsx'; import ProductEditorial from './routes/blueprints/ProductEditorial.tsx'; import AdvancedChildRoute from './routes/custom-components/advanced-child.tsx'; @@ -49,6 +50,10 @@ const router = createBrowserRouter([ path: '/products/:id', element: , }, + { + path: '/event', + element: , + }, { path: '/*', element: , diff --git a/packages/sdks/snippets/react/src/routes/blueprints/Hero.tsx b/packages/sdks/snippets/react/src/routes/blueprints/Hero.tsx new file mode 100644 index 00000000000..ad90d584bdc --- /dev/null +++ b/packages/sdks/snippets/react/src/routes/blueprints/Hero.tsx @@ -0,0 +1,33 @@ +import { BuilderContent, Content, fetchOneEntry } from '@builder.io/sdk-react'; +import { useEffect, useState } from 'react'; + +export default function ProductHero() { + const [productHero, setProductHero] = useState(null); + + useEffect(() => { + fetchOneEntry({ + model: 'hero', + apiKey: 'ee9f13b4981e489a9a1209887695ef2b', + userAttributes: { urlPath: window.location.pathname }, + }).then((data) => { + setProductHero(data); + }); + }, []); + + return ( + <> + {/* Your nav goes here */} + + {/* Render the Hero content if available */} + {productHero && ( + + )} + + {/* The rest of your page goes here */} + + ); +} From 65872e7c805f3c3bf882c62186fd60c2c8558858 Mon Sep 17 00:00:00 2001 From: Uttej V S K Date: Thu, 10 Apr 2025 17:46:51 -0500 Subject: [PATCH 2/5] change urlpath --- packages/sdks-tests/src/snippet-tests/blueprints-hero.spec.ts | 4 ++-- packages/sdks/snippets/react/src/main.tsx | 2 +- packages/sdks/snippets/react/src/routes/blueprints/Hero.tsx | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/sdks-tests/src/snippet-tests/blueprints-hero.spec.ts b/packages/sdks-tests/src/snippet-tests/blueprints-hero.spec.ts index 9e7708b4472..1c977679f3f 100644 --- a/packages/sdks-tests/src/snippet-tests/blueprints-hero.spec.ts +++ b/packages/sdks-tests/src/snippet-tests/blueprints-hero.spec.ts @@ -29,12 +29,12 @@ test.describe('Hero Section', () => { 'gen1-next15-app', ].includes(packageName) ); - await page.goto('/event'); + await page.goto('/marketing-event'); }); test('should display the hero section with title and call-to-action', async ({ page }) => { await page.waitForLoadState('networkidle'); - + const heading = page.getByText('Find the best shoes in town'); await expect(heading).toBeVisible(); diff --git a/packages/sdks/snippets/react/src/main.tsx b/packages/sdks/snippets/react/src/main.tsx index d122cbc4c8e..a72d41069be 100644 --- a/packages/sdks/snippets/react/src/main.tsx +++ b/packages/sdks/snippets/react/src/main.tsx @@ -51,7 +51,7 @@ const router = createBrowserRouter([ element: , }, { - path: '/event', + path: '/marketing-event', element: , }, { diff --git a/packages/sdks/snippets/react/src/routes/blueprints/Hero.tsx b/packages/sdks/snippets/react/src/routes/blueprints/Hero.tsx index ad90d584bdc..1d43f028544 100644 --- a/packages/sdks/snippets/react/src/routes/blueprints/Hero.tsx +++ b/packages/sdks/snippets/react/src/routes/blueprints/Hero.tsx @@ -6,7 +6,7 @@ export default function ProductHero() { useEffect(() => { fetchOneEntry({ - model: 'hero', + model: 'collection-hero', apiKey: 'ee9f13b4981e489a9a1209887695ef2b', userAttributes: { urlPath: window.location.pathname }, }).then((data) => { @@ -22,7 +22,7 @@ export default function ProductHero() { {productHero && ( )} From 710f3b546fc75cb40dfad9160239f59d5bf7ea65 Mon Sep 17 00:00:00 2001 From: Uttej V S K Date: Tue, 15 Apr 2025 10:30:04 -0500 Subject: [PATCH 3/5] variables for reusability --- .../react/src/routes/blueprints/Hero.tsx | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/packages/sdks/snippets/react/src/routes/blueprints/Hero.tsx b/packages/sdks/snippets/react/src/routes/blueprints/Hero.tsx index 1d43f028544..1bd100a6916 100644 --- a/packages/sdks/snippets/react/src/routes/blueprints/Hero.tsx +++ b/packages/sdks/snippets/react/src/routes/blueprints/Hero.tsx @@ -1,13 +1,16 @@ import { BuilderContent, Content, fetchOneEntry } from '@builder.io/sdk-react'; import { useEffect, useState } from 'react'; +const BUILDER_API_KEY = 'ee9f13b4981e489a9a1209887695ef2b'; +const MODEL_NAME = 'collection-hero'; + export default function ProductHero() { const [productHero, setProductHero] = useState(null); useEffect(() => { fetchOneEntry({ - model: 'collection-hero', - apiKey: 'ee9f13b4981e489a9a1209887695ef2b', + model: MODEL_NAME, + apiKey: BUILDER_API_KEY, userAttributes: { urlPath: window.location.pathname }, }).then((data) => { setProductHero(data); @@ -16,18 +19,13 @@ export default function ProductHero() { return ( <> - {/* Your nav goes here */} - - {/* Render the Hero content if available */} {productHero && ( )} - - {/* The rest of your page goes here */} ); } From 359de9517df932c1d3c0c7e23526443f1a78c054 Mon Sep 17 00:00:00 2001 From: Uttej V S K Date: Tue, 22 Apr 2025 15:48:22 -0500 Subject: [PATCH 4/5] removed presentation assertion --- .../sdks-tests/src/snippet-tests/blueprints-hero.spec.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/sdks-tests/src/snippet-tests/blueprints-hero.spec.ts b/packages/sdks-tests/src/snippet-tests/blueprints-hero.spec.ts index 1c977679f3f..3a55cf78124 100644 --- a/packages/sdks-tests/src/snippet-tests/blueprints-hero.spec.ts +++ b/packages/sdks-tests/src/snippet-tests/blueprints-hero.spec.ts @@ -44,8 +44,8 @@ test.describe('Hero Section', () => { }); test('should display hero image', async ({ page }) => { - const productImage = page.getByRole('presentation'); - await expect(productImage).toBeVisible(); - await expect(productImage).toHaveAttribute('src', /.+/); + const imgInPicture = page.locator('picture img'); + await expect(imgInPicture).toBeVisible(); + await expect(imgInPicture).toHaveAttribute('src', /.+/); }); }); From 31839536e4e3eebd48e84e2e326f9d8f1f474899 Mon Sep 17 00:00:00 2001 From: UVSK Date: Wed, 30 Apr 2025 17:49:52 -0500 Subject: [PATCH 5/5] Update blueprints-hero.spec.ts --- packages/sdks-tests/src/snippet-tests/blueprints-hero.spec.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/sdks-tests/src/snippet-tests/blueprints-hero.spec.ts b/packages/sdks-tests/src/snippet-tests/blueprints-hero.spec.ts index 3a55cf78124..aa72aa75de9 100644 --- a/packages/sdks-tests/src/snippet-tests/blueprints-hero.spec.ts +++ b/packages/sdks-tests/src/snippet-tests/blueprints-hero.spec.ts @@ -40,7 +40,6 @@ test.describe('Hero Section', () => { const ctaButton = page.getByRole('button', { name: 'Buy now' }); await expect(ctaButton).toBeVisible(); - await expect(ctaButton).toBeEnabled(); }); test('should display hero image', async ({ page }) => {