From c7022bc913d6377d93afae69bc32aad55b234487 Mon Sep 17 00:00:00 2001 From: Sergio Eduardo Castro Ceballos <72516762+SergioCasCeb@users.noreply.github.com> Date: Sat, 14 Oct 2023 01:07:09 +0200 Subject: [PATCH 01/12] Added new workflow for the new web package --- .github/workflows/visual-ci-new.yaml | 34 ++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) create mode 100644 .github/workflows/visual-ci-new.yaml diff --git a/.github/workflows/visual-ci-new.yaml b/.github/workflows/visual-ci-new.yaml new file mode 100644 index 000000000..a09d42583 --- /dev/null +++ b/.github/workflows/visual-ci-new.yaml @@ -0,0 +1,34 @@ +name: Visual Testing Pipeline + +on: + pull_request: + paths-ignore: + - "**.md" + - "**.png" + - "**.drawio" + - "**.xlsx" + +jobs: + setup-and-visual-test: + runs-on: ubuntu-latest + + steps: + - name: Checkout + uses: actions/checkout@v2 + + - name: Use Node.js 16 + uses: actions/setup-node@v1 + with: + node-version: "16.x" + + - name: Use lerna + run: npm install -g lerna@6.6.2 + + - name: Bootstrap + run: lerna bootstrap --no-ci + + - name: Visual Test + run: | + cd ./packages/web-new + npm install + npm run test \ No newline at end of file From 963db0a4397f10437fc8077dc887fb97914a8380 Mon Sep 17 00:00:00 2001 From: Sergio Eduardo Castro Ceballos <72516762+SergioCasCeb@users.noreply.github.com> Date: Sat, 14 Oct 2023 01:14:22 +0200 Subject: [PATCH 02/12] Added test script --- packages/web-new/package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/web-new/package.json b/packages/web-new/package.json index 3a0af097b..bca535160 100644 --- a/packages/web-new/package.json +++ b/packages/web-new/package.json @@ -18,7 +18,8 @@ "build": "node external-scripts/generate-paths.js && webpack --mode production", "dev": "webpack serve --mode development", "serve": "node server/server.js", - "examples": "node external-scripts/generate-paths.js" + "examples": "node external-scripts/generate-paths.js", + "test": "npx playwright test" }, "devDependencies": { "@babel/core": "^7.22.9", From 03177784760a8a1144bf1d4b6d0076698fd31691 Mon Sep 17 00:00:00 2001 From: Sergio Eduardo Castro Ceballos <72516762+SergioCasCeb@users.noreply.github.com> Date: Sat, 14 Oct 2023 01:19:13 +0200 Subject: [PATCH 03/12] Installing supported browsers --- .github/workflows/visual-ci-new.yaml | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.github/workflows/visual-ci-new.yaml b/.github/workflows/visual-ci-new.yaml index a09d42583..aa54c43bb 100644 --- a/.github/workflows/visual-ci-new.yaml +++ b/.github/workflows/visual-ci-new.yaml @@ -27,8 +27,9 @@ jobs: - name: Bootstrap run: lerna bootstrap --no-ci - - name: Visual Test + - name: New Web Visual Test run: | cd ./packages/web-new npm install + npx playwright install npm run test \ No newline at end of file From b0aa4e7a5ca49b70055cb13aff3afd844f24e17d Mon Sep 17 00:00:00 2001 From: Sergio Eduardo Castro Ceballos <72516762+SergioCasCeb@users.noreply.github.com> Date: Wed, 15 Nov 2023 18:48:13 +0100 Subject: [PATCH 04/12] Fixed conflict with package.json --- packages/web-new/package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/web-new/package.json b/packages/web-new/package.json index bca535160..53bb4afb0 100644 --- a/packages/web-new/package.json +++ b/packages/web-new/package.json @@ -19,7 +19,8 @@ "dev": "webpack serve --mode development", "serve": "node server/server.js", "examples": "node external-scripts/generate-paths.js", - "test": "npx playwright test" + "test": "npx playwright test --project=chromium --project=firefox", + "test-full": "npx playwright test" }, "devDependencies": { "@babel/core": "^7.22.9", From b12e7ab5106a56d6fe1464995abf38306e937fb1 Mon Sep 17 00:00:00 2001 From: Sergio Eduardo Castro Ceballos <72516762+SergioCasCeb@users.noreply.github.com> Date: Mon, 20 Nov 2023 05:46:55 +0100 Subject: [PATCH 05/12] Updating to the newer version --- .github/workflows/visual-ci-new.yaml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/workflows/visual-ci-new.yaml b/.github/workflows/visual-ci-new.yaml index aa54c43bb..625736bf6 100644 --- a/.github/workflows/visual-ci-new.yaml +++ b/.github/workflows/visual-ci-new.yaml @@ -14,10 +14,10 @@ jobs: steps: - name: Checkout - uses: actions/checkout@v2 + uses: actions/checkout@v3 - name: Use Node.js 16 - uses: actions/setup-node@v1 + uses: actions/setup-node@v3 with: node-version: "16.x" From d15b65ad25e93e24fa521604d493929c860c5531 Mon Sep 17 00:00:00 2001 From: Sergio Eduardo Castro Ceballos <72516762+SergioCasCeb@users.noreply.github.com> Date: Sat, 14 Oct 2023 01:07:09 +0200 Subject: [PATCH 06/12] Added new workflow for the new web package --- .github/workflows/visual-ci-new.yaml | 34 ++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) create mode 100644 .github/workflows/visual-ci-new.yaml diff --git a/.github/workflows/visual-ci-new.yaml b/.github/workflows/visual-ci-new.yaml new file mode 100644 index 000000000..a09d42583 --- /dev/null +++ b/.github/workflows/visual-ci-new.yaml @@ -0,0 +1,34 @@ +name: Visual Testing Pipeline + +on: + pull_request: + paths-ignore: + - "**.md" + - "**.png" + - "**.drawio" + - "**.xlsx" + +jobs: + setup-and-visual-test: + runs-on: ubuntu-latest + + steps: + - name: Checkout + uses: actions/checkout@v2 + + - name: Use Node.js 16 + uses: actions/setup-node@v1 + with: + node-version: "16.x" + + - name: Use lerna + run: npm install -g lerna@6.6.2 + + - name: Bootstrap + run: lerna bootstrap --no-ci + + - name: Visual Test + run: | + cd ./packages/web-new + npm install + npm run test \ No newline at end of file From 08d8da641a9561ecd815775e16ee423ed06f379f Mon Sep 17 00:00:00 2001 From: Sergio Eduardo Castro Ceballos <72516762+SergioCasCeb@users.noreply.github.com> Date: Sat, 14 Oct 2023 01:19:13 +0200 Subject: [PATCH 07/12] Installing supported browsers --- .github/workflows/visual-ci-new.yaml | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.github/workflows/visual-ci-new.yaml b/.github/workflows/visual-ci-new.yaml index a09d42583..aa54c43bb 100644 --- a/.github/workflows/visual-ci-new.yaml +++ b/.github/workflows/visual-ci-new.yaml @@ -27,8 +27,9 @@ jobs: - name: Bootstrap run: lerna bootstrap --no-ci - - name: Visual Test + - name: New Web Visual Test run: | cd ./packages/web-new npm install + npx playwright install npm run test \ No newline at end of file From 45f3bb5d78b4217d603b5ac7b2448bfd4f8509e1 Mon Sep 17 00:00:00 2001 From: Sergio Eduardo Castro Ceballos <72516762+SergioCasCeb@users.noreply.github.com> Date: Mon, 20 Nov 2023 05:46:55 +0100 Subject: [PATCH 08/12] Updating to the newer version --- .github/workflows/visual-ci-new.yaml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/workflows/visual-ci-new.yaml b/.github/workflows/visual-ci-new.yaml index aa54c43bb..625736bf6 100644 --- a/.github/workflows/visual-ci-new.yaml +++ b/.github/workflows/visual-ci-new.yaml @@ -14,10 +14,10 @@ jobs: steps: - name: Checkout - uses: actions/checkout@v2 + uses: actions/checkout@v3 - name: Use Node.js 16 - uses: actions/setup-node@v1 + uses: actions/setup-node@v3 with: node-version: "16.x" From 82112507ddd139a8a43b6bb85e7531ba0f4c2e97 Mon Sep 17 00:00:00 2001 From: Sergio Eduardo Castro Ceballos <72516762+SergioCasCeb@users.noreply.github.com> Date: Thu, 21 Dec 2023 11:26:13 +0100 Subject: [PATCH 09/12] Fixed the UI tests to fit the new changes - Modified and/or fixed the UI test to properly function with the new changes created to the application - Some parts or whole test were remove as they are no longer needed in the new UI --- packages/web-new/tests/test.spec.js | 116 ++++------------------------ 1 file changed, 13 insertions(+), 103 deletions(-) diff --git a/packages/web-new/tests/test.spec.js b/packages/web-new/tests/test.spec.js index 452cd4066..3a0333358 100644 --- a/packages/web-new/tests/test.spec.js +++ b/packages/web-new/tests/test.spec.js @@ -664,7 +664,7 @@ test.describe("Settings menu functionality", () => { const fontSizeSlider = page.locator('#font-size') await fontSizeSlider.click() - await expect(editorFontSize).toHaveText("23") + await expect(editorFontSize).toHaveText("23") await page.reload({ waitUntil: 'domcontentloaded' }) @@ -696,7 +696,7 @@ test.describe("Settings menu functionality", () => { test.describe("Validation view functionality", () => { - test("Starting the validation with the main valiation button", async ({ page }) => { + test("Starting the validation with the main validation button", async ({ page }) => { const validationTab = page.locator('#validation-tab') const validationView = page.locator('#validation-view') @@ -715,29 +715,6 @@ test.describe("Validation view functionality", () => { await expect(stateIcon).toHaveClass("fa-solid fa-circle-check") }) - test("Closing the default validation view and opening it again with the validation view tab", async ({ page }) => { - - const validationTab = page.locator('#validation-tab') - const validationView = page.locator('#validation-view') - - await expect(validationTab).toBeChecked() - await expect(validationView).toHaveClass("console-view validation-view") - - const trashBtn = page.locator(".trash") - await trashBtn.click() - - await expect(validationTab).toBeChecked({ checked: false }) - await expect(validationView).toHaveClass("console-view validation-view hidden") - - await validationTab.click() - - await expect(validationTab).toBeChecked({ checked: true }) - await expect(validationView).toHaveClass("console-view validation-view") - - const stateIcon = page.locator(".json-validation-section > .section-header > i").nth(0) - await expect(stateIcon).toHaveClass("fa-solid fa-circle-check") - }) - test("Validating the 'All Defaults TD'", async ({ page }) => { const validationTab = page.locator('#validation-tab') const validationView = page.locator('#validation-view') @@ -755,15 +732,12 @@ test.describe("Validation view functionality", () => { await expect(exampleTab).toHaveText("TDMyLampThingCloseCancel") await expect(exampleTab).toHaveClass("active") - await expect(validationTab).toBeChecked({ checked: false }) - await expect(validationView).toHaveClass("console-view validation-view hidden") + await expect(validationTab).toBeChecked() + await expect(validationView).toHaveClass("console-view validation-view") const validationBtn = page.locator("#validate-btn") await validationBtn.click() - await expect(validationTab).toBeChecked({ checked: true }) - await expect(validationView).toHaveClass("console-view validation-view") - //validation section const jsonValidationSection = page.locator(".json-validation-section") const jsonValidationSectionIcon = page.locator(".json-validation-section > .section-header > i").nth(0) @@ -823,16 +797,12 @@ test.describe("Validation view functionality", () => { await expect(exampleTab).toHaveText("TDMyLampThingCloseCancel") await expect(exampleTab).toHaveClass("active") - await expect(validationTab).toBeChecked({ checked: false }) - await expect(validationView).toHaveClass("console-view validation-view hidden") + await expect(validationTab).toBeChecked() + await expect(validationView).toHaveClass("console-view validation-view") const validationBtn = page.locator("#validate-btn") await validationBtn.click() - await expect(validationTab).toBeChecked({ checked: true }) - await expect(validationView).toHaveClass("console-view validation-view") - - //Validation section const jsonValidationSection = page.locator(".json-validation-section") const jsonValidationSectionIcon = page.locator(".json-validation-section > .section-header > i").nth(0) @@ -897,15 +867,12 @@ test.describe("Validation view functionality", () => { await expect(exampleTab).toHaveText("TMLamp ThingCloseCancel") await expect(exampleTab).toHaveClass("active") - await expect(validationTab).toBeChecked({ checked: false }) - await expect(validationView).toHaveClass("console-view validation-view hidden") + await expect(validationTab).toBeChecked() + await expect(validationView).toHaveClass("console-view validation-view") const validationBtn = page.locator("#validate-btn") await validationBtn.click() - await expect(validationTab).toBeChecked({ checked: true }) - await expect(validationView).toHaveClass("console-view validation-view") - //Validation section const jsonValidationSection = page.locator(".json-validation-section") const jsonValidationSectionIcon = page.locator(".json-validation-section > .section-header > i").nth(0) @@ -951,7 +918,7 @@ test.describe("Validation view functionality", () => { }) test.describe("OpenAPI view functionality", () => { - test("Trying to open the OpenAPI view with a TD with no protocols and closing it", async ({ page }) => { + test("Trying to open the OpenAPI view with a TD with no protocols", async ({ page }) => { const initialTab = page.locator("#tab").nth(0) await expect(initialTab).toHaveAttribute('data-tab-id', "1") @@ -971,14 +938,6 @@ test.describe("OpenAPI view functionality", () => { await expect(openAPITab).toBeChecked({ checked: true }) await expect(openAPIView).toHaveClass("console-view open-api-view hidden") await expect(page.locator(".console-error__txt")).toHaveText("Please insert a TD which uses HTTP!") - - const trashBtn = page.locator(".trash") - await trashBtn.click() - - await expect(openAPIView).toHaveClass("console-view open-api-view hidden") - await expect(consoleError).toHaveClass("console-view console-error hidden") - await expect(openAPITab).toBeChecked({ checked: false }) - }) test("Trying to open the OpenAPI view with a TM", async ({ page }) => { @@ -1272,7 +1231,7 @@ test.describe("OpenAPI view functionality", () => { }) test.describe("AsyncAPI view functionality", () => { - test("Trying to open the AsyncAPI view with a TD with no protocols and closing it", async ({ page }) => { + test("Trying to open the AsyncAPI view with a TD with no protocols", async ({ page }) => { const initialTab = page.locator("#tab").nth(0) await expect(initialTab).toHaveAttribute('data-tab-id', "1") @@ -1292,14 +1251,6 @@ test.describe("AsyncAPI view functionality", () => { await expect(AsyncAPITab).toBeChecked({ checked: true }) await expect(AsyncAPIView).toHaveClass("console-view async-api-view hidden") await expect(page.locator(".console-error__txt")).toHaveText("Please insert a TD which uses MQTT!") - - const trashBtn = page.locator(".trash") - await trashBtn.click() - - await expect(AsyncAPIView).toHaveClass("console-view async-api-view hidden") - await expect(consoleError).toHaveClass("console-view console-error hidden") - await expect(AsyncAPITab).toBeChecked({ checked: false }) - }) test("Trying to open the AsyncAPI view with a TM", async ({ page }) => { @@ -1598,34 +1549,6 @@ test.describe("AsyncAPI view functionality", () => { test.describe("AAS AID view functionality", () => { - test("Open the AAS view with a TD with no protocols and closing it", async ({ page }) => { - - const initialTab = page.locator("#tab").nth(0) - await expect(initialTab).toHaveAttribute('data-tab-id', "1") - await expect(initialTab).toHaveText("TDThing TemplateCloseCancel") - await expect(initialTab).toHaveClass("active") - - const AASView = page.locator('#aas-view') - const consoleError = page.locator('#console-error') - const AASTab = page.locator("#aas-tab") - - await expect(AASView).toHaveClass("console-view aas-view hidden") - await expect(consoleError).toHaveClass("console-view console-error hidden") - await expect(AASTab).toBeChecked({ checked: false }) - - await AASTab.click() - - await expect(AASTab).toBeChecked({ checked: true }) - await expect(AASView).toHaveClass("console-view aas-view") - - const trashBtn = page.locator(".trash") - await trashBtn.click() - - await expect(AASView).toHaveClass("console-view aas-view hidden") - await expect(consoleError).toHaveClass("console-view console-error hidden") - await expect(AASTab).toBeChecked({ checked: false }) - - }) test("Trying to open the AAS view with a TM", async ({ page }) => { @@ -1744,7 +1667,7 @@ test.describe("AAS AID view functionality", () => { }) test.describe("Defaults view functionality", () => { - test("Opening the Defaults view with the Thing Template and closing it", async ({ page }) => { + test("Opening the Defaults view with the Thing Template", async ({ page }) => { const initialTab = page.locator("#tab").nth(0) await expect(initialTab).toHaveAttribute('data-tab-id', "1") @@ -1776,13 +1699,6 @@ test.describe("Defaults view functionality", () => { await expect(defaultsJsonBtn).toBeDisabled() await expect(defaultsAddBtn).toBeDisabled() - - const trashBtn = page.locator(".trash") - await trashBtn.click() - - await expect(DefaultsView).toHaveClass("console-view defaults-view hidden") - await expect(consoleError).toHaveClass("console-view console-error hidden") - await expect(DefaultsTab).toBeChecked({ checked: false }) }) test("Trying to open the Defaults view with a TM", async ({ page }) => { @@ -2026,7 +1942,7 @@ test.describe("Defaults view functionality", () => { test.describe("Visualization view functionality", () => { - test("Open the visualization view with the thing template and closing it", async ({ page }) => { + test("Open the visualization view with the thing template", async ({ page }) => { const visualizeView = page.locator('#visualize-view') const visualizeTab = page.locator("#visualize-tab") @@ -2047,12 +1963,6 @@ test.describe("Visualization view functionality", () => { const graphVisTitle = page.locator('#visualized').getByText('Thing Template', { exact: true }) await expect(graphVisTitle).toHaveText("Thing Template") - - const trashBtn = page.locator(".trash") - await trashBtn.click() - - await expect(visualizeView).toHaveClass("console-view visualize-view hidden") - await expect(visualizeTab).toBeChecked({ checked: false }) }) test("Open the visualization view with the thing template and expand and collapse the graph view", async ({ page }) => { @@ -2211,7 +2121,7 @@ test.describe("Visualization view functionality", () => { const dragSliderValue = await dragSlider.inputValue() expect(parseInt(dragSliderValue)).toBeLessThan(60) expect(parseInt(dragSliderValue)).toBeGreaterThan(40) - + await expect(tidyBtn).toBeChecked({ checked: false }) await expect(clusterBtn).toBeChecked({ checked: true }) await expect(linksDropDown).toHaveValue("diagonal") From 4dd3caaee39858445b4a29191ab9837c573c2f37 Mon Sep 17 00:00:00 2001 From: Sergio Eduardo Castro Ceballos <72516762+SergioCasCeb@users.noreply.github.com> Date: Thu, 21 Dec 2023 11:34:18 +0100 Subject: [PATCH 10/12] Increased the timeout limit By utilizing the information about the duration of the new tests (which should be around 15 - 16 minutes in optimal conditions), the new timeout limit has been increased to 18 minutes to account for the duration of the tests as well as a small extra leeway to account for any other possible delays --- .github/workflows/visual-ci-new.yaml | 1 + 1 file changed, 1 insertion(+) diff --git a/.github/workflows/visual-ci-new.yaml b/.github/workflows/visual-ci-new.yaml index 625736bf6..14f03bc94 100644 --- a/.github/workflows/visual-ci-new.yaml +++ b/.github/workflows/visual-ci-new.yaml @@ -28,6 +28,7 @@ jobs: run: lerna bootstrap --no-ci - name: New Web Visual Test + timeout-minutes: 18 run: | cd ./packages/web-new npm install From cbd11caeba699f85131d2709ea334d720e4ceb91 Mon Sep 17 00:00:00 2001 From: Sergio Eduardo Castro Ceballos <72516762+SergioCasCeb@users.noreply.github.com> Date: Thu, 21 Dec 2023 11:35:31 +0100 Subject: [PATCH 11/12] . --- .github/workflows/visual-ci-new.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/visual-ci-new.yaml b/.github/workflows/visual-ci-new.yaml index 14f03bc94..d6490ea7c 100644 --- a/.github/workflows/visual-ci-new.yaml +++ b/.github/workflows/visual-ci-new.yaml @@ -28,7 +28,7 @@ jobs: run: lerna bootstrap --no-ci - name: New Web Visual Test - timeout-minutes: 18 + timeout-minutes: 18 run: | cd ./packages/web-new npm install From 528ba51ca401c51e6f51dd6396e2470087e3c191 Mon Sep 17 00:00:00 2001 From: Ege Korkan Date: Wed, 27 Dec 2023 11:04:05 +0100 Subject: [PATCH 12/12] Update visual-ci-new.yaml --- .github/workflows/visual-ci-new.yaml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/workflows/visual-ci-new.yaml b/.github/workflows/visual-ci-new.yaml index d6490ea7c..f9b443b43 100644 --- a/.github/workflows/visual-ci-new.yaml +++ b/.github/workflows/visual-ci-new.yaml @@ -1,4 +1,4 @@ -name: Visual Testing Pipeline +name: web-new Visual Testing Pipeline on: pull_request: @@ -33,4 +33,4 @@ jobs: cd ./packages/web-new npm install npx playwright install - npm run test \ No newline at end of file + npm run test