Add Playwright for Flutter Web

.github/workflows/integration-test.yaml

@@ -0,0 +1,55 @@
+name: Integration tests
+
+on:
+  workflow_dispatch:
+  pull_request:
+    paths-ignore:
+      - "**/*.md"
+
+env:
+  JAVA_VERSION: 22
+
+jobs:
+  integration_test:
+    name: Run integration tests
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Set up Java
+        uses: actions/setup-java@v4
+        with:
+          java-version: ${{ env.JAVA_VERSION }}
+          distribution: "temurin"
+          cache: maven
+          cache-dependency-path: "tmail_integration_test/pom.xml"
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Build local image
+        uses: docker/build-push-action@v6
+        with:
+          load: true
+          tags: tmail-web:integration-test
+
+      - uses: browser-actions/setup-chrome@v1
+        with:
+          chrome-version: stable
+          install-chromedriver: true
+
+      - uses: browser-actions/setup-firefox@v1
+      - uses: browser-actions/setup-geckodriver@latest
+
+      - name: Configure frontend
+        env:
+          FRONTEND_CONFIG: ${{ secrets.FRONTEND_CONFIG }}
+          FRONTEND_CREDS: ${{ secrets.FRONTEND_CREDS }}
+        run: ../scripts/setup-desktop-integration-tests.sh
+        working-directory: tmail_integration_test
+
+      - name: Run integration tests
+        run: ../scripts/run-desktop-integration-tests.sh
+        working-directory: tmail_integration_test

.gitignore

@@ -120,3 +120,6 @@ app.*.symbols
 *.g.dart
 messages_*.dart
 *.mocks.dart
+
+# end-to-end test
+config.properties

lib/features/composer/presentation/widgets/subject_composer_widget.dart

