Simplifies test ID generator function

Author: elvisisking

app/ui-react/README.md

@@ -640,7 +640,7 @@ UI components that have user interaction should define a `data-testid` attribute
 
 The `toTestId` utilitity function, which is found in the `testIdGenerator.ts` file in the `utils` folder of the `@syndesis/ui` package, should be used to generate **all** test identifiers. This function ensures the identifier is formatted correctly and only contains valid characters. It also provides a way to separate segments of the identifier if segments are desired.
 
-The `toTestId` function accepts one or more strings and inserts 2 dash (`-`) characters between them. It is recommended to have the first string be the name of the component. Here is an example of how to use the `toTestId` function:
+The `toTestId` function accepts one or more strings and inserts a dash (`-`) character between them. It is recommended to have the first string be the name of the component. Here is an example of how to use the `toTestId` function:
 
 ```tsx
 export class ExtensionListItem extends React.Component<
@@ -657,7 +657,7 @@ export class ExtensionListItem extends React.Component<
 </Button>
 ```
 
-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
 

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('-');
 }
 
 /**

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'
     );
   });

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');
   });
 });

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...');
   });
 });

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);
   });
 });