Merge pull request #7165 from surveyjs/issue/7141-expression-title-lo…

…cation-left

Expression titleLocation left Fixes #7141

packages/survey-vue3-ui/src/Expression.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="question.cssClasses.text" ref="root">
+  <div :class="question.cssClasses.root" ref="root">
     {{ question.formatedValue }}
   </div>
 </template>

src/defaultV2-theme/blocks/sd-expression.scss

@@ -2,3 +2,7 @@
   color: $font-questiontitle-color;
   font-size: calcFontSize(1);
 }
+.sd-question__content--left .sd-expression {
+  line-height: calcSize(3);
+  margin-top: calcSize(1.5);
+}

src/vue/expression.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="question.cssClasses.text">{{ question.formatedValue }}</div>
+  <div :class="question.cssClasses.root">{{ question.formatedValue }}</div>
 </template>
 
 <script lang="ts">

tests/markup/etalon.ts

@@ -21,6 +21,7 @@ export * from "./etalon_matrixdynamic";
 export * from "./etalon_question";
 export * from "./etalon_survey";
 export * from "./etalon_signaturepad";
+export * from "./etalon_expression";
 export { markupTests } from "./helper";
 
 registerMarkupTests([

tests/markup/etalon_expression.ts

@@ -0,0 +1,21 @@
+import { StylesManager } from "survey-core";
+import { registerMarkupTest } from "./helper";
+
+registerMarkupTest(
+  {
+    name: "Test Expression question markup",
+    json: {
+      questions: [
+        {
+          name: "name",
+          type: "expression",
+          expression: "123",
+          titleLocation: "hidden"
+        }
+      ]
+    },
+    snapshot: "expression",
+    removeIds: true,
+    before: () => StylesManager.applyTheme("defaultV2"),
+    after: () => StylesManager.applyTheme("default"),
+  });

tests/markup/snapshots/expression.snap.html

@@ -0,0 +1 @@
+<div class="sd-expression">123</div>

visualRegressionTests/tests/defaultV2/expression.ts

@@ -0,0 +1,49 @@
+import { Selector, ClientFunction } from "testcafe";
+import { url, frameworks, initSurvey, setOptions, url_test, takeElementScreenshot, wrapVisualTest, resetFocusToBody } from "../../helper";
+
+const title = "Expression Screenshot";
+
+fixture`${title}`.page`${url}`.beforeEach(async (t) => {
+
+});
+
+const applyTheme = ClientFunction(theme => {
+  (<any>window).Survey.StylesManager.applyTheme(theme);
+});
+
+const theme = "defaultV2";
+
+frameworks.forEach(framework => {
+  fixture`${framework} ${title} ${theme}`
+    .page`${url_test}${theme}/${framework}`.beforeEach(async t => {
+    await applyTheme(theme);
+  });
+
+  test("Check expression question", async (t) => {
+    await wrapVisualTest(t, async (t, comparer) => {
+      await t.resizeWindow(1920, 1080);
+      await initSurvey(framework, {
+        questions: [
+          {
+            "type": "expression",
+            "name": "q1",
+            "title": "Question1",
+            "titleLocation": "left",
+            "expression": "123"
+          },
+          {
+            "type": "expression",
+            "name": "q2",
+            "title": "Question2",
+            "expression": "123"
+          },
+        ],
+        "focusFirstQuestionAutomatic": true
+      });
+      await takeElementScreenshot("expression-title-left.png", Selector(".sd-question[data-name=q1]"), t, comparer);
+      await takeElementScreenshot("expression-title-top.png", Selector(".sd-question[data-name=q2]"), t, comparer);
+    });
+  });
+
+});
+