Add Cypress component test for MessageEditor

apps/desktop/cypress.config.ts

@@ -1,4 +1,6 @@
+import { svelte } from '@sveltejs/vite-plugin-svelte';
 import { defineConfig } from 'cypress';
+import path from 'path';
 
 export default defineConfig({
 	retries: {
@@ -7,9 +9,29 @@ export default defineConfig({
 		// Configure retry attempts for `cypress open`
 		openMode: 0
 	},
+
 	e2e: {
 		baseUrl: 'http://localhost:1420',
 		supportFile: 'cypress/e2e/support/index.ts'
 	},
-	experimentalWebKitSupport: true
+
+	experimentalWebKitSupport: true,
+
+	component: {
+		devServer: {
+			framework: 'svelte',
+			bundler: 'vite',
+			viteConfig: {
+				plugins: [svelte()],
+				resolve: {
+					alias: {
+						$components: path.resolve('src/components'),
+						$lib: path.resolve('src/lib')
+					}
+				}
+			}
+		},
+		// 👇 And this line if Cypress still fails to resolve the iframe mount file
+		indexHtmlFile: 'cypress/support/index.html'
+	}
 });

apps/desktop/cypress/component/MesageEditor.cy.ts

@@ -0,0 +1,38 @@
+import MessageEditor from '$components/v3/editor/MessageEditor.svelte';
+import { SETTINGS, type Settings } from '$lib/settings/userSettings';
+import { UiState } from '$lib/state/uiState.svelte';
+import { TestId } from '$lib/testing/testIds';
+import { HttpClient } from '@gitbutler/shared/network/httpClient';
+import { UploadsService } from '@gitbutler/shared/uploads/uploadsService';
+import { readable, writable } from 'svelte/store';
+import '../../src/styles/styles.css';
+import '@gitbutler/ui/main.css';
+
+describe('CommitMesageEditor.cy.ts', () => {
+	const httpClient = new HttpClient(window.fetch, 'https://www.example.com', writable(''));
+	const settings = writable({} as Settings);
+	it('playground', () => {
+		const context = new Map();
+		const uiState = new UiState(readable({ ids: [], entities: {} }), () => {});
+		context.set(UiState, uiState);
+		context.set(UploadsService, new UploadsService(httpClient));
+		context.set(SETTINGS, settings);
+
+		const mountResult = cy.mount(MessageEditor, {
+			props: {
+				projectId: '1234',
+				initialValue: 'Hello world!',
+				placeholder: 'text goes here',
+				testId: TestId.EditCommitMessageBox
+			} as const,
+			context
+		});
+		mountResult
+			.then(async ({ component }) => {
+				const comp = component as MessageEditor;
+				return await comp.getPlaintext();
+			})
+			.should('eq', 'Hello world!');
+		cy.getByTestId(TestId.EditCommitMessageBox).should('exist').click().type('new text!');
+	});
+});

apps/desktop/cypress/support/commands.ts

@@ -0,0 +1,49 @@
+/// <reference types="cypress" />
+
+import type { TestId } from '$lib/testing/testIds';
+
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }
+
+type TestIdValues = `${TestId}`;
+
+Cypress.Commands.add('getByTestId', (testId: TestIdValues, containingText?: string) => {
+	if (containingText) {
+		return cy.contains(`[data-testid="${testId}"]`, containingText, { timeout: 15000 });
+	}
+	return cy.get(`[data-testid="${testId}"]`, { timeout: 15000 });
+});

apps/desktop/cypress/support/component.ts

@@ -0,0 +1,36 @@
+// ***********************************************************
+// This example support/component.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands';
+
+import { mount } from 'cypress/svelte';
+
+// Augment the Cypress namespace to include type definitions for
+// your custom command.
+// Alternatively, can be defined in cypress/support/component.d.ts
+// with a <reference path="./component" /> at the top of your spec.
+declare global {
+	namespace Cypress {
+		interface Chainable {
+			mount: typeof mount;
+		}
+	}
+}
+
+Cypress.Commands.add('mount', mount);
+
+// Example use:
+// cy.mount(MyComponent)

apps/desktop/cypress/support/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>Components App</title>
+  </head>
+  <body>
+    <div data-cy-root></div>
+  </body>
+</html>

apps/desktop/cypress/tsconfig.json

@@ -3,5 +3,5 @@
 	"compilerOptions": {
 		"types": ["cypress"]
 	},
-	"include": ["e2e/**/*.ts"]
+	"include": ["**/*.ts"]
 }

