Add cypress testing

Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>

Author: skjnldsv

.github/workflows/cypress.yml

@@ -0,0 +1,98 @@
+name: Cypress
+
+on:
+  pull_request:
+  push:
+    branches:
+      - master
+      - stable*
+
+env:
+  APP_NAME: viewer
+  BRANCH: ${{ github.base_ref }}
+  TESTING: true
+
+jobs:
+  init:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout server
+        uses: actions/checkout@v3
+
+      - name: Read package.json node and npm engines version
+        uses: skjnldsv/read-package-engines-version-actions@v1.2
+        id: versions
+        with:
+          fallbackNode: "^12"
+          fallbackNpm: "^6"
+
+      - name: Set up node ${{ steps.versions.outputs.nodeVersion }}
+        uses: actions/setup-node@v3
+        with:
+          cache: 'npm'
+          node-version: ${{ steps.versions.outputs.nodeVersion }}
+
+      - name: Set up npm ${{ steps.versions.outputs.npmVersion }}
+        run: npm i -g npm@"${{ steps.versions.outputs.npmVersion }}"
+
+      - name: Install dependencies & build app
+        run: |
+          npm ci
+          TESTING=true npm run build --if-present
+
+      - name: Save context
+        uses: actions/cache@v3
+        with:
+          key: cypress-context-${{ github.run_id }}
+          path: /home/runner/work/server
+
+  cypress:
+    runs-on: ubuntu-latest
+    needs: init
+
+    strategy:
+      fail-fast: false
+      matrix:
+        # run multiple copies of the current job in parallel
+        containers: [1]
+
+    name: runner ${{ matrix.containers }}
+
+    steps:
+      - name: Restore context
+        uses: actions/cache@v3
+        with:
+          key: cypress-context-${{ github.run_id }}
+          path: /home/runner/work/server
+
+      - name: Run E2E cypress tests
+        uses: cypress-io/github-action@v4
+        with:
+          record: true
+          parallel: true
+          # cypress env
+          ci-build-id: ${{ github.sha }}-${{ github.run_number }}
+          tag: ${{ github.event_name }}
+        env:
+          # Needs to be prefixed with CYPRESS_
+          CYPRESS_BRANCH: ${{ env.BRANCH }}
+          CYPRESS_GH: true
+          # https://github.com/cypress-io/github-action/issues/124
+          COMMIT_INFO_MESSAGE: ${{ github.event.pull_request.title }}
+          # Needed for some specific code workarounds
+          TESTING: true
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
+
+  summary:
+    runs-on: ubuntu-latest
+    needs: [init, cypress]
+
+    if: always()
+
+    name: cypress-summary
+
+    steps:
+      - name: Summary status
+        run: if ${{ needs.init.result != 'success' || ( needs.cypress.result != 'success' && needs.cypress.result != 'skipped' ) }}; then exit 1; fi

.gitignore

@@ -163,3 +163,7 @@ composer.phar
 
 ./.htaccess
 core/js/mimetypelist.js
+
+# Tests - cypress
+cypress/snapshots
+cypress/videos

apps/theming/css/default.css

@@ -54,9 +54,6 @@
   --background-invert-if-dark: no;
   --background-invert-if-bright: invert(100%);
   --background-image-invert-if-bright: no;
-  --image-background: url('/core/img/app-background.jpg');
-  --image-background-default: url('/core/img/app-background.jpg');
-  --color-background-plain: #0082c9;
   --primary-invert-if-bright: no;
   --color-primary: #006aa3;
   --color-primary-default: #0082c9;
@@ -75,4 +72,6 @@
   --color-primary-element-light-hover: #dbe5ea;
   --color-primary-element-text-dark: #ededed;
   --gradient-primary-background: linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
+  --image-background-default: url('/apps/theming/img/background/kamil-porembinski-clouds.jpg');
+  --color-background-plain: #0082c9;
 }

apps/theming/lib/ImageManager.php

@@ -94,7 +94,7 @@ public function getImageUrl(string $key): string {
 			case 'favicon':
 				return $this->urlGenerator->imagePath('core', 'logo/logo.png') . '?v=' . $cacheBusterCounter;
 			case 'background':
-				return $this->urlGenerator->linkTo(Application::APP_ID, "img/background/" . BackgroundService::DEFAULT_BACKGROUND);
+				return $this->urlGenerator->linkTo(Application::APP_ID, 'img/background/' . BackgroundService::DEFAULT_BACKGROUND);
 		}
 		return '';
 	}

apps/theming/lib/Service/BackgroundService.php

@@ -31,7 +31,6 @@
 use OC\User\NoUserException;
 use OCA\Theming\AppInfo\Application;
 use OCA\Theming\ThemingDefaults;
-use OCP\Files\AppData\IAppDataFactory;
 use OCP\Files\File;
 use OCP\Files\IAppData;
 use OCP\Files\IRootFolder;

apps/theming/lib/ThemingDefaults.php

