diff --git a/gantt-chart/.cypress/utils/jaeger-sample.json b/gantt-chart/.cypress/fixtures/jaeger-sample.txt similarity index 100% rename from gantt-chart/.cypress/utils/jaeger-sample.json rename to gantt-chart/.cypress/fixtures/jaeger-sample.txt diff --git a/gantt-chart/.cypress/integration/ui.spec.js b/gantt-chart/.cypress/integration/ui.spec.js index 4525fa7..93e470c 100644 --- a/gantt-chart/.cypress/integration/ui.spec.js +++ b/gantt-chart/.cypress/integration/ui.spec.js @@ -5,35 +5,31 @@ /// -import { - testDataSet, - delay, - GANTT_VIS_NAME, - Y_LABEL, - X_LABEL, - DEFAULT_SIZE, -} from '../utils/constants'; +import customParseFormat from 'dayjs/plugin/customParseFormat'; +import dayjs from 'dayjs'; +import { GANTT_VIS_NAME, Y_LABEL, X_LABEL, DEFAULT_SIZE } from '../utils/constants'; +dayjs.extend(customParseFormat); describe('Dump test data', () => { it('Indexes test data for gantt chart', () => { - const dumpDataSet = (url, index) => - cy.request(url).then((response) => { - cy.request({ + const dumpDataSet = (ndjson, index) => + cy.request({ + method: 'POST', + form: false, + url: 'api/console/proxy', + headers: { + 'content-type': 'application/json;charset=UTF-8', + 'osd-xsrf': true, + }, + qs: { + path: `${index}/_bulk`, method: 'POST', - form: true, - url: 'api/console/proxy', - headers: { - 'content-type': 'application/json;charset=UTF-8', - 'osd-xsrf': true, - }, - qs: { - path: `${index}/_bulk`, - method: 'POST', - }, - body: response.body, - }); + }, + body: ndjson, }); - testDataSet.forEach(({ url, index }) => dumpDataSet(url, index)); + cy.fixture('jaeger-sample.txt').then((ndjson) => { + dumpDataSet(ndjson, 'jaeger'); + }); cy.request({ method: 'POST', @@ -51,155 +47,146 @@ describe('Dump test data', () => { describe('Save a gantt chart', () => { beforeEach(() => { cy.visit(`${Cypress.env('opensearchDashboards')}/app/visualize#`); - cy.wait(delay * 5); }); it('Creates and saves a gantt chart', () => { cy.get('.euiButton__text').contains('Create ').click({ force: true }); - cy.wait(delay * 3); - cy.get('span[data-test-subj="visTypeTitle"]').contains('Gantt Chart').click({ force: true }); - cy.wait(delay * 3); - cy.get('.euiListGroupItem__label') - .contains(/^jaeger$/) - .click({ force: true }); - cy.wait(delay * 5); - cy.get('.euiButton__text').contains('Save').click({ force: true }); - cy.wait(delay); + cy.get('[data-test-subj="visTypeTitle"]').contains('Gantt Chart').click({ force: true }); + cy.contains(/^jaeger$/).click({ force: true }); + cy.contains('Save').click({ force: true }); cy.get('input[data-test-subj="savedObjectTitle"]').type(GANTT_VIS_NAME); - cy.wait(delay); - cy.get('button[data-test-subj="confirmSaveSavedObjectButton"]').click({ force: true }); - cy.wait(delay * 3); + cy.get('button[data-test-subj="confirmSaveSavedObjectButton"]').click({ + force: true, + }); - cy.get('.euiToastHeader__title').contains('Saved').should('exist'); + cy.contains('Saved').should('exist'); }); }); describe('Render and configure a gantt chart', () => { beforeEach(() => { cy.visit(`${Cypress.env('opensearchDashboards')}/app/visualize#`); - cy.wait(delay * 5); - cy.get('button').contains(GANTT_VIS_NAME).click({ force: true }); - cy.wait(delay * 5); + cy.contains(GANTT_VIS_NAME).click({ force: true }); }); it('Renders no data message', () => { - cy.get('.euiTitle').contains('No data').should('exist'); + cy.contains('No data').should('exist'); }); it('Renders the chart', () => { - cy.get('button.euiSuperSelectControl').eq(0).click({ force: true }); - cy.wait(delay); + cy.get('button[data-test-subj="gantt-chart-editor-label-field"]').click(); cy.get('.euiContextMenuItem__text') .contains(/^spanID$/) - .click({ force: true }); - cy.wait(delay); - cy.get('button.euiSuperSelectControl').eq(1).click({ force: true }); - cy.wait(delay); + .click(); + cy.get('button[data-test-subj="gantt-chart-editor-start-time-field"]').click(); cy.get('.euiContextMenuItem__text') .contains(/^startTime$/) - .click({ force: true }); - cy.wait(delay); - cy.get('button.euiSuperSelectControl').eq(2).click({ force: true }); - cy.wait(delay); + .click(); + cy.get('button[data-test-subj="gantt-chart-editor-duration-field"]').click(); cy.get('.euiContextMenuItem__text') .contains(/^duration$/) - .click({ force: true }); - cy.wait(delay); + .click(); cy.get('.euiButton__text').contains('Update').click({ force: true }); - cy.wait(delay); cy.get('.traces').should('have.length', DEFAULT_SIZE); cy.get('.euiButton__text').contains('Save').click({ force: true }); - cy.wait(delay); - cy.get('button[data-test-subj="confirmSaveSavedObjectButton"]').click({ force: true }); - cy.wait(delay * 3); + cy.get('button[data-test-subj="confirmSaveSavedObjectButton"]').click({ + force: true, + }); }); }); describe('Configure panel settings', () => { beforeEach(() => { cy.visit(`${Cypress.env('opensearchDashboards')}/app/visualize#`); - cy.wait(delay * 5); - cy.get('button').contains(GANTT_VIS_NAME).click({ force: true }); - cy.wait(delay * 5); - cy.get('.euiTab__content').contains('Panel settings').click({ force: true }); - cy.wait(delay); + cy.contains(GANTT_VIS_NAME).click({ force: true }); + cy.contains('Panel settings').click({ force: true }); }); it('Changes y-axis label', () => { cy.get('input.euiFieldText[placeholder="Label"]').eq(0).focus().type(Y_LABEL); - cy.wait(delay); cy.get('.euiButton__text').contains('Update').click({ force: true }); - cy.wait(delay); cy.get('text.ytitle').contains(Y_LABEL).should('exist'); cy.get('.euiSwitch__label').contains('Show Y-axis label').click({ force: true }); - cy.wait(delay); cy.get('.euiButton__text').contains('Update').click({ force: true }); - cy.wait(delay); cy.get('text.ytitle').should('not.exist'); }); it('Changes x-axis label', () => { cy.get('input.euiFieldText[placeholder="Label"]').eq(1).focus().type(X_LABEL); - cy.wait(delay); cy.get('.euiButton__text').contains('Update').click({ force: true }); - cy.wait(delay); cy.get('text.xtitle').contains(X_LABEL).should('exist'); cy.get('.euiSwitch__label').contains('Show X-axis label').click({ force: true }); - cy.wait(delay); cy.get('.euiButton__text').contains('Update').click({ force: true }); - cy.wait(delay); cy.get('text.xtitle').should('not.exist'); }); it('Changes time formats', () => { - cy.get('g.xtick > text').contains('12:59:07.303 PM').should('exist'); + cy.intercept({ method: 'POST', url: '**/api/gantt_vis/query' }).as('timeUpdateRequest'); cy.get('select').eq(3).select('MM/DD hh:mm:ss A'); - cy.wait(delay); cy.get('.euiButton__text').contains('Update').click({ force: true }); - cy.wait(delay); - cy.get('g.xtick > text').contains('05/28 12:59:07 PM').should('exist'); + cy.wait('@timeUpdateRequest'); + cy.get('.xtick') + .eq(0) + .invoke('text') + .should('satisfy', (text) => { + return dayjs(text, 'MM/DD hh:mm:ss A', true).isValid(); + }); cy.get('select').eq(3).select('MM/DD/YY hh:mm A'); - cy.wait(delay); cy.get('.euiButton__text').contains('Update').click({ force: true }); - cy.wait(delay); - cy.get('g.xtick > text').contains('05/28/20 12:59 PM').should('exist'); + cy.wait('@timeUpdateRequest'); + cy.get('.xtick') + .eq(0) + .invoke('text') + .should('satisfy', (text) => { + return dayjs(text, 'MM/DD/YY hh:mm A', true).isValid(); + }); cy.get('select').eq(3).select('HH:mm:ss.SSS'); - cy.wait(delay); cy.get('.euiButton__text').contains('Update').click({ force: true }); - cy.wait(delay); - cy.get('g.xtick > text').contains('12:59:07.303').should('exist'); + cy.wait('@timeUpdateRequest'); + cy.get('.xtick') + .eq(0) + .invoke('text') + .should('satisfy', (text) => { + return dayjs(text, 'HH:mm:ss.SSS', true).isValid(); + }); cy.get('select').eq(3).select('MM/DD HH:mm:ss'); - cy.wait(delay); cy.get('.euiButton__text').contains('Update').click({ force: true }); - cy.wait(delay); - cy.get('g.xtick > text').contains('05/28 12:59:07').should('exist'); + cy.wait('@timeUpdateRequest'); + cy.get('.xtick') + .eq(0) + .invoke('text') + .should('satisfy', (text) => { + return dayjs(text, 'MM/DD HH:mm:ss', true).isValid(); + }); cy.get('select').eq(3).select('MM/DD/YY HH:mm'); - cy.wait(delay); cy.get('.euiButton__text').contains('Update').click({ force: true }); - cy.wait(delay); - cy.get('g.xtick > text').contains('05/28/20 12:59').should('exist'); + cy.wait('@timeUpdateRequest'); + cy.get('.xtick') + .eq(0) + .invoke('text') + .should('satisfy', (text) => { + return dayjs(text, 'MM/DD/YY HH:mm', true).isValid(); + }); }); it('Hides legends', () => { cy.get('g.traces').should('have.length', DEFAULT_SIZE); cy.get('.euiSwitch__label').contains('Show legend').click({ force: true }); - cy.wait(delay); cy.get('.euiButton__text').contains('Update').click({ force: true }); - cy.wait(delay); cy.get('g.traces').should('not.exist'); }); @@ -208,14 +195,12 @@ describe('Configure panel settings', () => { describe('Add gantt chart to dashboard', () => { it('Adds gantt chart to dashboard', () => { cy.visit(`${Cypress.env('opensearchDashboards')}/app/dashboards#/create`); - cy.wait(delay * 5); - cy.get('.euiLink').contains('Add an existing').click({ force: true }); - cy.wait(delay); + cy.contains('Add an existing').click({ force: true }); cy.get('input[data-test-subj="savedObjectFinderSearchInput"]').focus().type(GANTT_VIS_NAME); - cy.wait(delay); - cy.get(`.euiListGroupItem__label[title="${GANTT_VIS_NAME}"]`).click({ force: true }); - cy.wait(delay); + cy.get(`.euiListGroupItem__label[title="${GANTT_VIS_NAME}"]`).click({ + force: true, + }); cy.get('g.traces').should('have.length', DEFAULT_SIZE); }); diff --git a/gantt-chart/.cypress/utils/constants.js b/gantt-chart/.cypress/utils/constants.js index fc8436d..3854318 100644 --- a/gantt-chart/.cypress/utils/constants.js +++ b/gantt-chart/.cypress/utils/constants.js @@ -3,14 +3,6 @@ * SPDX-License-Identifier: Apache-2.0 */ -export const testDataSet = [ - { - url: 'https://raw.githubusercontent.com/opensearch-project/dashboards-visualizations/main/gantt-chart/.cypress/utils/jaeger-sample.json', - index: 'jaeger', - }, -]; - -export const delay = 1000; export const GANTT_VIS_NAME = 'A test gantt chart ' + Math.random().toString(36).substring(2); export const Y_LABEL = 'A unique label for Y-axis'; export const X_LABEL = 'A unique label for X-axis'; diff --git a/gantt-chart/public/components/__tests__/__snapshots__/gantt_chart_editor.test.tsx.snap b/gantt-chart/public/components/__tests__/__snapshots__/gantt_chart_editor.test.tsx.snap index 9352378..ae2cf1d 100644 --- a/gantt-chart/public/components/__tests__/__snapshots__/gantt_chart_editor.test.tsx.snap +++ b/gantt-chart/public/components/__tests__/__snapshots__/gantt_chart_editor.test.tsx.snap @@ -76,7 +76,11 @@ exports[` spec renders the component 1`] = ` viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg" - /> + > + + @@ -156,7 +160,11 @@ exports[` spec renders the component 1`] = ` viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg" - /> + > + + @@ -236,7 +244,11 @@ exports[` spec renders the component 1`] = ` viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg" - /> + > + + diff --git a/gantt-chart/public/components/__tests__/__snapshots__/options_editor.test.tsx.snap b/gantt-chart/public/components/__tests__/__snapshots__/options_editor.test.tsx.snap index 8356fa7..433bab0 100644 --- a/gantt-chart/public/components/__tests__/__snapshots__/options_editor.test.tsx.snap +++ b/gantt-chart/public/components/__tests__/__snapshots__/options_editor.test.tsx.snap @@ -66,7 +66,11 @@ exports[` spec renders the component 1`] = ` viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg" - /> + > + + @@ -110,7 +114,11 @@ exports[` spec renders the component 1`] = ` viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg" - /> + > + + spec renders the component 1`] = ` viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg" - /> + > + + @@ -170,7 +182,11 @@ exports[` spec renders the component 1`] = ` viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg" - /> + > + + spec renders the component 1`] = ` viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg" - /> + > + +