Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactor: Replace data-heap-event with standardized data-test for Cypress and Telemetry #1995

Merged
merged 6 commits into from
Jul 23, 2024
Merged

Refactor: Replace data-heap-event with standardized data-test for Cypress and Telemetry #1995

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
0016123
wip
rashidakanchwala Jul 9, 2024
2e97969
WIP
rashidakanchwala Jul 23, 2024
c4e97f9
Merge branch 'main' into telemetry
rashidakanchwala Jul 23, 2024
f7930c3
fix e2e tests
rashidakanchwala Jul 23, 2024
aa33621
fix e2e testing
rashidakanchwala Jul 23, 2024
8b5bb9d
remove unwanted print
rashidakanchwala Jul 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions cypress/support/commands.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -220,12 +220,12 @@ Cypress.Commands.add(
cy.get('.pipeline-menu-button--deploy').click();

// Select the first hosting platform from the dropdown
cy.get('.shareable-url-modal [data-test=kedro-pipeline-selector]').click();
cy.get('.shareable-url-modal [data-test=shareable-url-modal-dropdown-hosting-platform]').click();
cy.get('.shareable-url-modal .dropdown__options section div').eq(1).click();

// Fill in the form
cy.get('.shareable-url-modal [data-test="bucket_name"]').type(bucketName);
cy.get('.shareable-url-modal [data-test="endpoint_name"]').type(
cy.get('.shareable-url-modal [data-test="shareable-url-modal-input-bucket-name"]').type(bucketName);
cy.get('.shareable-url-modal [data-test="shareable-url-modal-input-endpoint"]').type(
endpointName
);

Expand All @@ -240,7 +240,7 @@ Cypress.Commands.add(
* Custom command to wait for page load before enabling pretty names
*/
Cypress.Commands.add('__waitForSettingsButton__', () => {
cy.get('[data-test="Change the settings flags"]', { timeout: 20000 }).should('be.visible');
cy.get('[data-test="global-toolbar-settings-btn"]', { timeout: 20000 }).should('be.visible');
});

/**
Expand All @@ -252,13 +252,13 @@ Cypress.Commands.add('enablePrettyNames', () => {
cy.__waitForSettingsButton__();

// Visit the settings panel
cy.get('[data-test="Change the settings flags"]').click();
cy.get('[data-test="global-toolbar-settings-btn"]').click();

// Enable the pretty names setting
cy.get('[data-test="pipeline-toggle-input-isPrettyName"]').check({ force: true });
cy.get('[data-test*="settings-modal-toggle-isPrettyName-"]').check({ force: true });
ravi-kumar-pilla marked this conversation as resolved.
Show resolved Hide resolved

// Apply changes and close the settings panel
cy.get('[data-test="Apply changes and close in Settings Modal"]').click({
cy.get('[data-test="settings-modal-apply-btn"]').click({
force: true,
});
});
12 changes: 6 additions & 6 deletions cypress/tests/ui/experiment-tracking/experiment-tracking.cy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ describe('Experiment Tracking', () => {

// Alias
cy.get('.details-metadata__title').first().as('metadataTitle');
cy.get('[data-test="Apply changes and close in Run Details Modal"]').as(
cy.get('[data-test="run-details-modal-apply-changes"]').as(
'applyChanges'
);

Expand Down Expand Up @@ -41,7 +41,7 @@ describe('Experiment Tracking', () => {

// Alias
cy.get('.details-metadata__notes').as('metadataNotes');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i wonder how we decide which element to target data-test, which one to target classname ? Cause it seems like we currently mix them both. Maybe not for this ticket but a bigger refactor ticket where we think about what we really want to track etc?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So, data-test is used pervasively to test e2e clicks on Cypress. I am thinking of using the same for Heap. Once we release this PR and start getting better heap data -- we will be able to observe better. For now, it does track all the things that are clickable (or maybe other interactions) by users

cy.get('[data-test="Apply changes and close in Run Details Modal"]').as(
cy.get('[data-test="run-details-modal-apply-changes"]').as(
'applyChanges'
);

Expand Down Expand Up @@ -114,9 +114,9 @@ describe('Experiment Tracking', () => {
});

// Action
cy.get('.select-dropdown [data-test="kedro-pipeline-selector"]').click();
cy.get('.select-dropdown [data-test="experiments-metrics-select-dropdown"]').click();
cy.get('.dropdown__options > :nth-child(2)').click();
cy.get('[data-test="btnMetricsChange"]').click();
cy.get('[data-test="experiments-metrics-select-dropdown-apply-btn"]').click();

// Assert after action
cy.get('.time-series__metric-name')
Expand Down Expand Up @@ -167,9 +167,9 @@ describe('Experiment Tracking', () => {
.and('eq', plotToCheckText);

// Action
cy.get('.select-dropdown [data-test="kedro-pipeline-selector"]').click();
cy.get('.select-dropdown [data-test="experiments-metrics-select-dropdown"]').click();
cy.get('.dropdown__options > :nth-child(2)').click();
cy.get('[data-test="btnMetricsChange"]').click();
cy.get('[data-test="experiments-metrics-select-dropdown-apply-btn"]').click();

// Assert after action
cy.get(`.metric-axis`)
Expand Down
14 changes: 7 additions & 7 deletions cypress/tests/ui/experiment-tracking/panel.cy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
describe('Experiment Tracking Primary Toolbar', () => {
it('verifies that users can hide/show the side menu. #TC-38', () => {
// Alias
cy.get('[data-test="btnToggleMenu"]').as('btnToggleMenu');
cy.get('[data-test*="sidebar-experiments-visible-btn-"]').as('btnToggleMenu');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey is there a special meaning for *=?

Copy link
Contributor Author

@rashidakanchwala rashidakanchwala Jul 23, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good question -- I have added 'state' to the data-test attribute to help with Heap Analytics by indicating whether the sidebar is collapsed or expanded. This information isn't required for Cypress testing. When I use data-test*, it allows me to get the element that partially matches the data-test name.

So the original data-test attribute = sidebar-experiments-visible-btn-true

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jitu5 -- see above.

Maybe I need to document this somewhere.

cy.get('.pipeline-sidebar--visible').as('pipelineSideBar');

// Assert before action
Expand All @@ -22,7 +22,7 @@ describe('Experiment Tracking Primary Toolbar', () => {
const runGitShaText = '5f81cb5';

// Alias
cy.get('[data-test="btnToggleBookmark"]').as('btnToggleBookmark');
cy.get('[data-test*="sidebar-experiments-bookmark-btn-"]').as('btnToggleBookmark');
Huongg marked this conversation as resolved.
Show resolved Hide resolved
cy.get('.runs-list__accordion-header > .accordion__title').as(
'accordionTitle'
);
Expand Down Expand Up @@ -57,8 +57,8 @@ describe('Experiment Tracking Primary Toolbar', () => {
const modifiedRunNotesText = 'Test';

// Alias
cy.get('[data-test="btnEditRunDetails"]').as('btnEditRunDetails');
cy.get('[data-test="Apply changes and close in Run Details Modal"]').as(
cy.get('[data-test="sidebar-experiments-edit-details"]').as('btnEditRunDetails');
cy.get('[data-test="run-details-modal-apply-changes"]').as(
'applyChanges'
);

Expand Down Expand Up @@ -103,8 +103,8 @@ describe('Experiment Tracking Primary Toolbar', () => {
const exportRunTitleText = '2022-12-24T21.05.59.296Z';

// Alias
cy.get('[data-test="btnExportRunData"]').as('btnExportRunData');
cy.get('[data-test="Export all and close"]').as('btnExportAll');
cy.get('[data-test="sidebar-experiments-export-runs"]').as('btnExportRunData');
cy.get('[data-test="run-export-modal-export-all"]').as('btnExportAll');

// Action
cy.get('@btnExportRunData').click();
Expand All @@ -129,7 +129,7 @@ describe('Experiment Tracking Primary Toolbar', () => {
cy.get('@compareRunsToggle').check({ force: true });

// Assert in comparison mode before selecting multiple runs
cy.get('[data-test="btnToggleChange"]').as('btnToggleChange');
cy.get('[data-test*="sidebar-experiments-show-changes-btn-"]').as('btnToggleChange');
Huongg marked this conversation as resolved.
Show resolved Hide resolved
cy.get('@btnToggleChange').should('have.attr', 'disabled');

// Mutation for two run comparison
Expand Down
8 changes: 4 additions & 4 deletions cypress/tests/ui/flowchart/flowchart.cy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ describe('Flowchart DAG', () => {

// Action
cy.get('.pipeline-node.pipeline-node--task').first().click();
cy.get('[data-test="pipeline-toggle-input-code"]').check({ force: true });
cy.get('[data-test*="metadata-code-toggle-"]').check({ force: true });

// Assert after action
cy.get('.pipeline-metadata-code--visible').should('exist');
Expand Down Expand Up @@ -216,13 +216,13 @@ describe('Flowchart DAG', () => {

// Assert after action
cy.get('[data-label="Dataset statistics:"]').should('exist');
cy.get('[data-test=stats-value-rows]')
cy.get('[data-test=metadata-stats-value-rows]')
.invoke('text')
.should((rowsValue) => expect(rowsValue).to.be.eq('77,096'));
cy.get('[data-test=stats-value-columns]')
cy.get('[data-test=metadata-stats-value-columns]')
.invoke('text')
.should((colsValue) => expect(parseInt(colsValue)).to.be.eq(5));
cy.get('[data-test=stats-value-file_size]')
cy.get('[data-test=metadata-stats-value-file_size]')
.invoke('text')
.should((fileSizeValue) => expect(fileSizeValue).to.be.eq('1.8MB'));
});
Expand Down
10 changes: 5 additions & 5 deletions cypress/tests/ui/flowchart/menu.cy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ describe('Flowchart Menu', () => {

// Action
cy.get(
`.MuiTreeItem-label > .pipeline-nodelist__row > [data-test=node-${nodeToClickText}]`
`.MuiTreeItem-label > .pipeline-nodelist__row > [data-test=nodelist-data-${nodeToClickText}]`
)
.should('exist')
.as('nodeToClick');
Expand All @@ -90,7 +90,7 @@ describe('Flowchart Menu', () => {

// Action
cy.get(
`.MuiTreeItem-label > .pipeline-nodelist__row > [data-test=node-${nodeToHighlightText}]`
`.MuiTreeItem-label > .pipeline-nodelist__row > [data-test=nodelist-data-${nodeToHighlightText}]`
)
.should('exist')
.as('nodeToHighlight');
Expand Down Expand Up @@ -120,7 +120,7 @@ describe('Flowchart Menu', () => {

// Assert after action
cy.__checkForText__(
`[data-test=node-${nodeToToggleText}] > .pipeline-nodelist__row__label--faded`,
`[data-test=nodelist-data-${nodeToToggleText}] > .pipeline-nodelist__row__label--faded`,
nodeToToggleText
);
cy.get('.pipeline-node__text').should('not.contain', nodeToToggleText);
Expand Down Expand Up @@ -167,7 +167,7 @@ describe('Flowchart Menu', () => {
// Assert before action
cy.get('@nodeToToggle').should('be.checked');
cy.get(
`[data-test=node-${visibleRowLabel}] > .pipeline-nodelist__row__label`
`[data-test=nodelist-data-${visibleRowLabel}] > .pipeline-nodelist__row__label`
)
.should('not.have.class', 'pipeline-nodelist__row__label--faded')
.should('not.have.class', 'pipeline-nodelist__row__label--disabled');
Expand All @@ -177,7 +177,7 @@ describe('Flowchart Menu', () => {

// Assert after action
cy.get(
`[data-test=node-${visibleRowLabel}] > .pipeline-nodelist__row__label`
`[data-test=nodelist-data-${visibleRowLabel}] > .pipeline-nodelist__row__label`
)
.should('have.class', 'pipeline-nodelist__row__label--faded')
.should('have.class', 'pipeline-nodelist__row__label--disabled');
Expand Down
24 changes: 12 additions & 12 deletions cypress/tests/ui/flowchart/panel.cy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
describe('Flowchart Primary Toolbar', () => {
it('verifies that users can hide/show the side menu. #TC-8', () => {
// Alias
cy.get('[data-test="btnToggleMenu"]').as('btnToggleMenu');
cy.get('[data-test*="sidebar-flowchart-visible-btn-"]').as('btnToggleMenu');
Huongg marked this conversation as resolved.
Show resolved Hide resolved
cy.get('.pipeline-sidebar--visible').as('pipelineSideBar');

// Assert before action
Expand All @@ -20,7 +20,7 @@ describe('Flowchart Primary Toolbar', () => {

it('verifies that users can hide/show the text labels. #TC-9', () => {
// Alias
cy.get('[data-test="btnToggleLabels"]').as('btnToggleLabels');
cy.get('[data-test*="sidebar-flowchart-labels-btn-"]').as('btnToggleLabels');
Huongg marked this conversation as resolved.
Show resolved Hide resolved
cy.get('.pipeline-node__text').as('pipelineNodeLabels');

// Assert before action
Expand All @@ -37,7 +37,7 @@ describe('Flowchart Primary Toolbar', () => {

it('verifies that users can hide/show layers. #TC-10', () => {
// Alias
cy.get('[data-test="btnToggleLayers"]').as('btnToggleLayers');
cy.get('[data-test*="sidebar-flowchart-layers-btn-"]').as('btnToggleLayers');
Huongg marked this conversation as resolved.
Show resolved Hide resolved
cy.get('.pipeline-layer').as('pipelineLayer');

// Assert before action
Expand All @@ -54,7 +54,7 @@ describe('Flowchart Primary Toolbar', () => {

it('verifies that users can access the export pipeline visualisation page. #TC-11', () => {
// Action
cy.get('[data-test="btnExportGraph"]').click();
cy.get('[data-test="sidebar-flowchart-export-btn"]').click();

// Assertions
cy.get('.modal--visible').then(($dialog) => {
Expand All @@ -63,10 +63,10 @@ describe('Flowchart Primary Toolbar', () => {
'have.text',
'Export pipeline visualisation'
);
cy.get('[data-test="btnDownloadPNG"]')
cy.get('[data-test="export-modal-download-png-btn"]')
.should('exist')
.and('have.text', 'Download PNG');
cy.get('[data-test="btnDownloadSVG"]')
cy.get('[data-test="export-modal-download-svg-btn"]')
.should('exist')
.and('have.text', 'Download SVG');
});
Expand All @@ -76,15 +76,15 @@ describe('Flowchart Primary Toolbar', () => {
// TO FIX in a separately PR
// it('verifies that users can download a PNG of their visualisation. #TC-12', () => {
// // Action
// cy.get('[data-test=btnDownloadPNG]').click({ force: true });
// cy.get('[data-test=export-modal-download-png-btn]').click({ force: true });

// // Assertion
// cy.__validateImage__('kedro-pipeline.png');
// });

it('verifies that users can download an SVG of their visualisation. #TC-13', () => {
// Action
cy.get('[data-test=btnDownloadSVG]').click({ force: true });
cy.get('[data-test=export-modal-download-svg-btn]').click({ force: true });

// Assertion
cy.__validateImage__('kedro-pipeline.svg');
Expand All @@ -94,7 +94,7 @@ describe('Flowchart Primary Toolbar', () => {
describe('Pipeline Minimap Toolbar', () => {
it('verifies that users can hide/show minimap. #TC-14', () => {
// Alias
cy.get('[data-test="btnToggleMinimap"]').as('btnToggleMinimap');
cy.get('[data-test*="sidebar-minimap-btn-"]').as('btnToggleMinimap');
cy.get('.pipeline-minimap-container').as('minimapContainer');

// Assert before action
Expand All @@ -115,9 +115,9 @@ describe('Pipeline Minimap Toolbar', () => {

it('verifies that users can zoom in/out/reset. #TC-15', () => {
// Alias
cy.get('[data-test="btnZoomIn"]').as('btnZoomIn');
cy.get('[data-test="btnZoomOut"]').as('btnZoomOut');
cy.get('[data-test="btnResetZoom"]').as('btnResetZoom');
cy.get('[data-test="sidebar-zoom-in-btn"]').as('btnZoomIn');
cy.get('[data-test="sidebar-zoom-out-btn"]').as('btnZoomOut');
cy.get('[data-test="sidebar-reset-zoom-btn"]').as('btnResetZoom');
cy.get('.pipeline-minimap-toolbar__scale').as('zoomScale');

// Zoom values are calculated once the flowchart is drawn, so we wait for pageLoad to complete
Expand Down
Loading
Loading