From 557b9f5390fcc8038fa93d2b4b9ef01477b3b337 Mon Sep 17 00:00:00 2001
From: xft-dev <xft.lumn@gmail.com>
Date: Mon, 23 Dec 2024 16:08:25 +0100
Subject: [PATCH] [DPEDE-3079] Add visual tests to CopyText web component

---
 backstop-non-responsive-ce.json               |  22 +++++++++++
 backstop-non-responsive.json                  |  22 +++++++++++
 ...copy-text_test-copy-text-base_viewport.png | Bin 0 -> 2710 bytes
 ...-text_test-copy-text-disabled_viewport.png | Bin 0 -> 2739 bytes
 ...opy-text_test-copy-text-sizes_viewport.png | Bin 0 -> 8247 bytes
 test/chi/components/copy-text.pug             |  37 ++++++++++++++++++
 test/chi/custom-elements/copy-text.pug        |  26 ++++++++++++
 7 files changed, 107 insertions(+)
 create mode 100644 config/backstop_data/bitmaps_reference/non_responsive/copy-text_test-copy-text-base_viewport.png
 create mode 100644 config/backstop_data/bitmaps_reference/non_responsive/copy-text_test-copy-text-disabled_viewport.png
 create mode 100644 config/backstop_data/bitmaps_reference/non_responsive/copy-text_test-copy-text-sizes_viewport.png
 create mode 100644 test/chi/components/copy-text.pug
 create mode 100644 test/chi/custom-elements/copy-text.pug

diff --git a/backstop-non-responsive-ce.json b/backstop-non-responsive-ce.json
index eaf5b405fd..97211a4824 100644
--- a/backstop-non-responsive-ce.json
+++ b/backstop-non-responsive-ce.json
@@ -329,6 +329,28 @@
       "misMatchThreshold": 0,
       "requireSameDimensions": true
     },
+    {
+      "label": "copy-text",
+      "cookiePath": "",
+      "url": "http://localhost:8000/tests/custom-elements/copy-text.html",
+      "referenceUrl": "",
+      "readyEvent": "",
+      "readySelector": "",
+      "delay": 0,
+      "hideSelectors": [],
+      "removeSelectors": [],
+      "hoverSelector": "",
+      "clickSelector": "",
+      "postInteractionWait": "",
+      "selectors": [
+        ".test-copy-text-base",
+        ".test-copy-text-disabled",
+        ".test-copy-text-sizes"
+      ],
+      "selectorExpansion": true,
+      "misMatchThreshold": 0,
+      "requireSameDimensions": true
+    },
     {
       "label": "date-picker",
       "cookiePath": "",
diff --git a/backstop-non-responsive.json b/backstop-non-responsive.json
index 9d6da8af78..6817467dae 100644
--- a/backstop-non-responsive.json
+++ b/backstop-non-responsive.json
@@ -516,6 +516,28 @@
       "misMatchThreshold": 0,
       "requireSameDimensions": true
     },
+    {
+      "label": "copy-text",
+      "cookiePath": "",
+      "url": "http://localhost:8000/tests/components/copy-text.html",
+      "referenceUrl": "",
+      "readyEvent": "",
+      "readySelector": "",
+      "delay": 0,
+      "hideSelectors": [],
+      "removeSelectors": [],
+      "hoverSelector": "",
+      "clickSelector": "",
+      "postInteractionWait": "",
+      "selectors": [
+        ".test-copy-text-base",
+        ".test-copy-text-disabled",
+        ".test-copy-text-sizes"
+      ],
+      "selectorExpansion": true,
+      "misMatchThreshold": 0,
+      "requireSameDimensions": true
+    },
     {
       "label": "date-picker",
       "cookiePath": "",
diff --git a/config/backstop_data/bitmaps_reference/non_responsive/copy-text_test-copy-text-base_viewport.png b/config/backstop_data/bitmaps_reference/non_responsive/copy-text_test-copy-text-base_viewport.png
new file mode 100644
index 0000000000000000000000000000000000000000..7b19074c188bac015129363c83440ae02810f122
GIT binary patch
literal 2710
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
AX#fBK

literal 0
HcmV?d00001

diff --git a/config/backstop_data/bitmaps_reference/non_responsive/copy-text_test-copy-text-disabled_viewport.png b/config/backstop_data/bitmaps_reference/non_responsive/copy-text_test-copy-text-disabled_viewport.png
new file mode 100644
index 0000000000000000000000000000000000000000..e1e4a4b2c72bb432fa29992de142d15537f9d02d
GIT binary patch
literal 2739
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

literal 0
HcmV?d00001

diff --git a/config/backstop_data/bitmaps_reference/non_responsive/copy-text_test-copy-text-sizes_viewport.png b/config/backstop_data/bitmaps_reference/non_responsive/copy-text_test-copy-text-sizes_viewport.png
new file mode 100644
index 0000000000000000000000000000000000000000..422e8045bfdb8f070406fed0bdf01a092f4a68f9
GIT binary patch
literal 8247
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

literal 0
HcmV?d00001

diff --git a/test/chi/components/copy-text.pug b/test/chi/components/copy-text.pug
new file mode 100644
index 0000000000..35fb9d7297
--- /dev/null
+++ b/test/chi/components/copy-text.pug
@@ -0,0 +1,37 @@
+---
+title: Copy Text
+---
+
+- const sizes = ['xs', 'sm', 'sm--2', 'sm--3', 'md', 'lg', 'xl', 'xxl'];
+
+h3 Base
+.test-copy-text-base
+  .-p--2
+    span This is an example text
+    button(class="chi-button -icon -flat" aria-label="Edit")
+      .chi-button__content
+        .chi-icon
+          svg(aria-hidden='true')
+            use(xlink:href='#icon-copy')
+
+h3 Disabled
+.test-copy-text-disabled
+  .-p--2
+    span This is an example text
+    button(class="chi-button -icon -flat" aria-label="Edit" disabled)
+      .chi-button__content
+        .chi-icon
+          svg(aria-hidden='true')
+            use(xlink:href='#icon-copy')
+
+h3 Sizes
+.test-copy-text-sizes
+  .-d--flex.-align-items--end
+    each size in sizes
+      .-m--1
+        button(class="chi-button -icon -flat" aria-label="Edit")
+          .chi-button__content
+            .chi-icon(class=`-${size}`)
+              svg(aria-hidden='true')
+                use(xlink:href='#icon-copy')
+        p.-text.-text--center #{size}
diff --git a/test/chi/custom-elements/copy-text.pug b/test/chi/custom-elements/copy-text.pug
new file mode 100644
index 0000000000..141c46e9b4
--- /dev/null
+++ b/test/chi/custom-elements/copy-text.pug
@@ -0,0 +1,26 @@
+---
+title: Copy Text
+---
+script(type='module' src='../../js/ce/ux-chi-ce/ux-chi-ce.esm.js')
+
+- const sizes = ['xs', 'sm', 'sm--2', 'sm--3', 'md', 'lg', 'xl', 'xxl'];
+
+h3 Base
+.test-copy-text-base
+  .-p--2
+    span This is an example text
+    chi-copy-text(text="This is an example text")
+
+h3 Disabled
+.test-copy-text-disabled
+  .-p--2
+    span This is an example text
+    chi-copy-text(text="This is an example text" disabled)
+
+h3 Sizes
+.test-copy-text-sizes
+  .-d--flex.-align-items--end
+    each size in sizes
+      .-m--1
+        chi-copy-text(text="text", size=size)
+        p.-text.-text--center #{size}
\ No newline at end of file