Form Smart Paste: created a screenshot test for loader (DevExpress#31032)

Author: juleari

apps/demos/Demos/Form/SmartPaste/Angular/app/app.component.html

@@ -4,8 +4,9 @@
     your changes affect Smart Paste result.</div
   >
   <div class="instruction"
-    >Paste text from the clipboard to populate the form. Press Ctrl+Shift+V or
-    use the "Smart Paste" button under the form.</div
+    >Paste text from the clipboard to populate the form. Press Ctrl+Shift+V
+    (when the form is focused) or use the "Smart Paste" button under the
+    form.</div
   >
   <div class="textarea-container">
     <dx-button

apps/demos/Demos/Form/SmartPaste/Angular/app/app.component.ts

@@ -122,7 +122,7 @@ export class AppComponent {
             if (clipboardText) {
               form.smartPaste(clipboardText);
             } else {
-              showNotification('Copy the text to paste into the form', '#form');
+              showNotification('Clipboard is empty. Copy text before pasting', '#form');
             }
           })
           .catch(() => {

apps/demos/Demos/Form/SmartPaste/React/App.tsx

@@ -43,7 +43,7 @@ const zipAIOptions = { instruction: 'If the text does not contain a ZIP, determi
 
 const resetButtonOptions: ButtonTypes.Properties = {
   stylingMode: 'outlined',
-  type: 'normal'
+  type: 'normal',
 };
 const smartPasteButtonOptions: ButtonTypes.Properties = {
   stylingMode: 'contained',
@@ -94,8 +94,8 @@ export const aiIntegration = new AIIntegration({
     const signal = controller.signal;
 
     const aiPrompt: AIMessage[] = [
-      { role: 'system', content: prompt.system, },
-      { role: 'user', content: prompt.user, },
+      { role: 'system', content: prompt.system },
+      { role: 'user', content: prompt.user },
     ];
 
     const promise = getAIResponse(aiPrompt, signal);
@@ -121,7 +121,7 @@ const App = () => {
 
   const onCopy = useCallback(() => {
     navigator.clipboard.writeText(text);
-    showNotification('Text copied to clipboard', "#textarea", false, '0 -20');
+    showNotification('Text copied to clipboard', '#textarea', false, '0 -20');
   }, [text]);
 
   const shortcutHandler = useCallback((event: KeyboardEvent) => {
@@ -131,7 +131,7 @@ const App = () => {
           if (clipboardText) {
             formRef.current?.instance().smartPaste(clipboardText);
           } else {
-            showNotification('Copy the text to paste into the form', '#form');
+            showNotification('Clipboard is empty. Copy text before pasting', '#form');
           }
         })
         .catch(() => {
@@ -149,12 +149,12 @@ const App = () => {
   }, []);
 
   return (
-    <>
+    <React.Fragment>
       <div id="textarea-label" className="instruction">
         Copy text from the editor below to the clipboard. Edit the text to see how your changes affect Smart Paste result.
       </div>
       <div className="instruction">
-        Paste text from the clipboard to populate the form. Press Ctrl+Shift+V or use the "Smart Paste" button under the form.
+        Paste text from the clipboard to populate the form. Press Ctrl+Shift+V (when the form is focused) or use the "Smart Paste" button under the form.
       </div>
       <div className="textarea-container">
         <Button
@@ -250,7 +250,7 @@ const App = () => {
           <ButtonItem buttonOptions={resetButtonOptions} name="reset" />
         </GroupItem>
       </Form>
-    </>
+    </React.Fragment>
   );
 };
 

apps/demos/Demos/Form/SmartPaste/ReactJs/App.js

@@ -109,7 +109,7 @@ const App = () => {
           if (clipboardText) {
             formRef.current?.instance().smartPaste(clipboardText);
           } else {
-            showNotification('Copy the text to paste into the form', '#form');
+            showNotification('Clipboard is empty. Copy text before pasting', '#form');
           }
         })
         .catch(() => {
@@ -133,8 +133,8 @@ const App = () => {
         affect Smart Paste result.
       </div>
       <div className="instruction">
-        Paste text from the clipboard to populate the form. Press Ctrl+Shift+V or use the "Smart
-        Paste" button under the form.
+        Paste text from the clipboard to populate the form. Press Ctrl+Shift+V (when the form is
+        focused) or use the "Smart Paste" button under the form.
       </div>
       <div className="textarea-container">
         <Button

apps/demos/Demos/Form/SmartPaste/Vue/App.vue

@@ -8,7 +8,7 @@
   </div>
   <div class="instruction">
     Paste text from the clipboard to populate the form.
-    Press Ctrl+Shift+V or use the "Smart Paste" button under the form.
+    Press Ctrl+Shift+V (when the form is focused) or use the "Smart Paste" button under the form.
   </div>
   <div class="textarea-container">
     <DxButton
@@ -250,7 +250,7 @@ onMounted(() => {
           if (clipboardText) {
             formRef.value.instance.smartPaste(clipboardText);
           } else {
-            showNotification('Copy the text to paste into the form', '#form');
+            showNotification('Clipboard is empty. Copy text before pasting', '#form');
           }
         })
         .catch(() => {

apps/demos/Demos/Form/SmartPaste/jQuery/index.html

@@ -21,7 +21,7 @@
   <body class="dx-viewport">
     <div class="demo-container">
       <div class="instruction" id="textarea-label">Copy text from the editor below to the clipboard. Edit the text to see how your changes affect Smart Paste result.</div>
-      <div class="instruction">Paste text from the clipboard to populate the form. Press Ctrl+Shift+V or use the "Smart Paste" button under the form.</div>
+      <div class="instruction">Paste text from the clipboard to populate the form. Press Ctrl+Shift+V (when the form is focused) or use the "Smart Paste" button under the form.</div>
       <div class="textarea-container">
         <div id="copy"></div>
         <div id="textarea"></div>

apps/demos/Demos/Form/SmartPaste/jQuery/index.js

@@ -70,7 +70,7 @@ $(() => {
           form.smartPaste(text);
         } else {
           showNotification(
-            'Copy the text to paste into the form',
+            'Clipboard is empty. Copy text before pasting',
             '#form',
           );
         }