@@ -247,7 +247,7 @@ public function getColorPrimary(): string {
 	 * Return the default color primary
 	 */
 	public function getDefaultColorPrimary(): string {
-		$color = $this->config->getAppValue(Application::APP_ID, 'color');
+		$color = $this->config->getAppValue(Application::APP_ID, 'color', '');
 		if (!preg_match('/^\#([0-9a-f]{3}|[0-9a-f]{6})$/i', $color)) {
 			$color = '#0082c9';
 		}

apps/theming/src/AdminTheming.vue

@@ -286,7 +286,7 @@ export default {
 		text-align: center;
 		margin-top: 10px;
 		background-color: var(--color-primary-default);
-        background-image: var(--image-background-default, var(--image-background-plain, linear-gradient(40deg, #0082c9 0%, #30b6ff 100%)));
+		background-image: var(--image-background-default, var(--image-background-plain, linear-gradient(40deg, #0082c9 0%, #30b6ff 100%)));
 
 		&-logo {
 			width: 20%;

apps/theming/src/components/BackgroundSettings.vue

@@ -1,10 +1,10 @@
 <!--
   - @copyright Copyright (c) 2020 Julius Härtl <jus@bitgrid.net>
-  - @copyright Copyright (c) 2022 Greta Doci <gretadoci@gmail.com>
   -
-  - @author Julius Härtl <jus@bitgrid.net>
-  - @author Greta Doci <gretadoci@gmail.com>
   - @author Christopher Ng <chrng8@gmail.com>
+  - @author Greta Doci <gretadoci@gmail.com>
+  - @author John Molakvoæ <skjnldsv@protonmail.com>
+  - @author Julius Härtl <jus@bitgrid.net>
   -
   - @license GNU AGPL version 3 or any later version
   -
@@ -24,11 +24,12 @@
   -->
 
 <template>
-	<div class="background-selector">
+	<div class="background-selector" data-user-theming-background-settings>
 		<!-- Custom background -->
 		<button class="background background__filepicker"
 			:class="{ 'icon-loading': loading === 'custom', 'background--active': backgroundImage === 'custom' }"
 			:data-color-bright="invertTextColor(Theming.color)"
+			data-user-theming-background-custom
 			tabindex="0"
 			@click="pickFile">
 			{{ t('theming', 'Custom background') }}
@@ -40,6 +41,7 @@
 			:class="{ 'icon-loading': loading === 'default', 'background--active': backgroundImage === 'default' }"
 			:data-color-bright="invertTextColor(Theming.defaultColor)"
 			:style="{ '--border-color': Theming.defaultColor }"
+			data-user-theming-background-default
 			tabindex="0"
 			@click="setDefault">
 			{{ t('theming', 'Default background') }}
@@ -52,6 +54,7 @@
 				:data-color="Theming.color"
 				:data-color-bright="invertTextColor(Theming.color)"
 				:style="{ backgroundColor: Theming.color, '--border-color': Theming.color}"
+				data-user-theming-background-color
 				tabindex="0">
 				{{ t('theming', 'Change color') }}
 			</button>
@@ -63,6 +66,7 @@
 			v-tooltip="shippedBackground.details.attribution"
 			:class="{ 'icon-loading': loading === shippedBackground.name, 'background--active': backgroundImage === shippedBackground.name }"
 			:data-color-bright="shippedBackground.details.theming === 'dark'"
+			:data-user-theming-background-shipped="shippedBackground.name"
 			:style="{ backgroundImage: 'url(' + shippedBackground.preview + ')', '--border-color': shippedBackground.details.primary_color }"
 			class="background background__shipped"
 			tabindex="0"
@@ -72,6 +76,7 @@
 
 		<!-- Remove background -->
 		<button class="background background__delete"
+			data-user-theming-background-clear
 			tabindex="0"
 			@click="removeBackground">
 			{{ t('theming', 'Remove background') }}

apps/theming/tests/Controller/ThemingControllerTest.php

@@ -680,7 +680,7 @@ public function testGetLoginBackgroundNotExistent() {
 
 	public function testGetLoginBackground() {
 		$file = $this->createMock(ISimpleFile::class);
-		$file->method('getName')->willReturn('app-background.jpg');
+		$file->method('getName')->willReturn('background.png');
 		$file->method('getMTime')->willReturn(42);
 		$this->imageManager->expects($this->once())
 			->method('getImage')

apps/theming/tests/Themes/DefaultThemeTest.php

@@ -22,8 +22,10 @@
  */
 namespace OCA\Theming\Tests\Service;
 
+use OCA\Theming\AppInfo\Application;
 use OCA\Theming\ImageManager;
 use OCA\Theming\ITheme;
+use OCA\Theming\Service\BackgroundService;
 use OCA\Theming\Themes\DefaultTheme;
 use OCA\Theming\ThemingDefaults;
 use OCA\Theming\Util;
@@ -80,6 +82,11 @@ protected function setUp(): void {
 			->method('getDefaultColorPrimary')
 			->willReturn('#0082c9');
 
+		$this->themingDefaults
+			->expects($this->any())
+			->method('getBackground')
+			->willReturn('/apps/' . Application::APP_ID . '/img/background/' . BackgroundService::DEFAULT_BACKGROUND);
+
 		$this->l10n
 			->expects($this->any())
 			->method('t')