Minor component syntax updates for Cypress testing docs

Author: slhinyc

docs/_includes/component.njk

@@ -62,7 +62,7 @@
     <h1>{{ component.name | classNameToComponentName }}</h1>
 
     <div class="component-header__tag">
-      <code>&lt;{{ component.tagName }}&gt; | {{ component.name }}</code>
+      <code>{{ component.tagName }}</code>
     </div>
   </header>
 

docs/assets/styles/docs.css

@@ -715,10 +715,10 @@ td.table-name code.prop,
 
 .cy-table-desc + div > table > tbody tr:first-child,
 .cy-table-desc + div > table > tbody tr:nth-child(5),
-.cy-table-desc + div > table > tbody tr:nth-child(9),
-.cy-table-desc + div > table > tbody tr:nth-child(13),
-.cy-table-desc + div > table > tbody tr:nth-child(16),
-.cy-table-desc + div > table > tbody tr:nth-child(19) {
+.cy-table-desc + div > table > tbody tr:nth-child(7),
+.cy-table-desc + div > table > tbody tr:nth-child(11),
+.cy-table-desc + div > table > tbody tr:nth-child(14),
+.cy-table-desc + div > table > tbody tr:nth-child(17) {
   border-top: 2px solid var(--sl-color-neutral-300);
 }
 

docs/pages/components/checkbox-group.md

@@ -22,7 +22,7 @@ testing: |
 
   **Adding `data-test-id` to a component**
 
-   To test `<sl-checkbox-group>`, add the `data-test-id` attribute directly to the component. To test checkbox items in the group, add `data-test-id` to each item:
+   To test `sl-checkbox-group`, add the `data-test-id` attribute directly to the component. To test checkbox items in the group, add `data-test-id` to each item:
 
   ```pug:slim
     sl-checkbox-group[
@@ -47,7 +47,7 @@ testing: |
         | Option 3
   ```
 
-  To test `<sl-checkbox-group>` implemented with `ts_form_for`, add `data-test-id` to `wrapper_html`. To test checkbox items in the group, add `data-test-id` to each item in the collection array:
+  To test `sl-checkbox-group` implemented with `ts_form_for`, add `data-test-id` to `wrapper_html`. To test checkbox items in the group, add `data-test-id` to each item in the collection array:
 
   ```js
       = ts_form_for ... do |f|
@@ -61,12 +61,12 @@ testing: |
           ],
           wrapper_html: { 
             data: { 
-              "test_id": "checkbox-group-test"
+              test_id: "checkbox-group-test"
             }
           }
   ```
 
-  **Cypress commands for `<sl-checkbox-group>`**
+  **Cypress commands for `sl-checkbox-group`**
 
   To **check** any checkbox in the checkbox group:
   ```js

docs/pages/components/checkbox.md

@@ -13,7 +13,7 @@ testing: |
 
   **Adding `data-test-id` to a component**
 
-   To test `<sl-checkbox>`, add the `data-test-id` attribute directly to the component:
+   To test `sl-checkbox`, add the `data-test-id` attribute directly to the component:
 
   ```pug:slim
     sl-checkbox[
@@ -22,7 +22,7 @@ testing: |
       | Checkbox test
   ```
 
-  To test `<sl-checkbox>` implemented with `ts_form_for`, add `data-test-id` to `input_html`:
+  To test `sl-checkbox` implemented with `ts_form_for`, add `data-test-id` to `input_html`:
 
   ```js
       = ts_form_for ... do |f|
@@ -31,12 +31,12 @@ testing: |
           input_html: { 
             label: "Checkbox text",
             data: { 
-              "test_id": "checkbox-test"
+              test_id: "checkbox-test"
             }
           }
   ```
 
-  **Cypress commands for `<sl-checkbox>`**
+  **Cypress commands for `sl-checkbox`**
 
   To **check** the checkbox:
   ```js

docs/pages/components/drawer.md

@@ -18,13 +18,41 @@ layout: component
 
 <sl-button>Open Drawer</sl-button>
 
+<sl-dropdown>
+  <div slot="trigger"><sl-button caret>Dropdown</sl-button></div>
+  <sl-menu>
+    <sl-menu-item class="open-link">Open drawer</sl-menu-item>
+    <sl-menu-item>Dropdown Item 2</sl-menu-item>
+    <sl-menu-item>Dropdown Item 3</sl-menu-item>
+    <sl-divider></sl-divider>
+    <sl-menu-item type="checkbox" checked>Checkbox</sl-menu-item>
+    <sl-menu-item disabled>Disabled</sl-menu-item>
+    <sl-divider></sl-divider>
+    <sl-menu-item>
+      Prefix
+      <sl-icon slot="prefix" name="gift"></sl-icon>
+    </sl-menu-item>
+    <sl-menu-item>
+      Suffix Icon
+      <sl-icon slot="suffix" name="heart"></sl-icon>
+    </sl-menu-item>
+  </sl-menu>
+</sl-dropdown>
+
 <script>
   const drawer = document.querySelector('.drawer-overview');
-  const openButton = drawer.nextElementSibling;
+  // const openButton = drawer.nextElementSibling;
+  const openButton = document.querySelector('.open-link');
   const closeButton = drawer.querySelector('sl-button[variant="primary"]');
+  const dropdown = document.querySelector('sl-dropdown');
 
-  openButton.addEventListener('click', () => drawer.show());
+  openButton.addEventListener('click', (event) => {
+    // event.stopPropagation();
+    drawer.show();
+    // dropdown.hide();
+    });
   closeButton.addEventListener('click', () => drawer.hide());
+
 </script>
 ```
 

docs/pages/components/input.md

@@ -90,7 +90,7 @@ testing: |
 
   **Adding `data-test-id` to a component**
 
-   To test `<sl-input>`, add the `data-test-id` attribute directly to the component:
+   To test `sl-input`, add the `data-test-id` attribute directly to the component:
 
   ```pug:slim
     sl-input[
@@ -99,20 +99,20 @@ testing: |
     ]
   ```
 
-  To test `<sl-input>` implemented with `ts_form_for`, add `data-test-id` to `input_html`:
+  To test `sl-input` implemented with `ts_form_for`, add `data-test-id` to `input_html`:
 
   ```js
     = ts_form_for ... do |f|
       = f.input :input_name, 
         input_html: { 
           label: "Name",
           data: { 
-            "test_id": "input-test"
+            test_id: "input-test"
           } 
         }
   ```
 
-  **Cypress commands for `<sl-input>`**
+  **Cypress commands for `sl-input`**
 
   To **type** in the input:
   ```js

docs/pages/components/radio-group.md

@@ -22,7 +22,7 @@ testing: |
 
   **Adding `data-test-id` to a component**
 
-   To test `<sl-radio-group>`, add the `data-test-id` attribute directly to the component. To test radio items in the group, add `data-test-id` to each item:
+   To test `sl-radio-group`, add the `data-test-id` attribute directly to the component. To test radio items in the group, add `data-test-id` to each item:
 
   ```pug:slim
     sl-radio-group[
@@ -48,7 +48,7 @@ testing: |
         | Option 3
   ```
 
-  To test `<sl-radio-group>` implemented with `ts_form_for`, add `data-test-id` to `wrapper_html`. To test radio items in the group, add `data-test-id` to each item in the collection array:
+  To test `sl-radio-group` implemented with `ts_form_for`, add `data-test-id` to `wrapper_html`. To test radio items in the group, add `data-test-id` to each item in the collection array:
 
   ```js
       = ts_form_for ... do |f|
@@ -62,12 +62,12 @@ testing: |
           ],
           wrapper_html: { 
             data: { 
-              "test_id": "radio-group-test"
+              test_id: "radio-group-test"
             }
           }
   ```
 
-  **Cypress commands for `<sl-radio-group>`**
+  **Cypress commands for `sl-radio-group`**
 
   To **select** a radio item in the radio group:
   ```js

docs/pages/components/select.md

@@ -33,7 +33,7 @@ testing: |
 
   **Adding `data-test-id` to a component**
 
-   To test `<sl-select>`, add the `data-test-id` attribute directly to the component:
+   To test `sl-select`, add the `data-test-id` attribute directly to the component:
 
   ```pug:slim
     sl-select[
@@ -45,7 +45,7 @@ testing: |
       sl-option value="option-3" Option 3
   ```
 
-  To test `<sl-select>` implemented with `ts_form_for`, add `data-test-id` to `input_html`:
+  To test `sl-select` implemented with `ts_form_for`, add `data-test-id` to `input_html`:
 
   ```js
     = ts_form_for ... do |f|
@@ -58,12 +58,12 @@ testing: |
         input_html: { 
           label: "Select an option",
           data: { 
-            "test_id": "select-test"
+            test_id: "select-test"
           } 
         }
   ```
 
-  **Cypress commands for `<sl-select>`**
+  **Cypress commands for `sl-select`**
 
   To **select** an option:
   ```js

docs/pages/components/switch.md

@@ -48,7 +48,7 @@ testing: |
 
   **Adding `data-test-id` to a component**
 
-   To test `<sl-switch>`, add the `data-test-id` attribute directly to the component:
+   To test `sl-switch`, add the `data-test-id` attribute directly to the component:
 
   ```
     sl-switch[
@@ -57,9 +57,9 @@ testing: |
       | Switch test
   ```
 
-  **Cypress commands for `<sl-switch>`**
+  **Cypress commands for `sl-switch`**
 
-  Because `<sl-switch>` uses `<input type="checkbox">`, we can test the switch the same way we would test the [checkbox](/components/checkbox/#testing).
+  Because `sl-switch` uses `<input type="checkbox">`, we can test the switch the same way we would test the [checkbox](/components/checkbox/#testing).
 
   To toggle the switch **ON**:
   ```

docs/pages/components/textarea.md

@@ -13,7 +13,7 @@ testing: |
 
   **Adding `data-test-id` to a component**
 
-   To test `<sl-textarea>`, add the `data-test-id` attribute directly to the component:
+   To test `sl-textarea`, add the `data-test-id` attribute directly to the component:
 
   ```pug:slim
     sl-textarea[
@@ -22,7 +22,7 @@ testing: |
     ]
   ```
 
-  To test `<sl-textarea>` implemented with `ts_form_for`, add `data-test-id` to `input_html`:
+  To test `sl-textarea` implemented with `ts_form_for`, add `data-test-id` to `input_html`:
 
   ```js
     = ts_form_for ... do |f|
@@ -31,12 +31,12 @@ testing: |
         input_html: { 
           label: "Bio",
           data: { 
-            "test_id": "textarea-test"
+            test_id: "textarea-test"
           } 
         }
   ```
 
-  **Cypress commands for `<sl-textarea>`**
+  **Cypress commands for `sl-textarea`**
 
   To **type** in the textarea:
   ```js

docs/pages/teamshares/recipes/cypress.md

@@ -38,30 +38,28 @@ Also see below for more on testing Shoelace design system components with Cypres
 
 <div class="cy-table-desc">This is a quick reference guide to common test actions for form components.</div>
 
-| Component             | Test action                        | Cypress command                                                        |
-| --------------------- | ---------------------------------- | ---------------------------------------------------------------------- |
-| **Checkbox**          | <span>check</span>                 | [`cy.slCheckboxCheck()`](#cy_slcheckboxcheck)                          |
-|                       | <span>uncheck</span>               | [`cy.slCheckboxUncheck()`](#cy_slcheckboxuncheck)                      |
-|                       | <span>is checked?</span>           | [`cy.get().should("have.prop", "checked", true)`](#shouldhave_prop)    |
-|                       | <span>is not checked?</span>       | [`cy.get().should("have.prop", "checked", false)`](#shouldhave_prop)   |
-| **Checkbox Group**    | <span>check</span>                 | [`cy.slCheckboxCheck()`](#cy_slcheckboxcheck)                          |
-|                       | <span>uncheck</span>               | [`cy.slCheckboxUncheck()`](#cy_slcheckboxuncheck)                      |
-|                       | <span>items checked?</span>        | [`cy.slCheckboxGroupValue()`](#cy_slcheckboxgroupvalue)                |
-|                       | <span>items not checked?</span>    | [`cy.get().should("not.have.value", "value")`](#shouldhave_value)      |
-| **Input**             | <span>focus</span>                 | [`cy.slFocus()`](#cy_slfocus)                                          |
-|                       | <span>type</span>                  | [`cy.slInputType()`](#cy_slinputtype)                                  |
-|                       | <span>clear</span>                 | [`cy.slClear()`](#cy_slclear)                                          |
-|                       | <span>value?</span>                | [`cy.get().should("have.value", "value")`](#shouldhave_value)          |
-| **Radio/Radio Group** | <span>select radio in group</span> | [`cy.get().click()`](#click)                                           |
-|                       | <span>radio selected?</span>       | [`cy.get().should("have.value", "value")`](#shouldhave_value)          |
-|                       | <span>radio not selected?</span>   | [`cy.get().should("not.have.value", "value")`](#shouldhave_value)      |
-| **Select**            | <span>select option</span>         | [`cy.slSelectByOptionText()`](#cy_slselectbyoptiontext)                |
-|                       | <span>option selected?</span>      | [`cy.slSelectValue().should("equal", "value")`](#cy_slselectvalue)     |
-|                       | <span>option not selected?</span>  | [`cy.slSelectValue().should("not.equal", "value")`](#cy_slselectvalue) |
-| **Textarea**          | <span>focus</span>                 | [`cy.slFocus()`](#cy_slfocus)                                          |
-|                       | <span>type</span>                  | [`cy.slTextAreaType()`](#cy_sltextareatype)                            |
-|                       | <span>clear</span>                 | [`cy.slTextAreaClear()`](#cy_sltextareaclear)                          |
-|                       | <span>value?</span>                | [`cy.get().should("have.value", "value")`](#shouldhave_value)          |
+| Component             | Test action                       | Cypress command                                                        |
+| --------------------- | --------------------------------- | ---------------------------------------------------------------------- |
+| **Checkbox**          | <span>check</span>                | [`cy.slCheckboxCheck()`](#cy_slcheckboxcheck)                          |
+|                       | <span>uncheck</span>              | [`cy.slCheckboxUncheck()`](#cy_slcheckboxuncheck)                      |
+|                       | <span>is checked?</span>          | [`cy.get().should("have.prop", "checked", true)`](#shouldhave_prop)    |
+|                       | <span>is not checked?</span>      | [`cy.get().should("have.prop", "checked", false)`](#shouldhave_prop)   |
+| **Checkbox Group**    | <span>value?</span>               | [`cy.slCheckboxGroupValue()`](#cy_slcheckboxgroupvalue)                |
+|                       | <span>not value?</span>           | [`cy.get().should("not.have.value", "value")`](#shouldhave_value)      |
+| **Input**             | <span>focus</span>                | [`cy.slFocus()`](#cy_slfocus)                                          |
+|                       | <span>type</span>                 | [`cy.slInputType()`](#cy_slinputtype)                                  |
+|                       | <span>clear</span>                | [`cy.slClear()`](#cy_slclear)                                          |
+|                       | <span>value?</span>               | [`cy.get().should("have.value", "value")`](#shouldhave_value)          |
+| **Radio/Radio Group** | <span>select radio</span>         | [`cy.get().click()`](#click)                                           |
+|                       | <span>value?</span>               | [`cy.get().should("have.value", "value")`](#shouldhave_value)          |
+|                       | <span>not value?</span>           | [`cy.get().should("not.have.value", "value")`](#shouldhave_value)      |
+| **Select**            | <span>select option</span>        | [`cy.slSelectByOptionText()`](#cy_slselectbyoptiontext)                |
+|                       | <span>option selected?</span>     | [`cy.slSelectValue().should("equal", "value")`](#cy_slselectvalue)     |
+|                       | <span>option not selected?</span> | [`cy.slSelectValue().should("not.equal", "value")`](#cy_slselectvalue) |
+| **Textarea**          | <span>focus</span>                | [`cy.slFocus()`](#cy_slfocus)                                          |
+|                       | <span>type</span>                 | [`cy.slTextAreaType()`](#cy_sltextareatype)                            |
+|                       | <span>clear</span>                | [`cy.slTextAreaClear()`](#cy_sltextareaclear)                          |
+|                       | <span>value?</span>               | [`cy.get().should("have.value", "value")`](#shouldhave_value)          |
 
 ## Generic Commands
 
@@ -75,9 +73,9 @@ Use to **click** an element like [sl-button](/components/button) or radio item i
 cy.get(`[data-test-id="item-test-1"]`).click();
 ```
 
-<!-- :::tip
+:::tip
 What other elements does this work for?
-::: -->
+:::
 
 ### `should('have.prop')`
 
@@ -108,9 +106,9 @@ Can also use to verify that an input does **NOT** have a certain value:
 cy.get(`[data-test-id="checkbox-group-test"]`).should('not.have.value', 'option-1');
 ```
 
-<!-- :::tip
+:::tip
 Does this also work for Checkbox Group? Select?
-::: -->
+:::
 
 ## Custom Commands
 
@@ -164,9 +162,9 @@ Use to **focus** on elements like [sl-input](/components/input/#with-cypress) an
 cy.slFocus(`[data-test-id="input-test"]`);
 ```
 
-<!-- :::tip
+:::tip
 What other elements does this work for?
-::: -->
+:::
 
 ### `cy.slClear()`
 
@@ -176,9 +174,9 @@ Use to **clear** [sl-input](/components/input/#with-cypress):
 cy.slClear(`[data-test-id="input-test"]`);
 ```
 
-<!-- :::tip
+:::tip
 What other elements does this work for?
-::: -->
+:::
 
 ### `cy.slTextAreaClear()`