Issue 1431: fix copy multiple locators + small refactoring

src/__tests__/locators/utils/escapeLocator.test.ts

@@ -1,5 +1,5 @@
+import { escapeLocator } from "../../../features/locators/utils/copyLocatorToClipboard";
 import { locatorMocks } from "./__mocks__/locatorEscaped.mock";
-import { escapeLocator } from "../../../common/utils/copyToClipboard";
 
 test("escape symbols in locator", () => {
   locatorMocks.forEach((locator) => {

src/common/utils/copyToClipboard.ts

@@ -1,38 +1,3 @@
-export const escapeLocator = (locator: string) => {
-  let transformedText = locator.replace(/[\\'\n]/g, (match: string) => {
-    switch (match) {
-      case "\\":
-        return "\\\\\\\\";
-      case "'":
-        return "\\'";
-      case "\n":
-        return "\\n";
-      default:
-        return match;
-    }
-  });
-  const lastDoubleQuote = transformedText.lastIndexOf('"');
-  const firstDoubleQuote = transformedText.indexOf('"');
-  const beforeFirstDoubleQuote = transformedText.slice(0, firstDoubleQuote + 1);
-  const afterLastDoubleQuote = transformedText.slice(lastDoubleQuote);
-  let insideOfDoubleQuotes = transformedText.slice(firstDoubleQuote + 1, lastDoubleQuote);
-
-  if (insideOfDoubleQuotes.includes('"')) {
-    insideOfDoubleQuotes = insideOfDoubleQuotes.replace(/"/g, '\\\\"');
-    transformedText = beforeFirstDoubleQuote + insideOfDoubleQuotes + afterLastDoubleQuote;
-  }
-
-  return transformedText;
-};
-
 export const copyToClipboard = (value: string | string[]) => {
-  let transformedText;
-
-  if (typeof value === "string") {
-    transformedText = escapeLocator(value);
-  } else {
-    transformedText = value.map((el: string) => escapeLocator(el)).join("\\n\\n");
-  }
-
-  chrome.devtools.inspectedWindow.eval(`copy('${transformedText}')`);
+  chrome.devtools.inspectedWindow.eval(`copy('${value}')`);
 };

src/features/locators/components/LocatorCopyButton.jsx

@@ -1,9 +1,9 @@
 import { Button, Tooltip } from "antd";
 import { CopySimple } from "phosphor-react";
 import React, { useState } from "react";
-import { copyToClipboard } from "../../../common/utils/copyToClipboard";
 import { CopyTitle } from "../../../common/types/common";
 import { getLocatorString } from "../../locators/utils/locatorOutput";
+import { copyLocatorToClipboard } from "../utils/copyLocatorToClipboard";
 
 export const LocatorCopyButton = ({ element }) => {
   const [copyTooltipTitle, setTooltipTitle] = useState(CopyTitle.Copy);
@@ -12,7 +12,7 @@ export const LocatorCopyButton = ({ element }) => {
   const handleCopy = (event) => {
     event.stopPropagation();
     const locatorString = getLocatorString(annotationType, locatorType, locator, type, name);
-    copyToClipboard(locatorString);
+    copyLocatorToClipboard(locatorString);
     setTooltipTitle(CopyTitle.Copied);
   };
 

src/features/locators/utils/copyLocatorToClipboard.ts

@@ -0,0 +1,38 @@
+import { copyToClipboard } from "../../../common/utils/copyToClipboard";
+
+export const escapeLocator = (locator: string) => {
+  let transformedText = locator.replace(/[\\'\n]/g, (match: string) => {
+    switch (match) {
+      case "\\":
+        return "\\\\\\\\";
+      case "'":
+        return "\\'";
+      case "\n":
+        return "\\n";
+      default:
+        return match;
+    }
+  });
+  const lastDoubleQuote = transformedText.lastIndexOf('"');
+  const firstDoubleQuote = transformedText.indexOf('"');
+  const beforeFirstDoubleQuote = transformedText.slice(0, firstDoubleQuote + 1);
+  const afterLastDoubleQuote = transformedText.slice(lastDoubleQuote);
+  let insideOfDoubleQuotes = transformedText.slice(firstDoubleQuote + 1, lastDoubleQuote);
+
+  if (insideOfDoubleQuotes.includes('"')) {
+    insideOfDoubleQuotes = insideOfDoubleQuotes.replace(/"/g, '\\\\"');
+    transformedText = beforeFirstDoubleQuote + insideOfDoubleQuotes + afterLastDoubleQuote;
+  }
+
+  return transformedText;
+};
+
+export const copyLocatorToClipboard = (value: string) => {
+  const transformedText = escapeLocator(value);
+  copyToClipboard(transformedText);
+};
+
+export const copyLocatorsToClipboard = (valueArr: string[]) => {
+  const transformedText = valueArr.map((el: string) => escapeLocator(el)).join("\\n\\n");
+  copyToClipboard(transformedText);
+};

src/features/locators/utils/utils.ts

@@ -18,7 +18,7 @@ import { LocatorOption } from "./constants";
 import { LocatorType } from "../../../common/types/common";
 import { isStringContainsNumbers } from "../../../common/utils/helpers";
 import { FormInstance } from "antd/es/form/Form";
-import { copyToClipboard } from "../../../common/utils/copyToClipboard";
+import { copyLocatorsToClipboard } from "./copyLocatorToClipboard";
 import { getLocatorString, getLocatorWithJDIAnnotation, getLocatorWithSelenium } from "./locatorOutput";
 
 export const isValidJavaVariable = (value: string) => /^[a-zA-Z_$]([a-zA-Z0-9_])*$/.test(value);
@@ -72,35 +72,33 @@ export const setIndents = (ref: React.RefObject<HTMLDivElement>, depth: number)
 };
 
 export const copyLocator = (locatorsForCopy: Locator[], option?: LocatorOption) => (): void => {
-  let value: string;
+  let value: string[];
   switch (option) {
     case LocatorOption.Xpath:
-      value = locatorsForCopy.map(({ locator }) => `"${locator.xPath}"`).join("\n");
+      value = locatorsForCopy.map(({ locator }) => `"${locator.xPath}"`);
       break;
     case LocatorOption.XpathAndSelenium:
-      value = locatorsForCopy.map(({ locator }) => getLocatorWithSelenium(locator.xPath, "xpath")).join("\n");
+      value = locatorsForCopy.map(({ locator }) => getLocatorWithSelenium(locator.xPath, "xpath"));
       break;
     case LocatorOption.XpathAndJDI:
-      value = locatorsForCopy.map(({ locator }) => getLocatorWithJDIAnnotation(locator.xPath)).join("\n");
+      value = locatorsForCopy.map(({ locator }) => getLocatorWithJDIAnnotation(locator.xPath));
       break;
     case LocatorOption.CSSSelector:
-      value = locatorsForCopy.map(({ locator }) => `"${locator.cssSelector}"`).join("\n");
+      value = locatorsForCopy.map(({ locator }) => `"${locator.cssSelector}"`);
       break;
     case LocatorOption.CSSAndSelenium:
-      value = locatorsForCopy.map(({ locator }) => getLocatorWithSelenium(locator.cssSelector, "css")).join("\n");
+      value = locatorsForCopy.map(({ locator }) => getLocatorWithSelenium(locator.cssSelector, "css"));
       break;
     case LocatorOption.CSSAndJDI:
-      value = locatorsForCopy.map(({ locator }) => getLocatorWithJDIAnnotation(locator.cssSelector)).join("\n");
+      value = locatorsForCopy.map(({ locator }) => getLocatorWithJDIAnnotation(locator.cssSelector));
       break;
     default:
-      value = locatorsForCopy
-        .map(({ annotationType, locatorType, locator, type, name }) =>
-          getLocatorString(annotationType, locatorType, locator, type, name)
-        )
-        .join("\n");
+      value = locatorsForCopy.map(({ annotationType, locatorType, locator, type, name }) =>
+        getLocatorString(annotationType, locatorType, locator, type, name)
+      );
   }
 
-  copyToClipboard(value);
+  copyLocatorsToClipboard(value);
 };
 
 export const getCopyOptions = (selectedLocators: Locator[]) => {

src/features/pageObjects/components/PageObjCopyButton.tsx

@@ -4,8 +4,8 @@ import { Button, Tooltip } from "antd";
 import { CopySimple } from "phosphor-react";
 import { Locator } from "../../locators/types/locator.types";
 import { CopyTitle } from "../../../common/types/common";
-import { copyToClipboard } from "../../../common/utils/copyToClipboard";
 import { getLocatorString } from "../../locators/utils/locatorOutput";
+import { copyLocatorsToClipboard } from "../../locators/utils/copyLocatorToClipboard";
 
 interface Props {
   elements: Locator[];
@@ -24,7 +24,7 @@ export const PageObjCopyButton: FC<Props> = ({ elements }) => {
     e.stopPropagation();
 
     const pageObject = getPageObjectForCopying(elements);
-    copyToClipboard(pageObject);
+    copyLocatorsToClipboard(pageObject);
 
     setTooltipTitle(CopyTitle.Copied);
   };