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/
|
node_modules/
|
||||||
.next/
|
.next/
|
||||||
dist/
|
dist/
|
||||||
|
dist-embed/
|
||||||
build/
|
build/
|
||||||
__pycache__/
|
__pycache__/
|
||||||
*.pyc
|
*.pyc
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
|
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 ----------
|
// ---------- helpers ----------
|
||||||
|
|
||||||
|
|
@ -216,3 +216,75 @@ describe('exportAsDxf', () => {
|
||||||
).rejects.toThrow(/DXF export.*failed.*500/i);
|
).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