adding testcase for graphql queries mapping.

src/routes/composer/+page.svelte

@@ -1,5 +1,135 @@
-<script>
-	import ComposerWrap from '$lib/components/refactor/ComposerWrap.svelte';
+<script lang="ts">
+	import Composer from '$lib/core/refactor/Composer.svelte';
+	import { queryMessages } from '$lib/data/queryMessages';
+	import { queryTodos } from '$lib/data/queryTodos';
+
+	let composer = {
+		id: 'ComposerParent',
+		machine: {
+			initial: 'NOTREADY',
+			states: {
+				NOTREADY: {
+					on: { TOGGLE: 'READY' }
+				},
+				READY: {
+					on: { TOGGLE: 'NOTREADY' }
+				}
+			}
+		},
+		layout: {
+			columns: '1fr 1fr',
+			rows: 'auto 1fr',
+			areas: `
+				"topleft topright"
+				"mainleft mainright"
+			`
+		},
+		children: [
+			{
+				id: 'ComposerCharly',
+				component: 'ComposerCharly',
+				slot: 'mainright',
+				data: {
+					map: {
+						todos: queryTodos,
+						messages: queryMessages
+					}
+				},
+				machine: {
+					initial: 'LOADING',
+					states: {
+						LOADING: {
+							on: {
+								TOGGLE: {
+									target: 'READY'
+								}
+							}
+						},
+						READY: {
+							on: {
+								TOGGLE: {
+									target: 'LOADING'
+								}
+							}
+						}
+					}
+				}
+			},
+			{
+				id: 'ComposerBob',
+				component: 'ComposerBob',
+				slot: 'topleft',
+				machine: {
+					initial: 'READY',
+					states: {
+						NOTREADY: {
+							on: { TOGGLE: 'READY' }
+						},
+						READY: {
+							on: { TOGGLE: 'NOTREADY' }
+						}
+					}
+				}
+			},
+			{
+				id: 'ComposerAlice',
+				component: 'ComposerAlice',
+				slot: 'topright',
+				machine: {
+					initial: 'RED',
+					states: {
+						GREEN: {
+							on: { SWITCH: 'YELLOW' }
+						},
+						YELLOW: {
+							on: { SWITCH: 'RED' }
+						},
+						RED: {
+							on: { SWITCH: 'GREEN' }
+						}
+					},
+					on: {
+						READY: 'GREEN',
+						NOTREADY: 'RED'
+					}
+				}
+			},
+			{
+				id: 'ComposerForm',
+				component: 'ComposerForm',
+				slot: 'mainleft',
+				machine: {
+					id: 'validation',
+					initial: 'notValidated',
+					context: {
+						isValidated: false
+					},
+					states: {
+						notValidated: {
+							on: {
+								VALIDATE: {
+									target: 'isValidated',
+									actions: 'setValidated'
+								}
+							}
+						},
+						isValidated: {
+							on: {
+								INVALIDATE: {
+									target: 'notValidated',
+									actions: 'setNotValidated'
+								}
+							}
+						}
+					},
+					services: {
+						setValidated: (context) => (context.isValidated = true),
+						setNotValidated: (context) => (context.isValidated = false)
+					}
+				}
+			}
+		]
+	};
 </script>
 
-<ComposerWrap />
+<Composer {composer} />