SONAR-17188 Improve tests

server/sonar-web/src/main/js/components/tutorials/azure-pipelines/BranchAnalysisStepContent.tsx

@@ -58,13 +58,11 @@ export function BranchAnalysisStepContent(props: BranchesAnalysisStepProps) {
         optionLabelKey="onboarding.build"
         options={buildToolsList}
       />
-      <div data-testid="azure-tutorial__analysis-command">
-        <AnalysisCommand
-          onStepValidationChange={onStepValidationChange}
-          buildTool={buildTechnology}
-          projectKey={component.key}
-        />
-      </div>
+      <AnalysisCommand
+        onStepValidationChange={onStepValidationChange}
+        buildTool={buildTechnology}
+        projectKey={component.key}
+      />
     </>
   );
 }

server/sonar-web/src/main/js/components/tutorials/azure-pipelines/ExtensionInstallationStepContent.tsx

@@ -24,7 +24,7 @@ import Link from '../../common/Link';
 
 export default function ExtensionInstallationStepContent() {
   return (
-    <span data-testid="azure-tutorial__extension">
+    <span>
       <FormattedMessage
         defaultMessage={translate(
           'onboarding.tutorial.with.azure_pipelines.ExtensionInstallation.sentence'

server/sonar-web/src/main/js/components/tutorials/azure-pipelines/ServiceEndpointStepContent.tsx

@@ -41,7 +41,7 @@ export default function ServiceEndpointStepContent(props: ServiceEndpointStepPro
 
   return (
     <>
-      <ol className="list-styled" data-testid="azure-tutorial__service-endpoint">
+      <ol className="list-styled">
         <li>
           <SentenceWithHighlights
             translationKey="onboarding.tutorial.with.azure_pipelines.ServiceEndpoint.step1"

server/sonar-web/src/main/js/components/tutorials/azure-pipelines/__tests__/AzurePipelinesTutorial-it.tsx

@@ -27,6 +27,7 @@ import { mockAppState, mockLanguage, mockLoggedInUser } from '../../../../helper
 import { renderApp, RenderContext } from '../../../../helpers/testReactTestingUtils';
 import { Permissions } from '../../../../types/permissions';
 import { TokenType } from '../../../../types/token';
+import { OSs } from '../../types';
 import AzurePipelinesTutorial, { AzurePipelinesTutorialProps } from '../AzurePipelinesTutorial';
 
 jest.mock('../../../../api/user-tokens');
@@ -91,24 +92,14 @@ it('should render correctly and allow navigating between the different steps', a
   await clickButton(user, 'onboarding.build.gradle');
   assertGradleStepIsCorrectlyRendered();
 
-  //// Analysis step: Gradle
-  await clickButton(user, 'onboarding.build.gradle');
-  assertGradleStepIsCorrectlyRendered();
-
   //// Analysis step: C Family
   await clickButton(user, 'onboarding.build.cfamily');
 
-  // OS: Linux
-  await clickButton(user, 'onboarding.build.other.os.linux');
-  assertCFamilyLinuxStepIsCorrectlyRendered();
-
-  // OS: Windows
-  await clickButton(user, 'onboarding.build.other.os.win');
-  assertCFamilyWindowsStepIsCorrectlyRendered();
-
-  // OS: macOS
-  await clickButton(user, 'onboarding.build.other.os.mac');
-  assertCFamilyMacOSStepIsCorrectlyRendered();
+  // OS's
+  [OSs.Linux, OSs.Windows, OSs.MacOS].forEach(async os => {
+    await clickButton(user, `onboarding.build.other.os.${os}`);
+    assertCFamilyStepIsCorrectlyRendered(os);
+  });
 
   //// Analysis step: Other
   await clickButton(user, 'onboarding.build.other');
@@ -171,45 +162,12 @@ it('should not offer CFamily analysis if the language is not available', async (
   ).not.toBeInTheDocument();
 });
 
-function renderAzurePipelinesTutorial(
-  props: Partial<AzurePipelinesTutorialProps> = {},
-  {
-    appState = mockAppState({ branchesEnabled: true }),
-    languages = { c: mockLanguage({ key: 'c' }) }
-  }: RenderContext = {}
-) {
-  return renderApp(
-    '/',
-    <AzurePipelinesTutorial
-      baseUrl="http://localhost:9000"
-      component={mockComponent()}
-      currentUser={mockLoggedInUser({ permissions: { global: [Permissions.Scan] } })}
-      willRefreshAutomatically={true}
-      {...props}
-    />,
-    { appState, languages }
-  );
-}
-
-async function clickButton(user: UserEvent, name: string, context?: HTMLElement) {
-  if (context) {
-    await user.click(within(context).getByRole('button', { name }));
-  } else {
-    await user.click(screen.getByRole('button', { name }));
-  }
-}
-
-async function goToNextStep(user: UserEvent) {
-  await clickButton(user, 'continue');
-}
-
 function assertDefaultStepIsCorrectlyRendered() {
   expect(
     screen.getByRole('heading', {
       name: 'onboarding.tutorial.with.azure_pipelines.ExtensionInstallation.title'
     })
   ).toBeInTheDocument();
-  expect(screen.getByTestId('azure-tutorial__extension')).toMatchSnapshot('extension step');
 }
 
 function assertServiceEndpointStepIsCorrectlyRendered() {
@@ -218,10 +176,7 @@ function assertServiceEndpointStepIsCorrectlyRendered() {
       name: 'onboarding.tutorial.with.azure_pipelines.ServiceEndpoint.title'
     })
   ).toBeInTheDocument();
-  expect(screen.getByTestId('azure-tutorial__service-endpoint')).toMatchSnapshot(
-    'service endpoint step'
-  );
-  expect(screen.getByRole('button', { name: 'copy_to_clipboard' })).toBeInTheDocument();
+  expect(getCopyToClipboardValue()).toBe('https://sonarqube.example.com/');
   expect(
     screen.getByRole('button', { name: 'onboarding.token.generate.long' })
   ).toBeInTheDocument();
@@ -233,45 +188,26 @@ function assertDotNetStepIsCorrectlyRendered() {
       name: 'onboarding.tutorial.with.azure_pipelines.BranchAnalysis.title'
     })
   ).toBeInTheDocument();
-
-  expect(screen.getByTestId('azure-tutorial__analysis-command')).toMatchSnapshot('dotnet step');
-  expect(screen.getByRole('button', { name: 'copy_to_clipboard' })).toBeInTheDocument();
+  expect(getCopyToClipboardValue()).toBe('foo');
 }
 
 function assertMavenStepIsCorrectlyRendered() {
-  expect(screen.getByTestId('azure-tutorial__analysis-command')).toMatchSnapshot('maven step');
-  expect(screen.getByRole('button', { name: 'copy_to_clipboard' })).toBeInTheDocument();
+  expect(getCopyToClipboardValue()).toMatchSnapshot('maven, copy additional properties');
 }
 
 function assertGradleStepIsCorrectlyRendered() {
-  expect(screen.getByTestId('azure-tutorial__analysis-command')).toMatchSnapshot('gradle step');
-  expect(screen.getByRole('button', { name: 'copy_to_clipboard' })).toBeInTheDocument();
+  expect(getCopyToClipboardValue()).toMatchSnapshot('gradle, copy additional properties');
 }
 
-function assertCFamilyLinuxStepIsCorrectlyRendered() {
-  expect(screen.getByTestId('azure-tutorial__analysis-command')).toMatchSnapshot(
-    'cfamily linux step'
-  );
-  expect(screen.getAllByRole('button', { name: 'copy_to_clipboard' })).toHaveLength(4);
-}
-
-function assertCFamilyWindowsStepIsCorrectlyRendered() {
-  expect(screen.getByTestId('azure-tutorial__analysis-command')).toMatchSnapshot(
-    'cfamily windows step'
-  );
-  expect(screen.getAllByRole('button', { name: 'copy_to_clipboard' })).toHaveLength(4);
-}
-
-function assertCFamilyMacOSStepIsCorrectlyRendered() {
-  expect(screen.getByTestId('azure-tutorial__analysis-command')).toMatchSnapshot(
-    'cfamily macos step'
-  );
-  expect(screen.getAllByRole('button', { name: 'copy_to_clipboard' })).toHaveLength(4);
+function assertCFamilyStepIsCorrectlyRendered(os: string) {
+  expect(getCopyToClipboardValue(0)).toMatchSnapshot(`cfamily ${os}, copy shell script`);
+  expect(getCopyToClipboardValue(1)).toBe('foo');
+  expect(getCopyToClipboardValue(2)).toMatchSnapshot(`cfamily ${os}, copy additional properties`);
+  expect(getCopyToClipboardValue(3)).toMatchSnapshot(`cfamily ${os}, copy build-wrapper command`);
 }
 
 function assertOtherStepIsCorrectlyRendered() {
-  expect(screen.getByTestId('azure-tutorial__analysis-command')).toMatchSnapshot('other step');
-  expect(screen.getByRole('button', { name: 'copy_to_clipboard' })).toBeInTheDocument();
+  expect(getCopyToClipboardValue()).toBe('foo');
 }
 
 function assertFinishStepIsCorrectlyRendered() {
@@ -280,5 +216,40 @@ function assertFinishStepIsCorrectlyRendered() {
       name: 'onboarding.tutorial.ci_outro.all_set.title'
     })
   ).toBeInTheDocument();
-  expect(screen.getByTestId('azure-tutorial__all-set')).toMatchSnapshot('all set step');
+}
+
+function renderAzurePipelinesTutorial(
+  props: Partial<AzurePipelinesTutorialProps> = {},
+  {
+    appState = mockAppState({ branchesEnabled: true }),
+    languages = { c: mockLanguage({ key: 'c' }) }
+  }: RenderContext = {}
+) {
+  return renderApp(
+    '/',
+    <AzurePipelinesTutorial
+      baseUrl="https://sonarqube.example.com/"
+      component={mockComponent({ key: 'foo' })}
+      currentUser={mockLoggedInUser({ permissions: { global: [Permissions.Scan] } })}
+      willRefreshAutomatically={true}
+      {...props}
+    />,
+    { appState, languages }
+  );
+}
+
+async function clickButton(user: UserEvent, name: string, context?: HTMLElement) {
+  if (context) {
+    await user.click(within(context).getByRole('button', { name }));
+  } else {
+    await user.click(screen.getByRole('button', { name }));
+  }
+}
+
+async function goToNextStep(user: UserEvent) {
+  await clickButton(user, 'continue');
+}
+
+function getCopyToClipboardValue(i = 0, name = 'copy_to_clipboard') {
+  return screen.getAllByRole('button', { name })[i].getAttribute('data-clipboard-text');
 }

server/sonar-web/src/main/js/components/tutorials/components/AllSetStep.tsx

@@ -37,7 +37,7 @@ export default function AllSetStep(props: AllSetStepProps) {
       finished={false}
       open={open}
       renderForm={() => (
-        <div data-testid="azure-tutorial__all-set" className="boxed-group-inner">
+        <div className="boxed-group-inner">
           <AllSet alm={alm} willRefreshAutomatically={willRefreshAutomatically} />
         </div>
       )}