fix: various unstyled mode, jsdocs and cypress test fixes (#546)

* unstyled and jsondocs fix * fixed cypress test
EOX-A · Dec 22, 2023 · 370740b · 370740b
1 parent 1a9f695
commit 370740b
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 11 deletions.
diff --git a/elements/layercontrol/src/components/add-layers.js b/elements/layercontrol/src/components/add-layers.js
@@ -145,7 +145,7 @@ export class EOxLayerControlAddLayers extends LitElement {
   /**
    * Handles tab changes by invoking the 'openCloseTabMethod'.
    *
-   * @param {string} tab - The tab identifier triggering the method.
+   * @param {"url" | "json" | null} tab - The tab identifier triggering the method.
    */
   #handleOpenCloseTab(tab) {
     openCloseTabMethod(tab, this);
@@ -190,7 +190,9 @@ export class EOxLayerControlAddLayers extends LitElement {
           <button
             class="add-icon icon"
             @click=${() => this.#handleOpenCloseTab(!this.open ? "url" : null)}
-          ></button>
+          >
+            ${this.unstyled ? "Add Layer" : ""}
+          </button>
         </div>
         <div class="eox-add ${openCloseClassName}">
           ${isUrlTabOpen
@@ -211,6 +213,7 @@ export class EOxLayerControlAddLayers extends LitElement {
                   disabled=${disableSearchBtn} 
                   @click=${this.#handleWMSSearchURL}
                 >
+                  ${this.unstyled ? "Search" : ""}
                 </button>
               </div>
 
@@ -232,7 +235,9 @@ export class EOxLayerControlAddLayers extends LitElement {
                                 @click=${() =>
                                   //@ts-ignore
                                   this.#handleUrlLayerMethod(layer)}
-                              ></button>
+                              >
+                                ${this.unstyled ? "+" : ""}
+                              </button>
                             </li>
                           `;
                         }
@@ -255,14 +260,23 @@ export class EOxLayerControlAddLayers extends LitElement {
                   class="add-layer-icon json-add-layer"
                   disabled=${isLayerJSONValid(this.jsonInput) ? nothing : true}
                   @click=${this.#handleAddLayer}
-                ></button>
+                >
+                  ${this.unstyled ? "Add JSON" : ""}
+                </button>
               `}
         </div>
       </div>
     `;
   }
 
-  #styleBasic = ``;
+  #styleBasic = `
+    .eox-add-layer-main .open {
+      position: relative;
+    }
+    .eox-add-layer-main .close {
+      display: none;
+    }
+  `;
   #styleEOX = `
     .eox-add {
       background: #f0f2f5;

diff --git a/elements/layercontrol/src/components/layer-tools.js b/elements/layercontrol/src/components/layer-tools.js
@@ -74,10 +74,10 @@ export class EOxLayerControlLayerTools extends LitElement {
   }
 
   // Initializes '_removeButton' invoking 'removeButton' function with 'this' context.
-  _removeButton = removeButton(this);
+  _removeButton = () => removeButton(this);
 
   // Initializes '_sortButton' invoking 'sortButton' function with 'unstyled' property as a parameter.
-  _sortButton = sortButton(this.unstyled);
+  _sortButton = () => sortButton(this.unstyled);
 
   /**
    * Initializes '_button' as a function accepting 'tool' parameter to generate a Button.
@@ -164,8 +164,8 @@ export class EOxLayerControlLayerTools extends LitElement {
                       @changed=${() => this.requestUpdate()}
                     ></eox-layercontrol-layerconfig>
                   </div>
-                  <div slot="remove-icon">${this._removeButton}</div>
-                  <div slot="sort-icon">${this._sortButton}</div>
+                  <div slot="remove-icon">${this._removeButton()}</div>
+                  <div slot="sort-icon">${this._sortButton()}</div>
                 </eox-layercontrol-tabs>
               </details>
             `

diff --git a/elements/layercontrol/src/methods/add-layer/open-close-tab.js b/elements/layercontrol/src/methods/add-layer/open-close-tab.js
@@ -2,7 +2,7 @@
  * Handles the opening or closing of tabs in the EOxLayerControlAddLayers instance.
  * Updates relevant properties based on the selected tab.
  *
- * @param {string} tab - The tab identifier to open or close.
+ * @param {"url" | "json" | null} tab - The tab identifier to open or close.
  * @param {import("../../components/add-layers").EOxLayerControlAddLayers} EoxLayerControlAddLayers - Instance of EOxLayerControlAddLayers.
  */
 const openCloseTab = (tab, EoxLayerControlAddLayers) => {

diff --git a/elements/layercontrol/test/cases/layer-update/add-external-layer.js b/elements/layercontrol/test/cases/layer-update/add-external-layer.js
@@ -52,7 +52,8 @@ const addExternalLayers = () => {
           `{ type: "Tile", properties: { id: "WIND", title: "WIND", }, source: { type: "TileWMS", url: "//services.sentinel-hub.com/ogc/wms/0635c213-17a1-48ee-aef7-9d1731695a54", params: { LAYERS: "AWS_VIS_WIND_V_10M", }, }, maxZoom: 9, }`,
           { parseSpecialCharSequences: false }
         );
-        cy.get(".json-add-layer").click();
+        cy.get(".json-add-layer").as("jsonbtn").click();
+        cy.get("@jsonbtn").should("be.disabled");
       });
     });