diff --git a/public/images/fantasiaMascot/fantasia_cooking.png b/public/images/fantasiaMascot/fantasia_cooking.png
new file mode 100644
index 0000000..d767170
Binary files /dev/null and b/public/images/fantasiaMascot/fantasia_cooking.png differ
diff --git a/public/images/fantasiaMascot/fantasia_didYouKnow.png b/public/images/fantasiaMascot/fantasia_didYouKnow.png
new file mode 100644
index 0000000..ca852e0
Binary files /dev/null and b/public/images/fantasiaMascot/fantasia_didYouKnow.png differ
diff --git a/public/images/fantasiaMascot/fantasia_error.png b/public/images/fantasiaMascot/fantasia_error.png
new file mode 100644
index 0000000..8ee9483
Binary files /dev/null and b/public/images/fantasiaMascot/fantasia_error.png differ
diff --git a/public/images/fantasiaMascot/fantasia_flop.png b/public/images/fantasiaMascot/fantasia_flop.png
new file mode 100644
index 0000000..19e4e44
Binary files /dev/null and b/public/images/fantasiaMascot/fantasia_flop.png differ
diff --git a/public/images/fantasiaMascot/fantasia_hug.png b/public/images/fantasiaMascot/fantasia_hug.png
new file mode 100644
index 0000000..a2cdb53
Binary files /dev/null and b/public/images/fantasiaMascot/fantasia_hug.png differ
diff --git a/public/images/fantasiaMascot/fantasia_reading.png b/public/images/fantasiaMascot/fantasia_reading.png
new file mode 100644
index 0000000..082fd21
Binary files /dev/null and b/public/images/fantasiaMascot/fantasia_reading.png differ
diff --git a/src-electron/customContentBridgeAPIs/extraEnvVariablesAPI.ts b/src-electron/customContentBridgeAPIs/extraEnvVariablesAPI.ts
index 7b5894c..d658181 100644
--- a/src-electron/customContentBridgeAPIs/extraEnvVariablesAPI.ts
+++ b/src-electron/customContentBridgeAPIs/extraEnvVariablesAPI.ts
@@ -5,5 +5,6 @@ export const extraEnvVariablesAPI: I_extraEnvVariablesAPI = {
ELECTRON_MAIN_FILEPATH: appRoot + '/dist/electron/UnPackaged/electron-main.js',
FA_FRONTEND_RENDER_TIMER: 1000,
TEST_ENV: (process.env.TEST_ENV) ? process.env.TEST_ENV : false,
- COMPONENT_NAME: (process.env.COMPONENT_NAME) ? process.env.COMPONENT_NAME : false
+ COMPONENT_NAME: (process.env.COMPONENT_NAME) ? process.env.COMPONENT_NAME : false,
+ COMPONENT_PROPS: (process.env.COMPONENT_PROPS) ? JSON.parse(process.env.COMPONENT_PROPS) : false
}
diff --git a/src/assets/quasar-logo-vertical.svg b/src/assets/quasar-logo-vertical.svg
deleted file mode 100644
index 8210831..0000000
--- a/src/assets/quasar-logo-vertical.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-
\ No newline at end of file
diff --git a/src/components/FantasiaMascotImage/FantasiaMascotImage.playwright.test.ts b/src/components/FantasiaMascotImage/FantasiaMascotImage.playwright.test.ts
new file mode 100644
index 0000000..1753e4b
--- /dev/null
+++ b/src/components/FantasiaMascotImage/FantasiaMascotImage.playwright.test.ts
@@ -0,0 +1,110 @@
+import { _electron as electron } from 'playwright'
+import { test, expect } from '@playwright/test'
+import { extraEnvVariablesAPI } from 'app/src-electron/customContentBridgeAPIs/extraEnvVariablesAPI'
+
+/**
+ * Extra env settings to trigger component testing via Playwright
+ */
+const extraEnvSettings = {
+ TEST_ENV: 'components',
+ COMPONENT_NAME: 'FantasiaMascotImage',
+ COMPONENT_PROPS: JSON.stringify({})
+}
+
+/**
+ * Electron main filepath
+ */
+const electronMainFilePath:string = extraEnvVariablesAPI.ELECTRON_MAIN_FILEPATH
+
+/**
+ * Extra rended timer buffer for tests to start after loading the app
+ * - Change here in order manually adjust this component's wait times
+ */
+const faFrontendRenderTimer:number = extraEnvVariablesAPI.FA_FRONTEND_RENDER_TIMER
+
+/**
+ * Object of string data selectors for the component
+ */
+const selectorList = {
+ image: 'fantasiaMascotImage-image'
+}
+
+/**
+ * Attempt to pass "width" prop to the component and check the result
+ */
+test('Visually check "width" prop', async () => {
+ const testString = '300px'
+
+ extraEnvSettings.COMPONENT_PROPS = JSON.stringify({ width: testString })
+
+ const electronApp = await electron.launch({
+ env: extraEnvSettings,
+ args: [electronMainFilePath]
+ })
+
+ const appWindow = await electronApp.firstWindow()
+ await appWindow.waitForTimeout(faFrontendRenderTimer)
+
+ const imageElement = await appWindow.$(`[data-test="${selectorList.image}"]`)
+
+ // Check if the tested element exists
+ if (imageElement !== null) {
+ const imageBoxData = await imageElement.boundingBox()
+
+ // Test if the tested element isn't invisisble for some reason
+ if (imageBoxData !== null) {
+ const roundedFirstValue = Math.round(imageBoxData.width)
+ const roundedSecondValue = Math.round(parseInt(testString))
+
+ expect(roundedFirstValue).toBe(roundedSecondValue)
+ } else {
+ // Element is invisible
+ test.fail()
+ }
+ } else {
+ // Element doesn't exist
+ test.fail()
+ }
+
+ await electronApp.close()
+})
+
+/**
+ * Attempt to pass "height" prop to the component and check the result
+ */
+test('Visually check "height" prop', async () => {
+ const testString = '300px'
+
+ extraEnvSettings.COMPONENT_PROPS = JSON.stringify({ height: testString })
+
+ const electronApp = await electron.launch({
+ env: extraEnvSettings,
+ args: [electronMainFilePath]
+ })
+
+ const appWindow = await electronApp.firstWindow()
+ await appWindow.waitForTimeout(faFrontendRenderTimer)
+
+ const imageElement = await appWindow.$(`[data-test="${selectorList.image}"]`)
+
+ // Check if the tested element exists
+ if (imageElement !== null) {
+ const imageBoxData = await imageElement.boundingBox()
+
+ // Test if the tested element isn't invisisble for some reason
+ if (imageBoxData !== null) {
+ const roundedFirstValue = Math.round(imageBoxData.height)
+ const roundedSecondValue = Math.round(parseInt(testString))
+
+ expect(roundedFirstValue).toBe(roundedSecondValue)
+ } else {
+ // Element is invisible
+ test.fail()
+ }
+ } else {
+ // Element doesn't exist
+ test.fail()
+ }
+
+ await electronApp.close()
+})
diff --git a/src/components/FantasiaMascotImage/FantasiaMascotImage.vitest.test.ts b/src/components/FantasiaMascotImage/FantasiaMascotImage.vitest.test.ts
new file mode 100644
index 0000000..d2d1b85
--- /dev/null
+++ b/src/components/FantasiaMascotImage/FantasiaMascotImage.vitest.test.ts
@@ -0,0 +1,90 @@
+import { installQuasar } from '@quasar/quasar-app-extension-testing-unit-vitest'
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import FantasiaMascotImage from './FantasiaMascotImage.vue'
+
+installQuasar()
+
+describe('Component - "FantasiaMascotImage"', () => {
+ /**
+ * Object of string data selectors for the component
+ */
+ const selectorList = {
+ image: 'fantasiaMascotImage-image'
+ }
+
+ /**
+ * Test if the component has an "img" HTML element properly mounted in it.
+ */
+ it('Wrapper should contain an image', () => {
+ const wrapper = mount(FantasiaMascotImage)
+
+ const imageElement = wrapper.get(`[data-test="${selectorList.image}"]`).element
+
+ expect(imageElement.tagName).toBe('IMG')
+ })
+
+ /**
+ * Test if the "img" HTML element has received the "width" prop properly.
+ * - Testing via "dataset" instead of actual width due to Vitest limitations.
+ */
+ it('Image inside wrapper should have 300px "width"', () => {
+ const testString = '300px'
+
+ const wrapper = mount(FantasiaMascotImage, {
+ propsData: {
+ width: testString
+ }
+ })
+
+ const imageElement = wrapper.get(`[data-test="${selectorList.image}"]`).element as HTMLImageElement
+
+ expect(imageElement.dataset.testWidth).toBe(testString)
+ })
+
+ /**
+ * Test if the "img" HTML element has received the "height" prop properly.
+ * - Testing via "dataset" instead of actual height due to Vitest limitations.
+ */
+ it('Image inside wrapper should have 300px "height"', () => {
+ const testString = '300px'
+
+ const wrapper = mount(FantasiaMascotImage, {
+ propsData: {
+ height: testString
+ }
+ })
+
+ const imageElement = wrapper.get(`[data-test="${selectorList.image}"]`).element as HTMLImageElement
+
+ expect(imageElement.dataset.testHeight).toBe(testString)
+ })
+
+ /**
+ * Test if the component properly determines if the image will be random.
+ */
+ it('Should generate random image URL', () => {
+ const wrapper = mount(FantasiaMascotImage)
+
+ const imageElement = wrapper.get(`[data-test="${selectorList.image}"]`).element as HTMLImageElement
+
+ expect(imageElement.dataset.testIsRandom).toBe('true')
+ })
+
+ /**
+ * Test if the component properly determines if the image will NOT be random.
+ */
+ it('Should generate non-random image URL', () => {
+ const testString = 'flop'
+
+ const wrapper = mount(FantasiaMascotImage, {
+ propsData: {
+ fantasiaImage: testString
+ }
+ })
+
+ const imageElement = wrapper.get(`[data-test="${selectorList.image}"]`).element as HTMLImageElement
+
+ expect(imageElement.dataset.testIsRandom).toBe('false')
+ })
+})
diff --git a/src/components/FantasiaMascotImage/FantasiaMascotImage.vue b/src/components/FantasiaMascotImage/FantasiaMascotImage.vue
new file mode 100644
index 0000000..bfdb112
--- /dev/null
+++ b/src/components/FantasiaMascotImage/FantasiaMascotImage.vue
@@ -0,0 +1,109 @@
+
+
+
+
+
![]()
+