test copy button

skrub/_reporting/_data/templates/column-summary.html

@@ -67,12 +67,17 @@ <h3 class="margin-r-t">
         <div>
         <img class="pure-img" src="{{ column[plot_name] | svg_to_img_src | safe }}" alt={{ plot_name }} />
         {% if plot_name == "value_counts_plot" %}
-        <details>
+        <details data-test="frequent-values-details">
             <summary>Most frequent values</summary>
             <div class="shrink">
             <div class="copybutton-grid">
                 {% set selector_id = "{}_freq_value_select_snippet".format(col_id) %}
-                <select class="grid-separator select-displayed-siblings" id="{{ selector_id }}" onchange="updateSiblingBarContents(event)" autocomplete="off">
+                <select
+                    class="grid-separator select-displayed-siblings"
+                    id="{{ selector_id }}"
+                    onchange="updateSiblingBarContents(event)"
+                    autocomplete="off"
+                    data-test="frequent-values-select-snippet">
                     <option value="value">Display value</option>
                     <option value="repr">Python expression</option>
                     <option value="filter">Filtered dataframe</option>
@@ -88,7 +93,10 @@ <h3 class="margin-r-t">
                      data-content-repr="{{ value.__repr__() }}"
                      data-content-filter="{{ value | filter_equal_snippet(column.name, summary.dataframe_module) }}"
                  >{{ value }}</pre>
-            <button class="copybutton" data-target-id="{{ val_id }}" onclick='copyButtonClick(event)'>📋</button>
+                <button class="copybutton"
+                        data-target-id="{{ val_id }}"
+                        onclick='copyButtonClick(event)'
+                        data-test="copybutton-{{ loop.index0 }}">📋</button>
                 </div>
 
             {% endfor %}

skrub/_reporting/js_tests/.gitignore

@@ -1,2 +1,3 @@
 _reports/
 node_modules/
+cypress/screenshots/

skrub/_reporting/js_tests/cypress/e2e/copy-button.cy.js

@@ -0,0 +1,21 @@
+describe('test using the copybuttons', {
+    browser: 'electron'
+}, () => {
+    it('copies target content to clipboard', () => {
+        cy.visit('_reports/employee_salaries.html');
+        cy.get('skrub-table-report').shadow().as('report');
+        cy.get('@report').find('button[data-target-tab="columns-tab"]')
+            .click();
+        cy.get('@report').find('#col_1').as('col1').find(
+            '[data-test="frequent-values-details"]').click();
+        cy.get('@col1').find(
+            '[data-test="frequent-values-select-snippet"]').select(
+            "repr");
+        cy.get('@col1').find('[data-test="copybutton-1"]').click({
+            force: true
+        });
+        cy.window().its('navigator.clipboard').then((clip) => clip
+            .readText()).should('be.equal', "'HHS'");
+
+    });
+});