cloud-hosting-platform/site-builder
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add templates, tests, and miscellaneous project files

Browse Source 
Includes new page templates (fitness-gym, nonprofit, online-course,
photography-studio, real-estate, startup-company, travel-blog,
wedding-invitation) with thumbnail SVGs, test specs, documentation
files, and minor updates to index.html, router.php, and playwright config.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Josh Knapp
2026-03-01 14:15:58 -08:00
parent 03f573b451
commit b511a6684d
61 changed files with 6919 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

153
tests/video-background.spec.js Normal file
View File

@@ -0,0 +1,153 @@
const { test, expect } = require('@playwright/test');
const { waitForEditor, addBlockById, clearCanvas } = require('./helpers');
test.describe('Video Background Section', () => {
test.beforeEach(async ({ page }) => {
await waitForEditor(page);
await clearCanvas(page);
});
test('should add video background section and set YouTube URL', async ({ page }) => {
// Step 1: Add Video Background Section via API
const result = await addBlockById(page, 'section-video-bg');
expect(result.success).toBe(true);
await page.waitForTimeout(500);
// Step 2: Verify section exists in HTML
let html = await page.evaluate(() => window.editor.getHtml());
expect(html).toContain('data-video-section="true"');
// Step 3: Select the section via API
await page.evaluate(() => {
const editor = window.editor;
const wrapper = editor.getWrapper();
const section = wrapper.find('[data-video-section]')[0];
if (section) editor.select(section);
});
await page.waitForTimeout(500);
// Step 4: Open Settings panel
await page.locator('button[data-panel="traits"]').click();
await page.waitForTimeout(500);
// Step 5: Find Video URL input in traits container
const videoUrlInput = page.locator('#traits-container input[placeholder*="YouTube"]');
await expect(videoUrlInput).toBeVisible({ timeout: 5000 });
// Step 6: Enter YouTube URL
const testVideoUrl = 'https://www.youtube.com/watch?v=OC7sNfNuTNU';
await videoUrlInput.fill(testVideoUrl);
await videoUrlInput.press('Enter');
await page.waitForTimeout(1000);
// Click "Apply Video" button if present
const applyBtn = page.locator('#traits-container button:has-text("Apply Video")');
if (await applyBtn.isVisible({ timeout: 1000 }).catch(() => false)) {
await applyBtn.click();
await page.waitForTimeout(1000);
}
// Step 7: Verify via editor HTML
html = await page.evaluate(() => window.editor.getHtml());
expect(html).toContain('OC7sNfNuTNU');
expect(html).toContain('youtube');
// Step 8: Background videos SHOULD have autoplay=1
expect(html).toContain('autoplay=1');
});
test('should handle video URL changes', async ({ page }) => {
// Add video background section
const result = await addBlockById(page, 'section-video-bg');
expect(result.success).toBe(true);
await page.waitForTimeout(500);
// Select section via API
await page.evaluate(() => {
const editor = window.editor;
const wrapper = editor.getWrapper();
const section = wrapper.find('[data-video-section]')[0];
if (section) editor.select(section);
});
await page.waitForTimeout(500);
// Open Settings
await page.locator('button[data-panel="traits"]').click();
await page.waitForTimeout(500);
// Find video URL input
const videoUrlInput = page.locator('#traits-container input[placeholder*="YouTube"]');
await expect(videoUrlInput).toBeVisible({ timeout: 5000 });
// Enter first video
await videoUrlInput.fill('https://www.youtube.com/watch?v=OC7sNfNuTNU');
await videoUrlInput.press('Enter');
await page.waitForTimeout(500);
const applyBtn = page.locator('#traits-container button:has-text("Apply Video")');
if (await applyBtn.isVisible({ timeout: 1000 }).catch(() => false)) {
await applyBtn.click();
await page.waitForTimeout(1000);
}
let html = await page.evaluate(() => window.editor.getHtml());
expect(html).toContain('OC7sNfNuTNU');
// Change to different video
await videoUrlInput.fill('https://www.youtube.com/watch?v=dQw4w9WgXcQ');
await videoUrlInput.press('Enter');
await page.waitForTimeout(500);
if (await applyBtn.isVisible({ timeout: 1000 }).catch(() => false)) {
await applyBtn.click();
await page.waitForTimeout(1000);
}
// Verify HTML changed
html = await page.evaluate(() => window.editor.getHtml());
expect(html).toContain('dQw4w9WgXcQ');
expect(html).not.toContain('OC7sNfNuTNU');
});
test('should work with direct video files', async ({ page }) => {
// Add video background section
const result = await addBlockById(page, 'section-video-bg');
expect(result.success).toBe(true);
await page.waitForTimeout(500);
// Select section via API
await page.evaluate(() => {
const editor = window.editor;
const wrapper = editor.getWrapper();
const section = wrapper.find('[data-video-section]')[0];
if (section) editor.select(section);
});
await page.waitForTimeout(500);
// Open Settings
await page.locator('button[data-panel="traits"]').click();
await page.waitForTimeout(500);
// Find video URL input
const videoUrlInput = page.locator('#traits-container input[placeholder*="YouTube"]');
await expect(videoUrlInput).toBeVisible({ timeout: 5000 });
// Enter direct .mp4 URL
const mp4Url = 'https://www.w3schools.com/html/mov_bbb.mp4';
await videoUrlInput.fill(mp4Url);
await videoUrlInput.press('Enter');
await page.waitForTimeout(500);
const applyBtn = page.locator('#traits-container button:has-text("Apply Video")');
if (await applyBtn.isVisible({ timeout: 1000 }).catch(() => false)) {
await applyBtn.click();
await page.waitForTimeout(1000);
}
// For direct video, the HTML should have the video element with the src
const html = await page.evaluate(() => window.editor.getHtml());
expect(html).toContain(mp4Url);
// The iframe should have display:none (hidden)
expect(html).toContain('bg-video-player');
});
});