Merge remote-tracking branch 'phosWeb/addPlayWrightTests' into addPla…

…yWrightTests

simulator-ui/tests/entities.spec.ts

@@ -4,7 +4,8 @@ import {
   messageHeaderJson,
   messageJson,
   scenarioActionJson,
-  scenarioExecutionJson, testParameterJson,
+  scenarioExecutionJson,
+  testParameterJson,
   testResultJson
 } from "./helpers/entity-jsons";
 import {mockBackendResponse} from "./helpers/helper-functions";
@@ -125,10 +126,6 @@ const entityPageContentMap: EntityPageContentObject[] = [
   }
 ]
 
-//the test steps are very repetitive and could be done in one loop... would this work with playwright?
-//or should there be a separate test file for every entity page?
-
-//should these be two separate tests?
 test('should display table of messages and refresh button should work', async ({page}) => {
   //'first test'
   const contentObject = entityPageContentMap[0];
@@ -151,7 +148,6 @@ test('should show message headers when clicking button on message row', async ({
   await page.getByTestId('filterOtherEntityButton').nth(0).click();
   await expect(page.getByTestId('filterValue')).toHaveText('messageId.in: 1');
   await expect(page).toHaveURL('http://localhost:9000/message-header?filter%5BmessageId.in%5D=1');
-  //eventually test if gui-element is visible too?
 })
 
 test('should display table of message headers and refresh button should work', async ({page}) => {

simulator-ui/tests/helpers/helper-interfaces.ts

@@ -1,7 +1,7 @@
 export interface EntityPageContentObject {
   apiUrl: string,
   entityUrl: string,
-  contentJson: [{}],
+  contentJson: {}[],
   locators: string[],
   testIdsAndExpectedValues: TestIdValuePair[],
   testIdToBeVisible: string[]

simulator-ui/tests/home.spec.ts

@@ -40,7 +40,7 @@ test('should have title, disclaimer, refresh button, reset button, feedback opti
 });
 
 test('check if summary-tab displays right percentage with round numbers', async ({page}) => {
-  await checkIfSummaryTabsAreDisplayingRightNumbersFunction(page, nbOfTotalTests, nbOfSuccessfulTests, nbOfFailedTests);
+  await checkIfSummaryTabsAreDisplayingRightNumbers(page, nbOfTotalTests, nbOfSuccessfulTests, nbOfFailedTests);
 })
 
 test('total, successful, failed tabs should display percentage in simulations count rounded to two decimal numbers', async ({page}) => {
@@ -55,13 +55,12 @@ test('total, successful, failed tabs should display percentage in simulations co
   })
   await page.goto('http://localhost:9000/');
 
-  await checkIfSummaryTabsAreDisplayingRightNumbersFunction(page, totalTestsBig, successfulTestsBig, failedTestsBig);
+  await checkIfSummaryTabsAreDisplayingRightNumbers(page, totalTestsBig, successfulTestsBig, failedTestsBig);
 });
 
-//should there be two separate tests for this? Or a for loop?
 test('should move to right page with feedback resp suggestion link', async ({page}) => {
   await clickOnLinkAndCheckIfTabOpensWithCorrectURL(page, 'feedbackLinkStarGithub', /.*\/github.com\/citrusframework\/citrus-simulator/);
-  await clickOnLinkAndCheckIfTabOpensWithCorrectURL(page, 'feedbackAndSuggestionLink', /.*\/github.com*/); //could be the login site ore the new-issue site: should one test the two options?
+  await clickOnLinkAndCheckIfTabOpensWithCorrectURL(page, 'feedbackAndSuggestionLink', /.*\/github.com*/);
 
 })
 
@@ -74,7 +73,7 @@ test('should move to scenario-results page with right search field params after
 })
 
 test('should have updated total, successful, failed tabs after refresh button clicked positive test', async ({page}) => {
-  await checkIfSummaryTabsAreDisplayingRightNumbersFunction(page, nbOfTotalTests, nbOfSuccessfulTests, nbOfFailedTests);
+  await checkIfSummaryTabsAreDisplayingRightNumbers(page, nbOfTotalTests, nbOfSuccessfulTests, nbOfFailedTests);
 
   nbOfFailedTests -= 10;
   nbOfSuccessfulTests += 10; //the total stays the same
@@ -85,11 +84,11 @@ test('should have updated total, successful, failed tabs after refresh button cl
   });
   await page.getByTestId('refreshListButton').click();
 
-  await checkIfSummaryTabsAreDisplayingRightNumbersFunction(page, nbOfTotalTests, nbOfSuccessfulTests, nbOfFailedTests);
+  await checkIfSummaryTabsAreDisplayingRightNumbers(page, nbOfTotalTests, nbOfSuccessfulTests, nbOfFailedTests);
 })
 
 test('should have updated total, successful, failed tabs after refresh button clicked negative test with false total', async ({page}) => {
-  await checkIfSummaryTabsAreDisplayingRightNumbersFunction(page, nbOfTotalTests, nbOfSuccessfulTests, nbOfFailedTests);
+  await checkIfSummaryTabsAreDisplayingRightNumbers(page, nbOfTotalTests, nbOfSuccessfulTests, nbOfFailedTests);
   nbOfFailedTests -= 10; // so the total will be wrong!
   const newCorrectTotal: number = nbOfTotalTests - 10;
   await mockBackendResponse(page, '**/api/test-results/count-by-status', {
@@ -100,26 +99,25 @@ test('should have updated total, successful, failed tabs after refresh button cl
 
   await page.getByTestId('refreshListButton').click();
 
-  await checkIfSummaryTabsAreDisplayingRightNumbersFunction(page, newCorrectTotal, nbOfSuccessfulTests, nbOfFailedTests);
+  await checkIfSummaryTabsAreDisplayingRightNumbers(page, newCorrectTotal, nbOfSuccessfulTests, nbOfFailedTests);
 })
 
 test('should have same total, successful, failed tabs after cancel deletion via close-Button and cancel-Button', async ({page}) => {
-  await checkIfSummaryTabsAreDisplayingRightNumbersFunction(page, nbOfTotalTests, nbOfSuccessfulTests, nbOfFailedTests);
+  await checkIfSummaryTabsAreDisplayingRightNumbers(page, nbOfTotalTests, nbOfSuccessfulTests, nbOfFailedTests);
   const closeButtons = ['testResultDeleteDialogCloseButton', 'testResultDeleteDialogCancelButton'];
 
   for (const button of closeButtons) {
     await page.getByTestId('resetButton').click();
     await expect(page.getByTestId('testResultDeleteDialogHeading')).toBeVisible();
     await page.getByTestId(button).click();
-    // Do I have to assert that API was NOT called here? --> isn't that covered by unit test?
     await expect(page.getByTestId('testResultDeleteDialogHeading')).toBeHidden();
 
-    await checkIfSummaryTabsAreDisplayingRightNumbersFunction(page, nbOfTotalTests, nbOfSuccessfulTests, nbOfFailedTests);
+    await checkIfSummaryTabsAreDisplayingRightNumbers(page, nbOfTotalTests, nbOfSuccessfulTests, nbOfFailedTests);
   }
 })
 
 test('should have reset total, successful, failed tabs after confirmed deletion with (200, OK) response', async ({page}) => {
-  await checkIfSummaryTabsAreDisplayingRightNumbersFunction(page, nbOfTotalTests, nbOfSuccessfulTests, nbOfFailedTests);
+  await checkIfSummaryTabsAreDisplayingRightNumbers(page, nbOfTotalTests, nbOfSuccessfulTests, nbOfFailedTests);
   await page.getByTestId('resetButton').click();
   await expect(page.getByTestId('testResultDeleteDialogHeading')).toBeVisible();
 
@@ -131,8 +129,7 @@ test('should have reset total, successful, failed tabs after confirmed deletion
     "failed": nbOfFailedTests,
     "total": nbOfTotalTests
   })
-  //are these promises too much because api-response-handling should be already covered in unit-tests?
-  //if they stay: Should I make an external method for the deleteReq/RespPromises for readability? --> no because it isn't reused?
+
   const deleteRequestPromise = page.waitForRequest(request =>
     request.url() === '**/api/test-results/' && request.method() === 'DELETE',
   );
@@ -145,10 +142,10 @@ test('should have reset total, successful, failed tabs after confirmed deletion
   await deleteResponsePromise;
 
   await expect(page.getByTestId('testResultDeleteDialogHeading')).toBeHidden();
-  await checkIfSummaryTabsAreDisplayingRightNumbersFunction(page, nbOfTotalTests, nbOfSuccessfulTests, nbOfFailedTests);
+  await checkIfSummaryTabsAreDisplayingRightNumbers(page, nbOfTotalTests, nbOfSuccessfulTests, nbOfFailedTests);
 })
 
-const checkIfSummaryTabsAreDisplayingRightNumbersFunction = async (page: Page, totalTests: number, successfulTests: number, failedTests: number): Promise<any> => {
+const checkIfSummaryTabsAreDisplayingRightNumbers = async (page: Page, totalTests: number, successfulTests: number, failedTests: number): Promise<any> => {
   const summarySelectorToAbsoluteValueMapping: {
     testSelector: string,
     value: number

simulator-ui/tests/scenario.spec.ts

@@ -76,7 +76,6 @@ test('should have the first 10 of 12 elements displayed in the table and the pag
   await checkIfAllJsonContentIsVisible(page, 10, scenarioJson);
 });
 
-// should one test EVERY option?
 test('should have all 12 scenarios displayed in the table after selecting 20 as table size', async ({page}) => {
   const selectedPageSize = '20';
   await page.getByTestId('itemsPerPageSelect').selectOption(selectedPageSize);
@@ -88,7 +87,6 @@ test('should have all 12 scenarios displayed in the table after selecting 20 as
   await expect(page.getByText('Showing 1-12 of 12 Items')).toBeVisible();
 });
 
-// how do you write this kind of test correctly? should the filter test be in the same as the reset button? or separate? Is the independence of the tests violated?
 test('text filter input should apply and clear filter button should reset it', async ({page}) => {
   await applyFilterAAndCheckCorrectness(page);
   await page.getByTestId('clearFilterButton').click();
@@ -97,14 +95,10 @@ test('text filter input should apply and clear filter button should reset it', a
   await checkIfAllJsonContentIsVisible(page, 10, scenarioJson);
 });
 
-// is the test independence again violated? should there be two separate tests for the pagination-select-option-button and the refresh button? --> no because the refresh button affects the pagination number inevitably.
 test('should have updated displayed scenarios after refresh button was clicked and a new scenario received', async ({page}) => {
   const selectOptionsForNumberOfScenariosToDisplay: number[] = [10, 20, 50, 100];
-  // should I really test the whole list?
   for (const option of selectOptionsForNumberOfScenariosToDisplay) {
     await page.getByTestId('itemsPerPageSelect').selectOption(option.toString());
-    // should it be tested whether the start condition is met - like 'await checkIfAllJsonContentIsVisible(page, 20, scenarioJson);' - or not?
-
     scenarioJson.push({"name": "Three", "type": "STARTER"});
     await mockBackendResponse(page, '**/api/scenarios**', scenarioJson);
 
@@ -171,7 +165,6 @@ test('should go to detail view of a scenario type STARTER check for content and
   const allVisibleDetailElements = ['scenarioDetailsHeading', 'scenarioDetailsName', 'scenarioDetailsType', 'scenarioDetailsEntitiesTable', 'scenarioDetailsEntitiesName', 'scenarioDetailsEntitiesControlType', 'scenarioDetailsEntitiesValue', 'entityDetailsBackButton']
   await page.getByText('One').click();
 
-  // await mockScenarioParameters(page);
   await expect(page).toHaveURL(/.*scenario\/One\/STARTER\/view*/);
   for (const element of allVisibleDetailElements) {
     await expect(page.getByTestId(element)).toBeVisible();