Fix context tests for svelte v5, all tests working again

konvajs · May 26, 2024 · 9a47ab9 · 9a47ab9
1 parent c8a084f
commit 9a47ab9
Show file tree

Hide file tree

Showing 6 changed files with 132 additions and 50 deletions.
diff --git a/src/tests/group.test.ts b/src/tests/group.test.ts
@@ -14,6 +14,7 @@ import type { MockStage } from './mocks/mouse';
 
 // Test Component Wrappers
 import ConfigBinding from './wrappers/ConfigBinding.test.svelte';
+import ContainerContext from './wrappers/ContainerContext.test.svelte';
 
 test('throws an error if not placed inside a Container (Layer, Group, Label) component', () => {
 	expect(() => {
@@ -179,30 +180,37 @@ test('Does not update config if instantiated with staticConfig prop', () => {
 });
 
 test('sets the correct context', () => {
-	const rendered = render(Group, {
-		context: createMockParentContext(Container.Layer)
-	});
+	let childContext: Map<string, any> | null = null;
+	let handle: Konva.Group | null = null;
 
-	const component = rendered.component.$$;
-	const context = component.context;
-	const handle = rendered.component.handle;
+	render(ContainerContext, {
+		context: createMockParentContext(Container.Layer),
+		props: {
+			component: Group,
+			getHandle: (hnd) => (handle = hnd),
+			getComponentContext: (ctxMap) => (childContext = ctxMap)
+		}
+	});
 
-	expect(get(context.get(CONTAINER_COMPONENT_KEYS[Container.Group]))).toStrictEqual(handle);
+	expect(get(childContext!.get(CONTAINER_COMPONENT_KEYS[Container.Group]))).toStrictEqual(handle!);
 });
 
 test('nulls unused context', () => {
-	const rendered = render(Group, {
-		context: createMockParentContext(Container.Layer)
-	});
+	let childContext: Map<string, any> | null = null;
 
-	const component = rendered.component.$$;
-	const context = component.context;
+	render(ContainerContext, {
+		context: createMockParentContext(Container.Layer),
+		props: {
+			component: Group,
+			getComponentContext: (ctxMap) => (childContext = ctxMap)
+		}
+	});
 
 	const otherKeys = CONTAINER_COMPONENT_KEYS.slice();
 	otherKeys.splice(Container.Group, 1);
 
 	otherKeys.forEach((e) => {
-		expect(context.get(e)).toBe(null);
+		expect(childContext!.get(e)).toBe(null);
 	});
 });
 

diff --git a/src/tests/label.test.ts b/src/tests/label.test.ts
@@ -14,6 +14,7 @@ import type { MockStage } from './mocks/mouse';
 
 // Test Component Wrappers
 import ConfigBinding from './wrappers/ConfigBinding.test.svelte';
+import ContainerContext from './wrappers/ContainerContext.test.svelte';
 
 test('throws an error if not placed inside a Container (Layer, Group, Label) component', () => {
 	expect(() => {
@@ -182,36 +183,37 @@ test('Does not update config if instantiated with staticConfig prop', async () =
 });
 
 test('sets the correct context', () => {
-	const rendered = render(Label, {
+	let childContext: Map<string, any> | null = null;
+	let handle: Konva.Label | null = null;
+
+	render(ContainerContext, {
 		context: createMockParentContext(Container.Layer),
 		props: {
-			config: {}
+			component: Label,
+			getHandle: (hnd) => (handle = hnd),
+			getComponentContext: (ctxMap) => (childContext = ctxMap)
 		}
 	});
 
-	const component = rendered.component.$$;
-	const context = component.context;
-	const handle = rendered.component.handle;
-
-	expect(get(context.get(CONTAINER_COMPONENT_KEYS[Container.Label]))).toStrictEqual(handle);
+	expect(get(childContext!.get(CONTAINER_COMPONENT_KEYS[Container.Label]))).toStrictEqual(handle!);
 });
 
 test('nulls unused context', () => {
-	const rendered = render(Label, {
+	let childContext: Map<string, any> | null = null;
+
+	render(ContainerContext, {
 		context: createMockParentContext(Container.Layer),
 		props: {
-			config: {}
+			component: Label,
+			getComponentContext: (ctxMap) => (childContext = ctxMap)
 		}
 	});
 
-	const component = rendered.component.$$;
-	const context = component.context;
-
 	const otherKeys = CONTAINER_COMPONENT_KEYS.slice();
 	otherKeys.splice(Container.Label, 1);
 
 	otherKeys.forEach((e) => {
-		expect(context.get(e)).toBe(null);
+		expect(childContext!.get(e)).toBe(null);
 	});
 });
 

diff --git a/src/tests/layer.test.ts b/src/tests/layer.test.ts
@@ -14,6 +14,7 @@ import type { MockStage } from './mocks/mouse';
 
 // Test Component Wrappers
 import ConfigBinding from './wrappers/ConfigBinding.test.svelte';
+import ContainerContext from './wrappers/ContainerContext.test.svelte';
 
 test('throws an error if not placed inside a Stage component', () => {
 	expect(() => {
@@ -161,31 +162,38 @@ test('Does not update config if instantiated with staticConfig prop', async () =
 
 test('sets the correct context', () => {
 	const div = document.createElement('div');
-	const rendered = render(Layer, {
-		context: createMockParentContext(Container.Stage, div)
-	});
+	let childContext: Map<string, any> | null = null;
+	let handle: Konva.Layer | null = null;
 
-	const component = rendered.component.$$;
-	const context = component.context;
-	const handle = rendered.component.handle;
+	render(ContainerContext, {
+		context: createMockParentContext(Container.Stage, div),
+		props: {
+			component: Layer,
+			getHandle: (hnd) => (handle = hnd),
+			getComponentContext: (ctxMap) => (childContext = ctxMap)
+		}
+	});
 
-	expect(get(context.get(CONTAINER_COMPONENT_KEYS[Container.Layer]))).toStrictEqual(handle);
+	expect(get(childContext!.get(CONTAINER_COMPONENT_KEYS[Container.Layer]))).toStrictEqual(handle!);
 });
 
 test('nulls unused context', () => {
 	const div = document.createElement('div');
-	const rendered = render(Layer, {
-		context: createMockParentContext(Container.Stage, div)
-	});
+	let childContext: Map<string, any> | null = null;
 
-	const component = rendered.component.$$;
-	const context = component.context;
+	render(ContainerContext, {
+		context: createMockParentContext(Container.Stage, div),
+		props: {
+			component: Layer,
+			getComponentContext: (ctxMap) => (childContext = ctxMap)
+		}
+	});
 
 	const otherKeys = CONTAINER_COMPONENT_KEYS.slice();
 	otherKeys.splice(Container.Layer, 1);
 
 	otherKeys.forEach((e) => {
-		expect(context.get(e)).toBe(null);
+		expect(childContext!.get(e)).toBe(null);
 	});
 });
 

diff --git a/src/tests/stage.test.ts b/src/tests/stage.test.ts
@@ -13,6 +13,7 @@ import type { MockStage } from './mocks/mouse';
 
 // Test Component Wrappers
 import ConfigBinding from './wrappers/ConfigBinding.test.svelte';
+import ContainerContext from './wrappers/ContainerContext.test.svelte';
 
 test('creates a div container and forwards rest props to div', () => {
 	const rendered = render(Stage, {
@@ -127,28 +128,37 @@ test('Does not update config if instantiated with staticConfig prop', async () =
 });
 
 test('sets the correct context', () => {
-	const rendered = render(Stage, {
-		config: { width: 1000, height: 1000 }
-	});
-
-	const component = rendered.component.$$;
+	let childContext: Map<string, any> | null = null;
+	let handle: Konva.Stage | null = null;
 
-	const context = component.context;
-	const handle = rendered.component.handle();
+	render(ContainerContext, {
+		props: {
+			component: Stage,
+			config: { width: 1000, height: 1000 },
+			getHandle: (hnd) => (handle = hnd()),
+			getComponentContext: (ctxMap) => (childContext = ctxMap)
+		}
+	});
 
-	expect(get(context.get(CONTAINER_COMPONENT_KEYS[Container.Stage]))).toStrictEqual(handle);
+	expect(get(childContext!.get(CONTAINER_COMPONENT_KEYS[Container.Stage]))).toStrictEqual(handle!);
 });
 
 test('nulls unused context', () => {
-	render(Stage, {
-		props: { config: { width: 1000, height: 1000 } }
+	let childContext: Map<string, any> | null = null;
+
+	render(ContainerContext, {
+		props: {
+			component: Stage,
+			config: { width: 1000, height: 1000 },
+			getComponentContext: (ctxMap) => (childContext = ctxMap)
+		}
 	});
 
 	const otherKeys = CONTAINER_COMPONENT_KEYS.slice();
 	otherKeys.splice(Container.Stage, 1);
 
 	otherKeys.forEach((e) => {
-		expect(context.get(e)).toBe(null);
+		expect(childContext!.get(e)).toBe(null);
 	});
 });
 

diff --git a/src/tests/wrappers/ContainerContext.test.svelte b/src/tests/wrappers/ContainerContext.test.svelte
@@ -0,0 +1,31 @@
+<!--
+@component
+Wraps the to be tested svelte-konva component so that the context of the svelte-konva component can be tested
+-->
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import ContextReporter from './ContextReporter.test.svelte';
+
+	const {
+		component,
+		config,
+		getHandle,
+		getComponentContext
+	}: {
+		component: any;
+		config?: any;
+		getHandle?: (handle: any) => void;
+		getComponentContext: (ctx: Map<string, any>) => void;
+	} = $props();
+
+	let boundComponent: any;
+
+	onMount(() => {
+		// Once we have the inner component handle of the svelte-konva component we pass it to the callback to get access to it in the test function
+		if (getHandle) getHandle(boundComponent.handle);
+	});
+</script>
+
+<svelte:component this={component} bind:this={boundComponent} {config}>
+	<ContextReporter {getComponentContext} />
+</svelte:component>
diff --git a/src/tests/wrappers/ContextReporter.test.svelte b/src/tests/wrappers/ContextReporter.test.svelte
@@ -0,0 +1,23 @@
+<!--
+@component
+Is attached as a child component to svelte-konva containers and reports its current container context via callback for use in test functions
+-->
+<script lang="ts">
+	import { getContext, onMount } from 'svelte';
+	import { CONTAINER_COMPONENT_KEYS } from 'svelte-konva/util/manageContext';
+
+	const {
+		getComponentContext
+	}: {
+		getComponentContext: (ctx: Map<string, any>) => void;
+	} = $props();
+
+	onMount(() => {
+		const ctxMap = new Map();
+
+		CONTAINER_COMPONENT_KEYS.forEach((key) => {
+			ctxMap.set(key, getContext(key));
+		});
+		getComponentContext(ctxMap);
+	});
+</script>