From ab102dccd7da3ff9b5e848a3634c8084540f4357 Mon Sep 17 00:00:00 2001
From: HarelM <harel.mazor@gmail.com>
Date: Thu, 21 Dec 2023 22:00:16 +0200
Subject: [PATCH] Add a test to make sure this functionality doesn't get broken

---
 cypress/e2e/modals.cy.ts         | 7 +++++++
 src/components/Doc.tsx           | 2 +-
 src/components/FieldDocLabel.tsx | 1 +
 3 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/cypress/e2e/modals.cy.ts b/cypress/e2e/modals.cy.ts
index e5fd505f..911deef6 100644
--- a/cypress/e2e/modals.cy.ts
+++ b/cypress/e2e/modals.cy.ts
@@ -77,11 +77,18 @@ describe("modals", () => {
     });
 
     it("name", () => {
+      when.click("field-doc-button-Name");
+
+      should.containText("spec-field-doc", "name for the style");
+    });
+
+    it("show name specifications", () => {
       when.setValue(get.dataAttribute("modal:settings.name"), "foobar");
       when.click("modal:settings.owner");
 
       should.equalStyleStore((obj) => obj.name, "foobar");
     });
+
     it("owner", () => {
       when.setValue(get.dataAttribute("modal:settings.owner"), "foobar");
       when.click("modal:settings.name");
diff --git a/src/components/Doc.tsx b/src/components/Doc.tsx
index c5db0c4d..92937522 100644
--- a/src/components/Doc.tsx
+++ b/src/components/Doc.tsx
@@ -39,7 +39,7 @@ export default class Doc extends React.Component<DocProps> {
       <>
         {doc &&
           <div className="SpecDoc">
-            <div className="SpecDoc__doc">{doc}</div>
+            <div className="SpecDoc__doc" data-wd-key='spec-field-doc'>{doc}</div>
             {renderValues &&
               <ul className="SpecDoc__values">
                 {Object.entries(values).map(([key, value]) => {
diff --git a/src/components/FieldDocLabel.tsx b/src/components/FieldDocLabel.tsx
index fb172bf7..fde175d7 100644
--- a/src/components/FieldDocLabel.tsx
+++ b/src/components/FieldDocLabel.tsx
@@ -44,6 +44,7 @@ export default class FieldDocLabel extends React.Component<FieldDocLabelProps, F
             aria-label={this.state.open ? "close property documentation" : "open property documentation"}
             className={`maputnik-doc-button maputnik-doc-button--${this.state.open ? 'open' : 'closed'}`}
             onClick={() => this.onToggleDoc(!this.state.open)}
+            data-wd-key={'field-doc-button-'+label}
           >
             {this.state.open ? <MdHighlightOff /> : <MdInfoOutline />}
           </button>