added splash screen e2e test (work, colors, sizes)

2024-05-04 12:23:18 +12:00 · 2023-09-15 00:13:35 +02:00 · 2023-09-15 00:13:35 +02:00 · 5aac07787d
parent 6e55d8cf65
commit 5aac07787d
3 changed files with 156 additions and 37 deletions
--- a/index.html
+++ b/index.html
@ -26,7 +26,6 @@
        transition: 0.3s opacity ease-in;
        transition-delay: 2s;
        z-index: 9999999999999999999;
-        min-width: 600px;
      }

       .splashLoading{
@ -51,7 +50,7 @@
  </head>
  <body>
    <!-- quasar:entry-point -->
-    <div class="splashLoadingWrapper">
+    <div class="splashLoadingWrapper" data-test="appSplashScreen-wrapper">
      <svg class="splashLoading" width="350px" height="350px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" xmlns="http://www.w3.org/2000/svg"><g transform="translate(-20,-20)"><path d="M79.9,52.6C80,51.8,80,50.9,80,50s0-1.8-0.1-2.6l-5.1-0.4c-0.3-2.4-0.9-4.6-1.8-6.7l4.2-2.9c-0.7-1.6-1.6-3.1-2.6-4.5 L70,35c-1.4-1.9-3.1-3.5-4.9-4.9l2.2-4.6c-1.4-1-2.9-1.9-4.5-2.6L59.8,27c-2.1-0.9-4.4-1.5-6.7-1.8l-0.4-5.1C51.8,20,50.9,20,50,20 s-1.8,0-2.6,0.1l-0.4,5.1c-2.4,0.3-4.6,0.9-6.7,1.8l-2.9-4.1c-1.6,0.7-3.1,1.6-4.5,2.6l2.1,4.6c-1.9,1.4-3.5,3.1-5,4.9l-4.5-2.1 c-1,1.4-1.9,2.9-2.6,4.5l4.1,2.9c-0.9,2.1-1.5,4.4-1.8,6.8l-5,0.4C20,48.2,20,49.1,20,50s0,1.8,0.1,2.6l5,0.4 c0.3,2.4,0.9,4.7,1.8,6.8l-4.1,2.9c0.7,1.6,1.6,3.1,2.6,4.5l4.5-2.1c1.4,1.9,3.1,3.5,5,4.9l-2.1,4.6c1.4,1,2.9,1.9,4.5,2.6l2.9-4.1 c2.1,0.9,4.4,1.5,6.7,1.8l0.4,5.1C48.2,80,49.1,80,50,80s1.8,0,2.6-0.1l0.4-5.1c2.3-0.3,4.6-0.9,6.7-1.8l2.9,4.2 c1.6-0.7,3.1-1.6,4.5-2.6L65,69.9c1.9-1.4,3.5-3,4.9-4.9l4.6,2.2c1-1.4,1.9-2.9,2.6-4.5L73,59.8c0.9-2.1,1.5-4.4,1.8-6.7L79.9,52.6 z M50,65c-8.3,0-15-6.7-15-15c0-8.3,6.7-15,15-15s15,6.7,15,15C65,58.3,58.3,65,50,65z" fill="currentColor"><animateTransform attributeName="transform" type="rotate" from="90 50 50" to="0 50 50" dur="1s" repeatCount="indefinite"></animateTransform></path></g><g transform="translate(20,20) rotate(15 50 50)"><path d="M79.9,52.6C80,51.8,80,50.9,80,50s0-1.8-0.1-2.6l-5.1-0.4c-0.3-2.4-0.9-4.6-1.8-6.7l4.2-2.9c-0.7-1.6-1.6-3.1-2.6-4.5 L70,35c-1.4-1.9-3.1-3.5-4.9-4.9l2.2-4.6c-1.4-1-2.9-1.9-4.5-2.6L59.8,27c-2.1-0.9-4.4-1.5-6.7-1.8l-0.4-5.1C51.8,20,50.9,20,50,20 s-1.8,0-2.6,0.1l-0.4,5.1c-2.4,0.3-4.6,0.9-6.7,1.8l-2.9-4.1c-1.6,0.7-3.1,1.6-4.5,2.6l2.1,4.6c-1.9,1.4-3.5,3.1-5,4.9l-4.5-2.1 c-1,1.4-1.9,2.9-2.6,4.5l4.1,2.9c-0.9,2.1-1.5,4.4-1.8,6.8l-5,0.4C20,48.2,20,49.1,20,50s0,1.8,0.1,2.6l5,0.4 c0.3,2.4,0.9,4.7,1.8,6.8l-4.1,2.9c0.7,1.6,1.6,3.1,2.6,4.5l4.5-2.1c1.4,1.9,3.1,3.5,5,4.9l-2.1,4.6c1.4,1,2.9,1.9,4.5,2.6l2.9-4.1 c2.1,0.9,4.4,1.5,6.7,1.8l0.4,5.1C48.2,80,49.1,80,50,80s1.8,0,2.6-0.1l0.4-5.1c2.3-0.3,4.6-0.9,6.7-1.8l2.9,4.2 c1.6-0.7,3.1-1.6,4.5-2.6L65,69.9c1.9-1.4,3.5-3,4.9-4.9l4.6,2.2c1-1.4,1.9-2.9,2.6-4.5L73,59.8c0.9-2.1,1.5-4.4,1.8-6.7L79.9,52.6 z M50,65c-8.3,0-15-6.7-15-15c0-8.3,6.7-15,15-15s15,6.7,15,15C65,58.3,58.3,65,50,65z" fill="currentColor"><animateTransform attributeName="transform" type="rotate" from="0 50 50" to="90 50 50" dur="1s" repeatCount="indefinite"></animateTransform></path></g></svg>
    </div>
  </body>
--- a/test/playwright-e2e/checkAppSplashScreen.playwright.spec.ts
+++ b/test/playwright-e2e/checkAppSplashScreen.playwright.spec.ts
@ -0,0 +1,155 @@
+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 testing via Playwright
+ */
+const extraEnvSettings = {
+  TEST_ENV: 'e2e'
+}
+
+/**
+ * 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 = 0
+
+/**
+ * Object of string data selectors for the e2e
+ */
+const selectorList = {
+  wrapper: 'appSplashScreen-wrapper'
+}
+
+/**
+ * Check if the splash screen displays properly on load of the app
+ */
+test('Splash screen works properly', async () => {
+  const testSplashscreenTimeout = 3000
+
+  const electronApp = await electron.launch({
+    env: extraEnvSettings,
+    args: [electronMainFilePath]
+  })
+
+  const appWindow = await electronApp.firstWindow()
+  await appWindow.waitForTimeout(faFrontendRenderTimer)
+
+  const wrapperElement = await appWindow.$(`[data-test="${selectorList.wrapper}"]`)
+
+  // Check if the tested element exists
+  if (wrapperElement !== null) {
+    // Check if the splash screen is visible on innitial load
+    const elementOpacityFirstRender = await appWindow.evaluate((selectorList) => {
+      const element = document.querySelector(`[data-test="${selectorList.wrapper}"]`)
+      if (element !== null) return window.getComputedStyle(element).opacity
+    }, selectorList)
+    expect(elementOpacityFirstRender).toBe('1')
+
+    // Wait until the splash screen is supposed to fade away
+    await appWindow.waitForTimeout(testSplashscreenTimeout)
+
+    // Check if the splash screen is hidden after the app contents load
+    const elementOpacityAfterAppLoad = await appWindow.evaluate((selectorList) => {
+      const element = document.querySelector(`[data-test="${selectorList.wrapper}"]`)
+      if (element !== null) return window.getComputedStyle(element).opacity
+    }, selectorList)
+    expect(elementOpacityAfterAppLoad).toBe('0')
+  } else {
+    // Element doesn't exist
+    test.fail()
+  }
+
+  await electronApp.close()
+})
+
+/**
+ * Check if the splash screen has proper colors in RGB format
+ */
+test('Splash screen has proper colors', async () => {
+  const testStringBackgroundColorRGB = 'rgb(24, 48, 58)'
+  const testStringPathFillColorRGB = 'rgb(215, 172, 71)'
+
+  const electronApp = await electron.launch({
+    env: extraEnvSettings,
+    args: [electronMainFilePath]
+  })
+
+  const appWindow = await electronApp.firstWindow()
+  await appWindow.waitForTimeout(faFrontendRenderTimer)
+
+  const wrapperElement = await appWindow.$(`[data-test="${selectorList.wrapper}"]`)
+
+  // Check if the tested element exists
+  if (wrapperElement !== null) {
+    // Check if the background color is correct
+    const elementBackgroundColor = await appWindow.evaluate((selectorList) => {
+      const element = document.querySelector(`[data-test="${selectorList.wrapper}"]`)
+      if (element !== null) return window.getComputedStyle(element).backgroundColor
+    }, selectorList)
+    expect(elementBackgroundColor).toBe(testStringBackgroundColorRGB)
+
+    // Check if the fill color of the svg path is correct
+    const elementPathFillColor = await appWindow.evaluate((selectorList) => {
+      const element = document.querySelector(`[data-test="${selectorList.wrapper}"] path`)
+      if (element !== null) return window.getComputedStyle(element).fill
+    }, selectorList)
+    expect(elementPathFillColor).toBe(testStringPathFillColorRGB)
+  } else {
+    // Element doesn't exist
+    test.fail()
+  }
+
+  await electronApp.close()
+})
+
+/**
+ * Check if the splash screen has proper sizings
+ */
+test('Splash screen has proper sizings', async () => {
+  const testStringWidth = '350px'
+  const testStringHeight = '350px'
+
+  const electronApp = await electron.launch({
+    env: extraEnvSettings,
+    args: [electronMainFilePath]
+  })
+
+  const appWindow = await electronApp.firstWindow()
+
+  const iconElement = await appWindow.$(`[data-test="${selectorList.wrapper}"] svg`)
+
+  // Check if the tested element exists
+  if (iconElement !== null) {
+    const iconBoxData = await iconElement.boundingBox()
+
+    // Test if the tested element isn't invisisble for some reason
+    if (iconBoxData !== null) {
+      // Test for proper width
+      const roundedFirstValueWidth = Math.round(iconBoxData.width)
+      const roundedSecondValueWidth = Math.round(parseInt(testStringWidth))
+
+      expect(roundedFirstValueWidth).toBe(roundedSecondValueWidth)
+
+      // Test for proper height
+      const roundedFirstValueHeight = Math.round(iconBoxData.height)
+      const roundedSecondValueHeight = Math.round(parseInt(testStringHeight))
+
+      expect(roundedFirstValueHeight).toBe(roundedSecondValueHeight)
+    } else {
+      // Element is invisible
+      test.fail()
+    }
+  } else {
+    // Element doesn't exist
+    test.fail()
+  }
+
+  await electronApp.close()
+})
--- a/test/playwright-e2e/someTest.spec.ts
+++ b/test/playwright-e2e/someTest.spec.ts
@ -1,35 +0,0 @@
-// TODO ADD SOME TESTS
-
-import { _electron as electron } from 'playwright'
-import { test } from '@playwright/test'
-import { extraEnvVariablesAPI } from 'app/src-electron/customContentBridgeAPIs/extraEnvVariablesAPI'
-
-/**
- * Extra env settings too trigger  testing via Playwright
- */
-const extraEnvSettings = {
-  TEST_ENV: 'e2e'
-}
-
-/**
- * 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
-
-/**
- * Test if the Electron launches to begin with.
- */
-test('Should launch app', async () => {
-  const electronApp = await electron.launch({
-    env: extraEnvSettings,
-    args: [electronMainFilePath]
-  })
-
-  await electronApp.close()
-})