From 9d4db66eb14d9221f0c2e64477c713a782df48cd Mon Sep 17 00:00:00 2001 From: Daniel Florian Date: Tue, 21 May 2019 16:58:48 -0500 Subject: [PATCH 1/4] More changes to test IDs --- .../ui/src/Connection/ConnectionCard.tsx | 31 +++++++++++++++---- .../Connection/ConnectionCreatorLayout.tsx | 16 ++++++++-- .../src/Connection/ConnectionDetailsForm.tsx | 21 ++++++++++--- .../ui/src/Connection/ConnectionsListView.tsx | 6 +++- .../ApiConnectorDetailCard.tsx | 3 +- .../ApiConnectorDetailsForm.tsx | 21 ++++++++++--- .../ApiConnectorListItem.tsx | 11 +++++-- .../ApiConnectorListView.tsx | 11 +++++-- .../extensions/ExtensionDetail.tsx | 6 +++- .../extensions/ExtensionImportReview.tsx | 6 +++- .../extensions/ExtensionIntegrationsTable.tsx | 6 +++- .../extensions/ExtensionListItem.tsx | 16 ++++++++-- .../extensions/ExtensionListView.tsx | 11 +++++-- .../packages/ui/src/Dashboard/Dashboard.tsx | 18 ++++++++--- .../Data/DvConnection/DvConnectionCard.tsx | 7 +++-- .../DvConnection/DvConnectionsListView.tsx | 6 +++- .../Data/Virtualizations/SqlClientForm.tsx | 3 +- .../Virtualizations/Views/EmptyViewsState.tsx | 11 +++++-- .../Views/SchemaNodeListItem.tsx | 6 +++- .../Views/ViewCreateLayout.tsx | 7 +++-- .../Views/ViewInfoListItem.tsx | 6 +++- .../Data/Virtualizations/Views/ViewList.tsx | 11 +++++-- .../Virtualizations/Views/ViewListItem.tsx | 10 +++++- .../Views/ViewsImportLayout.tsx | 7 +++-- .../Virtualizations/VirtualizationList.tsx | 17 +++++++--- .../VirtualizationListItem.tsx | 6 +++- .../VirtualizationPublishStatusDetail.tsx | 7 +++-- .../Activity/IntegrationDetailActivity.tsx | 12 +++++-- .../src/Integration/CiCd/CiCdEditDialog.tsx | 5 +-- .../Integration/CiCd/CiCdListEmptyState.tsx | 6 +++- .../ui/src/Integration/CiCd/CiCdListItem.tsx | 11 +++++-- .../src/Integration/CiCd/CiCdListSkeleton.tsx | 7 +++-- .../ui/src/Integration/CiCd/CiCdListView.tsx | 3 +- .../Integration/CiCd/TagIntegrationDialog.tsx | 11 +++++-- .../CiCd/TagIntegrationDialogEmptyState.tsx | 6 +++- .../CiCd/TagIntegrationListItem.tsx | 6 +++- .../Details/IntegrationActions.tsx | 13 ++++++-- .../Details/IntegrationDetailBreadcrumb.tsx | 31 +++++++++++++++---- .../IntegrationDetailHistoryListView.tsx | 15 +++++---- ...rationDetailHistoryListViewItemActions.tsx | 11 +++++-- .../IntegrationEditorNothingToConfigure.tsx | 11 +++++-- .../Editor/IntegrationEditorStepsListItem.tsx | 6 +++- .../Editor/IntegrationEditorWizard.tsx | 16 ++++++++-- .../Editor/endpoint/DescribeDataShapeForm.tsx | 28 ++++++++++++----- .../Editor/template/TemplateStepCard.tsx | 6 +++- .../Integration/IntegrationFlowAddStep.tsx | 6 +++- .../Integration/IntegrationStatusDetail.tsx | 3 +- .../Integration/IntegrationVerticalFlow.tsx | 6 +++- .../IntegrationsListItemUnreadable.tsx | 6 +++- .../Integration/IntegrationsListSkeleton.tsx | 7 +++-- .../src/Integration/IntegrationsListView.tsx | 16 ++++++++-- .../Settings/OAuth/OAuthAppExpanderBody.tsx | 11 +++++-- .../ui/src/Shared/AggregatedMetricCard.tsx | 29 ++++++++++++++--- .../packages/ui/src/Shared/DndFileChooser.tsx | 10 ++++-- .../packages/ui/src/Shared/HelpDropdown.tsx | 13 ++++---- .../ui/src/Shared/ListViewToolbar.tsx | 6 +++- .../ui/src/Shared/ProgressWithLink.tsx | 8 ++--- .../packages/ui/src/Shared/TextEditor.tsx | 8 ++++- .../ui/src/Shared/UnrecoverableError.tsx | 16 ++++++++-- app/ui-react/packages/ui/src/index.ts | 1 + app/ui-react/packages/ui/src/utils/index.ts | 1 + .../packages/ui/src/utils/testIdGenerator.ts | 30 ++++++++++++++++++ .../ApiConnectorDetailCard.stories.tsx | 5 ++- .../ApiConnectorDetailsForm.stories.tsx | 5 ++- .../ApiConnectorListItem.stories.tsx | 5 ++- .../ApiConnectorListView.stories.tsx | 5 ++- .../ApiConnectorReview.stories.tsx | 5 ++- .../ui/tests/AggregatedMetricCard.spec.tsx | 16 +++++++--- .../packages/ui/tests/ConnectionCard.spec.tsx | 2 +- .../ui/tests/IntegrationStatusDetail.spec.tsx | 6 ++-- .../ui/tests/ProgressWithLink.spec.tsx | 12 ++++--- app/ui-react/syndesis/src/app/UI.tsx | 23 +++++++++----- .../pages/ApiConnectorDetailsPage.tsx | 27 ++++++++++------ .../connections/ConnectionsCreatorApp.tsx | 7 +++-- .../pages/ConnectionDetailsPage.tsx | 15 +++++---- .../pages/create/ConfigurationPage.tsx | 8 +++-- .../modules/dashboard/pages/DashboardPage.tsx | 22 +++++++++++-- .../src/modules/data/ViewCreateApp.tsx | 14 ++++++--- .../src/modules/data/ViewsImportApp.tsx | 14 ++++++--- .../data/pages/VirtualizationCreatePage.tsx | 23 ++++++++------ .../data/pages/VirtualizationMetricsPage.tsx | 14 ++++++--- .../pages/VirtualizationRelationshipPage.tsx | 14 ++++++--- .../pages/VirtualizationSqlClientPage.tsx | 14 ++++++--- .../data/pages/VirtualizationViewsPage.tsx | 14 ++++++--- .../extensions/pages/ExtensionDetailsPage.tsx | 13 +++++--- .../extensions/pages/ExtensionImportPage.tsx | 16 ++++++++-- .../integrations/IntegrationCreatorApp.tsx | 7 +++-- .../integrations/IntegrationEditorApp.tsx | 12 +++++-- .../components/IntegrationEditorStepAdder.tsx | 29 ++++++++++------- .../editor/dataMapper/DataMapperPage.tsx | 12 +++++-- .../editor/endpoint/SelectActionPage.tsx | 6 +++- .../editor/template/WithTemplater.tsx | 6 +++- .../pages/cicd/ManageCiCdPage.tsx | 6 +++- .../integrations/pages/import/ImportPage.tsx | 7 +++-- .../components/SelectiveIntegrationList.tsx | 8 +++-- .../src/modules/support/pages/SupportPage.tsx | 18 ++++++++--- 96 files changed, 812 insertions(+), 266 deletions(-) create mode 100644 app/ui-react/packages/ui/src/utils/index.ts create mode 100644 app/ui-react/packages/ui/src/utils/testIdGenerator.ts diff --git a/app/ui-react/packages/ui/src/Connection/ConnectionCard.tsx b/app/ui-react/packages/ui/src/Connection/ConnectionCard.tsx index ab2c5e14f61..50adb7454ef 100644 --- a/app/ui-react/packages/ui/src/Connection/ConnectionCard.tsx +++ b/app/ui-react/packages/ui/src/Connection/ConnectionCard.tsx @@ -15,6 +15,7 @@ import { ConfirmationDialog, ConfirmationIconType, } from '../Shared'; +import { toTestId } from '../utils'; import './ConnectionCard.css'; export interface IConnectionCardMenuProps { @@ -146,7 +147,10 @@ export class ConnectionCard extends React.PureComponent< >
  • ) : ( @@ -215,7 +231,10 @@ export class ConnectionCard extends React.PureComponent< {this.props.name} diff --git a/app/ui-react/packages/ui/src/Connection/ConnectionCreatorLayout.tsx b/app/ui-react/packages/ui/src/Connection/ConnectionCreatorLayout.tsx index 1c6a3819b1d..d10ee6c2846 100644 --- a/app/ui-react/packages/ui/src/Connection/ConnectionCreatorLayout.tsx +++ b/app/ui-react/packages/ui/src/Connection/ConnectionCreatorLayout.tsx @@ -4,6 +4,7 @@ import * as H from '@syndesis/history'; import classnames from 'classnames'; import * as React from 'react'; import { ButtonLink, Loader } from '../Layout'; +import { toTestId } from '../utils'; /** * @param header - a PatternFly Wizard Steps component. @@ -94,7 +95,10 @@ export const ConnectionCreatorLayout: React.FunctionComponent<
    {extraButtons}
    )} {this.props.isEditing ? (     diff --git a/app/ui-react/packages/ui/src/Customization/extensions/ExtensionListItem.tsx b/app/ui-react/packages/ui/src/Customization/extensions/ExtensionListItem.tsx index 86c9394fed8..de90fd2f835 100644 --- a/app/ui-react/packages/ui/src/Customization/extensions/ExtensionListItem.tsx +++ b/app/ui-react/packages/ui/src/Customization/extensions/ExtensionListItem.tsx @@ -13,6 +13,7 @@ import { ConfirmationDialog, ConfirmationIconType, } from '../../Shared'; +import { toTestId } from '../../utils'; export interface IExtensionListItemProps { detailsPageLink: H.LocationDescriptor; @@ -135,7 +136,10 @@ export class ExtensionListItem extends React.Component< placement="top" > @@ -144,7 +148,10 @@ export class ExtensionListItem extends React.Component< @@ -153,7 +160,10 @@ export class ExtensionListItem extends React.Component< +``` + +The above code produces this test ID for an extension with the name of "My Extension": `extensionlistitem--my-extension--delete-button`. + #### Unit testing TODO talk about jest, react-testing-library, point out to useful resources. diff --git a/app/ui-react/packages/ui/src/Connection/ConnectionCard.tsx b/app/ui-react/packages/ui/src/Connection/ConnectionCard.tsx index 5a01245258b..a1fb0a47a9f 100644 --- a/app/ui-react/packages/ui/src/Connection/ConnectionCard.tsx +++ b/app/ui-react/packages/ui/src/Connection/ConnectionCard.tsx @@ -148,8 +148,9 @@ export class ConnectionCard extends React.PureComponent<
  • {this.props.name} diff --git a/app/ui-react/packages/ui/src/Connection/ConnectionCreatorLayout.tsx b/app/ui-react/packages/ui/src/Connection/ConnectionCreatorLayout.tsx index d10ee6c2846..7a2e593adb0 100644 --- a/app/ui-react/packages/ui/src/Connection/ConnectionCreatorLayout.tsx +++ b/app/ui-react/packages/ui/src/Connection/ConnectionCreatorLayout.tsx @@ -95,10 +95,7 @@ export const ConnectionCreatorLayout: React.FunctionComponent<
    {extraButtons}
    )}     ``` -The above code produces this test ID for an extension with the name of "My Extension": `extensionlistitem--my-extension--delete-button`. +The above code produces this test ID for an extension with the name of "My Extension": `extensionlistitem-my-extension-delete-button`. #### Unit testing diff --git a/app/ui-react/packages/ui/src/utils/testIdGenerator.ts b/app/ui-react/packages/ui/src/utils/testIdGenerator.ts index 8fbdc885e7c..986ab0c87ab 100644 --- a/app/ui-react/packages/ui/src/utils/testIdGenerator.ts +++ b/app/ui-react/packages/ui/src/utils/testIdGenerator.ts @@ -1,22 +1,11 @@ /** - * Generates an identifier suitable to use as a `data-testid`. Value arguments are separated by two - * dash characters. + * Generates an identifier suitable to use as a `data-testid`. Value arguments are separated by a + * dash character. * @param values the values used to generate a test identifier * @returns a test identifier */ export function toTestId(...values: string[]): string { - let testId = ''; - - for (let i = 0; i < values.length; i++) { - testId += generateId(values[i]); - - // add separator - if (i < values.length - 1) { - testId += '--'; - } - } - - return testId; + return values.map(generateId).join('-'); } /** diff --git a/app/ui-react/packages/ui/tests/AggregatedMetricCard.spec.tsx b/app/ui-react/packages/ui/tests/AggregatedMetricCard.spec.tsx index 0bae3e2168d..7aa5aca374d 100644 --- a/app/ui-react/packages/ui/tests/AggregatedMetricCard.spec.tsx +++ b/app/ui-react/packages/ui/tests/AggregatedMetricCard.spec.tsx @@ -9,25 +9,25 @@ export default describe('AggregatedMetricCard', () => { it('Should have the A Title title', function() { const { getByTestId } = render(testComponent); - expect(getByTestId('aggregatedmetriccard--title')).toHaveTextContent( + expect(getByTestId('aggregatedmetriccard-title')).toHaveTextContent( 'A Title' ); }); it('Should have 5 errors', function() { const { getByTestId } = render(testComponent); - expect(getByTestId('aggregatedmetriccard--error-count')).toHaveTextContent( + expect(getByTestId('aggregatedmetriccard-error-count')).toHaveTextContent( '5' ); }); it('Should have 10 ok', function() { const { getByTestId } = render(testComponent); - expect(getByTestId('aggregatedmetriccard--ok-count')).toHaveTextContent( + expect(getByTestId('aggregatedmetriccard-ok-count')).toHaveTextContent( '10' ); }); it('Should have 15 total', function() { const { getByTestId } = render(testComponent); - expect(getByTestId('aggregatedmetriccard--total-count')).toHaveTextContent( + expect(getByTestId('aggregatedmetriccard-total-count')).toHaveTextContent( '15' ); }); diff --git a/app/ui-react/packages/ui/tests/ConnectionCard.spec.tsx b/app/ui-react/packages/ui/tests/ConnectionCard.spec.tsx index 55ff3385944..c4d35ae21d5 100644 --- a/app/ui-react/packages/ui/tests/ConnectionCard.spec.tsx +++ b/app/ui-react/packages/ui/tests/ConnectionCard.spec.tsx @@ -32,7 +32,7 @@ export default describe('ConnectionCard', () => { it('Should have the Sample connection title', () => { const { getByTestId } = render(testComponent); expect( - getByTestId('connectioncard--sample-connection--details-link') + getByTestId('connectioncard-sample-connection-details-link') ).toHaveTextContent('Sample connection'); }); }); diff --git a/app/ui-react/packages/ui/tests/IntegrationStatusDetail.spec.tsx b/app/ui-react/packages/ui/tests/IntegrationStatusDetail.spec.tsx index c89ca814d00..0342e944921 100644 --- a/app/ui-react/packages/ui/tests/IntegrationStatusDetail.spec.tsx +++ b/app/ui-react/packages/ui/tests/IntegrationStatusDetail.spec.tsx @@ -41,21 +41,21 @@ export default describe('IntegrationStatusDetail', () => { it('Should show the starting state', () => { const { getByTestId } = render(testComponentPublishing); expect( - getByTestId('integrationstatusdetail--status-detail') + getByTestId('integrationstatusdetail-status-detail') ).toHaveTextContent('Starting...'); }); it('Should show the detailed status', () => { const { getByTestId } = render(testComponentPublishingDetailed); expect( - getByTestId('integrationstatusdetail--status-detail') + getByTestId('integrationstatusdetail-status-detail') ).toHaveTextContent(''); }); it('Should show the stopping state', () => { const { getByTestId } = render(testComponentUnpublishing); expect( - getByTestId('integrationstatusdetail--status-detail') + getByTestId('integrationstatusdetail-status-detail') ).toHaveTextContent('Stopping...'); }); }); diff --git a/app/ui-react/packages/ui/tests/ProgressWithLink.spec.tsx b/app/ui-react/packages/ui/tests/ProgressWithLink.spec.tsx index 09e7c3bae24..0e0d54b2e26 100644 --- a/app/ui-react/packages/ui/tests/ProgressWithLink.spec.tsx +++ b/app/ui-react/packages/ui/tests/ProgressWithLink.spec.tsx @@ -26,25 +26,25 @@ export default describe('IntegrationProgress', () => { it('Should show the progress value and steps', () => { const { getByTestId } = render(testComponent); - expect(getByTestId('progresswithlink--value')).toHaveTextContent( + expect(getByTestId('progresswithlink-value')).toHaveTextContent( 'Deploying ( 2 / 4 )' ); }); it('Should show the log link when supplied', () => { const { queryByTestId } = render(testComponent); - expect(queryByTestId('progresswithlink--log-url')).toBeDefined(); - expect(queryByTestId('progresswithlink--log-url')).toHaveTextContent( + expect(queryByTestId('progresswithlink-log-url')).toBeDefined(); + expect(queryByTestId('progresswithlink-log-url')).toHaveTextContent( 'View Logs' ); }); it('Should show the progress value and steps', () => { const { getByTestId } = render(testComponentNoLog); - expect(getByTestId('progresswithlink--value')).toHaveTextContent( + expect(getByTestId('progresswithlink-value')).toHaveTextContent( 'Assembling ( 1 / 4 )' ); }); it('Should not show the log link if not supplied', () => { const { queryByTestId } = render(testComponentNoLog); - expect(queryByTestId('progresswithlink--log-url')).toEqual(null); + expect(queryByTestId('progresswithlink-log-url')).toEqual(null); }); });