apps/desktop/src/components/v3/editor/MessageEditor.svelte

@@ -15,6 +15,7 @@
 	import { showError } from '$lib/notifications/toasts';
 	import { SETTINGS, type Settings } from '$lib/settings/userSettings';
 	import { UiState } from '$lib/state/uiState.svelte';
+	import { TestId } from '$lib/testing/testIds';
 	import { getContext, getContextStoreBySymbol } from '@gitbutler/shared/context';
 	import { uploadFiles } from '@gitbutler/shared/dom';
 	import { persisted } from '@gitbutler/shared/persisted';
@@ -54,9 +55,9 @@
 		enableSmiles?: boolean;
 		enableRichText?: boolean;
 		enableRuler?: boolean;
-		onAiButtonClick: (params: AiButtonClickParams) => void;
-		canUseAI: boolean;
-		aiIsLoading: boolean;
+		onAiButtonClick?: (params: AiButtonClickParams) => void;
+		canUseAI?: boolean;
+		aiIsLoading?: boolean;
 		suggestionsHandler?: CommitSuggestions;
 		testId?: string;
 	}
@@ -219,7 +220,7 @@
 	function handleGenerateMessage() {
 		if (aiIsLoading) return;
 
-		onAiButtonClick({
+		onAiButtonClick?.({
 			useEmojiStyle: $commitGenerationUseEmojis,
 			useBriefStyle: $commitGenerationExtraConcise
 		});
@@ -385,6 +386,7 @@
 					onclick={() => {
 						useFloatingBox.current = !useFloatingBox.current;
 					}}
+					testId={TestId.FloatingModeButton}
 				/>
 				<div class="message-textarea__toolbar__divider"></div>
 				{#if enableSmiles}

apps/desktop/src/lib/analytics/analytics.ts

@@ -3,6 +3,7 @@ import { initSentry } from '$lib/analytics/sentry';
 import { AppSettings } from '$lib/config/appSettings';
 import { getName, getVersion } from '@tauri-apps/api/app';
 import posthog from 'posthog-js';
+import { PUBLIC_POSTHOG_API_KEY } from '$env/static/public';
 
 export function initAnalyticsIfEnabled(appSettings: AppSettings, postHog: PostHogWrapper) {
 	if (import.meta.env.MODE === 'development') return;
@@ -15,7 +16,7 @@ export function initAnalyticsIfEnabled(appSettings: AppSettings, postHog: PostHo
 			appSettings.appMetricsEnabled.onDisk().then(async (enabled) => {
 				if (enabled) {
 					const [appName, appVersion] = await Promise.all([getName(), getVersion()]);
-					postHog.init(appName, appVersion);
+					postHog.init(appName, appVersion, PUBLIC_POSTHOG_API_KEY);
 				}
 			});
 			appSettings.appNonAnonMetricsEnabled.onDisk().then((enabled) => {

apps/desktop/src/lib/analytics/posthog.ts

@@ -2,7 +2,6 @@ import { PostHog, posthog, type Properties } from 'posthog-js';
 import type { EventContext } from '$lib/analytics/eventContext';
 import type { SettingsService } from '$lib/config/appSettingsV2';
 import type { RepoInfo } from '$lib/url/gitUrl';
-import { PUBLIC_POSTHOG_API_KEY } from '$env/static/public';
 
 export class PostHogWrapper {
 	private _instance: PostHog | void = undefined;
@@ -18,8 +17,8 @@ export class PostHogWrapper {
 		this._instance?.capture(eventName, newProperties);
 	}
 
-	async init(appName: string, appVersion: string) {
-		this._instance = posthog.init(PUBLIC_POSTHOG_API_KEY, {
+	async init(appName: string, appVersion: string, apiKey: string) {
+		this._instance = posthog.init(apiKey, {
 			api_host: 'https://eu.posthog.com',
 			autocapture: false,
 			disable_session_recording: true,

apps/desktop/src/lib/backend/tauri.ts

@@ -2,6 +2,8 @@ import { invoke as invokeIpc, listen as listenIpc } from '$lib/backend/ipc';
 import { getVersion } from '@tauri-apps/api/app';
 import { check } from '@tauri-apps/plugin-updater';
 
+export const IS_TAURI_ENV = '__TAURI_INTERNALS__' in window;
+
 export class Tauri {
 	invoke = invokeIpc;
 	listen = listenIpc;

apps/desktop/src/lib/irc/ircService.svelte.ts

@@ -25,7 +25,7 @@ import persistReducer from 'redux-persist/es/persistReducer';
 import storage from 'redux-persist/lib/storage';
 import type { IrcClient } from '$lib/irc/ircClient.svelte';
 import type { IrcEvent } from '$lib/irc/parser';
-import type { IrcChannel, IrcChat, WhoInfo } from '$lib/irc/types';
+import type { IrcChannel, IrcChat, IRCState, WhoInfo } from '$lib/irc/types';
 import type { ClientState } from '$lib/state/clientState.svelte';
 import type { Reactive } from '@gitbutler/shared/storeUtils';
 import type { ThunkDispatch, UnknownAction } from '@reduxjs/toolkit';
@@ -49,32 +49,25 @@ export class IrcService {
 		};
 
 		clientState.inject(ircSlice.reducerPath, persistReducer(persistConfig, ircSlice.reducer));
+		const store = clientState.rootState;
 
-		$effect(() => {
-			if (clientState.reactiveState) {
-				if (ircSlice.reducerPath in clientState.reactiveState) {
-					// @ts-expect-error code-splitting means it's not defined in client state.
-					this.state = clientState.reactiveState[ircSlice.reducerPath] as IRCState;
-				}
-			}
+		store.subscribe((value) => {
+			// @ts-expect-error code-splitting means it's not defined in client state.
+			this.state = value[ircSlice.reducerPath] as IRCState;
 		});
 
-		$effect(() => {
-			return this.ircClient.onevent(async (event) => {
-				return this.handleEvent(event);
-			});
+		this.ircClient.onevent(async (event) => {
+			return this.handleEvent(event);
 		});
 
-		$effect(() => {
-			return this.ircClient.onopen(() => {
-				const channels = this.getChannels();
-				this.dispatch(clearNames());
-				setTimeout(() => {
-					for (const channel of channels.current) {
-						this.send(`JOIN ${channel?.name}`);
-					}
-				}, 5000);
-			});
+		this.ircClient.onopen(() => {
+			const channels = this.getChannels();
+			this.dispatch(clearNames());
+			setTimeout(() => {
+				for (const channel of channels.current) {
+					this.send(`JOIN ${channel?.name}`);
+				}
+			}, 5000);
 		});
 	}
 

apps/desktop/src/lib/platform/platform.ts

@@ -1,3 +1,4 @@
+import { IS_TAURI_ENV } from '$lib/backend/tauri';
 import { platform } from '@tauri-apps/plugin-os';
 
-export const platformName = platform();
+export const platformName = IS_TAURI_ENV ? platform() : undefined;

apps/desktop/src/lib/selection/uncommittedService.svelte.ts

@@ -47,10 +47,10 @@ export class UncommittedService {
 			persistReducer(persistConfig, uncommittedSlice.reducer)
 		);
 
-		$effect(() => {
-			if (clientState.reactiveState && uncommittedSlice.reducerPath in clientState.reactiveState) {
+		clientState.rootState.subscribe((value) => {
+			if (value && uncommittedSlice.reducerPath in value) {
 				// @ts-expect-error code-splitting means it's not defined in client state.
-				this.state = clientState.reactiveState[uncommittedSlice.reducerPath];
+				this.state = value[uncommittedSlice.reducerPath];
 			}
 		});
 	}