diff --git a/dto/HyperViewDTO.test.ts b/dto/HyperViewDTO.test.ts
new file mode 100644
index 0000000..d282031
--- /dev/null
+++ b/dto/HyperViewDTO.test.ts
@@ -0,0 +1,53 @@
+// Copyright (c) 2023. Sendanor <info@sendanor.fi>. All rights reserved.
+import {createHyperViewDTO, isHyperViewDTO} from "./HyperViewDTO";
+
+describe('createHyperViewDTO', () => {
+    it('Should create some viewable data object', () => {
+        const HyperView = createHyperViewDTO(
+            "Testi",
+            "Testi",
+            "Testi",
+            "Testi",
+            undefined,
+            "Testi",
+            undefined
+        )
+
+        expect(HyperView.name).toBe("Testi");
+        expect(HyperView.extend).toBe("Testi");
+        expect(HyperView.publicUrl).toBe("Testi");
+        expect(HyperView.language).toBe("Testi");
+        expect(HyperView.seo).toBeUndefined();
+        expect(HyperView.content).toBe("Testi");
+        expect(HyperView.style).toBeUndefined();
+    });
+});
+
+describe('isHyperViewDTO', () => {
+    it('Should return true for a valid HyperViewDTO object', () => {
+        const validHyperViewDTO = {
+            name: "Testi",
+            extend: "Testi",
+            publicUrl: "Testi",
+            language: "Testi",
+            seo: undefined,
+            content: "Testi",
+            style: undefined,
+        };
+
+        const result = isHyperViewDTO(validHyperViewDTO);
+
+        expect(result).toBe(true);
+    });
+
+    it('Should return false for an invalid HyperViewDTO object', () => {
+        const invalidHyperViewDTO = {
+            // Missing some required properties
+            name: "Testi",
+        };
+
+        const result = isHyperViewDTO(invalidHyperViewDTO);
+
+        expect(result).toBe(false);
+    });
+});
\ No newline at end of file
diff --git a/jest.config.js b/jest.config.js
index 4ebbfc3..b963126 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -1,10 +1,10 @@
 // See also https://github.com/heusalagroup/test or project specific test folder
 /** @type {import('@ts-jest/dist/types').InitialOptionsTsJest} */
 module.exports = {
-  preset: 'ts-jest',
-  testEnvironment: 'node',
-  // testTimeout: 30000,
-  globals: {
-    window: {}
-  }
-};
+    preset: 'ts-jest',
+    testEnvironment: 'node',
+    // testTimeout: 30000,
+    globals: {
+        window: {}
+    }
+};
\ No newline at end of file
diff --git a/samples/loading/LoadingAppDefinition.test.ts b/samples/loading/LoadingAppDefinition.test.ts
new file mode 100644
index 0000000..66ca7bf
--- /dev/null
+++ b/samples/loading/LoadingAppDefinition.test.ts
@@ -0,0 +1,42 @@
+import { createLoadingAppDefinition, LOADING_ROUTE_NAME } from './LoadingAppDefinition';
+import { createAnyRoute } from './routes/AnyRoute';
+import { createLoadingRoute } from './routes/LoadingRoute';
+import { createTextComponent } from './components/TextComponent';
+import { createDefaultView } from './views/DefaultView';
+import { createLoadingView } from './views/LoadingView';
+
+describe('createLoadingAppDefinition', () => {
+    test('creates a valid LoadingAppDefinition HyperDTO', () => {
+        const myAppName = 'MyLoadingApp';
+        const publicUrl = 'mockPublicUrl';
+        const language = 'en';
+
+        const loadingAppDefinition = createLoadingAppDefinition(myAppName, publicUrl, language);
+
+        expect(loadingAppDefinition).toBeDefined();
+        expect(loadingAppDefinition.name).toBe(myAppName);
+        expect(loadingAppDefinition.routes).toBeDefined();
+        expect(loadingAppDefinition.routes.length).toBe(2); // Assuming 2 routes are added
+
+        const expectedLoadingRoute = createLoadingRoute(LOADING_ROUTE_NAME);
+        const expectedAnyRoute = createAnyRoute(LOADING_ROUTE_NAME);
+
+        expect(loadingAppDefinition.routes).toContainEqual(expectedLoadingRoute);
+        expect(loadingAppDefinition.routes).toContainEqual(expectedAnyRoute);
+
+        expect(loadingAppDefinition.publicUrl).toBe(publicUrl);
+        expect(loadingAppDefinition.language).toBe(language);
+        expect(loadingAppDefinition.components).toBeDefined();
+        expect(loadingAppDefinition.components.length).toBe(1); // Assuming 1 component is added
+        expect(loadingAppDefinition.views).toBeDefined();
+        expect(loadingAppDefinition.views.length).toBe(2); // Assuming 2 views are added
+
+        const expectedTextComponent = createTextComponent();
+        const expectedDefaultView = createDefaultView();
+        const expectedLoadingView = createLoadingView();
+
+        expect(loadingAppDefinition.components).toContainEqual(expectedTextComponent);
+        expect(loadingAppDefinition.views).toContainEqual(expectedDefaultView);
+        expect(loadingAppDefinition.views).toContainEqual(expectedLoadingView);
+    });
+});
\ No newline at end of file
diff --git a/samples/loading/components/Text.test.ts b/samples/loading/components/Text.test.ts
new file mode 100644
index 0000000..74ee009
--- /dev/null
+++ b/samples/loading/components/Text.test.ts
@@ -0,0 +1,15 @@
+import { createText } from './Text';
+
+describe('createText', () => {
+    test('creates a valid Text HyperComponentDTO', () => {
+        const name = 'SampleText';
+        const textContent = 'This is some sample text.';
+
+        const textComponent = createText(name, textContent);
+
+        expect(textComponent).toBeDefined();
+        expect(textComponent.name).toBe(name);
+        expect(textComponent.content).toEqual([textContent]);
+        expect(textComponent.meta).toBe(undefined);
+    });
+});
\ No newline at end of file
diff --git a/samples/loading/components/TextComponent.test.ts b/samples/loading/components/TextComponent.test.ts
new file mode 100644
index 0000000..e0d40b7
--- /dev/null
+++ b/samples/loading/components/TextComponent.test.ts
@@ -0,0 +1,12 @@
+import { createTextComponent, TEXT_COMPONENT_NAME } from './TextComponent';
+
+describe('createTextComponent', () => {
+    test('creates a valid TextComponent HyperComponentDTO', () => {
+        const textComponent = createTextComponent();
+
+        expect(textComponent).toBeDefined();
+        expect(textComponent.name).toBe(TEXT_COMPONENT_NAME);
+        expect(textComponent.content).toEqual([]);
+        expect(textComponent.meta).toBe(undefined);
+    });
+});
\ No newline at end of file
diff --git a/samples/loading/routes/AnyRoute.test.ts b/samples/loading/routes/AnyRoute.test.ts
new file mode 100644
index 0000000..1d992a0
--- /dev/null
+++ b/samples/loading/routes/AnyRoute.test.ts
@@ -0,0 +1,23 @@
+import { createAnyRoute, ANY_ROUTE_NAME } from './AnyRoute';
+
+describe('createAnyRoute', () => {
+    test('creates a valid AnyRoute HyperRouteDTO with redirect', () => {
+        const redirect = '/some-redirect-path';
+
+        const anyRoute = createAnyRoute(redirect);
+
+        expect(anyRoute).toBeDefined();
+        expect(anyRoute.name).toBe(ANY_ROUTE_NAME);
+        expect(anyRoute.path).toBe('*');
+        expect(anyRoute.redirect).toBe(redirect);
+    });
+
+    test('creates a valid AnyRoute HyperRouteDTO without redirect', () => {
+        const anyRoute = createAnyRoute('');
+
+        expect(anyRoute).toBeDefined();
+        expect(anyRoute.name).toBe(ANY_ROUTE_NAME);
+        expect(anyRoute.path).toBe('*');
+        expect(anyRoute.redirect).toBe("");
+    });
+});
\ No newline at end of file
diff --git a/samples/loading/routes/LoadingRoute.test.ts b/samples/loading/routes/LoadingRoute.test.ts
new file mode 100644
index 0000000..3c19047
--- /dev/null
+++ b/samples/loading/routes/LoadingRoute.test.ts
@@ -0,0 +1,15 @@
+import { createLoadingRoute } from './LoadingRoute';
+import { createHyperRouteDTO, HyperRouteDTO } from '../../../dto/HyperRouteDTO';
+
+describe('createLoadingRoute', () => {
+    test('creates a valid LoadingRoute HyperRouteDTO', () => {
+        const routeName = 'LoadingRoute';
+
+        const loadingRoute = createLoadingRoute(routeName);
+
+        expect(loadingRoute).toBeDefined();
+        expect(loadingRoute.name).toBe(routeName);
+        expect(loadingRoute.path).toBe('/');
+        expect(loadingRoute.redirect).toBeUndefined();
+    });
+});
\ No newline at end of file
diff --git a/samples/loading/views/DefaultView.test.ts b/samples/loading/views/DefaultView.test.ts
new file mode 100644
index 0000000..9394628
--- /dev/null
+++ b/samples/loading/views/DefaultView.test.ts
@@ -0,0 +1,15 @@
+import { createDefaultView, DEFAULT_VIEW_NAME } from './DefaultView';
+import { createHyperStyleDTO, HyperStyleDTO } from '../../../dto/HyperStyleDTO';
+import { DARK_BACKGROUND_COLOR, DARK_TEXT_COLOR } from '../constants/colors';
+
+describe('createDefaultView', () => {
+    test('creates a valid DefaultView HyperViewDTO', () => {
+        const defaultView = createDefaultView();
+
+        expect(defaultView).toBeDefined();
+        expect(defaultView.name).toBe(DEFAULT_VIEW_NAME);
+
+        const expectedStyle: HyperStyleDTO = createHyperStyleDTO(DARK_TEXT_COLOR, DARK_BACKGROUND_COLOR);
+        expect(defaultView.style).toEqual(expectedStyle);
+    });
+});
\ No newline at end of file
diff --git a/samples/loading/views/LoadingView.test.ts b/samples/loading/views/LoadingView.test.ts
new file mode 100644
index 0000000..ea717f1
--- /dev/null
+++ b/samples/loading/views/LoadingView.test.ts
@@ -0,0 +1,21 @@
+import { createLoadingView, LOADING_VIEW_NAME } from './LoadingView';
+import { createText } from '../components/Text';
+
+describe('createLoadingView', () => {
+    test('creates a valid LoadingView HyperViewDTO', () => {
+        const loadingView = createLoadingView();
+
+        expect(loadingView).toBeDefined();
+        expect(loadingView.name).toBe(LOADING_VIEW_NAME);
+
+        expect(loadingView.content).toBeDefined();
+        expect(Array.isArray(loadingView.content)).toBe(true);
+
+        if (Array.isArray(loadingView.content) && loadingView.content.length > 0) {
+            const expectedTextComponent = createText('loadingText', '...loading...');
+            expect(loadingView.content[0]).toEqual(expectedTextComponent);
+        } else {
+            console.warn('LoadingView content is undefined or empty');
+        }
+    });
+});
\ No newline at end of file
diff --git a/samples/order/OrderAppDefinition.test.ts b/samples/order/OrderAppDefinition.test.ts
new file mode 100644
index 0000000..2af807d
--- /dev/null
+++ b/samples/order/OrderAppDefinition.test.ts
@@ -0,0 +1,29 @@
+import { createOrderAppDefinitions } from './OrderAppDefinition';
+import { createAnyRoute } from './routes/AnyRoute';
+import { createLoginRoute } from './routes/LoginRoute';
+import { createTextComponent } from './components/TextComponent';
+import { createDefaultView } from './views/DefaultView';
+import { createLoginView } from './views/LoginView';
+
+describe('createOrderAppDefinitions', () => {
+    test('creates a valid OrderAppDefinition HyperDTO', () => {
+        const myAppName = 'MyOrderApp';
+        const publicUrl = 'http://example.com';
+        const language = 'en';
+
+        const orderAppDefinitions = createOrderAppDefinitions(myAppName, publicUrl, language);
+
+        expect(orderAppDefinitions).toBeDefined();
+        expect(orderAppDefinitions.name).toBe(myAppName);
+
+        const expectedLoginRoute = createLoginRoute('LoginRoute');
+        const expectedAnyRoute = createAnyRoute('LoginRoute');
+        expect(orderAppDefinitions.routes).toEqual([expectedLoginRoute, expectedAnyRoute]);
+
+        const expectedTextComponent = createTextComponent();
+        const expectedDefaultView = createDefaultView();
+        const expectedLoginView = createLoginView();
+        expect(orderAppDefinitions.components).toEqual([expectedTextComponent]);
+        expect(orderAppDefinitions.views).toEqual([expectedDefaultView, expectedLoginView]);
+    });
+});
\ No newline at end of file
diff --git a/samples/order/components/Text.test.ts b/samples/order/components/Text.test.ts
new file mode 100644
index 0000000..74ee009
--- /dev/null
+++ b/samples/order/components/Text.test.ts
@@ -0,0 +1,15 @@
+import { createText } from './Text';
+
+describe('createText', () => {
+    test('creates a valid Text HyperComponentDTO', () => {
+        const name = 'SampleText';
+        const textContent = 'This is some sample text.';
+
+        const textComponent = createText(name, textContent);
+
+        expect(textComponent).toBeDefined();
+        expect(textComponent.name).toBe(name);
+        expect(textComponent.content).toEqual([textContent]);
+        expect(textComponent.meta).toBe(undefined);
+    });
+});
\ No newline at end of file
diff --git a/samples/order/components/TextComponent.test.ts b/samples/order/components/TextComponent.test.ts
new file mode 100644
index 0000000..e0d40b7
--- /dev/null
+++ b/samples/order/components/TextComponent.test.ts
@@ -0,0 +1,12 @@
+import { createTextComponent, TEXT_COMPONENT_NAME } from './TextComponent';
+
+describe('createTextComponent', () => {
+    test('creates a valid TextComponent HyperComponentDTO', () => {
+        const textComponent = createTextComponent();
+
+        expect(textComponent).toBeDefined();
+        expect(textComponent.name).toBe(TEXT_COMPONENT_NAME);
+        expect(textComponent.content).toEqual([]);
+        expect(textComponent.meta).toBe(undefined);
+    });
+});
\ No newline at end of file
diff --git a/samples/order/routes/AnyRoute.test.ts b/samples/order/routes/AnyRoute.test.ts
new file mode 100644
index 0000000..1d992a0
--- /dev/null
+++ b/samples/order/routes/AnyRoute.test.ts
@@ -0,0 +1,23 @@
+import { createAnyRoute, ANY_ROUTE_NAME } from './AnyRoute';
+
+describe('createAnyRoute', () => {
+    test('creates a valid AnyRoute HyperRouteDTO with redirect', () => {
+        const redirect = '/some-redirect-path';
+
+        const anyRoute = createAnyRoute(redirect);
+
+        expect(anyRoute).toBeDefined();
+        expect(anyRoute.name).toBe(ANY_ROUTE_NAME);
+        expect(anyRoute.path).toBe('*');
+        expect(anyRoute.redirect).toBe(redirect);
+    });
+
+    test('creates a valid AnyRoute HyperRouteDTO without redirect', () => {
+        const anyRoute = createAnyRoute('');
+
+        expect(anyRoute).toBeDefined();
+        expect(anyRoute.name).toBe(ANY_ROUTE_NAME);
+        expect(anyRoute.path).toBe('*');
+        expect(anyRoute.redirect).toBe("");
+    });
+});
\ No newline at end of file
diff --git a/samples/order/routes/LoginRoute.test.ts b/samples/order/routes/LoginRoute.test.ts
new file mode 100644
index 0000000..23aaa7f
--- /dev/null
+++ b/samples/order/routes/LoginRoute.test.ts
@@ -0,0 +1,16 @@
+import { createLoginRoute, LoginRoute } from './LoginRoute';
+import { createHyperRouteDTO, HyperRouteDTO } from '../../../dto/HyperRouteDTO';
+import { LOGIN_VIEW_NAME } from '../views/LoginView';
+
+describe('createLoginRoute', () => {
+    test('creates a valid LoginRoute HyperRouteDTO', () => {
+        const routeName = 'LoginRoute';
+
+        const loginRoute = createLoginRoute(routeName);
+
+        expect(loginRoute).toBeDefined();
+        expect(loginRoute.name).toBe(routeName);
+        expect(loginRoute.path).toBe('/');
+        expect(loginRoute.view).toBe(LOGIN_VIEW_NAME);
+    });
+});
\ No newline at end of file
diff --git a/samples/order/views/DefaultView.test.ts b/samples/order/views/DefaultView.test.ts
new file mode 100644
index 0000000..74f05c4
--- /dev/null
+++ b/samples/order/views/DefaultView.test.ts
@@ -0,0 +1,15 @@
+import { createDefaultView } from './DefaultView';
+import { createHyperStyleDTO } from '../../../dto/HyperStyleDTO';
+import { DARK_BACKGROUND_COLOR, DARK_TEXT_COLOR } from '../constants/colors';
+
+describe('createDefaultView', () => {
+    test('creates a valid DefaultView HyperViewDTO', () => {
+        const defaultView = createDefaultView();
+
+        expect(defaultView).toBeDefined();
+        expect(defaultView.name).toBe('DefaultView');
+
+        const expectedStyle = createHyperStyleDTO(DARK_TEXT_COLOR, DARK_BACKGROUND_COLOR);
+        expect(defaultView.style).toEqual(expectedStyle);
+    });
+});
\ No newline at end of file
diff --git a/samples/order/views/LoginView.test.ts b/samples/order/views/LoginView.test.ts
new file mode 100644
index 0000000..10460b7
--- /dev/null
+++ b/samples/order/views/LoginView.test.ts
@@ -0,0 +1,20 @@
+import { createLoginView} from './LoginView';
+import { createText } from '../components/Text';
+import { DEFAULT_VIEW_NAME } from './DefaultView';
+
+describe('createLoginView', () => {
+    test('creates a valid LoginView HyperViewDTO', () => {
+        const loginView = createLoginView();
+
+        expect(loginView).toBeDefined();
+        expect(loginView.name).toBe('LoginView');
+
+        const expectedContent = [
+            createText('project', 'Example'),
+            createText('appName', 'OrderApp'),
+        ];
+        expect(loginView.content).toEqual(expectedContent);
+
+        expect(loginView.extend).toBe(DEFAULT_VIEW_NAME);
+    });
+});
\ No newline at end of file
diff --git a/utils/components/mergeHyperComponent.test.ts b/utils/components/mergeHyperComponent.test.ts
new file mode 100644
index 0000000..4ff4071
--- /dev/null
+++ b/utils/components/mergeHyperComponent.test.ts
@@ -0,0 +1,28 @@
+import { mergeHyperComponentContent } from "./mergeHyperComponentContent";
+
+describe('mergeHyperComponentContent', () => {
+    test('merges arrays of strings', () => {
+        const result = mergeHyperComponentContent(['a', 'b'], ['c', 'd']);
+        expect(result).toEqual(['a', 'b', 'c', 'd']);
+    });
+
+    test('merges arrays of HyperComponentDTO', () => {
+        const componentA = { type: 'exampleA', /* other properties */ } as any;
+        const componentB = { type: 'exampleB', /* other properties */ } as any;
+
+        const result = mergeHyperComponentContent([componentA], [componentB]);
+        expect(result).toEqual([componentA, componentB]);
+    });
+
+    test('merges arrays of strings and HyperComponentDTO', () => {
+        const component = { type: 'example', /* other properties */ } as any;
+
+        const result = mergeHyperComponentContent(['a', 'b'], [component]);
+        expect(result).toEqual(['a', 'b', component]);
+    });
+
+    test('handles undefined inputs', () => {
+        const result = mergeHyperComponentContent(undefined, undefined);
+        expect(result).toEqual([]);
+    });
+});
diff --git a/utils/components/populateHyperComponentDTO.test.ts b/utils/components/populateHyperComponentDTO.test.ts
new file mode 100644
index 0000000..e8710ff
--- /dev/null
+++ b/utils/components/populateHyperComponentDTO.test.ts
@@ -0,0 +1,60 @@
+import { populateHyperComponentDTO } from "./populateHyperComponentDTO";
+import { HyperComponentDTO, } from "../../dto/HyperComponentDTO";
+
+describe('populateHyperComponentDTO', () => {
+    test('returns the same component if extend is undefined', () => {
+        const component: HyperComponentDTO = {
+            name: 'TestComponent',
+            content: ['a', 'b'],
+            meta: { key: 'value' },
+        };
+
+        const components: HyperComponentDTO[] = [];
+
+        const result = populateHyperComponentDTO(component, components);
+        expect(result).toEqual(component);
+    });
+
+    test('returns a new component with extended content', () => {
+        const extendComponent: HyperComponentDTO = {
+            name: 'ExtendComponent',
+            content: ['c', 'd'],
+            meta: { otherKey: 'otherValue' },
+        };
+
+        const component: HyperComponentDTO = {
+            name: 'TestComponent',
+            extend: 'ExtendComponent',
+            content: ['a', 'b'],
+            meta: { key: 'value' },
+        };
+
+        const components: HyperComponentDTO[] = [extendComponent];
+
+        const result = populateHyperComponentDTO(component, components);
+
+        const expected: HyperComponentDTO = {
+            name: 'ExtendComponent',
+            extend: undefined,
+            content: ['c', 'd', 'a', 'b'],
+            meta: { key: 'value', otherKey: 'otherValue' },
+        };
+
+        expect(result).toEqual(expected);
+    });
+
+    test('throws error if extend component not found', () => {
+        const component: HyperComponentDTO = {
+            name: 'TestComponent',
+            extend: 'NonExistentComponent',
+            content: ['a', 'b'],
+            meta: { key: 'value' },
+        };
+
+        const components: HyperComponentDTO[] = [];
+
+        expect(() => populateHyperComponentDTO(component, components)).toThrowError(
+            TypeError('Could not find component by name NonExistentComponent to extend for TestComponent')
+        );
+    });
+});
\ No newline at end of file
diff --git a/utils/views/findAndPopulateHyperViewDTO.test.ts b/utils/views/findAndPopulateHyperViewDTO.test.ts
index 29714e3..0ef3044 100644
--- a/utils/views/findAndPopulateHyperViewDTO.test.ts
+++ b/utils/views/findAndPopulateHyperViewDTO.test.ts
@@ -41,3 +41,4 @@ describe('findAndPopulateHyperViewDTO', () => {
         );
     });
 });
+