test: Added embed demo page with style-isolation proof, 6 setEngineBase…
- "examples/embed-demo.html" - "app/src/api/__tests__/engine.test.ts" - "vite.embed.config.ts" - ".gitignore" GSD-Task: S03/T02
This commit is contained in:
jlightner
parent
7fbd909646
commit
87fa4eff91
4 changed files with 194 additions and 1 deletions
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -14,6 +14,7 @@ Thumbs.db
|
|||
node_modules/
|
||||
.next/
|
||||
dist/
|
||||
dist-embed/
|
||||
build/
|
||||
__pycache__/
|
||||
*.pyc
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
|
||||
import { getPresets, traceImage, simplifyVector, exportAsDxf } from '../engine';
|
||||
import { getPresets, traceImage, simplifyVector, exportAsDxf, setEngineBaseUrl } from '../engine';
|
||||
|
||||
// ---------- helpers ----------
|
||||
|
||||
|
|
@ -216,3 +216,75 @@ describe('exportAsDxf', () => {
|
|||
).rejects.toThrow(/DXF export.*failed.*500/i);
|
||||
});
|
||||
});
|
||||
|
||||
// ---------- setEngineBaseUrl ----------
|
||||
|
||||
describe('setEngineBaseUrl', () => {
|
||||
afterEach(() => {
|
||||
// Reset to default after each test so other suites are unaffected
|
||||
setEngineBaseUrl('/engine');
|
||||
});
|
||||
|
||||
it('changes the base URL used by subsequent API calls', async () => {
|
||||
globalThis.fetch = mockFetchOk({ presets: {} });
|
||||
|
||||
setEngineBaseUrl('http://example.com/api');
|
||||
await getPresets();
|
||||
|
||||
const [url] = (globalThis.fetch as ReturnType<typeof vi.fn>).mock.calls[0];
|
||||
expect(url).toBe('http://example.com/api/presets');
|
||||
});
|
||||
|
||||
it('strips trailing slashes from the provided URL', async () => {
|
||||
globalThis.fetch = mockFetchOk({ presets: {} });
|
||||
|
||||
setEngineBaseUrl('http://example.com/api///');
|
||||
await getPresets();
|
||||
|
||||
const [url] = (globalThis.fetch as ReturnType<typeof vi.fn>).mock.calls[0];
|
||||
expect(url).toBe('http://example.com/api/presets');
|
||||
});
|
||||
|
||||
it('can be reset back to the default /engine path', async () => {
|
||||
globalThis.fetch = mockFetchOk({ presets: {} });
|
||||
|
||||
setEngineBaseUrl('http://remote.host/v2');
|
||||
setEngineBaseUrl('/engine');
|
||||
await getPresets();
|
||||
|
||||
const [url] = (globalThis.fetch as ReturnType<typeof vi.fn>).mock.calls[0];
|
||||
expect(url).toBe('/engine/presets');
|
||||
});
|
||||
|
||||
it('affects traceImage calls', async () => {
|
||||
globalThis.fetch = mockFetchOk({ output: '<svg/>', format: 'svg', metadata: {} });
|
||||
|
||||
setEngineBaseUrl('https://kerf.example.com/engine');
|
||||
const file = new File(['px'], 'img.png', { type: 'image/png' });
|
||||
await traceImage(file, 'sign', {});
|
||||
|
||||
const [url] = (globalThis.fetch as ReturnType<typeof vi.fn>).mock.calls[0];
|
||||
expect(url).toBe('https://kerf.example.com/engine/trace');
|
||||
});
|
||||
|
||||
it('affects simplifyVector calls', async () => {
|
||||
globalThis.fetch = mockFetchOk({ output: '<svg/>', format: 'svg', metadata: {} });
|
||||
|
||||
setEngineBaseUrl('https://kerf.example.com/engine');
|
||||
const file = new File(['<svg></svg>'], 'input.svg', { type: 'image/svg+xml' });
|
||||
await simplifyVector(file, 2.0);
|
||||
|
||||
const [url] = (globalThis.fetch as ReturnType<typeof vi.fn>).mock.calls[0];
|
||||
expect(url).toBe('https://kerf.example.com/engine/simplify');
|
||||
});
|
||||
|
||||
it('affects exportAsDxf calls', async () => {
|
||||
globalThis.fetch = mockFetchBlob('DXF');
|
||||
|
||||
setEngineBaseUrl('https://kerf.example.com/engine');
|
||||
await exportAsDxf('<svg/>', 'inches', 1.0);
|
||||
|
||||
const [url] = (globalThis.fetch as ReturnType<typeof vi.fn>).mock.calls[0];
|
||||
expect(url).toBe('https://kerf.example.com/engine/simplify');
|
||||
});
|
||||
});
|
||||
|
|
|
|||
80
examples/embed-demo.html
Normal file
80
examples/embed-demo.html
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Kerf Embed Demo — Style Isolation Test</title>
|
||||
|
||||
<!--
|
||||
Host-page styles intentionally use Comic Sans, a bright background,
|
||||
and aggressive color overrides. If Shadow DOM isolation works correctly,
|
||||
none of these styles should bleed into the <kerf-embed> component.
|
||||
-->
|
||||
<style>
|
||||
* {
|
||||
font-family: "Comic Sans MS", "Comic Sans", cursive !important;
|
||||
color: #ff00ff !important;
|
||||
}
|
||||
body {
|
||||
background: #fffb00;
|
||||
margin: 0;
|
||||
padding: 2rem;
|
||||
}
|
||||
h1, h2, h3, p, span, div, label, button, input, select {
|
||||
font-family: "Comic Sans MS", "Comic Sans", cursive !important;
|
||||
color: #ff00ff !important;
|
||||
border-color: #00ff00 !important;
|
||||
}
|
||||
a {
|
||||
color: #ff0000 !important;
|
||||
text-decoration: underline wavy #00ff00 !important;
|
||||
}
|
||||
button {
|
||||
background: #00ff00 !important;
|
||||
border: 3px solid #ff0000 !important;
|
||||
border-radius: 0 !important;
|
||||
padding: 12px 24px !important;
|
||||
font-size: 18px !important;
|
||||
}
|
||||
input, select, textarea {
|
||||
background: #ff00ff !important;
|
||||
color: #00ff00 !important;
|
||||
border: 3px dashed #ff0000 !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>🔧 Kerf Embed Demo</h1>
|
||||
<p>
|
||||
This page uses <strong>Comic Sans</strong>, a bright yellow background,
|
||||
magenta text, and neon green buttons. If you can see the Kerf app below
|
||||
with its <em>own</em> styling (not Comic Sans, not magenta), then
|
||||
<strong>Shadow DOM style isolation is working correctly</strong>.
|
||||
</p>
|
||||
|
||||
<h2>Host-page controls (should look garish):</h2>
|
||||
<button onclick="alert('Host button clicked')">Host Button</button>
|
||||
<input type="text" placeholder="Host input field" />
|
||||
|
||||
<hr style="border: 2px dashed #ff0000; margin: 2rem 0;" />
|
||||
|
||||
<h2>Embedded Kerf Component:</h2>
|
||||
|
||||
<!-- The embed component — should render with its own isolated styles -->
|
||||
<kerf-embed engine-url="http://localhost:8000/engine"></kerf-embed>
|
||||
|
||||
<hr style="border: 2px dashed #ff0000; margin: 2rem 0;" />
|
||||
|
||||
<h2>More host content (should still look garish):</h2>
|
||||
<p>
|
||||
This paragraph proves that host styles persist after the embed.
|
||||
Everything outside <code><kerf-embed></code> should use
|
||||
Comic Sans and magenta colors.
|
||||
</p>
|
||||
|
||||
<!-- Load the embed bundle (IIFE for broadest compatibility) -->
|
||||
<script src="../dist-embed/kerf-embed.iife.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
40
vite.embed.config.ts
Normal file
40
vite.embed.config.ts
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
/// <reference types="vite/client" />
|
||||
import { defineConfig } from 'vite';
|
||||
import react from '@vitejs/plugin-react';
|
||||
import { resolve } from 'path';
|
||||
|
||||
/**
|
||||
* Root-level Vite library-mode config for the <kerf-embed> Web Component.
|
||||
*
|
||||
* Mirrors app/vite.embed.config.ts but resolves paths relative to the
|
||||
* monorepo root so `npx vite build --config vite.embed.config.ts` works
|
||||
* from the project root directory.
|
||||
*/
|
||||
export default defineConfig({
|
||||
root: resolve(__dirname, 'app'),
|
||||
plugins: [react()],
|
||||
build: {
|
||||
outDir: resolve(__dirname, 'dist-embed'),
|
||||
emptyOutDir: true,
|
||||
lib: {
|
||||
entry: resolve(__dirname, 'app/src/embed.tsx'),
|
||||
name: 'KerfEmbed',
|
||||
formats: ['es', 'iife'],
|
||||
fileName: (format) => {
|
||||
if (format === 'es') return 'kerf-embed.js';
|
||||
return 'kerf-embed.iife.js';
|
||||
},
|
||||
},
|
||||
cssCodeSplit: false,
|
||||
rollupOptions: {
|
||||
external: [],
|
||||
output: {
|
||||
codeSplitting: false,
|
||||
assetFileNames: (assetInfo) => {
|
||||
if (assetInfo.names?.[0]?.endsWith('.css')) return 'style.css';
|
||||
return assetInfo.names?.[0] ?? '[name][extname]';
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
Loading…
Add table
Reference in a new issue