@@ -23,36 +23,39 @@ class SubjectComposerWidget extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Container(
-      decoration: const BoxDecoration(
-        border: Border(
-          bottom: BorderSide(
-            color: SubjectComposerWidgetStyle.borderColor,
-            width: 1
-          )
-        ),
-      ),
-      margin: margin,
-      padding: padding,
-      child: Row(
-        children: [
-          Text(
-            '${AppLocalizations.of(context).subject_email}:',
-            style: SubjectComposerWidgetStyle.labelTextStyle
+    return Semantics(
+      label: 'Composer:subject',
+      child: Container(
+        decoration: const BoxDecoration(
+          border: Border(
+            bottom: BorderSide(
+              color: SubjectComposerWidgetStyle.borderColor,
+              width: 1
+            )
           ),
-          const SizedBox(width:SubjectComposerWidgetStyle.space),
-          Expanded(
-            child: TextFieldBuilder(
-              cursorColor: SubjectComposerWidgetStyle.cursorColor,
-              focusNode: focusNode,
-              onTextChange: onTextChange,
-              maxLines: 1,
-              textDirection: DirectionUtils.getDirectionByLanguage(context),
-              textStyle: SubjectComposerWidgetStyle.inputTextStyle,
-              controller: textController,
+        ),
+        margin: margin,
+        padding: padding,
+        child: Row(
+          children: [
+            Text(
+              '${AppLocalizations.of(context).subject_email}:',
+              style: SubjectComposerWidgetStyle.labelTextStyle
+            ),
+            const SizedBox(width:SubjectComposerWidgetStyle.space),
+            Expanded(
+              child: TextFieldBuilder(
+                cursorColor: SubjectComposerWidgetStyle.cursorColor,
+                focusNode: focusNode,
+                onTextChange: onTextChange,
+                maxLines: 1,
+                textDirection: DirectionUtils.getDirectionByLanguage(context),
+                textStyle: SubjectComposerWidgetStyle.inputTextStyle,
+                controller: textController,
+              )
             )
-          )
-        ]
+          ]
+        ),
       ),
     );
   }

lib/features/composer/presentation/widgets/web/web_editor_widget.dart

@@ -118,63 +118,66 @@ class _WebEditorState extends State<WebEditorWidget> {
     return ValueListenableBuilder(
       valueListenable: _htmlEditorHeight,
       builder: (context, height, _) {
-        return HtmlEditor(
-          key: Key('web_editor_$height'),
-          controller: _editorController,
-          htmlEditorOptions: HtmlEditorOptions(
-            shouldEnsureVisible: true,
-            hint: '',
-            darkMode: false,
-            initialText: widget.content,
-            customBodyCssStyle: HtmlUtils.customCssStyleHtmlEditor(direction: widget.direction),
-            spellCheck: true,
-            disableDragAndDrop: true,
-            webInitialScripts: UnmodifiableListView([
-              WebScript(
-                name: HtmlUtils.lineHeight100Percent.name,
-                script: HtmlUtils.lineHeight100Percent.script,
-              ),
-              WebScript(
-                name: HtmlUtils.registerDropListener.name,
-                script: HtmlUtils.registerDropListener.script,
+        return Semantics(
+          label: 'Composer:content',
+          child: HtmlEditor(
+            key: Key('web_editor_$height'),
+            controller: _editorController,
+            htmlEditorOptions: HtmlEditorOptions(
+              shouldEnsureVisible: true,
+              hint: '',
+              darkMode: false,
+              initialText: widget.content,
+              customBodyCssStyle: HtmlUtils.customCssStyleHtmlEditor(direction: widget.direction),
+              spellCheck: true,
+              disableDragAndDrop: true,
+              webInitialScripts: UnmodifiableListView([
+                WebScript(
+                  name: HtmlUtils.lineHeight100Percent.name,
+                  script: HtmlUtils.lineHeight100Percent.script,
+                ),
+                WebScript(
+                  name: HtmlUtils.registerDropListener.name,
+                  script: HtmlUtils.registerDropListener.script,
+                ),
+                WebScript(
+                  name: HtmlUtils.unregisterDropListener.name,
+                  script: HtmlUtils.unregisterDropListener.script,
+                )
+              ])
+            ),
+            htmlToolbarOptions: const HtmlToolbarOptions(
+              toolbarType: ToolbarType.hide,
+              defaultToolbarButtons: [],
+            ),
+            otherOptions: OtherOptions(
+              height: height,
+              // dropZoneWidth: dropZoneWidth,
+              // dropZoneHeight: dropZoneHeight,
+            ),
+            callbacks: Callbacks(
+              onBeforeCommand: widget.onChangeContent,
+              onChangeContent: widget.onChangeContent,
+              onInit: () {
+                widget.onInitial?.call(widget.content);
+                if (!_dropListenerRegistered) {
+                  _editorController.evaluateJavascriptWeb(
+                    HtmlUtils.registerDropListener.name);
+                  _dropListenerRegistered = true;
+                }
+              },
+              onFocus: widget.onFocus,
+              onBlur: widget.onUnFocus,
+              onMouseDown: () => widget.onMouseDown?.call(context),
+              onChangeSelection: widget.onEditorSettings,
+              onChangeCodeview: widget.onChangeContent,
+              onTextFontSizeChanged: widget.onEditorTextSizeChanged,
+              onPaste: () => _editorController.evaluateJavascriptWeb(
+                HtmlUtils.lineHeight100Percent.name
               ),
-              WebScript(
-                name: HtmlUtils.unregisterDropListener.name,
-                script: HtmlUtils.unregisterDropListener.script,
-              )
-            ])
-          ),
-          htmlToolbarOptions: const HtmlToolbarOptions(
-            toolbarType: ToolbarType.hide,
-            defaultToolbarButtons: [],
-          ),
-          otherOptions: OtherOptions(
-            height: height,
-            // dropZoneWidth: dropZoneWidth,
-            // dropZoneHeight: dropZoneHeight,
-          ),
-          callbacks: Callbacks(
-            onBeforeCommand: widget.onChangeContent,
-            onChangeContent: widget.onChangeContent,
-            onInit: () {
-              widget.onInitial?.call(widget.content);
-              if (!_dropListenerRegistered) {
-                _editorController.evaluateJavascriptWeb(
-                  HtmlUtils.registerDropListener.name);
-                _dropListenerRegistered = true;
-              }
-            },
-            onFocus: widget.onFocus,
-            onBlur: widget.onUnFocus,
-            onMouseDown: () => widget.onMouseDown?.call(context),
-            onChangeSelection: widget.onEditorSettings,
-            onChangeCodeview: widget.onChangeContent,
-            onTextFontSizeChanged: widget.onEditorTextSizeChanged,
-            onPaste: () => _editorController.evaluateJavascriptWeb(
-              HtmlUtils.lineHeight100Percent.name
+              onDragEnter: widget.onDragEnter,
+              onDragLeave: (types) {},
             ),
-            onDragEnter: widget.onDragEnter,
-            onDragLeave: (_) {},
           ),
         );
       }

lib/main.dart

@@ -1,6 +1,7 @@
 import 'package:core/presentation/utils/theme_utils.dart';
 import 'package:core/utils/app_logger.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter/semantics.dart';
 import 'package:flutter_localizations/flutter_localizations.dart';
 import 'package:get/get.dart';
 import 'package:tmail_ui_user/features/caching/config/hive_cache_config.dart';
@@ -17,6 +18,7 @@ import 'package:worker_manager/worker_manager.dart';
 void main() async {
   initLogger(() async {
     WidgetsFlutterBinding.ensureInitialized();
+    SemanticsBinding.instance.ensureSemantics();
     ThemeUtils.setSystemLightUIStyle();
 
     await Future.wait([

scripts/run-desktop-integration-tests.sh

@@ -0,0 +1,4 @@
+#!/usr/bin/env bash
+
+# docker run -d -p 2023:80 --name tmail-web -v "$(pwd)/env.file:/usr/share/nginx/html/assets/env.file" tmail-web:integration-test
+./mvnw test

scripts/setup-desktop-integration-tests.sh

@@ -0,0 +1,5 @@
+#!/usr/bin/env sh
+
+echo "$FRONTEND_CONFIG" > env.file
+mkdir -p src/main/resources
+echo "$FRONTEND_CREDS" > src/main/resources/config.properties

tmail_integration_test/.gitignore

@@ -0,0 +1,2 @@
+# Default ignored files
+/target/

tmail_integration_test/.mvn/wrapper/maven-wrapper.properties

@@ -0,0 +1,19 @@
+# Licensed to the Apache Software Foundation (ASF) under one
+# or more contributor license agreements.  See the NOTICE file
+# distributed with this work for additional information
+# regarding copyright ownership.  The ASF licenses this file
+# to you under the Apache License, Version 2.0 (the
+# "License"); you may not use this file except in compliance
+# with the License.  You may obtain a copy of the License at
+#
+#   http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing,
+# software distributed under the License is distributed on an
+# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+# KIND, either express or implied.  See the License for the
+# specific language governing permissions and limitations
+# under the License.
+wrapperVersion=3.3.2
+distributionType=only-script
+distributionUrl=https://repo.maven.apache.org/maven2/org/apache/maven/apache-maven/3.9.8/apache-maven-3.9.8-bin.zip