From b896d6f13fbadcc01c2fa1bd5657be4c46060368 Mon Sep 17 00:00:00 2001 From: Sergio Eduardo Castro Ceballos <72516762+SergioCasCeb@users.noreply.github.com> Date: Wed, 7 Feb 2024 19:45:27 +0100 Subject: [PATCH] Running all tests, and removing unnecessary tests --- packages/web-new/tests/test.spec.js | 3045 ++++++++++++--------------- 1 file changed, 1392 insertions(+), 1653 deletions(-) diff --git a/packages/web-new/tests/test.spec.js b/packages/web-new/tests/test.spec.js index a2c69be9..d5d8f795 100644 --- a/packages/web-new/tests/test.spec.js +++ b/packages/web-new/tests/test.spec.js @@ -24,2171 +24,1910 @@ test.describe("Load initial state", () => { await expect(page).toHaveTitle("TD Playground") }) - // test('Has editor tab', async ({ page }) => { - // const editorTab = page.locator('#tab') - // await expect(editorTab).toHaveText("TDThing TemplateCloseCancel") - // }) - - // test('Has TD template', async ({ page }) => { - // const editor = page.locator('#editor1').getByRole('code').locator('div').filter({ hasText: '"title": "Thing Template",' }).nth(4) - // await expect(editor).toHaveText('"title": "Thing Template",') - // }) - - // test('Validation tab is checked', async ({ page }) => { - // const validationTab = page.locator('#validation-tab') - // await expect(validationTab).toBeChecked() - // }) - - // test('Validation view is opened', async ({ page }) => { - // const validationView = page.locator('#validation-view') - // await expect(validationView).toHaveClass("console-view validation-view") - // }) - - // test('JSON button is checked', async ({ page }) => { - // const jsonBtn = page.locator('#file-type-json') - // await expect(jsonBtn).toBeChecked() - // }) -}) - -// test.describe("Check all links", () => { -// test("Check Thingweb logo link", async ({ page }) => { -// const thingwebPromise = page.waitForEvent('popup') -// await page.locator(".logo").click() -// const thingwebPage = await thingwebPromise -// await expect(thingwebPage).toHaveTitle("Eclipse Thingweb") -// await expect(thingwebPage).toHaveURL("https://www.thingweb.io") -// }) - -// test("Check CLI link", async ({ page }) => { -// const cliPromise = page.waitForEvent('popup') -// await page.locator(".cli-link").click() -// const cliPage = await cliPromise -// await expect(cliPage).toHaveURL("https://github.com/eclipse-thingweb/playground/tree/master/packages/cli") -// }) - -// test("Check Github link", async ({ page }) => { -// const githubPromise = page.waitForEvent('popup') -// await page.locator(".git-link").click() -// const githubPage = await githubPromise -// await expect(githubPage).toHaveTitle(/GitHub - eclipse-thingweb/) -// await expect(githubPage).toHaveURL("https://github.com/eclipse-thingweb/playground") -// }) - -// test("Check Thingweb footer link", async ({ page }) => { -// await page.locator('#settings-btn').click() -// const thingwebPromise = page.waitForEvent('popup') -// await page.locator("#thingweb-link").click() -// const thingwebPage = await thingwebPromise -// await expect(thingwebPage).toHaveTitle("Eclipse Thingweb") -// await expect(thingwebPage).toHaveURL("https://www.thingweb.io") -// }) - -// test("Check Eclipse footer link", async ({ page }) => { -// await page.locator('#settings-btn').click() -// const eclipsePromise = page.waitForEvent('popup') -// await page.locator("#eclipse-link").click() -// const eclipsePage = await eclipsePromise -// await expect(eclipsePage).toHaveTitle("The Community for Open Collaboration and Innovation | The Eclipse Foundation") -// await expect(eclipsePage).toHaveURL("https://www.eclipse.org") -// }) - -// test("Check privacy policy footer link", async ({ page }) => { -// await page.locator('#settings-btn').click() -// const privacyPromise = page.waitForEvent('popup') -// await page.locator("#privacy-link").click() -// const privacyPage = await privacyPromise -// await expect(privacyPage).toHaveTitle("Eclipse Foundation Website Privacy Policy | The Eclipse Foundation") -// await expect(privacyPage).toHaveURL("https://www.eclipse.org/legal/privacy.php") -// }) - -// test("Check terms of use footer link", async ({ page }) => { -// await page.locator('#settings-btn').click() -// const termsPromise = page.waitForEvent('popup') -// await page.locator("#terms-link").click() -// const termsPage = await termsPromise -// await expect(termsPage).toHaveTitle("Eclipse.org Terms of Use | The Eclipse Foundation") -// await expect(termsPage).toHaveURL("https://www.eclipse.org/legal/termsofuse.php") -// }) - -// test("Check copyright agent footer link", async ({ page }) => { -// await page.locator('#settings-btn').click() -// const copyrightPromise = page.waitForEvent('popup') -// await page.locator("#copyright-link").click() -// const copyrightPage = await copyrightPromise -// await expect(copyrightPage).toHaveTitle("Copyright Agent | The Eclipse Foundation") -// await expect(copyrightPage).toHaveURL("https://www.eclipse.org/legal/copyright.php") -// }) - -// test("Check legal footer link", async ({ page }) => { -// await page.locator('#settings-btn').click() -// const legalPromise = page.waitForEvent('popup') -// await page.locator("#legal-link").click() -// const legalPage = await legalPromise -// await expect(legalPage).toHaveTitle("Eclipse Foundation Legal Resources | The Eclipse Foundation") -// await expect(legalPage).toHaveURL("https://www.eclipse.org/legal/") -// }) -// }) - -// test.describe("Editors and Tabs creation and deletion", () => { -// test("Adding a new editor and closing it", async ({ page }) => { -// const editorTabs = page.locator("#tab") -// const editors = page.locator(".editor") -// await expect(editorTabs).toHaveCount(1) -// await expect(editors).toHaveCount(1) - -// 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 initialEditor = page.locator("#editor1") -// await expect(initialEditor).toHaveAttribute('data-ide-id', "1") -// await expect(initialEditor).toHaveClass("editor active") - -// await page.locator("#ide-tab-add").click() -// await expect(editorTabs).toHaveCount(2) -// await expect(editors).toHaveCount(2) - -// await expect(initialTab).toHaveClass("") -// await expect(initialEditor).toHaveClass("editor") - -// const secondTab = page.locator("#tab").nth(1) -// await expect(secondTab).toHaveAttribute('data-tab-id', "2") -// await expect(secondTab).toHaveText("TDThing TemplateCloseCancel") -// await expect(secondTab).toHaveClass("active") - -// const secondEditor = page.locator("#editor2") -// await expect(secondEditor).toHaveAttribute('data-ide-id', "2") -// await expect(secondEditor).toHaveClass("editor active") - -// await page.locator("#tab").nth(1).locator(".close-tab").click() -// await page.locator('#tab').nth(1).locator(".confirm-btns > .confirm-tab-close").click() - -// await expect(editorTabs).toHaveCount(1) -// await expect(editors).toHaveCount(1) - -// await expect(initialTab).toHaveClass("active") -// await expect(initialEditor).toHaveClass("editor active") -// }) - -// test("Opening an example and closing initial editor", async ({ page }) => { -// const editorTabs = page.locator("#tab") -// const editors = page.locator(".editor") -// await expect(editorTabs).toHaveCount(1) -// await expect(editors).toHaveCount(1) - -// 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 initialEditor = page.locator("#editor1") -// await expect(initialEditor).toHaveAttribute('data-ide-id', "1") -// await expect(initialEditor).toHaveClass("editor active") - -// await page.locator("#examples-btn").click() -// await page.locator(".example").nth(0).click() -// await page.locator(".example").nth(0).getByRole("button", { name: /Apply/ }).click() - -// await expect(editorTabs).toHaveCount(2) -// await expect(editors).toHaveCount(2) - -// await expect(initialTab).toHaveClass("") -// await expect(initialEditor).toHaveClass("editor") - -// const exampleTab = page.locator("#tab").nth(1) -// await expect(exampleTab).toHaveAttribute('data-tab-id', "2") -// await expect(exampleTab).toHaveText("TDMyLampThingCloseCancel") -// await expect(exampleTab).toHaveClass("active") - -// const exampleEditor = page.locator("#editor2") -// await expect(exampleEditor).toHaveAttribute('data-ide-id', "2") -// await expect(exampleEditor).toHaveClass("editor active") - -// await page.locator("#tab").nth(0).locator(".close-tab").click() -// await page.locator('#tab').nth(0).locator(".confirm-btns > .confirm-tab-close").click() - -// await expect(editorTabs).toHaveCount(1) -// await expect(editors).toHaveCount(1) -// }) -// }) - -// test.describe("JSON and YAML conversion", () => { -// test("JSON to YAML and YAML to JSON", async ({ page }) => { -// const editorTabs = page.locator("#tab") -// const editors = page.locator(".editor") -// await expect(editorTabs).toHaveCount(1) -// await expect(editors).toHaveCount(1) - -// const jsonYamlPopup = page.locator('.json-yaml-warning') -// await expect(jsonYamlPopup).toHaveClass("json-yaml-warning closed") - -// const initialEditor = page.locator("#editor1") -// const jsonBtn = page.locator('#file-type-json') -// const yamlBtn = page.locator('#file-type-yaml') - -// await expect(initialEditor).toHaveAttribute('data-mode-id', "json") -// await expect(jsonBtn).toBeChecked({ checked: true }) -// await expect(yamlBtn).toBeChecked({ checked: false }) - -// await yamlBtn.click() -// await expect(jsonYamlPopup).toHaveClass("json-yaml-warning") - -// await page.locator('#yaml-confirm-btn').click() -// await expect(jsonYamlPopup).toHaveClass("json-yaml-warning closed") -// await expect(initialEditor).toHaveAttribute('data-mode-id', "yaml") -// await expect(jsonBtn).toBeChecked({ checked: false }) -// await expect(yamlBtn).toBeChecked({ checked: true }) - -// await jsonBtn.click() -// await expect(initialEditor).toHaveAttribute('data-mode-id', "json") -// await expect(jsonBtn).toBeChecked({ checked: true }) -// await expect(yamlBtn).toBeChecked({ checked: false }) -// }) - -// test("Cancel YAML conversion", async ({ page }) => { -// const editorTabs = page.locator("#tab") -// const editors = page.locator(".editor") -// await expect(editorTabs).toHaveCount(1) -// await expect(editors).toHaveCount(1) - -// const jsonYamlPopup = page.locator('.json-yaml-warning') -// const initialEditor = page.locator("#editor1") -// const jsonBtn = page.locator('#file-type-json') -// const yamlBtn = page.locator('#file-type-yaml') - -// await expect(jsonYamlPopup).toHaveClass("json-yaml-warning closed") -// await expect(initialEditor).toHaveAttribute('data-mode-id', "json") -// await expect(jsonBtn).toBeChecked({ checked: true }) -// await expect(yamlBtn).toBeChecked({ checked: false }) - -// await yamlBtn.click() -// await expect(jsonYamlPopup).toHaveClass("json-yaml-warning") - -// await page.locator('#yaml-cancel-btn').click() -// await expect(jsonYamlPopup).toHaveClass("json-yaml-warning closed") -// await expect(initialEditor).toHaveAttribute('data-mode-id', "json") -// await expect(jsonBtn).toBeChecked({ checked: true }) -// await expect(yamlBtn).toBeChecked({ checked: false }) -// }) -// }) - - -// test.describe("Examples menu functionality", () => { -// test("Open and close examples menu", async ({ page }) => { - -// await expect(page.getByRole('heading', { name: 'Simple Default' })).toBeVisible({ visible: false }) -// await page.locator("#examples-btn").click() - -// await expect(page.getByRole('heading', { name: 'Simple Default' })).toBeVisible({ visible: true }) -// await page.locator(".examples-menu-container__close > i").click() - -// await expect(page.getByRole('heading', { name: 'Simple Default' })).toBeVisible({ visible: false }) -// }) - -// test("Open Basic TD from quick access", async ({ page }) => { - -// await page.locator("#examples-btn").click() - -// const basicExample = page.locator(".example").filter({ hasText: 'Basic TD' }).nth(0) -// await expect(basicExample).toHaveClass("example") - -// const quickAccessBtn = page.locator(".example").filter({ hasText: 'Basic TD' }).nth(0).getByRole("button").nth(0) -// await quickAccessBtn.click() - -// const exampleTab = page.locator("#tab").nth(1) -// await expect(exampleTab).toHaveAttribute('data-tab-id', "2") -// await expect(exampleTab).toHaveText("TDMyLampThingCloseCancel") -// await expect(exampleTab).toHaveClass("active") - -// const exampleEditor = page.locator("#editor2") -// await expect(exampleEditor).toHaveAttribute('data-ide-id', "2") -// await expect(exampleEditor).toHaveClass("editor active") - -// }) - -// test("Open Basic TD from apply button", async ({ page }) => { - -// await page.locator("#examples-btn").click() - -// const basicExample = page.locator(".example").filter({ hasText: 'Basic TD' }).nth(0) -// await basicExample.click() -// await expect(basicExample).toHaveClass("example open") - -// const applyBtn = page.locator(".example").filter({ hasText: 'Basic TD' }).nth(0).getByRole("button").filter({ hasText: "Apply" }) -// await applyBtn.click() -// await expect(basicExample).toHaveClass("example") - -// const exampleTab = page.locator("#tab").nth(1) -// await expect(exampleTab).toHaveAttribute('data-tab-id', "2") -// await expect(exampleTab).toHaveText("TDMyLampThingCloseCancel") -// await expect(exampleTab).toHaveClass("active") - -// const exampleEditor = page.locator("#editor2") -// await expect(exampleEditor).toHaveAttribute('data-ide-id', "2") -// await expect(exampleEditor).toHaveClass("editor active") -// }) - -// test("Open Basic TD and close with cancel button", async ({ page }) => { -// await page.locator("#examples-btn").click() - -// const basicTDExample = page.locator(".example").filter({ hasText: 'Basic TD' }).nth(0) -// await basicTDExample.click() -// await expect(basicTDExample).toHaveClass("example open") - -// const cancelBtn = page.locator(".example").filter({ hasText: 'Basic TD' }).nth(0).getByRole("button").filter({ hasText: "Cancel" }) -// await cancelBtn.click() -// await expect(basicTDExample).toHaveClass("example") -// }) - -// test("Toggle between TD and TM examples", async ({ page }) => { -// await page.locator("#examples-btn").click() - -// const thingTypeToggle = page.locator('#thing-type-btn') -// await expect(thingTypeToggle).toBeChecked({ checked: false }) - -// await thingTypeToggle.click() -// await expect(thingTypeToggle).toBeChecked({ checked: true }) -// }) - -// test("Open Basic TM and check for icon change in tab", async ({ page }) => { -// await page.locator("#examples-btn").click() - -// const thingTypeToggle = page.locator('#thing-type-btn') -// await thingTypeToggle.click() -// await expect(thingTypeToggle).toBeChecked({ checked: true }) - -// const quickAccessBtn = page.locator(".example").filter({ hasText: 'Basic TM' }).nth(1).getByRole("button").nth(0) -// await quickAccessBtn.click() - -// const tabIcon = page.locator("#tab").nth(1).locator(".tab-icon") -// await expect(tabIcon).toHaveText("TM") -// }) - -// test("Go to versioning in TD category and open example from quick access", async ({ page }) => { -// await page.locator("#examples-btn").click() - -// const categoryDropDown = page.locator("#thing-category") -// await categoryDropDown.selectOption('9-versioning') - -// const quickAccessBtn = page.locator(".example").filter({ hasText: 'Versioning' }).nth(0).getByRole("button").nth(0) -// await quickAccessBtn.click() - -// const exampleTab = page.locator("#tab").nth(1) -// await expect(exampleTab).toHaveAttribute('data-tab-id', "2") -// await expect(exampleTab).toHaveText("TDMyLampThingCloseCancel") -// await expect(exampleTab).toHaveClass("active") -// }) - -// test("Go to Tm Optional in TM category and open example from quick access", async ({ page }) => { -// await page.locator("#examples-btn").click() - -// const thingTypeToggle = page.locator('#thing-type-btn') -// await thingTypeToggle.click() -// await expect(thingTypeToggle).toBeChecked({ checked: true }) + test('Has editor tab', async ({ page }) => { + const editorTab = page.locator('#tab') + await expect(editorTab).toHaveText("TDThing TemplateCloseCancel") + }) -// const categoryDropDown = page.locator("#thing-category") -// await categoryDropDown.selectOption('4-tm-optional') + test('Has TD template', async ({ page }) => { + const editor = page.locator('#editor1').getByRole('code').locator('div').filter({ hasText: '"title": "Thing Template",' }).nth(4) + await expect(editor).toHaveText('"title": "Thing Template",') + }) -// const quickAccessBtn = page.locator(".example").filter({ hasText: 'Optional Interaction Affordances' }).nth(0).getByRole("button").nth(0) -// await quickAccessBtn.click() + test('Validation tab is checked', async ({ page }) => { + const validationTab = page.locator('#validation-tab') + await expect(validationTab).toBeChecked() + }) -// const exampleTab = page.locator("#tab").nth(1) -// await expect(exampleTab).toHaveAttribute('data-tab-id', "2") -// await expect(exampleTab).toHaveText("TMLamp ThingCloseCancel") -// await expect(exampleTab).toHaveClass("active") -// }) + test('Validation view is opened', async ({ page }) => { + const validationView = page.locator('#validation-view') + await expect(validationView).toHaveClass("console-view validation-view") + }) -// test("Search for uriVariable in the TDs and open Combined URI variables in href example", async ({ page }) => { -// await page.locator("#examples-btn").click() + test('JSON button is checked', async ({ page }) => { + const jsonBtn = page.locator('#file-type-json') + await expect(jsonBtn).toBeChecked() + }) +}) -// const searchInput = page.locator(".search-input") -// searchInput.fill('uriVariables') +test.describe("Check all links", () => { + test("Check Thingweb logo link", async ({ page }) => { + const thingwebPromise = page.waitForEvent('popup') + await page.locator(".logo").click() + const thingwebPage = await thingwebPromise + await expect(thingwebPage).toHaveTitle("Eclipse Thingweb") + await expect(thingwebPage).toHaveURL("https://www.thingweb.io") + }) -// const searchBtn = page.locator(".search-btn") -// await searchBtn.click() + test("Check CLI link", async ({ page }) => { + const cliPromise = page.waitForEvent('popup') + await page.locator(".cli-link").click() + const cliPage = await cliPromise + await expect(cliPage).toHaveURL("https://github.com/eclipse-thingweb/playground/tree/master/packages/cli") + }) -// const quickAccessBtn = page.locator(".example").filter({ hasText: 'Combined URI variables in href' }).nth(0).getByRole("button").nth(0) -// await quickAccessBtn.click() + test("Check Github link", async ({ page }) => { + const githubPromise = page.waitForEvent('popup') + await page.locator(".git-link").click() + const githubPage = await githubPromise + await expect(githubPage).toHaveTitle(/GitHub - eclipse-thingweb/) + await expect(githubPage).toHaveURL("https://github.com/eclipse-thingweb/playground") + }) -// const exampleTab = page.locator("#tab").nth(1) -// await expect(exampleTab).toHaveAttribute('data-tab-id', "2") -// await expect(exampleTab).toHaveText("TDMyWeatherThingCloseCancel") -// await expect(exampleTab).toHaveClass("active") -// }) + test("Check Thingweb footer link", async ({ page }) => { + await page.locator('#settings-btn').click() + const thingwebPromise = page.waitForEvent('popup') + await page.locator("#thingweb-link").click() + const thingwebPage = await thingwebPromise + await expect(thingwebPage).toHaveTitle("Eclipse Thingweb") + await expect(thingwebPage).toHaveURL("https://www.thingweb.io") + }) -// test("Search for overwrite in the TMs and open Overwrite Existing Definitions example", async ({ page }) => { -// await page.locator("#examples-btn").click() + test("Check Eclipse footer link", async ({ page }) => { + await page.locator('#settings-btn').click() + const eclipsePromise = page.waitForEvent('popup') + await page.locator("#eclipse-link").click() + const eclipsePage = await eclipsePromise + await expect(eclipsePage).toHaveTitle("The Community for Open Collaboration and Innovation | The Eclipse Foundation") + await expect(eclipsePage).toHaveURL("https://www.eclipse.org") + }) -// const thingTypeToggle = page.locator('#thing-type-btn') -// await thingTypeToggle.click() -// await expect(thingTypeToggle).toBeChecked({ checked: true }) + test("Check privacy policy footer link", async ({ page }) => { + await page.locator('#settings-btn').click() + const privacyPromise = page.waitForEvent('popup') + await page.locator("#privacy-link").click() + const privacyPage = await privacyPromise + await expect(privacyPage).toHaveTitle("Eclipse Foundation Website Privacy Policy | The Eclipse Foundation") + await expect(privacyPage).toHaveURL("https://www.eclipse.org/legal/privacy.php") + }) -// const searchInput = page.locator(".search-input") -// searchInput.fill('overwrite') + test("Check terms of use footer link", async ({ page }) => { + await page.locator('#settings-btn').click() + const termsPromise = page.waitForEvent('popup') + await page.locator("#terms-link").click() + const termsPage = await termsPromise + await expect(termsPage).toHaveTitle("Eclipse.org Terms of Use | The Eclipse Foundation") + await expect(termsPage).toHaveURL("https://www.eclipse.org/legal/termsofuse.php") + }) -// const searchBtn = page.locator(".search-btn") -// await searchBtn.click() + test("Check copyright agent footer link", async ({ page }) => { + await page.locator('#settings-btn').click() + const copyrightPromise = page.waitForEvent('popup') + await page.locator("#copyright-link").click() + const copyrightPage = await copyrightPromise + await expect(copyrightPage).toHaveTitle("Copyright Agent | The Eclipse Foundation") + await expect(copyrightPage).toHaveURL("https://www.eclipse.org/legal/copyright.php") + }) -// const quickAccessBtn = page.locator(".example").filter({ hasText: 'Overwrite Existing Definitions' }).nth(1).getByRole("button").nth(0) -// await quickAccessBtn.click() + test("Check legal footer link", async ({ page }) => { + await page.locator('#settings-btn').click() + const legalPromise = page.waitForEvent('popup') + await page.locator("#legal-link").click() + const legalPage = await legalPromise + await expect(legalPage).toHaveTitle("Eclipse Foundation Legal Resources | The Eclipse Foundation") + await expect(legalPage).toHaveURL("https://www.eclipse.org/legal/") + }) +}) -// const exampleTab = page.locator("#tab").nth(1) -// await expect(exampleTab).toHaveAttribute('data-tab-id', "2") -// await expect(exampleTab).toHaveText("TMSmart Lamp ControlCloseCancel") -// await expect(exampleTab).toHaveClass("active") -// }) -// }) +test.describe("Editors and Tabs creation and deletion", () => { + test("Adding a new editor and closing it", async ({ page }) => { + const editorTabs = page.locator("#tab") + const editors = page.locator(".editor") + await expect(editorTabs).toHaveCount(1) + await expect(editors).toHaveCount(1) -// test.describe("Save menu functionality", () => { -// test("Open and close save menu", async ({ page }) => { -// const saveMenu = page.locator(".save-menu") -// await expect(saveMenu).toHaveClass("save-menu closed") + 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") -// await page.locator("#save-btn").click() -// await expect(saveMenu).toHaveClass("save-menu") + const initialEditor = page.locator("#editor1") + await expect(initialEditor).toHaveAttribute('data-ide-id', "1") + await expect(initialEditor).toHaveClass("editor active") -// const closeMenu = page.locator(".save-menu-close > i") -// await closeMenu.click() -// await expect(saveMenu).toHaveClass("save-menu closed") -// }) + await page.locator("#ide-tab-add").click() + await expect(editorTabs).toHaveCount(2) + await expect(editors).toHaveCount(2) -// test("Open save menu with template thing and check for TD in menu title", async ({ page }) => { -// const saveMenu = page.locator(".save-menu") + await expect(initialTab).toHaveClass("") + await expect(initialEditor).toHaveClass("editor") -// await page.locator("#save-btn").click() -// await expect(saveMenu).toHaveClass("save-menu") + const secondTab = page.locator("#tab").nth(1) + await expect(secondTab).toHaveAttribute('data-tab-id', "2") + await expect(secondTab).toHaveText("TDThing TemplateCloseCancel") + await expect(secondTab).toHaveClass("active") -// const titleThingType = page.locator(".save-menu-title > p > #thing-type-text") -// await expect(titleThingType).toHaveText("TD") -// }) + const secondEditor = page.locator("#editor2") + await expect(secondEditor).toHaveAttribute('data-ide-id', "2") + await expect(secondEditor).toHaveClass("editor active") -// test("Open TM examples check for TM in the save menu title", async ({ page }) => { -// await page.locator("#examples-btn").click() + await page.locator("#tab").nth(1).locator(".close-tab").click() + await page.locator('#tab').nth(1).locator(".confirm-btns > .confirm-tab-close").click() -// const thingTypeToggle = page.locator('#thing-type-btn') -// await thingTypeToggle.click() -// await expect(thingTypeToggle).toBeChecked({ checked: true }) + await expect(editorTabs).toHaveCount(1) + await expect(editors).toHaveCount(1) -// const quickAccessBtn = page.locator(".example").filter({ hasText: 'Basic TM' }).nth(1).getByRole("button").nth(0) -// await quickAccessBtn.click() + await expect(initialTab).toHaveClass("active") + await expect(initialEditor).toHaveClass("editor active") + }) -// const saveMenu = page.locator(".save-menu") + test("Opening an example and closing initial editor", async ({ page }) => { + const editorTabs = page.locator("#tab") + const editors = page.locator(".editor") + await expect(editorTabs).toHaveCount(1) + await expect(editors).toHaveCount(1) -// await page.locator("#save-btn").click() -// await expect(saveMenu).toHaveClass("save-menu") + 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 titleThingType = page.locator(".save-menu-title > p > #thing-type-text") -// await expect(titleThingType).toHaveText("TM") -// }) + const initialEditor = page.locator("#editor1") + await expect(initialEditor).toHaveAttribute('data-ide-id', "1") + await expect(initialEditor).toHaveClass("editor active") -// test("Share and open in new tab functionality with an example", async ({ page }) => { + await page.locator("#examples-btn").click() + await page.locator(".example").nth(0).click() + await page.locator(".example").nth(0).getByRole("button", { name: /Apply/ }).click() -// await page.locator("#examples-btn").click() + await expect(editorTabs).toHaveCount(2) + await expect(editors).toHaveCount(2) -// const basicExample = page.locator(".example").filter({ hasText: 'Basic TD' }).nth(0) -// await expect(basicExample).toHaveClass("example") + await expect(initialTab).toHaveClass("") + await expect(initialEditor).toHaveClass("editor") -// const quickAccessBtn = page.locator(".example").filter({ hasText: 'Basic TD' }).nth(0).getByRole("button").nth(0) -// await quickAccessBtn.click() + const exampleTab = page.locator("#tab").nth(1) + await expect(exampleTab).toHaveAttribute('data-tab-id', "2") + await expect(exampleTab).toHaveText("TDMyLampThingCloseCancel") + await expect(exampleTab).toHaveClass("active") -// const exampleTab = page.locator("#tab").nth(1) -// await expect(exampleTab).toHaveAttribute('data-tab-id', "2") -// await expect(exampleTab).toHaveText("TDMyLampThingCloseCancel") -// await expect(exampleTab).toHaveClass("active") + const exampleEditor = page.locator("#editor2") + await expect(exampleEditor).toHaveAttribute('data-ide-id', "2") + await expect(exampleEditor).toHaveClass("editor active") -// const saveMenu = page.locator(".save-menu") + await page.locator("#tab").nth(0).locator(".close-tab").click() + await page.locator('#tab').nth(0).locator(".confirm-btns > .confirm-tab-close").click() -// await page.locator("#save-btn").click() -// await expect(saveMenu).toHaveClass("save-menu") + await expect(editorTabs).toHaveCount(1) + await expect(editors).toHaveCount(1) + }) +}) -// const openNewTab = page.locator("#open-url-tab") -// await expect(openNewTab).toBeDisabled() +test.describe("JSON and YAML conversion", () => { + test("JSON to YAML and YAML to JSON", async ({ page }) => { + const editorTabs = page.locator("#tab") + const editors = page.locator(".editor") + await expect(editorTabs).toHaveCount(1) + await expect(editors).toHaveCount(1) + + const jsonYamlPopup = page.locator('.json-yaml-warning') + await expect(jsonYamlPopup).toHaveClass("json-yaml-warning closed") + + const initialEditor = page.locator("#editor1") + const jsonBtn = page.locator('#file-type-json') + const yamlBtn = page.locator('#file-type-yaml') + + await expect(initialEditor).toHaveAttribute('data-mode-id', "json") + await expect(jsonBtn).toBeChecked({ checked: true }) + await expect(yamlBtn).toBeChecked({ checked: false }) + + await yamlBtn.click() + await expect(jsonYamlPopup).toHaveClass("json-yaml-warning") + + await page.locator('#yaml-confirm-btn').click() + await expect(jsonYamlPopup).toHaveClass("json-yaml-warning closed") + await expect(initialEditor).toHaveAttribute('data-mode-id', "yaml") + await expect(jsonBtn).toBeChecked({ checked: false }) + await expect(yamlBtn).toBeChecked({ checked: true }) + + await jsonBtn.click() + await expect(initialEditor).toHaveAttribute('data-mode-id', "json") + await expect(jsonBtn).toBeChecked({ checked: true }) + await expect(yamlBtn).toBeChecked({ checked: false }) + }) -// const shareUrlInput = page.locator("#share-url-input") -// await expect(shareUrlInput).toHaveText("") + test("Cancel YAML conversion", async ({ page }) => { + const editorTabs = page.locator("#tab") + const editors = page.locator(".editor") + await expect(editorTabs).toHaveCount(1) + await expect(editors).toHaveCount(1) + + const jsonYamlPopup = page.locator('.json-yaml-warning') + const initialEditor = page.locator("#editor1") + const jsonBtn = page.locator('#file-type-json') + const yamlBtn = page.locator('#file-type-yaml') + + await expect(jsonYamlPopup).toHaveClass("json-yaml-warning closed") + await expect(initialEditor).toHaveAttribute('data-mode-id', "json") + await expect(jsonBtn).toBeChecked({ checked: true }) + await expect(yamlBtn).toBeChecked({ checked: false }) + + await yamlBtn.click() + await expect(jsonYamlPopup).toHaveClass("json-yaml-warning") + + await page.locator('#yaml-cancel-btn').click() + await expect(jsonYamlPopup).toHaveClass("json-yaml-warning closed") + await expect(initialEditor).toHaveAttribute('data-mode-id', "json") + await expect(jsonBtn).toBeChecked({ checked: true }) + await expect(yamlBtn).toBeChecked({ checked: false }) + }) +}) -// const shareUrlBtn = page.locator("#share-url-btn") -// await shareUrlBtn.click() -// const newPlaygroundPromise = page.waitForEvent('popup') -// await openNewTab.click() -// const newPlaygroundPage = await newPlaygroundPromise +test.describe("Examples menu functionality", () => { + test("Open and close examples menu", async ({ page }) => { -// await expect(newPlaygroundPage).toHaveTitle("TD Playground") + await expect(page.getByRole('heading', { name: 'Simple Default' })).toBeVisible({ visible: false }) + await page.locator("#examples-btn").click() -// const newPlaygroundTab = newPlaygroundPage.locator("#tab").nth(0) -// await expect(newPlaygroundTab).toHaveAttribute('data-tab-id', "1") -// await expect(newPlaygroundTab).toHaveText("TDMyLampThingCloseCancel") -// await expect(newPlaygroundTab).toHaveClass("active") + await expect(page.getByRole('heading', { name: 'Simple Default' })).toBeVisible({ visible: true }) + await page.locator(".examples-menu-container__close > i").click() -// }) + await expect(page.getByRole('heading', { name: 'Simple Default' })).toBeVisible({ visible: false }) + }) -// test("Open in ediTDor functionality", async ({ page }) => { -// const saveMenu = page.locator(".save-menu") + test("Open Basic TD from quick access", async ({ page }) => { -// await page.locator("#save-btn").click() -// await expect(saveMenu).toHaveClass("save-menu") + await page.locator("#examples-btn").click() -// const shareUrlInput = page.locator("#share-url-input") -// await expect(shareUrlInput).toHaveText("") + const basicExample = page.locator(".example").filter({ hasText: 'Basic TD' }).nth(0) + await expect(basicExample).toHaveClass("example") -// const openEditdorBtn = page.locator("#open-editdor-btn") + const quickAccessBtn = page.locator(".example").filter({ hasText: 'Basic TD' }).nth(0).getByRole("button").nth(0) + await quickAccessBtn.click() -// const editdorPromise = page.waitForEvent('popup') -// await openEditdorBtn.click() -// const editdorPage = await editdorPromise + const exampleTab = page.locator("#tab").nth(1) + await expect(exampleTab).toHaveAttribute('data-tab-id', "2") + await expect(exampleTab).toHaveText("TDMyLampThingCloseCancel") + await expect(exampleTab).toHaveClass("active") -// await expect(editdorPage).toHaveTitle("ediTDor") + const exampleEditor = page.locator("#editor2") + await expect(exampleEditor).toHaveAttribute('data-ide-id', "2") + await expect(exampleEditor).toHaveClass("editor active") -// const linkedTd = editdorPage.locator("#linkedTd > option") -// await expect(linkedTd).toHaveText("Thing Template") -// }) + }) -// test("Download functionality", async ({ page }) => { -// const saveMenu = page.locator(".save-menu") + test("Open Basic TD from apply button", async ({ page }) => { -// const exampleTab = page.locator("#tab").nth(0) -// await expect(exampleTab).toHaveAttribute('data-tab-id', "1") -// await expect(exampleTab).toHaveText("TDThing TemplateCloseCancel") -// await expect(exampleTab).toHaveClass("active") + await page.locator("#examples-btn").click() -// await page.locator("#save-btn").click() -// await expect(saveMenu).toHaveClass("save-menu") + const basicExample = page.locator(".example").filter({ hasText: 'Basic TD' }).nth(0) + await basicExample.click() + await expect(basicExample).toHaveClass("example open") -// const downloadTdBtn = page.locator(".save-td__download") + const applyBtn = page.locator(".example").filter({ hasText: 'Basic TD' }).nth(0).getByRole("button").filter({ hasText: "Apply" }) + await applyBtn.click() + await expect(basicExample).toHaveClass("example") -// // Start waiting for download before clicking. -// const downloadPromise = page.waitForEvent('download') -// await downloadTdBtn.click() -// const download = await downloadPromise -// const expectedFilename = 'Thing-Template.json' -// expect(download.suggestedFilename()).toBe(expectedFilename) -// }) + const exampleTab = page.locator("#tab").nth(1) + await expect(exampleTab).toHaveAttribute('data-tab-id', "2") + await expect(exampleTab).toHaveText("TDMyLampThingCloseCancel") + await expect(exampleTab).toHaveClass("active") -// //* The "Save as" functionality cannot be tested because it requires to open and interact with the file system wich Playwright cannot do -// }) + const exampleEditor = page.locator("#editor2") + await expect(exampleEditor).toHaveAttribute('data-ide-id', "2") + await expect(exampleEditor).toHaveClass("editor active") + }) -// test.describe("Settings menu functionality", () => { -// test("Opening and closing the settings menu", async ({ page }) => { -// const settingsMenu = page.locator(".settings-menu") -// await expect(settingsMenu).toHaveClass("settings-menu closed") + test("Open Basic TD and close with cancel button", async ({ page }) => { + await page.locator("#examples-btn").click() -// await page.locator("#settings-btn").click() -// await expect(settingsMenu).toHaveClass("settings-menu") + const basicTDExample = page.locator(".example").filter({ hasText: 'Basic TD' }).nth(0) + await basicTDExample.click() + await expect(basicTDExample).toHaveClass("example open") -// const closeMenu = page.locator(".settings__close > i") -// await closeMenu.click() -// await expect(settingsMenu).toHaveClass("settings-menu closed") -// }) + const cancelBtn = page.locator(".example").filter({ hasText: 'Basic TD' }).nth(0).getByRole("button").filter({ hasText: "Cancel" }) + await cancelBtn.click() + await expect(basicTDExample).toHaveClass("example") + }) -// test("Checking settings toggle buttons", async ({ page }) => { -// const settingsMenu = page.locator(".settings-menu") -// await expect(settingsMenu).toHaveClass("settings-menu closed") + test("Toggle between TD and TM examples", async ({ page }) => { + await page.locator("#examples-btn").click() -// await page.locator("#settings-btn").click() -// await expect(settingsMenu).toHaveClass("settings-menu") + const thingTypeToggle = page.locator('#thing-type-btn') + await expect(thingTypeToggle).toBeChecked({ checked: false }) -// const autoValidate = page.locator("#auto-validate") -// const validateJsonld = page.locator("#validate-jsonld") -// const tmConformance = page.locator("#tm-conformance") + await thingTypeToggle.click() + await expect(thingTypeToggle).toBeChecked({ checked: true }) + }) -// await expect(autoValidate).toBeChecked({ checked: false }) -// await expect(validateJsonld).toBeChecked({ checked: true }) -// await expect(tmConformance).toBeChecked({ checked: true }) -// }) + test("Open Basic TM and check for icon change in tab", async ({ page }) => { + await page.locator("#examples-btn").click() -// test("Changing page theme", async ({ page }) => { -// const playgroundSite = page.locator("html") -// await expect(playgroundSite).toHaveClass("light-mode") + const thingTypeToggle = page.locator('#thing-type-btn') + await thingTypeToggle.click() + await expect(thingTypeToggle).toBeChecked({ checked: true }) -// const settingsMenu = page.locator(".settings-menu") -// await expect(settingsMenu).toHaveClass("settings-menu closed") + const quickAccessBtn = page.locator(".example").filter({ hasText: 'Basic TM' }).nth(1).getByRole("button").nth(0) + await quickAccessBtn.click() -// await page.locator("#settings-btn").click() -// await expect(settingsMenu).toHaveClass("settings-menu") + const tabIcon = page.locator("#tab").nth(1).locator(".tab-icon") + await expect(tabIcon).toHaveText("TM") + }) -// const themePicker = page.locator("#theme-picker") -// await themePicker.selectOption('monochrome-mode') -// await expect(playgroundSite).toHaveClass("monochrome-mode") + test("Go to versioning in TD category and open example from quick access", async ({ page }) => { + await page.locator("#examples-btn").click() -// await themePicker.selectOption('dark-mode') -// await expect(playgroundSite).toHaveClass("dark-mode") + const categoryDropDown = page.locator("#thing-category") + await categoryDropDown.selectOption('9-versioning') -// await page.reload({ waitUntil: 'domcontentloaded' }) -// await expect(playgroundSite).toHaveClass("dark-mode") -// }) + const quickAccessBtn = page.locator(".example").filter({ hasText: 'Versioning' }).nth(0).getByRole("button").nth(0) + await quickAccessBtn.click() -// test("Changing font size", async ({ page }) => { -// const settingsMenu = page.locator(".settings-menu") -// await expect(settingsMenu).toHaveClass("settings-menu closed") + const exampleTab = page.locator("#tab").nth(1) + await expect(exampleTab).toHaveAttribute('data-tab-id', "2") + await expect(exampleTab).toHaveText("TDMyLampThingCloseCancel") + await expect(exampleTab).toHaveClass("active") + }) -// await page.locator("#settings-btn").click() -// await expect(settingsMenu).toHaveClass("settings-menu") + test("Go to Tm Optional in TM category and open example from quick access", async ({ page }) => { + await page.locator("#examples-btn").click() -// const editorFontSize = page.locator(".editor-font-size") -// await expect(editorFontSize).toHaveText("14") + const thingTypeToggle = page.locator('#thing-type-btn') + await thingTypeToggle.click() + await expect(thingTypeToggle).toBeChecked({ checked: true }) -// const fontSizeSlider = page.locator('#font-size') -// await fontSizeSlider.click() + const categoryDropDown = page.locator("#thing-category") + await categoryDropDown.selectOption('4-tm-optional') -// await expect(editorFontSize).toHaveText("23") + const quickAccessBtn = page.locator(".example").filter({ hasText: 'Optional Interaction Affordances' }).nth(0).getByRole("button").nth(0) + await quickAccessBtn.click() -// await page.reload({ waitUntil: 'domcontentloaded' }) + const exampleTab = page.locator("#tab").nth(1) + await expect(exampleTab).toHaveAttribute('data-tab-id', "2") + await expect(exampleTab).toHaveText("TMLamp ThingCloseCancel") + await expect(exampleTab).toHaveClass("active") + }) -// await expect(settingsMenu).toHaveClass("settings-menu closed") + test("Search for uriVariable in the TDs and open Combined URI variables in href example", async ({ page }) => { + await page.locator("#examples-btn").click() -// await page.locator("#settings-btn").click() -// await expect(settingsMenu).toHaveClass("settings-menu") + const searchInput = page.locator(".search-input") + searchInput.fill('uriVariables') -// await expect(editorFontSize).toHaveText("23") -// }) + const searchBtn = page.locator(".search-btn") + await searchBtn.click() -// test("Utilizing default settings", async ({ page }) => { -// const playgroundSite = page.locator("html") -// await expect(playgroundSite).toHaveClass("light-mode") + const quickAccessBtn = page.locator(".example").filter({ hasText: 'Combined URI variables in href' }).nth(0).getByRole("button").nth(0) + await quickAccessBtn.click() -// const settingsMenu = page.locator(".settings-menu") -// await expect(settingsMenu).toHaveClass("settings-menu closed") + const exampleTab = page.locator("#tab").nth(1) + await expect(exampleTab).toHaveAttribute('data-tab-id', "2") + await expect(exampleTab).toHaveText("TDMyWeatherThingCloseCancel") + await expect(exampleTab).toHaveClass("active") + }) -// await page.locator("#settings-btn").click() -// await expect(settingsMenu).toHaveClass("settings-menu") + test("Search for overwrite in the TMs and open Overwrite Existing Definitions example", async ({ page }) => { + await page.locator("#examples-btn").click() -// const themePicker = page.locator("#theme-picker") -// await themePicker.selectOption('dark-mode') -// await expect(playgroundSite).toHaveClass("dark-mode") + const thingTypeToggle = page.locator('#thing-type-btn') + await thingTypeToggle.click() + await expect(thingTypeToggle).toBeChecked({ checked: true }) -// const editorFontSize = page.locator(".editor-font-size") -// await expect(editorFontSize).toHaveText("14") + const searchInput = page.locator(".search-input") + searchInput.fill('overwrite') -// const fontSizeSlider = page.locator('#font-size') -// await fontSizeSlider.click() + const searchBtn = page.locator(".search-btn") + await searchBtn.click() -// await expect(editorFontSize).toHaveText("23") + const quickAccessBtn = page.locator(".example").filter({ hasText: 'Overwrite Existing Definitions' }).nth(1).getByRole("button").nth(0) + await quickAccessBtn.click() -// await page.reload({ waitUntil: 'domcontentloaded' }) + const exampleTab = page.locator("#tab").nth(1) + await expect(exampleTab).toHaveAttribute('data-tab-id', "2") + await expect(exampleTab).toHaveText("TMSmart Lamp ControlCloseCancel") + await expect(exampleTab).toHaveClass("active") + }) +}) -// await expect(settingsMenu).toHaveClass("settings-menu closed") +test.describe("Save menu functionality", () => { + test("Open and close save menu", async ({ page }) => { + const saveMenu = page.locator(".save-menu") + await expect(saveMenu).toHaveClass("save-menu closed") -// await page.locator("#settings-btn").click() -// await expect(settingsMenu).toHaveClass("settings-menu") + await page.locator("#save-btn").click() + await expect(saveMenu).toHaveClass("save-menu") -// await expect(playgroundSite).toHaveClass("dark-mode") -// await expect(editorFontSize).toHaveText("23") + const closeMenu = page.locator(".save-menu-close > i") + await closeMenu.click() + await expect(saveMenu).toHaveClass("save-menu closed") + }) -// const resetSettings = page.locator('.reset-settings') -// await resetSettings.click() + test("Open save menu with template thing and check for TD in menu title", async ({ page }) => { + const saveMenu = page.locator(".save-menu") -// await expect(playgroundSite).toHaveClass("light-mode") -// await expect(editorFontSize).toHaveText("14") + await page.locator("#save-btn").click() + await expect(saveMenu).toHaveClass("save-menu") -// await page.reload({ waitUntil: 'domcontentloaded' }) + const titleThingType = page.locator(".save-menu-title > p > #thing-type-text") + await expect(titleThingType).toHaveText("TD") + }) -// await expect(settingsMenu).toHaveClass("settings-menu closed") + test("Open TM examples check for TM in the save menu title", async ({ page }) => { + await page.locator("#examples-btn").click() -// await page.locator("#settings-btn").click() -// await expect(settingsMenu).toHaveClass("settings-menu") + const thingTypeToggle = page.locator('#thing-type-btn') + await thingTypeToggle.click() + await expect(thingTypeToggle).toBeChecked({ checked: true }) -// await expect(playgroundSite).toHaveClass("light-mode") -// await expect(editorFontSize).toHaveText("14") -// }) -// }) + const quickAccessBtn = page.locator(".example").filter({ hasText: 'Basic TM' }).nth(1).getByRole("button").nth(0) + await quickAccessBtn.click() -// test.describe("Validation view functionality", () => { + const saveMenu = page.locator(".save-menu") -// test("Starting the validation with the main validation button", async ({ page }) => { + await page.locator("#save-btn").click() + await expect(saveMenu).toHaveClass("save-menu") -// const validationTab = page.locator('#validation-tab') -// const validationView = page.locator('#validation-view') + const titleThingType = page.locator(".save-menu-title > p > #thing-type-text") + await expect(titleThingType).toHaveText("TM") + }) -// await expect(validationTab).toBeChecked() -// await expect(validationView).toHaveClass("console-view validation-view") + test("Share and open in new tab functionality with an example", async ({ page }) => { -// const stateIcon = page.locator(".json-validation-section > .section-header > i").nth(0) -// await expect(stateIcon).toHaveClass("fa-solid fa-circle") + await page.locator("#examples-btn").click() -// const validationBtn = page.locator("#validate-btn") -// await validationBtn.click() + const basicExample = page.locator(".example").filter({ hasText: 'Basic TD' }).nth(0) + await expect(basicExample).toHaveClass("example") -// //TODO: Find a better way to wait for this event to happen -// await page.waitForTimeout(5000) -// await expect(stateIcon).toHaveClass("fa-solid fa-circle-check") -// }) + const quickAccessBtn = page.locator(".example").filter({ hasText: 'Basic TD' }).nth(0).getByRole("button").nth(0) + await quickAccessBtn.click() -// test("Validating the 'All Defaults TD'", async ({ page }) => { -// const validationTab = page.locator('#validation-tab') -// const validationView = page.locator('#validation-view') + const exampleTab = page.locator("#tab").nth(1) + await expect(exampleTab).toHaveAttribute('data-tab-id', "2") + await expect(exampleTab).toHaveText("TDMyLampThingCloseCancel") + await expect(exampleTab).toHaveClass("active") -// await expect(validationTab).toBeChecked() -// await expect(validationView).toHaveClass("console-view validation-view") + const saveMenu = page.locator(".save-menu") -// await page.locator("#examples-btn").click() + await page.locator("#save-btn").click() + await expect(saveMenu).toHaveClass("save-menu") -// const quickAccessBtn = page.locator(".example").filter({ hasText: 'All Default Values' }).getByRole("button").nth(0) -// await quickAccessBtn.click() + const openNewTab = page.locator("#open-url-tab") + await expect(openNewTab).toBeDisabled() -// const exampleTab = page.locator("#tab").nth(1) -// await expect(exampleTab).toHaveAttribute('data-tab-id', "2") -// await expect(exampleTab).toHaveText("TDMyLampThingCloseCancel") -// await expect(exampleTab).toHaveClass("active") + const shareUrlInput = page.locator("#share-url-input") + await expect(shareUrlInput).toHaveText("") -// await expect(validationTab).toBeChecked() -// await expect(validationView).toHaveClass("console-view validation-view") + const shareUrlBtn = page.locator("#share-url-btn") + await shareUrlBtn.click() -// const validationBtn = page.locator("#validate-btn") -// await validationBtn.click() + const newPlaygroundPromise = page.waitForEvent('popup') + await openNewTab.click() + const newPlaygroundPage = await newPlaygroundPromise -// //validation section -// const jsonValidationSection = page.locator(".json-validation-section") -// const jsonValidationSectionIcon = page.locator(".json-validation-section > .section-header > i").nth(0) -// const jsonValidationSectionTxt = page.locator(".json-validation-section > .section-content > li") + await expect(newPlaygroundPage).toHaveTitle("TD Playground") -// await jsonValidationSection.click() -// await expect(jsonValidationSectionTxt).toHaveText("Validated Successfully") -// await expect(jsonValidationSectionIcon).toHaveClass("fa-solid fa-circle-check") + const newPlaygroundTab = newPlaygroundPage.locator("#tab").nth(0) + await expect(newPlaygroundTab).toHaveAttribute('data-tab-id', "1") + await expect(newPlaygroundTab).toHaveText("TDMyLampThingCloseCancel") + await expect(newPlaygroundTab).toHaveClass("active") -// const jsonSchemaValidationSection = page.locator(".json-schema-validation-section") -// const jsonSchemaValidationSectionIcon = page.locator(".json-schema-validation-section > .section-header > i").nth(0) -// const jsonSchemaValidationSectionTxt = page.locator(".json-schema-validation-section > .section-content > li") + }) -// await jsonSchemaValidationSection.click() -// await expect(jsonSchemaValidationSectionTxt).toHaveText("Validated Successfully") -// await expect(jsonSchemaValidationSectionIcon).toHaveClass("fa-solid fa-circle-check") + test("Open in ediTDor functionality", async ({ page }) => { + const saveMenu = page.locator(".save-menu") -// const jsonSchemaDefaultsSection = page.locator(".json-schema-defaults-section") -// const jsonSchemaDefaultsSectionIcon = page.locator(".json-schema-defaults-section > .section-header > i").nth(0) -// const jsonSchemaDefaultsSectionTxt = page.locator(".json-schema-defaults-section > .section-content > li") + await page.locator("#save-btn").click() + await expect(saveMenu).toHaveClass("save-menu") -// await jsonSchemaDefaultsSection.click() -// await expect(jsonSchemaDefaultsSectionTxt).toHaveText("Validated Successfully") -// await expect(jsonSchemaDefaultsSectionIcon).toHaveClass("fa-solid fa-circle-check") + const shareUrlInput = page.locator("#share-url-input") + await expect(shareUrlInput).toHaveText("") -// const jsonlsValidationSection = page.locator(".jsonls-validation-section") -// const jsonlsValidationSectionIcon = page.locator(".jsonls-validation-section > .section-header > i").nth(0) -// const jsonlsValidationSectionTxt = page.locator(".jsonls-validation-section > .section-content > li") + const openEditdorBtn = page.locator("#open-editdor-btn") -// await jsonlsValidationSection.click() -// await expect(jsonlsValidationSectionTxt).toHaveText("Validated Successfully") -// await expect(jsonlsValidationSectionIcon).toHaveClass("fa-solid fa-circle-check") + const editdorPromise = page.waitForEvent('popup') + await openEditdorBtn.click() + const editdorPage = await editdorPromise -// const additionalChecksSection = page.locator(".additional-checks-section") -// const additionalChecksSectionIcon = page.locator(".additional-checks-section > .section-header > i").nth(0) -// const additionalChecksSectionTxt = page.locator(".additional-checks-section > .section-content > li") + await expect(editdorPage).toHaveTitle("ediTDor") -// await additionalChecksSection.click() -// await expect(additionalChecksSectionTxt).toHaveText("Validated Successfully") -// await expect(additionalChecksSectionIcon).toHaveClass("fa-solid fa-circle-check") -// }) + const linkedTd = editdorPage.locator("#linkedTd > option") + await expect(linkedTd).toHaveText("Thing Template") + }) -// test("Validating the 'Basic TD'", async ({ page }) => { -// const validationTab = page.locator('#validation-tab') -// const validationView = page.locator('#validation-view') + test("Download functionality", async ({ page }) => { + const saveMenu = page.locator(".save-menu") -// await expect(validationTab).toBeChecked() -// await expect(validationView).toHaveClass("console-view validation-view") + const exampleTab = page.locator("#tab").nth(0) + await expect(exampleTab).toHaveAttribute('data-tab-id', "1") + await expect(exampleTab).toHaveText("TDThing TemplateCloseCancel") + await expect(exampleTab).toHaveClass("active") -// await page.locator("#examples-btn").click() + await page.locator("#save-btn").click() + await expect(saveMenu).toHaveClass("save-menu") -// const quickAccessBtn = page.locator(".example").filter({ hasText: 'Basic TD' }).getByRole("button").nth(0) -// await quickAccessBtn.click() + const downloadTdBtn = page.locator(".save-td__download") -// const exampleTab = page.locator("#tab").nth(1) -// await expect(exampleTab).toHaveAttribute('data-tab-id', "2") -// await expect(exampleTab).toHaveText("TDMyLampThingCloseCancel") -// await expect(exampleTab).toHaveClass("active") + // Start waiting for download before clicking. + const downloadPromise = page.waitForEvent('download') + await downloadTdBtn.click() + const download = await downloadPromise + const expectedFilename = 'Thing-Template.json' + expect(download.suggestedFilename()).toBe(expectedFilename) + }) -// await expect(validationTab).toBeChecked() -// await expect(validationView).toHaveClass("console-view validation-view") + //* The "Save as" functionality cannot be tested because it requires to open and interact with the file system wich Playwright cannot do +}) -// const validationBtn = page.locator("#validate-btn") -// await validationBtn.click() +test.describe("Settings menu functionality", () => { + test("Opening and closing the settings menu", async ({ page }) => { + const settingsMenu = page.locator(".settings-menu") + await expect(settingsMenu).toHaveClass("settings-menu closed") -// //Validation section -// const jsonValidationSection = page.locator(".json-validation-section") -// const jsonValidationSectionIcon = page.locator(".json-validation-section > .section-header > i").nth(0) -// const jsonValidationSectionTxt = page.locator(".json-validation-section > .section-content > li") + await page.locator("#settings-btn").click() + await expect(settingsMenu).toHaveClass("settings-menu") -// await jsonValidationSection.click() -// await expect(jsonValidationSectionTxt).toHaveText("Validated Successfully") -// await expect(jsonValidationSectionIcon).toHaveClass("fa-solid fa-circle-check") + const closeMenu = page.locator(".settings__close > i") + await closeMenu.click() + await expect(settingsMenu).toHaveClass("settings-menu closed") + }) -// const jsonSchemaValidationSection = page.locator(".json-schema-validation-section") -// const jsonSchemaValidationSectionIcon = page.locator(".json-schema-validation-section > .section-header > i").nth(0) -// const jsonSchemaValidationSectionTxt = page.locator(".json-schema-validation-section > .section-content > li") + test("Checking settings toggle buttons", async ({ page }) => { + const settingsMenu = page.locator(".settings-menu") + await expect(settingsMenu).toHaveClass("settings-menu closed") -// await jsonSchemaValidationSection.click() -// await expect(jsonSchemaValidationSectionTxt).toHaveText("Validated Successfully") -// await expect(jsonSchemaValidationSectionIcon).toHaveClass("fa-solid fa-circle-check") + await page.locator("#settings-btn").click() + await expect(settingsMenu).toHaveClass("settings-menu") -// const jsonSchemaDefaultsSection = page.locator(".json-schema-defaults-section") -// const jsonSchemaDefaultsSectionIcon = page.locator(".json-schema-defaults-section > .section-header > i").nth(0) -// const jsonSchemaDefaultsSectionTxt = page.locator(".json-schema-defaults-section > .section-content > li").nth(0) + const autoValidate = page.locator("#auto-validate") + const validateJsonld = page.locator("#validate-jsonld") + const tmConformance = page.locator("#tm-conformance") -// await jsonSchemaDefaultsSection.click() -// await expect(jsonSchemaDefaultsSectionTxt).toHaveText("Optional validation failed:") -// await expect(jsonSchemaDefaultsSectionIcon).toHaveClass("fa-solid fa-circle-exclamation") + await expect(autoValidate).toBeChecked({ checked: false }) + await expect(validateJsonld).toBeChecked({ checked: true }) + await expect(tmConformance).toBeChecked({ checked: true }) + }) -// const jsonlsValidationSection = page.locator(".jsonls-validation-section") -// const jsonlsValidationSectionIcon = page.locator(".jsonls-validation-section > .section-header > i").nth(0) -// const jsonlsValidationSectionTxt = page.locator(".jsonls-validation-section > .section-content > li") + test("Changing page theme", async ({ page }) => { + const playgroundSite = page.locator("html") + await expect(playgroundSite).toHaveClass("light-mode") -// await jsonlsValidationSection.click() -// await expect(jsonlsValidationSectionTxt).toHaveText("Validated Successfully") -// await expect(jsonlsValidationSectionIcon).toHaveClass("fa-solid fa-circle-check") + const settingsMenu = page.locator(".settings-menu") + await expect(settingsMenu).toHaveClass("settings-menu closed") -// const additionalChecksSection = page.locator(".additional-checks-section") -// const additionalChecksSectionIcon = page.locator(".additional-checks-section > .section-header > i").nth(0) -// const additionalChecksSectionTxt = page.locator(".additional-checks-section > .section-content > li") + await page.locator("#settings-btn").click() + await expect(settingsMenu).toHaveClass("settings-menu") -// await additionalChecksSection.click() -// await expect(additionalChecksSectionTxt).toHaveText("Validated Successfully") -// await expect(additionalChecksSectionIcon).toHaveClass("fa-solid fa-circle-check") -// }) + const themePicker = page.locator("#theme-picker") + await themePicker.selectOption('monochrome-mode') + await expect(playgroundSite).toHaveClass("monochrome-mode") -// test("Validating the 'Basic TM'", async ({ page }) => { + await themePicker.selectOption('dark-mode') + await expect(playgroundSite).toHaveClass("dark-mode") -// const validationTab = page.locator('#validation-tab') -// const validationView = page.locator('#validation-view') + await page.reload({ waitUntil: 'domcontentloaded' }) + await expect(playgroundSite).toHaveClass("dark-mode") + }) -// await expect(validationTab).toBeChecked() -// await expect(validationView).toHaveClass("console-view validation-view") + test("Changing font size", async ({ page }) => { + const settingsMenu = page.locator(".settings-menu") + await expect(settingsMenu).toHaveClass("settings-menu closed") -// await page.locator("#examples-btn").click() + await page.locator("#settings-btn").click() + await expect(settingsMenu).toHaveClass("settings-menu") -// const thingTypeToggle = page.locator('#thing-type-btn') -// await thingTypeToggle.click() -// await expect(thingTypeToggle).toBeChecked({ checked: true }) + const editorFontSize = page.locator(".editor-font-size") + await expect(editorFontSize).toHaveText("14") -// const quickAccessBtn = page.locator(".example").filter({ hasText: 'Basic TM' }).nth(1).getByRole("button").nth(0) -// await quickAccessBtn.click() + const fontSizeSlider = page.locator('#font-size') + await fontSizeSlider.click() -// const exampleTab = page.locator("#tab").nth(1) -// await expect(exampleTab).toHaveAttribute('data-tab-id', "2") -// await expect(exampleTab).toHaveText("TMLamp ThingCloseCancel") -// await expect(exampleTab).toHaveClass("active") + await expect(editorFontSize).toHaveText("23") -// await expect(validationTab).toBeChecked() -// await expect(validationView).toHaveClass("console-view validation-view") + await page.reload({ waitUntil: 'domcontentloaded' }) -// const validationBtn = page.locator("#validate-btn") -// await validationBtn.click() + await expect(settingsMenu).toHaveClass("settings-menu closed") -// //Validation section -// const jsonValidationSection = page.locator(".json-validation-section") -// const jsonValidationSectionIcon = page.locator(".json-validation-section > .section-header > i").nth(0) -// const jsonValidationSectionTxt = page.locator(".json-validation-section > .section-content > li") + await page.locator("#settings-btn").click() + await expect(settingsMenu).toHaveClass("settings-menu") -// await jsonValidationSection.click() -// await expect(jsonValidationSectionTxt).toHaveText("Validated Successfully") -// await expect(jsonValidationSectionIcon).toHaveClass("fa-solid fa-circle-check") + await expect(editorFontSize).toHaveText("23") + }) -// const jsonSchemaValidationSection = page.locator(".json-schema-validation-section") -// const jsonSchemaValidationSectionIcon = page.locator(".json-schema-validation-section > .section-header > i").nth(0) -// const jsonSchemaValidationSectionTxt = page.locator(".json-schema-validation-section > .section-content > li") + test("Utilizing default settings", async ({ page }) => { + const playgroundSite = page.locator("html") + await expect(playgroundSite).toHaveClass("light-mode") -// await jsonSchemaValidationSection.click() -// await expect(jsonSchemaValidationSectionTxt).toHaveText("Validated Successfully") -// await expect(jsonSchemaValidationSectionIcon).toHaveClass("fa-solid fa-circle-check") + const settingsMenu = page.locator(".settings-menu") + await expect(settingsMenu).toHaveClass("settings-menu closed") -// const jsonSchemaDefaultsSection = page.locator(".json-schema-defaults-section") -// const jsonSchemaDefaultsSectionIcon = page.locator(".json-schema-defaults-section > .section-header > i").nth(0) -// const jsonSchemaDefaultsSectionTxt = page.locator(".json-schema-defaults-section > .section-content > li").nth(0) + await page.locator("#settings-btn").click() + await expect(settingsMenu).toHaveClass("settings-menu") -// await jsonSchemaDefaultsSection.click() -// await expect(jsonSchemaDefaultsSectionTxt).toHaveText("A previous validation has failed or it is only available for Thing Descriptions") -// await expect(jsonSchemaDefaultsSectionIcon).toHaveClass("fa-solid fa-circle") + const themePicker = page.locator("#theme-picker") + await themePicker.selectOption('dark-mode') + await expect(playgroundSite).toHaveClass("dark-mode") -// const jsonlsValidationSection = page.locator(".jsonls-validation-section") -// const jsonlsValidationSectionIcon = page.locator(".jsonls-validation-section > .section-header > i").nth(0) -// const jsonlsValidationSectionTxt = page.locator(".jsonls-validation-section > .section-content > li") + const editorFontSize = page.locator(".editor-font-size") + await expect(editorFontSize).toHaveText("14") -// await jsonlsValidationSection.click() -// await expect(jsonlsValidationSectionTxt).toHaveText("Validated Successfully") -// await expect(jsonlsValidationSectionIcon).toHaveClass("fa-solid fa-circle-check") + const fontSizeSlider = page.locator('#font-size') + await fontSizeSlider.click() -// const additionalChecksSection = page.locator(".additional-checks-section") -// const additionalChecksSectionIcon = page.locator(".additional-checks-section > .section-header > i").nth(0) -// const additionalChecksSectionTxt = page.locator(".additional-checks-section > .section-content > li") + await expect(editorFontSize).toHaveText("23") -// await additionalChecksSection.click() -// await expect(additionalChecksSectionTxt).toHaveText("Validated Successfully") -// await expect(additionalChecksSectionIcon).toHaveClass("fa-solid fa-circle-check") -// }) + await page.reload({ waitUntil: 'domcontentloaded' }) -// }) + await expect(settingsMenu).toHaveClass("settings-menu closed") -// test.describe("OpenAPI view functionality", () => { -// test("Trying to open the OpenAPI view with a TD with no protocols", async ({ page }) => { + await page.locator("#settings-btn").click() + await expect(settingsMenu).toHaveClass("settings-menu") -// 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") + await expect(playgroundSite).toHaveClass("dark-mode") + await expect(editorFontSize).toHaveText("23") -// const openAPIView = page.locator('#open-api-view') -// const consoleError = page.locator('#console-error') -// const openAPITab = page.locator("#open-api-tab") + const resetSettings = page.locator('.reset-settings') + await resetSettings.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 }) + await expect(playgroundSite).toHaveClass("light-mode") + await expect(editorFontSize).toHaveText("14") -// await openAPITab.click() + await page.reload({ waitUntil: 'domcontentloaded' }) -// 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!") -// }) + await expect(settingsMenu).toHaveClass("settings-menu closed") -// test("Trying to open the OpenAPI view with a TM", async ({ page }) => { + await page.locator("#settings-btn").click() + await expect(settingsMenu).toHaveClass("settings-menu") -// await page.locator("#examples-btn").click() + await expect(playgroundSite).toHaveClass("light-mode") + await expect(editorFontSize).toHaveText("14") + }) +}) -// const thingTypeToggle = page.locator('#thing-type-btn') -// await thingTypeToggle.click() -// await expect(thingTypeToggle).toBeChecked({ checked: true }) +test.describe("Validation view functionality", () => { -// const quickAccessBtn = page.locator(".example").filter({ hasText: 'Basic TM' }).nth(1).getByRole("button").nth(0) -// await quickAccessBtn.click() + test("Starting the validation with the main validation button", async ({ page }) => { -// const exampleTab = page.locator("#tab").nth(1) -// await expect(exampleTab).toHaveAttribute('data-tab-id', "2") -// await expect(exampleTab).toHaveText("TMLamp ThingCloseCancel") -// await expect(exampleTab).toHaveClass("active") + const validationTab = page.locator('#validation-tab') + const validationView = page.locator('#validation-view') -// const openAPIView = page.locator('#open-api-view') -// const consoleError = page.locator('#console-error') -// const openAPITab = page.locator("#open-api-tab") + await expect(validationTab).toBeChecked() + await expect(validationView).toHaveClass("console-view validation-view") -// 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 }) + const stateIcon = page.locator(".json-validation-section > .section-header > i").nth(0) + await expect(stateIcon).toHaveClass("fa-solid fa-circle") -// await openAPITab.click() + const validationBtn = page.locator("#validate-btn") + await validationBtn.click() -// await expect(openAPITab).toBeChecked({ checked: true }) -// await expect(openAPIView).toHaveClass("console-view open-api-view hidden") -// await expect(page.locator(".console-error__txt")).toHaveText("This function is only allowed for Thing Descriptions!") + //TODO: Find a better way to wait for this event to happen + await page.waitForTimeout(5000) + 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') -// test("Open the OpenAPI view with the 'Basic TD' example", async ({ page }) => { -// await page.locator("#examples-btn").click() + await expect(validationTab).toBeChecked() + await expect(validationView).toHaveClass("console-view validation-view") -// const quickAccessBtn = page.locator(".example").filter({ hasText: 'Basic TD' }).getByRole("button").nth(0) -// await quickAccessBtn.click() + await page.locator("#examples-btn").click() -// const exampleTab = page.locator("#tab").nth(1) -// await expect(exampleTab).toHaveAttribute('data-tab-id', "2") -// await expect(exampleTab).toHaveText("TDMyLampThingCloseCancel") -// await expect(exampleTab).toHaveClass("active") + const quickAccessBtn = page.locator(".example").filter({ hasText: 'All Default Values' }).getByRole("button").nth(0) + await quickAccessBtn.click() -// const exampleEditor = page.locator("#editor2") -// await expect(exampleEditor).toHaveAttribute('data-ide-id', "2") -// await expect(exampleEditor).toHaveAttribute('data-mode-id', "json") -// await expect(exampleEditor).toHaveClass("editor active") + const exampleTab = page.locator("#tab").nth(1) + await expect(exampleTab).toHaveAttribute('data-tab-id', "2") + await expect(exampleTab).toHaveText("TDMyLampThingCloseCancel") + await expect(exampleTab).toHaveClass("active") -// const openAPIView = page.locator('#open-api-view') -// const consoleError = page.locator('#console-error') -// const openAPITab = page.locator("#open-api-tab") + await expect(validationTab).toBeChecked() + await expect(validationView).toHaveClass("console-view validation-view") -// 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 }) + const validationBtn = page.locator("#validate-btn") + await validationBtn.click() -// await openAPITab.click() + //validation section + const jsonValidationSection = page.locator(".json-validation-section") + const jsonValidationSectionIcon = page.locator(".json-validation-section > .section-header > i").nth(0) + const jsonValidationSectionTxt = page.locator(".json-validation-section > .section-content > li") -// await expect(openAPITab).toBeChecked({ checked: true }) -// await expect(openAPIView).toHaveClass("console-view open-api-view") -// await expect(consoleError).toHaveClass("console-view console-error hidden") + await jsonValidationSection.click() + await expect(jsonValidationSectionTxt).toHaveText("Validated Successfully") + await expect(jsonValidationSectionIcon).toHaveClass("fa-solid fa-circle-check") -// const openAPIEditor = page.locator('#open-api-container') -// const openAPIContainer = openAPIEditor.getByRole('code').locator('div').filter({ hasText: '"openapi": "3.0.3",' }).nth(4) + const jsonSchemaValidationSection = page.locator(".json-schema-validation-section") + const jsonSchemaValidationSectionIcon = page.locator(".json-schema-validation-section > .section-header > i").nth(0) + const jsonSchemaValidationSectionTxt = page.locator(".json-schema-validation-section > .section-content > li") -// await expect(openAPIEditor).toHaveAttribute('data-mode-id', "json") -// await expect(openAPIContainer).toHaveText('\"openapi\": \"3.0.3\",') + await jsonSchemaValidationSection.click() + await expect(jsonSchemaValidationSectionTxt).toHaveText("Validated Successfully") + await expect(jsonSchemaValidationSectionIcon).toHaveClass("fa-solid fa-circle-check") -// const openAPIJsonBtn = page.locator('#open-api-json') + const jsonSchemaDefaultsSection = page.locator(".json-schema-defaults-section") + const jsonSchemaDefaultsSectionIcon = page.locator(".json-schema-defaults-section > .section-header > i").nth(0) + const jsonSchemaDefaultsSectionTxt = page.locator(".json-schema-defaults-section > .section-content > li") -// await expect(openAPIJsonBtn).toBeDisabled() + await jsonSchemaDefaultsSection.click() + await expect(jsonSchemaDefaultsSectionTxt).toHaveText("Validated Successfully") + await expect(jsonSchemaDefaultsSectionIcon).toHaveClass("fa-solid fa-circle-check") -// }) + const jsonlsValidationSection = page.locator(".jsonls-validation-section") + const jsonlsValidationSectionIcon = page.locator(".jsonls-validation-section > .section-header > i").nth(0) + const jsonlsValidationSectionTxt = page.locator(".jsonls-validation-section > .section-content > li") -// test("Open the OpenAPI view with the 'Basic TD' example as YAML", async ({ page }) => { + await jsonlsValidationSection.click() + await expect(jsonlsValidationSectionTxt).toHaveText("Validated Successfully") + await expect(jsonlsValidationSectionIcon).toHaveClass("fa-solid fa-circle-check") -// await page.locator("#examples-btn").click() + const additionalChecksSection = page.locator(".additional-checks-section") + const additionalChecksSectionIcon = page.locator(".additional-checks-section > .section-header > i").nth(0) + const additionalChecksSectionTxt = page.locator(".additional-checks-section > .section-content > li") -// const quickAccessBtn = page.locator(".example").filter({ hasText: 'Basic TD' }).getByRole("button").nth(0) -// await quickAccessBtn.click() + await additionalChecksSection.click() + await expect(additionalChecksSectionTxt).toHaveText("Validated Successfully") + await expect(additionalChecksSectionIcon).toHaveClass("fa-solid fa-circle-check") + }) -// const exampleTab = page.locator("#tab").nth(1) -// await expect(exampleTab).toHaveAttribute('data-tab-id', "2") -// await expect(exampleTab).toHaveText("TDMyLampThingCloseCancel") -// await expect(exampleTab).toHaveClass("active") + test("Validating the 'Basic TD'", async ({ page }) => { + const validationTab = page.locator('#validation-tab') + const validationView = page.locator('#validation-view') -// const exampleEditor = page.locator("#editor2") -// await expect(exampleEditor).toHaveAttribute('data-ide-id', "2") -// await expect(exampleEditor).toHaveAttribute('data-mode-id', "json") -// await expect(exampleEditor).toHaveClass("editor active") + await expect(validationTab).toBeChecked() + await expect(validationView).toHaveClass("console-view validation-view") + await page.locator("#examples-btn").click() -// const jsonYamlPopup = page.locator('.json-yaml-warning') -// await expect(jsonYamlPopup).toHaveClass("json-yaml-warning closed") + const quickAccessBtn = page.locator(".example").filter({ hasText: 'Basic TD' }).getByRole("button").nth(0) + await quickAccessBtn.click() -// const jsonBtn = page.locator('#file-type-json') -// const yamlBtn = page.locator('#file-type-yaml') + const exampleTab = page.locator("#tab").nth(1) + await expect(exampleTab).toHaveAttribute('data-tab-id', "2") + await expect(exampleTab).toHaveText("TDMyLampThingCloseCancel") + await expect(exampleTab).toHaveClass("active") -// await expect(jsonBtn).toBeChecked({ checked: true }) -// await expect(yamlBtn).toBeChecked({ checked: false }) + await expect(validationTab).toBeChecked() + await expect(validationView).toHaveClass("console-view validation-view") -// await yamlBtn.click() -// await expect(jsonYamlPopup).toHaveClass("json-yaml-warning") + const validationBtn = page.locator("#validate-btn") + await validationBtn.click() -// await page.locator('#yaml-confirm-btn').click() -// await expect(jsonYamlPopup).toHaveClass("json-yaml-warning closed") -// await expect(exampleEditor).toHaveAttribute('data-mode-id', "yaml") -// await expect(jsonBtn).toBeChecked({ checked: false }) -// await expect(yamlBtn).toBeChecked({ checked: true }) + //Validation section + const jsonValidationSection = page.locator(".json-validation-section") + const jsonValidationSectionIcon = page.locator(".json-validation-section > .section-header > i").nth(0) + const jsonValidationSectionTxt = page.locator(".json-validation-section > .section-content > li") -// const openAPIView = page.locator('#open-api-view') -// const consoleError = page.locator('#console-error') -// const openAPITab = page.locator("#open-api-tab") + await jsonValidationSection.click() + await expect(jsonValidationSectionTxt).toHaveText("Validated Successfully") + await expect(jsonValidationSectionIcon).toHaveClass("fa-solid fa-circle-check") -// 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 }) + const jsonSchemaValidationSection = page.locator(".json-schema-validation-section") + const jsonSchemaValidationSectionIcon = page.locator(".json-schema-validation-section > .section-header > i").nth(0) + const jsonSchemaValidationSectionTxt = page.locator(".json-schema-validation-section > .section-content > li") -// await openAPITab.click() + await jsonSchemaValidationSection.click() + await expect(jsonSchemaValidationSectionTxt).toHaveText("Validated Successfully") + await expect(jsonSchemaValidationSectionIcon).toHaveClass("fa-solid fa-circle-check") -// await expect(openAPITab).toBeChecked({ checked: true }) -// await expect(openAPIView).toHaveClass("console-view open-api-view") -// await expect(consoleError).toHaveClass("console-view console-error hidden") + const jsonSchemaDefaultsSection = page.locator(".json-schema-defaults-section") + const jsonSchemaDefaultsSectionIcon = page.locator(".json-schema-defaults-section > .section-header > i").nth(0) + const jsonSchemaDefaultsSectionTxt = page.locator(".json-schema-defaults-section > .section-content > li").nth(0) -// const openAPIEditor = page.locator('#open-api-container') -// const openAPIContainer = openAPIEditor.getByRole('code').locator('div').filter({ hasText: 'openapi: "3.0.3"' }).nth(4) + await jsonSchemaDefaultsSection.click() + await expect(jsonSchemaDefaultsSectionTxt).toHaveText("Optional validation failed:") + await expect(jsonSchemaDefaultsSectionIcon).toHaveClass("fa-solid fa-circle-exclamation") -// await expect(openAPIEditor).toHaveAttribute('data-mode-id', "yaml") -// await expect(openAPIContainer).toHaveText('openapi: "3.0.3"') + const jsonlsValidationSection = page.locator(".jsonls-validation-section") + const jsonlsValidationSectionIcon = page.locator(".jsonls-validation-section > .section-header > i").nth(0) + const jsonlsValidationSectionTxt = page.locator(".jsonls-validation-section > .section-content > li") -// const openAPIYamlBtn = page.locator('#open-api-yaml') -// await expect(openAPIYamlBtn).toBeDisabled() + await jsonlsValidationSection.click() + await expect(jsonlsValidationSectionTxt).toHaveText("Validated Successfully") + await expect(jsonlsValidationSectionIcon).toHaveClass("fa-solid fa-circle-check") -// }) + const additionalChecksSection = page.locator(".additional-checks-section") + const additionalChecksSectionIcon = page.locator(".additional-checks-section > .section-header > i").nth(0) + const additionalChecksSectionTxt = page.locator(".additional-checks-section > .section-content > li") -// test("Open the OpenAPI view and change form JSON to YAML and from YAML to JSON", async ({ page }) => { -// await page.locator("#examples-btn").click() + await additionalChecksSection.click() + await expect(additionalChecksSectionTxt).toHaveText("Validated Successfully") + await expect(additionalChecksSectionIcon).toHaveClass("fa-solid fa-circle-check") + }) -// const quickAccessBtn = page.locator(".example").filter({ hasText: 'Basic TD' }).getByRole("button").nth(0) -// await quickAccessBtn.click() + test("Validating the 'Basic TM'", async ({ page }) => { -// const exampleTab = page.locator("#tab").nth(1) -// await expect(exampleTab).toHaveAttribute('data-tab-id', "2") -// await expect(exampleTab).toHaveText("TDMyLampThingCloseCancel") -// await expect(exampleTab).toHaveClass("active") + const validationTab = page.locator('#validation-tab') + const validationView = page.locator('#validation-view') -// const exampleEditor = page.locator("#editor2") -// await expect(exampleEditor).toHaveAttribute('data-ide-id', "2") -// await expect(exampleEditor).toHaveAttribute('data-mode-id', "json") -// await expect(exampleEditor).toHaveClass("editor active") + await expect(validationTab).toBeChecked() + await expect(validationView).toHaveClass("console-view validation-view") -// const openAPIView = page.locator('#open-api-view') -// const consoleError = page.locator('#console-error') -// const openAPITab = page.locator("#open-api-tab") + await page.locator("#examples-btn").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 }) + const thingTypeToggle = page.locator('#thing-type-btn') + await thingTypeToggle.click() + await expect(thingTypeToggle).toBeChecked({ checked: true }) -// await openAPITab.click() + const quickAccessBtn = page.locator(".example").filter({ hasText: 'Basic TM' }).nth(1).getByRole("button").nth(0) + await quickAccessBtn.click() -// await expect(openAPITab).toBeChecked({ checked: true }) -// await expect(openAPIView).toHaveClass("console-view open-api-view") -// await expect(consoleError).toHaveClass("console-view console-error hidden") + const exampleTab = page.locator("#tab").nth(1) + await expect(exampleTab).toHaveAttribute('data-tab-id', "2") + await expect(exampleTab).toHaveText("TMLamp ThingCloseCancel") + await expect(exampleTab).toHaveClass("active") -// const openAPIEditor = page.locator('#open-api-container') + await expect(validationTab).toBeChecked() + await expect(validationView).toHaveClass("console-view validation-view") -// await expect(openAPIEditor).toHaveAttribute('data-mode-id', "json") + const validationBtn = page.locator("#validate-btn") + await validationBtn.click() -// const openAPIJsonBtn = page.locator('#open-api-json') -// const openAPIYamlBtn = page.locator('#open-api-yaml') + //Validation section + const jsonValidationSection = page.locator(".json-validation-section") + const jsonValidationSectionIcon = page.locator(".json-validation-section > .section-header > i").nth(0) + const jsonValidationSectionTxt = page.locator(".json-validation-section > .section-content > li") -// await expect(openAPIJsonBtn).toBeDisabled() + await jsonValidationSection.click() + await expect(jsonValidationSectionTxt).toHaveText("Validated Successfully") + await expect(jsonValidationSectionIcon).toHaveClass("fa-solid fa-circle-check") -// await openAPIYamlBtn.click() + const jsonSchemaValidationSection = page.locator(".json-schema-validation-section") + const jsonSchemaValidationSectionIcon = page.locator(".json-schema-validation-section > .section-header > i").nth(0) + const jsonSchemaValidationSectionTxt = page.locator(".json-schema-validation-section > .section-content > li") -// await expect(openAPIEditor).toHaveAttribute('data-mode-id', "yaml") -// await expect(openAPIYamlBtn).toBeDisabled() + await jsonSchemaValidationSection.click() + await expect(jsonSchemaValidationSectionTxt).toHaveText("Validated Successfully") + await expect(jsonSchemaValidationSectionIcon).toHaveClass("fa-solid fa-circle-check") -// await openAPIJsonBtn.click() + const jsonSchemaDefaultsSection = page.locator(".json-schema-defaults-section") + const jsonSchemaDefaultsSectionIcon = page.locator(".json-schema-defaults-section > .section-header > i").nth(0) + const jsonSchemaDefaultsSectionTxt = page.locator(".json-schema-defaults-section > .section-content > li").nth(0) -// await expect(openAPIEditor).toHaveAttribute('data-mode-id', "json") -// await expect(openAPIJsonBtn).toBeDisabled() -// }) + await jsonSchemaDefaultsSection.click() + await expect(jsonSchemaDefaultsSectionTxt).toHaveText("A previous validation has failed or it is only available for Thing Descriptions") + await expect(jsonSchemaDefaultsSectionIcon).toHaveClass("fa-solid fa-circle") -// test("Open the OpenAPI view and downloading it as JSON", async ({ page }) => { -// await page.locator("#examples-btn").click() + const jsonlsValidationSection = page.locator(".jsonls-validation-section") + const jsonlsValidationSectionIcon = page.locator(".jsonls-validation-section > .section-header > i").nth(0) + const jsonlsValidationSectionTxt = page.locator(".jsonls-validation-section > .section-content > li") -// const quickAccessBtn = page.locator(".example").filter({ hasText: 'Basic TD' }).getByRole("button").nth(0) -// await quickAccessBtn.click() + await jsonlsValidationSection.click() + await expect(jsonlsValidationSectionTxt).toHaveText("Validated Successfully") + await expect(jsonlsValidationSectionIcon).toHaveClass("fa-solid fa-circle-check") -// const exampleTab = page.locator("#tab").nth(1) -// await expect(exampleTab).toHaveAttribute('data-tab-id', "2") -// await expect(exampleTab).toHaveText("TDMyLampThingCloseCancel") -// await expect(exampleTab).toHaveClass("active") + const additionalChecksSection = page.locator(".additional-checks-section") + const additionalChecksSectionIcon = page.locator(".additional-checks-section > .section-header > i").nth(0) + const additionalChecksSectionTxt = page.locator(".additional-checks-section > .section-content > li") -// const exampleEditor = page.locator("#editor2") -// await expect(exampleEditor).toHaveAttribute('data-ide-id', "2") -// await expect(exampleEditor).toHaveAttribute('data-mode-id', "json") -// await expect(exampleEditor).toHaveClass("editor active") + await additionalChecksSection.click() + await expect(additionalChecksSectionTxt).toHaveText("Validated Successfully") + await expect(additionalChecksSectionIcon).toHaveClass("fa-solid fa-circle-check") + }) -// const openAPIView = page.locator('#open-api-view') -// const consoleError = page.locator('#console-error') -// const openAPITab = page.locator("#open-api-tab") +}) -// 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.describe("OpenAPI view functionality", () => { + test("Trying to open the OpenAPI view with a TD with no protocols", async ({ page }) => { -// await openAPITab.click() + 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") -// await expect(openAPITab).toBeChecked({ checked: true }) -// await expect(openAPIView).toHaveClass("console-view open-api-view") -// await expect(consoleError).toHaveClass("console-view console-error hidden") + const openAPIView = page.locator('#open-api-view') + const consoleError = page.locator('#console-error') + const openAPITab = page.locator("#open-api-tab") -// const openAPIEditor = page.locator('#open-api-container') -// const openAPIContainer = openAPIEditor.getByRole('code').locator('div').filter({ hasText: '"openapi": "3.0.3",' }).nth(4) + 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 }) -// await expect(openAPIEditor).toHaveAttribute('data-mode-id', "json") -// await expect(openAPIContainer).toHaveText('\"openapi\": \"3.0.3\",') + await openAPITab.click() -// const openAPIJsonBtn = page.locator('#open-api-json') -// await expect(openAPIJsonBtn).toBeDisabled() + 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!") + }) -// // Start waiting for download before clicking. -// const openAPIDownload = page.locator('#open-api-download') -// const downloadPromise = page.waitForEvent('download') -// await openAPIDownload.click() -// const download = await downloadPromise -// const expectedFilename = 'MyLampThing-OpenAPI.json' -// expect(download.suggestedFilename()).toBe(expectedFilename) -// }) + test("Trying to open the OpenAPI view with a TM", async ({ page }) => { -// test("Open the OpenAPI view and downloading it as YAML", async ({ page }) => { -// await page.locator("#examples-btn").click() + await page.locator("#examples-btn").click() -// const quickAccessBtn = page.locator(".example").filter({ hasText: 'Basic TD' }).getByRole("button").nth(0) -// await quickAccessBtn.click() + const thingTypeToggle = page.locator('#thing-type-btn') + await thingTypeToggle.click() + await expect(thingTypeToggle).toBeChecked({ checked: true }) -// const exampleTab = page.locator("#tab").nth(1) -// await expect(exampleTab).toHaveAttribute('data-tab-id', "2") -// await expect(exampleTab).toHaveText("TDMyLampThingCloseCancel") -// await expect(exampleTab).toHaveClass("active") + const quickAccessBtn = page.locator(".example").filter({ hasText: 'Basic TM' }).nth(1).getByRole("button").nth(0) + await quickAccessBtn.click() -// const exampleEditor = page.locator("#editor2") -// await expect(exampleEditor).toHaveAttribute('data-ide-id', "2") -// await expect(exampleEditor).toHaveAttribute('data-mode-id', "json") -// await expect(exampleEditor).toHaveClass("editor active") + const exampleTab = page.locator("#tab").nth(1) + await expect(exampleTab).toHaveAttribute('data-tab-id', "2") + await expect(exampleTab).toHaveText("TMLamp ThingCloseCancel") + await expect(exampleTab).toHaveClass("active") -// const openAPIView = page.locator('#open-api-view') -// const consoleError = page.locator('#console-error') -// const openAPITab = page.locator("#open-api-tab") + const openAPIView = page.locator('#open-api-view') + const consoleError = page.locator('#console-error') + const openAPITab = page.locator("#open-api-tab") -// 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 }) + 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 }) -// await openAPITab.click() + await openAPITab.click() -// await expect(openAPITab).toBeChecked({ checked: true }) -// await expect(openAPIView).toHaveClass("console-view open-api-view") -// await expect(consoleError).toHaveClass("console-view console-error hidden") + await expect(openAPITab).toBeChecked({ checked: true }) + await expect(openAPIView).toHaveClass("console-view open-api-view hidden") + await expect(page.locator(".console-error__txt")).toHaveText("This function is only allowed for Thing Descriptions!") -// const openAPIEditor = page.locator('#open-api-container') + }) -// await expect(openAPIEditor).toHaveAttribute('data-mode-id', "json") + test("Open the OpenAPI view with the 'Basic TD' example", async ({ page }) => { + await page.locator("#examples-btn").click() -// const openAPIJsonBtn = page.locator('#open-api-json') -// const openAPIYamlBtn = page.locator('#open-api-yaml') + const quickAccessBtn = page.locator(".example").filter({ hasText: 'Basic TD' }).getByRole("button").nth(0) + await quickAccessBtn.click() -// await expect(openAPIJsonBtn).toBeDisabled() + const exampleTab = page.locator("#tab").nth(1) + await expect(exampleTab).toHaveAttribute('data-tab-id', "2") + await expect(exampleTab).toHaveText("TDMyLampThingCloseCancel") + await expect(exampleTab).toHaveClass("active") -// await openAPIYamlBtn.click() + const exampleEditor = page.locator("#editor2") + await expect(exampleEditor).toHaveAttribute('data-ide-id', "2") + await expect(exampleEditor).toHaveAttribute('data-mode-id', "json") + await expect(exampleEditor).toHaveClass("editor active") -// await expect(openAPIEditor).toHaveAttribute('data-mode-id', "yaml") -// await expect(openAPIYamlBtn).toBeDisabled() + const openAPIView = page.locator('#open-api-view') + const consoleError = page.locator('#console-error') + const openAPITab = page.locator("#open-api-tab") -// const openAPIContainer = openAPIEditor.getByRole('code').locator('div').filter({ hasText: 'openapi: 3.0.3' }).nth(4) -// await expect(openAPIContainer).toHaveText('openapi: 3.0.3') + 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 }) -// // Start waiting for download before clicking. -// const openAPIDownload = page.locator('#open-api-download') -// const downloadPromise = page.waitForEvent('download') -// await openAPIDownload.click() -// const download = await downloadPromise -// const expectedFilename = 'MyLampThing-OpenAPI.yaml' -// expect(download.suggestedFilename()).toBe(expectedFilename) -// }) -// }) + await openAPITab.click() -// test.describe("AsyncAPI view functionality", () => { -// test("Trying to open the AsyncAPI view with a TD with no protocols", async ({ page }) => { + await expect(openAPITab).toBeChecked({ checked: true }) + await expect(openAPIView).toHaveClass("console-view open-api-view") + await expect(consoleError).toHaveClass("console-view console-error hidden") -// 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 openAPIEditor = page.locator('#open-api-container') + const openAPIContainer = openAPIEditor.getByRole('code').locator('div').filter({ hasText: '"openapi": "3.0.3",' }).nth(4) -// const AsyncAPIView = page.locator('#async-api-view') -// const consoleError = page.locator('#console-error') -// const AsyncAPITab = page.locator("#async-api-tab") + await expect(openAPIEditor).toHaveAttribute('data-mode-id', "json") + await expect(openAPIContainer).toHaveText('\"openapi\": \"3.0.3\",') -// 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 }) + const openAPIJsonBtn = page.locator('#open-api-json') -// await AsyncAPITab.click() + await expect(openAPIJsonBtn).toBeDisabled() -// 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!") -// }) + }) -// test("Trying to open the AsyncAPI view with a TM", async ({ page }) => { + test("Open the OpenAPI view with the 'Basic TD' example as YAML", async ({ page }) => { -// await page.locator("#examples-btn").click() + await page.locator("#examples-btn").click() -// const thingTypeToggle = page.locator('#thing-type-btn') -// await thingTypeToggle.click() -// await expect(thingTypeToggle).toBeChecked({ checked: true }) + const quickAccessBtn = page.locator(".example").filter({ hasText: 'Basic TD' }).getByRole("button").nth(0) + await quickAccessBtn.click() -// const quickAccessBtn = page.locator(".example").filter({ hasText: 'Basic TM' }).nth(1).getByRole("button").nth(0) -// await quickAccessBtn.click() + const exampleTab = page.locator("#tab").nth(1) + await expect(exampleTab).toHaveAttribute('data-tab-id', "2") + await expect(exampleTab).toHaveText("TDMyLampThingCloseCancel") + await expect(exampleTab).toHaveClass("active") -// const exampleTab = page.locator("#tab").nth(1) -// await expect(exampleTab).toHaveAttribute('data-tab-id', "2") -// await expect(exampleTab).toHaveText("TMLamp ThingCloseCancel") -// await expect(exampleTab).toHaveClass("active") + const exampleEditor = page.locator("#editor2") + await expect(exampleEditor).toHaveAttribute('data-ide-id', "2") + await expect(exampleEditor).toHaveAttribute('data-mode-id', "json") + await expect(exampleEditor).toHaveClass("editor active") -// const AsyncAPIView = page.locator('#async-api-view') -// const consoleError = page.locator('#console-error') -// const AsyncAPITab = page.locator("#async-api-tab") -// 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 }) + const jsonYamlPopup = page.locator('.json-yaml-warning') + await expect(jsonYamlPopup).toHaveClass("json-yaml-warning closed") -// await AsyncAPITab.click() + const jsonBtn = page.locator('#file-type-json') + const yamlBtn = page.locator('#file-type-yaml') -// await expect(AsyncAPITab).toBeChecked({ checked: true }) -// await expect(AsyncAPIView).toHaveClass("console-view async-api-view hidden") -// await expect(page.locator(".console-error__txt")).toHaveText("This function is only allowed for Thing Descriptions!") + await expect(jsonBtn).toBeChecked({ checked: true }) + await expect(yamlBtn).toBeChecked({ checked: false }) -// }) + await yamlBtn.click() + await expect(jsonYamlPopup).toHaveClass("json-yaml-warning") -// /** -// * TODO: Do to a lack of examples that include the mqtt protocol this cannot be tested, nonetheless once -// * TODO: this is added the code below should sufice with minimal adjustments -// test("Open the AsyncAPI view with the '---' example", async ({ page }) => { -// await page.locator("#examples-btn").click() + await page.locator('#yaml-confirm-btn').click() + await expect(jsonYamlPopup).toHaveClass("json-yaml-warning closed") + await expect(exampleEditor).toHaveAttribute('data-mode-id', "yaml") + await expect(jsonBtn).toBeChecked({ checked: false }) + await expect(yamlBtn).toBeChecked({ checked: true }) -// const quickAccessBtn = page.locator(".example").filter({ hasText: '---' }).getByRole("button").nth(0) -// await quickAccessBtn.click() + const openAPIView = page.locator('#open-api-view') + const consoleError = page.locator('#console-error') + const openAPITab = page.locator("#open-api-tab") -// const exampleTab = page.locator("#tab").nth(1) -// await expect(exampleTab).toHaveAttribute('data-tab-id', "2") -// await expect(exampleTab).toHaveText("TD---CloseCancel") -// await expect(exampleTab).toHaveClass("active") + 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 }) -// const exampleEditor = page.locator("#editor2") -// await expect(exampleEditor).toHaveAttribute('data-ide-id', "2") -// await expect(exampleEditor).toHaveAttribute('data-mode-id', "json") -// await expect(exampleEditor).toHaveClass("editor active") + await openAPITab.click() -// const AsyncAPIView = page.locator('#async-api-view') -// const consoleError = page.locator('#console-error') -// const AsyncAPITab = page.locator("#async-api-tab") + await expect(openAPITab).toBeChecked({ checked: true }) + await expect(openAPIView).toHaveClass("console-view open-api-view") + await expect(consoleError).toHaveClass("console-view console-error hidden") -// 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 }) + const openAPIEditor = page.locator('#open-api-container') + const openAPIContainer = openAPIEditor.getByRole('code').locator('div').filter({ hasText: 'openapi: "3.0.3"' }).nth(4) -// await AsyncAPITab.click() + await expect(openAPIEditor).toHaveAttribute('data-mode-id', "yaml") + await expect(openAPIContainer).toHaveText('openapi: "3.0.3"') -// await expect(AsyncAPITab).toBeChecked({ checked: true }) -// await expect(AsyncAPIView).toHaveClass("console-view async-api-view") -// await expect(consoleError).toHaveClass("console-view console-error hidden") + const openAPIYamlBtn = page.locator('#open-api-yaml') + await expect(openAPIYamlBtn).toBeDisabled() -// const AsyncAPIEditor = page.locator('#async-api-container') -// const AsyncAPIContainer = AsyncAPIEditor.getByRole('code').locator('div').filter({ hasText: '"asyncapi": "2.0.0",' }).nth(4) + }) -// await expect(AsyncAPIEditor).toHaveAttribute('data-mode-id', "json") -// await expect(AsyncAPIContainer).toHaveText('"asyncapi": "2.0.0",') + test("Open the OpenAPI view and change form JSON to YAML and from YAML to JSON", async ({ page }) => { + await page.locator("#examples-btn").click() -// const AsyncAPIJsonBtn = page.locator('#async-api-json') + const quickAccessBtn = page.locator(".example").filter({ hasText: 'Basic TD' }).getByRole("button").nth(0) + await quickAccessBtn.click() -// await expect(AsyncAPIJsonBtn).toBeDisabled() + const exampleTab = page.locator("#tab").nth(1) + await expect(exampleTab).toHaveAttribute('data-tab-id', "2") + await expect(exampleTab).toHaveText("TDMyLampThingCloseCancel") + await expect(exampleTab).toHaveClass("active") -// }) + const exampleEditor = page.locator("#editor2") + await expect(exampleEditor).toHaveAttribute('data-ide-id', "2") + await expect(exampleEditor).toHaveAttribute('data-mode-id', "json") + await expect(exampleEditor).toHaveClass("editor active") -// test("Open the AsyncAPI view with the '---' example as YAML", async ({ page }) => { + const openAPIView = page.locator('#open-api-view') + const consoleError = page.locator('#console-error') + const openAPITab = page.locator("#open-api-tab") -// await page.locator("#examples-btn").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 }) -// const quickAccessBtn = page.locator(".example").filter({ hasText: '---' }).getByRole("button").nth(0) -// await quickAccessBtn.click() + await openAPITab.click() -// const exampleTab = page.locator("#tab").nth(1) -// await expect(exampleTab).toHaveAttribute('data-tab-id', "2") -// await expect(exampleTab).toHaveText("TD---CloseCancel") -// await expect(exampleTab).toHaveClass("active") + await expect(openAPITab).toBeChecked({ checked: true }) + await expect(openAPIView).toHaveClass("console-view open-api-view") + await expect(consoleError).toHaveClass("console-view console-error hidden") -// const exampleEditor = page.locator("#editor2") -// await expect(exampleEditor).toHaveAttribute('data-ide-id', "2") -// await expect(exampleEditor).toHaveAttribute('data-mode-id', "json") -// await expect(exampleEditor).toHaveClass("editor active") + const openAPIEditor = page.locator('#open-api-container') + await expect(openAPIEditor).toHaveAttribute('data-mode-id', "json") -// const jsonYamlPopup = page.locator('.json-yaml-warning') -// await expect(jsonYamlPopup).toHaveClass("json-yaml-warning closed") + const openAPIJsonBtn = page.locator('#open-api-json') + const openAPIYamlBtn = page.locator('#open-api-yaml') -// const jsonBtn = page.locator('#file-type-json') -// const yamlBtn = page.locator('#file-type-yaml') + await expect(openAPIJsonBtn).toBeDisabled() -// await expect(jsonBtn).toBeChecked({ checked: true }) -// await expect(yamlBtn).toBeChecked({ checked: false }) + await openAPIYamlBtn.click() -// await yamlBtn.click() -// await expect(jsonYamlPopup).toHaveClass("json-yaml-warning") + await expect(openAPIEditor).toHaveAttribute('data-mode-id', "yaml") + await expect(openAPIYamlBtn).toBeDisabled() -// await page.locator('#yaml-confirm-btn').click() -// await expect(jsonYamlPopup).toHaveClass("json-yaml-warning closed") -// await expect(exampleEditor).toHaveAttribute('data-mode-id', "yaml") -// await expect(jsonBtn).toBeChecked({ checked: false }) -// await expect(yamlBtn).toBeChecked({ checked: true }) + await openAPIJsonBtn.click() -// const AsyncAPIView = page.locator('#async-api-view') -// const consoleError = page.locator('#console-error') -// const AsyncAPITab = page.locator("#async-api-tab") + await expect(openAPIEditor).toHaveAttribute('data-mode-id', "json") + await expect(openAPIJsonBtn).toBeDisabled() + }) -// 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("Open the OpenAPI view and downloading it as JSON", async ({ page }) => { + await page.locator("#examples-btn").click() -// await AsyncAPITab.click() + const quickAccessBtn = page.locator(".example").filter({ hasText: 'Basic TD' }).getByRole("button").nth(0) + await quickAccessBtn.click() -// await expect(AsyncAPITab).toBeChecked({ checked: true }) -// await expect(AsyncAPIView).toHaveClass("console-view async-api-view") -// await expect(consoleError).toHaveClass("console-view console-error hidden") + const exampleTab = page.locator("#tab").nth(1) + await expect(exampleTab).toHaveAttribute('data-tab-id', "2") + await expect(exampleTab).toHaveText("TDMyLampThingCloseCancel") + await expect(exampleTab).toHaveClass("active") -// const AsyncAPIEditor = page.locator('#async-api-container') -// const AsyncAPIContainer = AsyncAPIEditor.getByRole('code').locator('div').filter({ hasText: 'asyncapi: 2.0.0' }).nth(4) + const exampleEditor = page.locator("#editor2") + await expect(exampleEditor).toHaveAttribute('data-ide-id', "2") + await expect(exampleEditor).toHaveAttribute('data-mode-id', "json") + await expect(exampleEditor).toHaveClass("editor active") -// await expect(AsyncAPIEditor).toHaveAttribute('data-mode-id', "yaml") -// await expect(AsyncAPIContainer).toHaveText('asyncapi: 2.0.0') + const openAPIView = page.locator('#open-api-view') + const consoleError = page.locator('#console-error') + const openAPITab = page.locator("#open-api-tab") -// const AsyncAPIYamlBtn = page.locator('#async-api-yaml') -// await expect(AsyncAPIYamlBtn).toBeDisabled() + 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 }) -// }) + await openAPITab.click() -// test("Open the AsyncAPI view and change form JSON to YAML and from YAML to JSON", async ({ page }) => { -// await page.locator("#examples-btn").click() + await expect(openAPITab).toBeChecked({ checked: true }) + await expect(openAPIView).toHaveClass("console-view open-api-view") + await expect(consoleError).toHaveClass("console-view console-error hidden") -// const quickAccessBtn = page.locator(".example").filter({ hasText: '---' }).getByRole("button").nth(0) -// await quickAccessBtn.click() + const openAPIEditor = page.locator('#open-api-container') + const openAPIContainer = openAPIEditor.getByRole('code').locator('div').filter({ hasText: '"openapi": "3.0.3",' }).nth(4) -// const exampleTab = page.locator("#tab").nth(1) -// await expect(exampleTab).toHaveAttribute('data-tab-id', "2") -// await expect(exampleTab).toHaveText("TD---CloseCancel") -// await expect(exampleTab).toHaveClass("active") + await expect(openAPIEditor).toHaveAttribute('data-mode-id', "json") + await expect(openAPIContainer).toHaveText('\"openapi\": \"3.0.3\",') -// const exampleEditor = page.locator("#editor2") -// await expect(exampleEditor).toHaveAttribute('data-ide-id', "2") -// await expect(exampleEditor).toHaveAttribute('data-mode-id', "json") -// await expect(exampleEditor).toHaveClass("editor active") + const openAPIJsonBtn = page.locator('#open-api-json') + await expect(openAPIJsonBtn).toBeDisabled() -// const AsyncAPIView = page.locator('#async-api-view') -// const consoleError = page.locator('#console-error') -// const AsyncAPITab = page.locator("#async-api-tab") + // Start waiting for download before clicking. + const openAPIDownload = page.locator('#open-api-download') + const downloadPromise = page.waitForEvent('download') + await openAPIDownload.click() + const download = await downloadPromise + const expectedFilename = 'MyLampThing-OpenAPI.json' + expect(download.suggestedFilename()).toBe(expectedFilename) + }) -// 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("Open the OpenAPI view and downloading it as YAML", async ({ page }) => { + await page.locator("#examples-btn").click() -// await AsyncAPITab.click() + const quickAccessBtn = page.locator(".example").filter({ hasText: 'Basic TD' }).getByRole("button").nth(0) + await quickAccessBtn.click() -// await expect(AsyncAPITab).toBeChecked({ checked: true }) -// await expect(AsyncAPIView).toHaveClass("console-view async-api-view") -// await expect(consoleError).toHaveClass("console-view console-error hidden") + const exampleTab = page.locator("#tab").nth(1) + await expect(exampleTab).toHaveAttribute('data-tab-id', "2") + await expect(exampleTab).toHaveText("TDMyLampThingCloseCancel") + await expect(exampleTab).toHaveClass("active") -// const AsyncAPIEditor = page.locator('#async-api-container') + const exampleEditor = page.locator("#editor2") + await expect(exampleEditor).toHaveAttribute('data-ide-id', "2") + await expect(exampleEditor).toHaveAttribute('data-mode-id', "json") + await expect(exampleEditor).toHaveClass("editor active") -// await expect(AsyncAPIEditor).toHaveAttribute('data-mode-id', "json") + const openAPIView = page.locator('#open-api-view') + const consoleError = page.locator('#console-error') + const openAPITab = page.locator("#open-api-tab") -// const AsyncAPIJsonBtn = page.locator('#async-api-json') -// const AsyncAPIYamlBtn = page.locator('#async-api-yaml') + 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 }) -// await expect(AsyncAPIJsonBtn).toBeDisabled() + await openAPITab.click() -// await AsyncAPIYamlBtn.click() + await expect(openAPITab).toBeChecked({ checked: true }) + await expect(openAPIView).toHaveClass("console-view open-api-view") + await expect(consoleError).toHaveClass("console-view console-error hidden") -// await expect(AsyncAPIEditor).toHaveAttribute('data-mode-id', "yaml") -// await expect(AsyncAPIYamlBtn).toBeDisabled() + const openAPIEditor = page.locator('#open-api-container') -// await AsyncAPIJsonBtn.click() + await expect(openAPIEditor).toHaveAttribute('data-mode-id', "json") -// await expect(AsyncAPIEditor).toHaveAttribute('data-mode-id', "json") -// await expect(AsyncAPIJsonBtn).toBeDisabled() -// }) + const openAPIJsonBtn = page.locator('#open-api-json') + const openAPIYamlBtn = page.locator('#open-api-yaml') -// test("Open the AsyncAPI view and downloading it as JSON", async ({ page }) => { -// await page.locator("#examples-btn").click() + await expect(openAPIJsonBtn).toBeDisabled() -// const quickAccessBtn = page.locator(".example").filter({ hasText: '---' }).getByRole("button").nth(0) -// await quickAccessBtn.click() + await openAPIYamlBtn.click() -// const exampleTab = page.locator("#tab").nth(1) -// await expect(exampleTab).toHaveAttribute('data-tab-id', "2") -// await expect(exampleTab).toHaveText("TD---CloseCancel") -// await expect(exampleTab).toHaveClass("active") + await expect(openAPIEditor).toHaveAttribute('data-mode-id', "yaml") + await expect(openAPIYamlBtn).toBeDisabled() -// const exampleEditor = page.locator("#editor2") -// await expect(exampleEditor).toHaveAttribute('data-ide-id', "2") -// await expect(exampleEditor).toHaveAttribute('data-mode-id', "json") -// await expect(exampleEditor).toHaveClass("editor active") + const openAPIContainer = openAPIEditor.getByRole('code').locator('div').filter({ hasText: 'openapi: 3.0.3' }).nth(4) + await expect(openAPIContainer).toHaveText('openapi: 3.0.3') -// const AsyncAPIView = page.locator('#async-api-view') -// const consoleError = page.locator('#console-error') -// const AsyncAPITab = page.locator("#async-api-tab") + // Start waiting for download before clicking. + const openAPIDownload = page.locator('#open-api-download') + const downloadPromise = page.waitForEvent('download') + await openAPIDownload.click() + const download = await downloadPromise + const expectedFilename = 'MyLampThing-OpenAPI.yaml' + expect(download.suggestedFilename()).toBe(expectedFilename) + }) +}) -// 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.describe("AsyncAPI view functionality", () => { + test("Trying to open the AsyncAPI view with a TD with no protocols", async ({ page }) => { -// await AsyncAPITab.click() + 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") -// await expect(AsyncAPITab).toBeChecked({ checked: true }) -// await expect(AsyncAPIView).toHaveClass("console-view async-api-view") -// await expect(consoleError).toHaveClass("console-view console-error hidden") + const AsyncAPIView = page.locator('#async-api-view') + const consoleError = page.locator('#console-error') + const AsyncAPITab = page.locator("#async-api-tab") -// const AsyncAPIEditor = page.locator('#async-api-container') -// const AsyncAPIContainer = AsyncAPIEditor.getByRole('code').locator('div').filter({ hasText: '"asyncapi": "2.0.0",' }).nth(4) + 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 }) -// await expect(AsyncAPIEditor).toHaveAttribute('data-mode-id', "json") -// await expect(AsyncAPIContainer).toHaveText('\"asyncapi\": \"2.0.0\",') + await AsyncAPITab.click() -// const AsyncAPIJsonBtn = page.locator('#async-api-json') -// await expect(AsyncAPIJsonBtn).toBeDisabled() + 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!") + }) -// // Start waiting for download before clicking. -// const AsyncAPIDownload = page.locator('#async-api-download') -// const downloadPromise = page.waitForEvent('download') -// await AsyncAPIDownload.click() -// const download = await downloadPromise -// const expectedFilename = 'MyLampThing-AsyncAPI.json' -// expect(download.suggestedFilename()).toBe(expectedFilename) -// }) + test("Trying to open the AsyncAPI view with a TM", async ({ page }) => { -// test("Open the AsyncAPI view and downloading it as YAML", async ({ page }) => { -// await page.locator("#examples-btn").click() + await page.locator("#examples-btn").click() -// const quickAccessBtn = page.locator(".example").filter({ hasText: '---' }).getByRole("button").nth(0) -// await quickAccessBtn.click() + const thingTypeToggle = page.locator('#thing-type-btn') + await thingTypeToggle.click() + await expect(thingTypeToggle).toBeChecked({ checked: true }) -// const exampleTab = page.locator("#tab").nth(1) -// await expect(exampleTab).toHaveAttribute('data-tab-id', "2") -// await expect(exampleTab).toHaveText("TD---CloseCancel") -// await expect(exampleTab).toHaveClass("active") + const quickAccessBtn = page.locator(".example").filter({ hasText: 'Basic TM' }).nth(1).getByRole("button").nth(0) + await quickAccessBtn.click() -// const exampleEditor = page.locator("#editor2") -// await expect(exampleEditor).toHaveAttribute('data-ide-id', "2") -// await expect(exampleEditor).toHaveAttribute('data-mode-id', "json") -// await expect(exampleEditor).toHaveClass("editor active") + const exampleTab = page.locator("#tab").nth(1) + await expect(exampleTab).toHaveAttribute('data-tab-id', "2") + await expect(exampleTab).toHaveText("TMLamp ThingCloseCancel") + await expect(exampleTab).toHaveClass("active") -// const AsyncAPIView = page.locator('#async-api-view') -// const consoleError = page.locator('#console-error') -// const AsyncAPITab = page.locator("#async-api-tab") + const AsyncAPIView = page.locator('#async-api-view') + const consoleError = page.locator('#console-error') + const AsyncAPITab = page.locator("#async-api-tab") -// 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 }) + 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 }) -// await AsyncAPITab.click() + await AsyncAPITab.click() -// await expect(AsyncAPITab).toBeChecked({ checked: true }) -// await expect(AsyncAPIView).toHaveClass("console-view async-api-view") -// await expect(consoleError).toHaveClass("console-view console-error hidden") + await expect(AsyncAPITab).toBeChecked({ checked: true }) + await expect(AsyncAPIView).toHaveClass("console-view async-api-view hidden") + await expect(page.locator(".console-error__txt")).toHaveText("This function is only allowed for Thing Descriptions!") -// const AsyncAPIEditor = page.locator('#async-api-container') + }) +}) -// await expect(AsyncAPIEditor).toHaveAttribute('data-mode-id', "json") -// const AsyncAPIJsonBtn = page.locator('#async-api-json') -// const AsyncAPIYamlBtn = page.locator('#async-api-yaml') +test.describe("AAS AID view functionality", () => { -// await expect(AsyncAPIJsonBtn).toBeDisabled() + test("Trying to open the AAS view with a TM", async ({ page }) => { -// await AsyncAPIYamlBtn.click() + await page.locator("#examples-btn").click() -// await expect(AsyncAPIEditor).toHaveAttribute('data-mode-id', "yaml") -// await expect(AsyncAPIYamlBtn).toBeDisabled() + const thingTypeToggle = page.locator('#thing-type-btn') + await thingTypeToggle.click() + await expect(thingTypeToggle).toBeChecked({ checked: true }) -// const AsyncAPIContainer = AsyncAPIEditor.getByRole('code').locator('div').filter({ hasText: 'asyncapi: 2.0.0' }).nth(4) -// await expect(AsyncAPIContainer).toHaveText('asyncapi: 2.0.0') + const quickAccessBtn = page.locator(".example").filter({ hasText: 'Basic TM' }).nth(1).getByRole("button").nth(0) + await quickAccessBtn.click() -// // Start waiting for download before clicking. -// const AsyncAPIDownload = page.locator('#async-api-download') -// const downloadPromise = page.waitForEvent('download') -// await AsyncAPIDownload.click() -// const download = await downloadPromise -// const expectedFilename = 'MyLampThing-AsyncAPI.yaml' -// expect(download.suggestedFilename()).toBe(expectedFilename) -// }) -// */ -// }) + const exampleTab = page.locator("#tab").nth(1) + await expect(exampleTab).toHaveAttribute('data-tab-id', "2") + await expect(exampleTab).toHaveText("TMLamp ThingCloseCancel") + await expect(exampleTab).toHaveClass("active") + const AASView = page.locator('#aas-view') + const consoleError = page.locator('#console-error') + const AASTab = page.locator("#aas-tab") -// test.describe("AAS AID view functionality", () => { + 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 }) => { + await AASTab.click() -// await page.locator("#examples-btn").click() + await expect(AASTab).toBeChecked({ checked: true }) + await expect(AASView).toHaveClass("console-view aas-view hidden") + await expect(page.locator(".console-error__txt")).toHaveText("This function is only allowed for Thing Descriptions!") -// const thingTypeToggle = page.locator('#thing-type-btn') -// await thingTypeToggle.click() -// await expect(thingTypeToggle).toBeChecked({ checked: true }) + }) -// const quickAccessBtn = page.locator(".example").filter({ hasText: 'Basic TM' }).nth(1).getByRole("button").nth(0) -// await quickAccessBtn.click() + test("Open the AAS AID view with the 'Basic TD' example", async ({ page }) => { + await page.locator("#examples-btn").click() -// const exampleTab = page.locator("#tab").nth(1) -// await expect(exampleTab).toHaveAttribute('data-tab-id', "2") -// await expect(exampleTab).toHaveText("TMLamp ThingCloseCancel") -// await expect(exampleTab).toHaveClass("active") + const quickAccessBtn = page.locator(".example").filter({ hasText: 'Basic TD' }).getByRole("button").nth(0) + await quickAccessBtn.click() -// const AASView = page.locator('#aas-view') -// const consoleError = page.locator('#console-error') -// const AASTab = page.locator("#aas-tab") + const exampleTab = page.locator("#tab").nth(1) + await expect(exampleTab).toHaveAttribute('data-tab-id', "2") + await expect(exampleTab).toHaveText("TDMyLampThingCloseCancel") + await expect(exampleTab).toHaveClass("active") -// await expect(AASView).toHaveClass("console-view aas-view hidden") -// await expect(consoleError).toHaveClass("console-view console-error hidden") -// await expect(AASTab).toBeChecked({ checked: false }) + const exampleEditor = page.locator("#editor2") + await expect(exampleEditor).toHaveAttribute('data-ide-id', "2") + await expect(exampleEditor).toHaveAttribute('data-mode-id', "json") + await expect(exampleEditor).toHaveClass("editor active") -// await AASTab.click() + const AASView = page.locator('#aas-view') + const consoleError = page.locator('#console-error') + const AASTab = page.locator("#aas-tab") -// await expect(AASTab).toBeChecked({ checked: true }) -// await expect(AASView).toHaveClass("console-view aas-view hidden") -// await expect(page.locator(".console-error__txt")).toHaveText("This function is only allowed for Thing Descriptions!") + 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() -// test("Open the AAS AID view with the 'Basic TD' example", async ({ page }) => { -// await page.locator("#examples-btn").click() + await expect(AASTab).toBeChecked({ checked: true }) + await expect(AASView).toHaveClass("console-view aas-view") + await expect(consoleError).toHaveClass("console-view console-error hidden") -// const quickAccessBtn = page.locator(".example").filter({ hasText: 'Basic TD' }).getByRole("button").nth(0) -// await quickAccessBtn.click() + const ASSEditor = page.locator('#aas-container') + const ASSContainer = ASSEditor.getByRole('code').locator('div').filter({ hasText: '"idShort": "AssetInterfacesDescription",' }).nth(4) -// const exampleTab = page.locator("#tab").nth(1) -// await expect(exampleTab).toHaveAttribute('data-tab-id', "2") -// await expect(exampleTab).toHaveText("TDMyLampThingCloseCancel") -// await expect(exampleTab).toHaveClass("active") + await expect(ASSEditor).toHaveAttribute('data-mode-id', "json") + await expect(ASSContainer).toHaveText('"idShort": "AssetInterfacesDescription",') -// const exampleEditor = page.locator("#editor2") -// await expect(exampleEditor).toHaveAttribute('data-ide-id', "2") -// await expect(exampleEditor).toHaveAttribute('data-mode-id', "json") -// await expect(exampleEditor).toHaveClass("editor active") + }) -// const AASView = page.locator('#aas-view') -// const consoleError = page.locator('#console-error') -// const AASTab = page.locator("#aas-tab") + test("Open the AAS AID view with the 'Basic TD' example and downloading it", async ({ page }) => { + await page.locator("#examples-btn").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 }) + const quickAccessBtn = page.locator(".example").filter({ hasText: 'Basic TD' }).getByRole("button").nth(0) + await quickAccessBtn.click() -// await AASTab.click() + const exampleTab = page.locator("#tab").nth(1) + await expect(exampleTab).toHaveAttribute('data-tab-id', "2") + await expect(exampleTab).toHaveText("TDMyLampThingCloseCancel") + await expect(exampleTab).toHaveClass("active") -// await expect(AASTab).toBeChecked({ checked: true }) -// await expect(AASView).toHaveClass("console-view aas-view") -// await expect(consoleError).toHaveClass("console-view console-error hidden") + const exampleEditor = page.locator("#editor2") + await expect(exampleEditor).toHaveAttribute('data-ide-id', "2") + await expect(exampleEditor).toHaveAttribute('data-mode-id', "json") + await expect(exampleEditor).toHaveClass("editor active") -// const ASSEditor = page.locator('#aas-container') -// const ASSContainer = ASSEditor.getByRole('code').locator('div').filter({ hasText: '"idShort": "AssetInterfacesDescription",' }).nth(4) + const AASView = page.locator('#aas-view') + const consoleError = page.locator('#console-error') + const AASTab = page.locator("#aas-tab") -// await expect(ASSEditor).toHaveAttribute('data-mode-id', "json") -// await expect(ASSContainer).toHaveText('"idShort": "AssetInterfacesDescription",') + 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() -// test("Open the AAS AID view with the 'Basic TD' example and downloading it", async ({ page }) => { -// await page.locator("#examples-btn").click() + await expect(AASTab).toBeChecked({ checked: true }) + await expect(AASView).toHaveClass("console-view aas-view") + await expect(consoleError).toHaveClass("console-view console-error hidden") -// const quickAccessBtn = page.locator(".example").filter({ hasText: 'Basic TD' }).getByRole("button").nth(0) -// await quickAccessBtn.click() + const ASSEditor = page.locator('#aas-container') + const ASSContainer = ASSEditor.getByRole('code').locator('div').filter({ hasText: '"idShort": "AssetInterfacesDescription",' }).nth(4) -// const exampleTab = page.locator("#tab").nth(1) -// await expect(exampleTab).toHaveAttribute('data-tab-id', "2") -// await expect(exampleTab).toHaveText("TDMyLampThingCloseCancel") -// await expect(exampleTab).toHaveClass("active") + await expect(ASSEditor).toHaveAttribute('data-mode-id', "json") + await expect(ASSContainer).toHaveText('"idShort": "AssetInterfacesDescription",') -// const exampleEditor = page.locator("#editor2") -// await expect(exampleEditor).toHaveAttribute('data-ide-id', "2") -// await expect(exampleEditor).toHaveAttribute('data-mode-id', "json") -// await expect(exampleEditor).toHaveClass("editor active") + // Start waiting for download before clicking. + const AASDownload = page.locator('#aas-download') + const downloadPromise = page.waitForEvent('download') + await AASDownload.click() + const download = await downloadPromise + const expectedFilename = 'MyLampThing-AAS.json' + expect(download.suggestedFilename()).toBe(expectedFilename) + }) +}) -// const AASView = page.locator('#aas-view') -// const consoleError = page.locator('#console-error') -// const AASTab = page.locator("#aas-tab") +test.describe("Defaults view functionality", () => { + test("Opening the Defaults view with the Thing Template", async ({ page }) => { -// await expect(AASView).toHaveClass("console-view aas-view hidden") -// await expect(consoleError).toHaveClass("console-view console-error hidden") -// await expect(AASTab).toBeChecked({ checked: false }) + 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") -// await AASTab.click() + const DefaultsView = page.locator('#defaults-view') + const consoleError = page.locator('#console-error') + const DefaultsTab = page.locator("#defaults-tab") -// await expect(AASTab).toBeChecked({ checked: true }) -// await expect(AASView).toHaveClass("console-view aas-view") -// await expect(consoleError).toHaveClass("console-view console-error hidden") + await expect(DefaultsView).toHaveClass("console-view defaults-view hidden") + await expect(consoleError).toHaveClass("console-view console-error hidden") + await expect(DefaultsTab).toBeChecked({ checked: false }) -// const ASSEditor = page.locator('#aas-container') -// const ASSContainer = ASSEditor.getByRole('code').locator('div').filter({ hasText: '"idShort": "AssetInterfacesDescription",' }).nth(4) + await DefaultsTab.click() -// await expect(ASSEditor).toHaveAttribute('data-mode-id', "json") -// await expect(ASSContainer).toHaveText('"idShort": "AssetInterfacesDescription",') + await expect(DefaultsTab).toBeChecked({ checked: true }) + await expect(DefaultsView).toHaveClass("console-view defaults-view") + await expect(consoleError).toHaveClass("console-view console-error hidden") -// // Start waiting for download before clicking. -// const AASDownload = page.locator('#aas-download') -// const downloadPromise = page.waitForEvent('download') -// await AASDownload.click() -// const download = await downloadPromise -// const expectedFilename = 'MyLampThing-AAS.json' -// expect(download.suggestedFilename()).toBe(expectedFilename) -// }) -// }) + const defaultsEditor = page.locator('#defaults-container') + const defaultsContainer = defaultsEditor.getByRole('code').locator('div').filter({ hasText: '"description": "This is your customizable template. Edit it to fit your Thing Description or Thing Model needs!",' }).nth(4) -// test.describe("Defaults view functionality", () => { -// test("Opening the Defaults view with the Thing Template", async ({ page }) => { + await expect(defaultsEditor).toHaveAttribute('data-mode-id', "json") + await expect(defaultsContainer).toHaveText('"description": "This is your customizable template. Edit it to fit your Thing Description or Thing Model needs!",') -// 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 defaultsJsonBtn = page.locator('#defaults-json') + const defaultsAddBtn = page.locator('#defaults-add') -// const DefaultsView = page.locator('#defaults-view') -// const consoleError = page.locator('#console-error') -// const DefaultsTab = page.locator("#defaults-tab") + await expect(defaultsJsonBtn).toBeDisabled() + await expect(defaultsAddBtn).toBeDisabled() + }) -// 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 }) => { -// await DefaultsTab.click() + await page.locator("#examples-btn").click() -// await expect(DefaultsTab).toBeChecked({ checked: true }) -// await expect(DefaultsView).toHaveClass("console-view defaults-view") -// await expect(consoleError).toHaveClass("console-view console-error hidden") + const thingTypeToggle = page.locator('#thing-type-btn') + await thingTypeToggle.click() + await expect(thingTypeToggle).toBeChecked({ checked: true }) -// const defaultsEditor = page.locator('#defaults-container') -// const defaultsContainer = defaultsEditor.getByRole('code').locator('div').filter({ hasText: '"description": "This is your customizable template. Edit it to fit your Thing Description or Thing Model needs!",' }).nth(4) + const quickAccessBtn = page.locator(".example").filter({ hasText: 'Basic TM' }).nth(1).getByRole("button").nth(0) + await quickAccessBtn.click() -// await expect(defaultsEditor).toHaveAttribute('data-mode-id', "json") -// await expect(defaultsContainer).toHaveText('"description": "This is your customizable template. Edit it to fit your Thing Description or Thing Model needs!",') + const exampleTab = page.locator("#tab").nth(1) + await expect(exampleTab).toHaveAttribute('data-tab-id', "2") + await expect(exampleTab).toHaveText("TMLamp ThingCloseCancel") + await expect(exampleTab).toHaveClass("active") -// const defaultsJsonBtn = page.locator('#defaults-json') -// const defaultsAddBtn = page.locator('#defaults-add') + const DefaultsView = page.locator('#defaults-view') + const consoleError = page.locator('#console-error') + const DefaultsTab = page.locator("#defaults-tab") -// await expect(defaultsJsonBtn).toBeDisabled() -// await expect(defaultsAddBtn).toBeDisabled() -// }) + 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 }) => { + await DefaultsTab.click() -// await page.locator("#examples-btn").click() + await expect(DefaultsTab).toBeChecked({ checked: true }) + await expect(DefaultsView).toHaveClass("console-view defaults-view hidden") + await expect(page.locator(".console-error__txt")).toHaveText("This function is only allowed for Thing Descriptions!") -// const thingTypeToggle = page.locator('#thing-type-btn') -// await thingTypeToggle.click() -// await expect(thingTypeToggle).toBeChecked({ checked: true }) + }) -// const quickAccessBtn = page.locator(".example").filter({ hasText: 'Basic TM' }).nth(1).getByRole("button").nth(0) -// await quickAccessBtn.click() + test("Open the Defaults view as YAML", async ({ page }) => { -// const exampleTab = page.locator("#tab").nth(1) -// await expect(exampleTab).toHaveAttribute('data-tab-id', "2") -// await expect(exampleTab).toHaveText("TMLamp ThingCloseCancel") -// await expect(exampleTab).toHaveClass("active") + const templateEditor = page.locator("#editor1") + await expect(templateEditor).toHaveAttribute('data-ide-id', "1") + await expect(templateEditor).toHaveAttribute('data-mode-id', "json") + await expect(templateEditor).toHaveClass("editor active") -// const DefaultsView = page.locator('#defaults-view') -// const consoleError = page.locator('#console-error') -// const DefaultsTab = page.locator("#defaults-tab") + const jsonYamlPopup = page.locator('.json-yaml-warning') + await expect(jsonYamlPopup).toHaveClass("json-yaml-warning closed") -// await expect(DefaultsView).toHaveClass("console-view defaults-view hidden") -// await expect(consoleError).toHaveClass("console-view console-error hidden") -// await expect(DefaultsTab).toBeChecked({ checked: false }) + const jsonBtn = page.locator('#file-type-json') + const yamlBtn = page.locator('#file-type-yaml') -// await DefaultsTab.click() + await expect(jsonBtn).toBeChecked({ checked: true }) + await expect(yamlBtn).toBeChecked({ checked: false }) -// await expect(DefaultsTab).toBeChecked({ checked: true }) -// await expect(DefaultsView).toHaveClass("console-view defaults-view hidden") -// await expect(page.locator(".console-error__txt")).toHaveText("This function is only allowed for Thing Descriptions!") + await yamlBtn.click() + await expect(jsonYamlPopup).toHaveClass("json-yaml-warning") -// }) + await page.locator('#yaml-confirm-btn').click() + await expect(jsonYamlPopup).toHaveClass("json-yaml-warning closed") + await expect(templateEditor).toHaveAttribute('data-mode-id', "yaml") + await expect(jsonBtn).toBeChecked({ checked: false }) + await expect(yamlBtn).toBeChecked({ checked: true }) -// test("Open the Defaults view as YAML", async ({ page }) => { + const defaultsView = page.locator('#defaults-view') + const consoleError = page.locator('#console-error') + const defaultsTab = page.locator("#defaults-tab") -// const templateEditor = page.locator("#editor1") -// await expect(templateEditor).toHaveAttribute('data-ide-id', "1") -// await expect(templateEditor).toHaveAttribute('data-mode-id', "json") -// await expect(templateEditor).toHaveClass("editor active") + await expect(defaultsView).toHaveClass("console-view defaults-view hidden") + await expect(consoleError).toHaveClass("console-view console-error hidden") + await expect(defaultsTab).toBeChecked({ checked: false }) -// const jsonYamlPopup = page.locator('.json-yaml-warning') -// await expect(jsonYamlPopup).toHaveClass("json-yaml-warning closed") + await defaultsTab.click() -// const jsonBtn = page.locator('#file-type-json') -// const yamlBtn = page.locator('#file-type-yaml') + await expect(defaultsTab).toBeChecked({ checked: true }) + await expect(defaultsView).toHaveClass("console-view defaults-view") + await expect(consoleError).toHaveClass("console-view console-error hidden") -// await expect(jsonBtn).toBeChecked({ checked: true }) -// await expect(yamlBtn).toBeChecked({ checked: false }) + const defaultsEditor = page.locator('#defaults-container') + const defaultsContainer = defaultsEditor.getByRole('code').locator('div').filter({ hasText: 'description: >-' }).nth(4) + await expect(defaultsEditor).toHaveAttribute('data-mode-id', "yaml") + await expect(defaultsContainer).toHaveText('description: >-') -// await yamlBtn.click() -// await expect(jsonYamlPopup).toHaveClass("json-yaml-warning") + const defaultsYamlBtn = page.locator('#defaults-yaml') + await expect(defaultsYamlBtn).toBeDisabled() + }) -// await page.locator('#yaml-confirm-btn').click() -// await expect(jsonYamlPopup).toHaveClass("json-yaml-warning closed") -// await expect(templateEditor).toHaveAttribute('data-mode-id', "yaml") -// await expect(jsonBtn).toBeChecked({ checked: false }) -// await expect(yamlBtn).toBeChecked({ checked: true }) + test("Open the Defaults view and change form JSON to YAML and from YAML to JSON", async ({ page }) => { + const templateEditor = page.locator("#editor1") + await expect(templateEditor).toHaveAttribute('data-ide-id', "1") + await expect(templateEditor).toHaveAttribute('data-mode-id', "json") + await expect(templateEditor).toHaveClass("editor active") -// const defaultsView = page.locator('#defaults-view') -// const consoleError = page.locator('#console-error') -// const defaultsTab = page.locator("#defaults-tab") + const defaultsView = page.locator('#defaults-view') + const consoleError = page.locator('#console-error') + const defaultsTab = page.locator("#defaults-tab") -// await expect(defaultsView).toHaveClass("console-view defaults-view hidden") -// await expect(consoleError).toHaveClass("console-view console-error hidden") -// await expect(defaultsTab).toBeChecked({ checked: false }) + await expect(defaultsView).toHaveClass("console-view defaults-view hidden") + await expect(consoleError).toHaveClass("console-view console-error hidden") + await expect(defaultsTab).toBeChecked({ checked: false }) -// await defaultsTab.click() + await defaultsTab.click() -// await expect(defaultsTab).toBeChecked({ checked: true }) -// await expect(defaultsView).toHaveClass("console-view defaults-view") -// await expect(consoleError).toHaveClass("console-view console-error hidden") + await expect(defaultsTab).toBeChecked({ checked: true }) + await expect(defaultsView).toHaveClass("console-view defaults-view") + await expect(consoleError).toHaveClass("console-view console-error hidden") -// const defaultsEditor = page.locator('#defaults-container') -// const defaultsContainer = defaultsEditor.getByRole('code').locator('div').filter({ hasText: 'description: >-' }).nth(4) -// await expect(defaultsEditor).toHaveAttribute('data-mode-id', "yaml") -// await expect(defaultsContainer).toHaveText('description: >-') + const defaultsEditor = page.locator('#defaults-container') -// const defaultsYamlBtn = page.locator('#defaults-yaml') -// await expect(defaultsYamlBtn).toBeDisabled() -// }) + await expect(defaultsEditor).toHaveAttribute('data-mode-id', "json") -// test("Open the Defaults view and change form JSON to YAML and from YAML to JSON", async ({ page }) => { -// const templateEditor = page.locator("#editor1") -// await expect(templateEditor).toHaveAttribute('data-ide-id', "1") -// await expect(templateEditor).toHaveAttribute('data-mode-id', "json") -// await expect(templateEditor).toHaveClass("editor active") + const defaultsJsonBtn = page.locator('#defaults-json') + const defaultsYamlBtn = page.locator('#defaults-yaml') -// const defaultsView = page.locator('#defaults-view') -// const consoleError = page.locator('#console-error') -// const defaultsTab = page.locator("#defaults-tab") + await expect(defaultsJsonBtn).toBeDisabled() -// await expect(defaultsView).toHaveClass("console-view defaults-view hidden") -// await expect(consoleError).toHaveClass("console-view console-error hidden") -// await expect(defaultsTab).toBeChecked({ checked: false }) + await defaultsYamlBtn.click() -// await defaultsTab.click() + await expect(defaultsEditor).toHaveAttribute('data-mode-id', "yaml") + await expect(defaultsYamlBtn).toBeDisabled() -// await expect(defaultsTab).toBeChecked({ checked: true }) -// await expect(defaultsView).toHaveClass("console-view defaults-view") -// await expect(consoleError).toHaveClass("console-view console-error hidden") + await defaultsJsonBtn.click() -// const defaultsEditor = page.locator('#defaults-container') + await expect(defaultsEditor).toHaveAttribute('data-mode-id', "json") + await expect(defaultsJsonBtn).toBeDisabled() + }) -// await expect(defaultsEditor).toHaveAttribute('data-mode-id', "json") + test("Open the Defaults view and removing and adding default values", async ({ page }) => { -// const defaultsJsonBtn = page.locator('#defaults-json') -// const defaultsYamlBtn = page.locator('#defaults-yaml') + const templateEditor = page.locator("#editor1") + await expect(templateEditor).toHaveAttribute('data-ide-id', "1") + await expect(templateEditor).toHaveClass("editor active") -// await expect(defaultsJsonBtn).toBeDisabled() + const defaultsView = page.locator('#defaults-view') + const consoleError = page.locator('#console-error') + const defaultsTab = page.locator("#defaults-tab") -// await defaultsYamlBtn.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 }) -// await expect(defaultsEditor).toHaveAttribute('data-mode-id', "yaml") -// await expect(defaultsYamlBtn).toBeDisabled() + await defaultsTab.click() -// await defaultsJsonBtn.click() + await expect(defaultsTab).toBeChecked({ checked: true }) + await expect(defaultsView).toHaveClass("console-view defaults-view") + await expect(consoleError).toHaveClass("console-view console-error hidden") -// await expect(defaultsEditor).toHaveAttribute('data-mode-id', "json") -// await expect(defaultsJsonBtn).toBeDisabled() -// }) + const defaultsAddBtn = page.locator('#defaults-add') + const defaultsRemoveBtn = page.locator('#defaults-remove') -// test("Open the Defaults view and removing and adding default values", async ({ page }) => { + await expect(defaultsAddBtn).toBeDisabled() -// const templateEditor = page.locator("#editor1") -// await expect(templateEditor).toHaveAttribute('data-ide-id', "1") -// await expect(templateEditor).toHaveClass("editor active") + await defaultsRemoveBtn.click() + await expect(defaultsRemoveBtn).toBeDisabled() -// const defaultsView = page.locator('#defaults-view') -// const consoleError = page.locator('#console-error') -// const defaultsTab = page.locator("#defaults-tab") + await defaultsAddBtn.click() + await expect(defaultsAddBtn).toBeDisabled() + }) -// 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("Open the Defaults view and downloading it as JSON with defaults", async ({ page }) => { -// await defaultsTab.click() + const templateEditor = page.locator("#editor1") + await expect(templateEditor).toHaveAttribute('data-ide-id', "1") + await expect(templateEditor).toHaveAttribute('data-mode-id', "json") + await expect(templateEditor).toHaveClass("editor active") -// await expect(defaultsTab).toBeChecked({ checked: true }) -// await expect(defaultsView).toHaveClass("console-view defaults-view") -// await expect(consoleError).toHaveClass("console-view console-error hidden") + const DefaultsView = page.locator('#defaults-view') + const consoleError = page.locator('#console-error') + const DefaultsTab = page.locator("#defaults-tab") -// const defaultsAddBtn = page.locator('#defaults-add') -// const defaultsRemoveBtn = page.locator('#defaults-remove') + await expect(DefaultsView).toHaveClass("console-view defaults-view hidden") + await expect(consoleError).toHaveClass("console-view console-error hidden") + await expect(DefaultsTab).toBeChecked({ checked: false }) -// await expect(defaultsAddBtn).toBeDisabled() + await DefaultsTab.click() -// await defaultsRemoveBtn.click() -// await expect(defaultsRemoveBtn).toBeDisabled() + await expect(DefaultsTab).toBeChecked({ checked: true }) + await expect(DefaultsView).toHaveClass("console-view defaults-view") + await expect(consoleError).toHaveClass("console-view console-error hidden") -// await defaultsAddBtn.click() -// await expect(defaultsAddBtn).toBeDisabled() -// }) + const defaultsEditor = page.locator('#defaults-container') + await expect(defaultsEditor).toHaveAttribute('data-mode-id', "json") -// test("Open the Defaults view and downloading it as JSON with defaults", async ({ page }) => { + const DefaultsJsonBtn = page.locator('#defaults-json') + await expect(DefaultsJsonBtn).toBeDisabled() -// const templateEditor = page.locator("#editor1") -// await expect(templateEditor).toHaveAttribute('data-ide-id', "1") -// await expect(templateEditor).toHaveAttribute('data-mode-id', "json") -// await expect(templateEditor).toHaveClass("editor active") + // Start waiting for download before clicking. + const DefaultsDownload = page.locator('#defaults-download') + const downloadPromise = page.waitForEvent('download') + await DefaultsDownload.click() + const download = await downloadPromise + const expectedFilename = 'Thing-Template-with-Defaults.json' + expect(download.suggestedFilename()).toBe(expectedFilename) + }) -// const DefaultsView = page.locator('#defaults-view') -// const consoleError = page.locator('#console-error') -// const DefaultsTab = page.locator("#defaults-tab") + test("Open the OpenAPI view and downloading it as YAML", async ({ page }) => { + const templateEditor = page.locator("#editor1") + await expect(templateEditor).toHaveAttribute('data-ide-id', "1") + await expect(templateEditor).toHaveAttribute('data-mode-id', "json") + await expect(templateEditor).toHaveClass("editor active") -// await expect(DefaultsView).toHaveClass("console-view defaults-view hidden") -// await expect(consoleError).toHaveClass("console-view console-error hidden") -// await expect(DefaultsTab).toBeChecked({ checked: false }) + const DefaultsView = page.locator('#defaults-view') + const consoleError = page.locator('#console-error') + const DefaultsTab = page.locator("#defaults-tab") -// await DefaultsTab.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 }) -// await expect(DefaultsTab).toBeChecked({ checked: true }) -// await expect(DefaultsView).toHaveClass("console-view defaults-view") -// await expect(consoleError).toHaveClass("console-view console-error hidden") + await DefaultsTab.click() -// const defaultsEditor = page.locator('#defaults-container') -// await expect(defaultsEditor).toHaveAttribute('data-mode-id', "json") + await expect(DefaultsTab).toBeChecked({ checked: true }) + await expect(DefaultsView).toHaveClass("console-view defaults-view") + await expect(consoleError).toHaveClass("console-view console-error hidden") -// const DefaultsJsonBtn = page.locator('#defaults-json') -// await expect(DefaultsJsonBtn).toBeDisabled() + const defaultsEditor = page.locator('#defaults-container') + await expect(defaultsEditor).toHaveAttribute('data-mode-id', "json") -// // Start waiting for download before clicking. -// const DefaultsDownload = page.locator('#defaults-download') -// const downloadPromise = page.waitForEvent('download') -// await DefaultsDownload.click() -// const download = await downloadPromise -// const expectedFilename = 'Thing-Template-with-Defaults.json' -// expect(download.suggestedFilename()).toBe(expectedFilename) -// }) + const defaultsJsonBtn = page.locator('#defaults-json') + const defaultsYamlBtn = page.locator('#defaults-yaml') -// test("Open the OpenAPI view and downloading it as YAML", async ({ page }) => { -// const templateEditor = page.locator("#editor1") -// await expect(templateEditor).toHaveAttribute('data-ide-id', "1") -// await expect(templateEditor).toHaveAttribute('data-mode-id', "json") -// await expect(templateEditor).toHaveClass("editor active") + await expect(defaultsJsonBtn).toBeDisabled() -// const DefaultsView = page.locator('#defaults-view') -// const consoleError = page.locator('#console-error') -// const DefaultsTab = page.locator("#defaults-tab") + await defaultsYamlBtn.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 }) + await expect(defaultsEditor).toHaveAttribute('data-mode-id', "yaml") + await expect(defaultsYamlBtn).toBeDisabled() -// await DefaultsTab.click() + const defaultsAddBtn = page.locator('#defaults-add') + const defaultsRemoveBtn = page.locator('#defaults-remove') -// await expect(DefaultsTab).toBeChecked({ checked: true }) -// await expect(DefaultsView).toHaveClass("console-view defaults-view") -// await expect(consoleError).toHaveClass("console-view console-error hidden") + await expect(defaultsAddBtn).toBeDisabled() -// const defaultsEditor = page.locator('#defaults-container') -// await expect(defaultsEditor).toHaveAttribute('data-mode-id', "json") + await defaultsRemoveBtn.click() + await expect(defaultsRemoveBtn).toBeDisabled() -// const defaultsJsonBtn = page.locator('#defaults-json') -// const defaultsYamlBtn = page.locator('#defaults-yaml') + // Start waiting for download before clicking. + const defaultsDownload = page.locator('#defaults-download') + const downloadPromise = page.waitForEvent('download') + await defaultsDownload.click() + const download = await downloadPromise + const expectedFilename = 'Thing-Template-without-Defaults.yaml' + expect(download.suggestedFilename()).toBe(expectedFilename) + }) +}) -// await expect(defaultsJsonBtn).toBeDisabled() +test.describe("Visualization view functionality", () => { -// await defaultsYamlBtn.click() + test("Open the visualization view with the thing template", async ({ page }) => { -// await expect(defaultsEditor).toHaveAttribute('data-mode-id', "yaml") -// await expect(defaultsYamlBtn).toBeDisabled() + const visualizeView = page.locator('#visualize-view') + const visualizeTab = page.locator("#visualize-tab") -// const defaultsAddBtn = page.locator('#defaults-add') -// const defaultsRemoveBtn = page.locator('#defaults-remove') + await expect(visualizeView).toHaveClass("console-view visualize-view hidden") + await expect(visualizeTab).toBeChecked({ checked: false }) -// await expect(defaultsAddBtn).toBeDisabled() + await visualizeTab.click() -// await defaultsRemoveBtn.click() -// await expect(defaultsRemoveBtn).toBeDisabled() + await expect(visualizeTab).toBeChecked({ checked: true }) + await expect(visualizeView).toHaveClass("console-view visualize-view") -// // Start waiting for download before clicking. -// const defaultsDownload = page.locator('#defaults-download') -// const downloadPromise = page.waitForEvent('download') -// await defaultsDownload.click() -// const download = await downloadPromise -// const expectedFilename = 'Thing-Template-without-Defaults.yaml' -// expect(download.suggestedFilename()).toBe(expectedFilename) -// }) -// }) + const graphViewBtn = page.locator('#graph-view') + const treeViewBtn = page.locator('#tree-view') -// test.describe("Visualization view functionality", () => { + await expect(graphViewBtn).toBeChecked({ checked: true }) + await expect(treeViewBtn).toBeChecked({ checked: false }) -// test("Open the visualization view with the thing template", async ({ page }) => { + const graphVisTitle = page.locator('#visualized').getByText('Thing Template', { exact: true }) + await expect(graphVisTitle).toHaveText("Thing Template") + }) -// const visualizeView = page.locator('#visualize-view') -// const visualizeTab = page.locator("#visualize-tab") + test("Open the visualization view with the thing template and expand and collapse the graph view", async ({ page }) => { -// await expect(visualizeView).toHaveClass("console-view visualize-view hidden") -// await expect(visualizeTab).toBeChecked({ checked: false }) + const visualizeView = page.locator('#visualize-view') + const visualizeTab = page.locator("#visualize-tab") -// await visualizeTab.click() + await expect(visualizeView).toHaveClass("console-view visualize-view hidden") + await expect(visualizeTab).toBeChecked({ checked: false }) -// await expect(visualizeTab).toBeChecked({ checked: true }) -// await expect(visualizeView).toHaveClass("console-view visualize-view") + await visualizeTab.click() -// const graphViewBtn = page.locator('#graph-view') -// const treeViewBtn = page.locator('#tree-view') + await expect(visualizeTab).toBeChecked({ checked: true }) + await expect(visualizeView).toHaveClass("console-view visualize-view") -// await expect(graphViewBtn).toBeChecked({ checked: true }) -// await expect(treeViewBtn).toBeChecked({ checked: false }) + const graphViewBtn = page.locator('#graph-view') + const treeViewBtn = page.locator('#tree-view') + const collapseAllBtn = page.locator('#collapse-all') + const expandAllBtn = page.locator('#expand-all') -// const graphVisTitle = page.locator('#visualized').getByText('Thing Template', { exact: true }) -// await expect(graphVisTitle).toHaveText("Thing Template") -// }) + await expect(graphViewBtn).toBeChecked({ checked: true }) + await expect(treeViewBtn).toBeChecked({ checked: false }) -// test("Open the visualization view with the thing template and expand and collapse the graph view", async ({ page }) => { + const svgPaths = page.locator("svg > g > path") + await expect(svgPaths).toHaveCount(9) -// const visualizeView = page.locator('#visualize-view') -// const visualizeTab = page.locator("#visualize-tab") + await expandAllBtn.click() + await expect(expandAllBtn).toBeDisabled() -// await expect(visualizeView).toHaveClass("console-view visualize-view hidden") -// await expect(visualizeTab).toBeChecked({ checked: false }) + await expect(svgPaths).toHaveCount(12) -// await visualizeTab.click() + await collapseAllBtn.click() + await expect(collapseAllBtn).toBeDisabled() -// await expect(visualizeTab).toBeChecked({ checked: true }) -// await expect(visualizeView).toHaveClass("console-view visualize-view") + await expect(svgPaths).toHaveCount(0) + }) -// const graphViewBtn = page.locator('#graph-view') -// const treeViewBtn = page.locator('#tree-view') -// const collapseAllBtn = page.locator('#collapse-all') -// const expandAllBtn = page.locator('#expand-all') + test("Open the visualization view with the thing template download the graph view as SVG", async ({ page }) => { -// await expect(graphViewBtn).toBeChecked({ checked: true }) -// await expect(treeViewBtn).toBeChecked({ checked: false }) + const visualizeView = page.locator('#visualize-view') + const visualizeTab = page.locator("#visualize-tab") -// const svgPaths = page.locator("svg > g > path") -// await expect(svgPaths).toHaveCount(9) + await expect(visualizeView).toHaveClass("console-view visualize-view hidden") + await expect(visualizeTab).toBeChecked({ checked: false }) -// await expandAllBtn.click() -// await expect(expandAllBtn).toBeDisabled() + await visualizeTab.click() -// await expect(svgPaths).toHaveCount(12) + await expect(visualizeTab).toBeChecked({ checked: true }) + await expect(visualizeView).toHaveClass("console-view visualize-view") -// await collapseAllBtn.click() -// await expect(collapseAllBtn).toBeDisabled() + const graphViewBtn = page.locator('#graph-view') + const treeViewBtn = page.locator('#tree-view') -// await expect(svgPaths).toHaveCount(0) -// }) + await expect(graphViewBtn).toBeChecked({ checked: true }) + await expect(treeViewBtn).toBeChecked({ checked: false }) -// test("Open the visualization view with the thing template download the graph view as SVG", async ({ page }) => { + // Start waiting for download before clicking. + const svgDownload = page.locator('#download-svg') + const downloadPromise = page.waitForEvent('download') + await svgDownload.click() + const download = await downloadPromise + const expectedFilename = 'Graph-visualization.svg' + expect(download.suggestedFilename()).toBe(expectedFilename) + }) -// const visualizeView = page.locator('#visualize-view') -// const visualizeTab = page.locator("#visualize-tab") + test("Open the visualization view with the thing template and download the graph view as PNG", async ({ page }) => { -// await expect(visualizeView).toHaveClass("console-view visualize-view hidden") -// await expect(visualizeTab).toBeChecked({ checked: false }) + const visualizeView = page.locator('#visualize-view') + const visualizeTab = page.locator("#visualize-tab") -// await visualizeTab.click() + await expect(visualizeView).toHaveClass("console-view visualize-view hidden") + await expect(visualizeTab).toBeChecked({ checked: false }) -// await expect(visualizeTab).toBeChecked({ checked: true }) -// await expect(visualizeView).toHaveClass("console-view visualize-view") + await visualizeTab.click() -// const graphViewBtn = page.locator('#graph-view') -// const treeViewBtn = page.locator('#tree-view') + await expect(visualizeTab).toBeChecked({ checked: true }) + await expect(visualizeView).toHaveClass("console-view visualize-view") -// await expect(graphViewBtn).toBeChecked({ checked: true }) -// await expect(treeViewBtn).toBeChecked({ checked: false }) + const graphViewBtn = page.locator('#graph-view') + const treeViewBtn = page.locator('#tree-view') -// // Start waiting for download before clicking. -// const svgDownload = page.locator('#download-svg') -// const downloadPromise = page.waitForEvent('download') -// await svgDownload.click() -// const download = await downloadPromise -// const expectedFilename = 'Graph-visualization.svg' -// expect(download.suggestedFilename()).toBe(expectedFilename) -// }) + await expect(graphViewBtn).toBeChecked({ checked: true }) + await expect(treeViewBtn).toBeChecked({ checked: false }) -// test("Open the visualization view with the thing template and download the graph view as PNG", async ({ page }) => { + // Start waiting for download before clicking. + const pngDownload = page.locator('#download-png') + const downloadPromise = page.waitForEvent('download') + await pngDownload.click() + const download = await downloadPromise + const expectedFilename = 'Graph-visualization.png' + expect(download.suggestedFilename()).toBe(expectedFilename) + }) -// const visualizeView = page.locator('#visualize-view') -// const visualizeTab = page.locator("#visualize-tab") + test("Open the tree visualization view with the thing template and modified the input values", async ({ page }) => { -// await expect(visualizeView).toHaveClass("console-view visualize-view hidden") -// await expect(visualizeTab).toBeChecked({ checked: false }) + const visualizeView = page.locator('#visualize-view') + const visualizeTab = page.locator("#visualize-tab") -// await visualizeTab.click() + await expect(visualizeView).toHaveClass("console-view visualize-view hidden") + await expect(visualizeTab).toBeChecked({ checked: false }) -// await expect(visualizeTab).toBeChecked({ checked: true }) -// await expect(visualizeView).toHaveClass("console-view visualize-view") + await visualizeTab.click() -// const graphViewBtn = page.locator('#graph-view') -// const treeViewBtn = page.locator('#tree-view') + await expect(visualizeTab).toBeChecked({ checked: true }) + await expect(visualizeView).toHaveClass("console-view visualize-view") -// await expect(graphViewBtn).toBeChecked({ checked: true }) -// await expect(treeViewBtn).toBeChecked({ checked: false }) + const graphViewBtn = page.locator('#graph-view') + const treeViewBtn = page.locator('#tree-view') -// // Start waiting for download before clicking. -// const pngDownload = page.locator('#download-png') -// const downloadPromise = page.waitForEvent('download') -// await pngDownload.click() -// const download = await downloadPromise -// const expectedFilename = 'Graph-visualization.png' -// expect(download.suggestedFilename()).toBe(expectedFilename) -// }) + await expect(graphViewBtn).toBeChecked({ checked: true }) + await expect(treeViewBtn).toBeChecked({ checked: false }) -// test("Open the tree visualization view with the thing template and modified the input values", async ({ page }) => { + await treeViewBtn.click() + await expect(graphViewBtn).toBeChecked({ checked: false }) + await expect(treeViewBtn).toBeChecked({ checked: true }) -// const visualizeView = page.locator('#visualize-view') -// const visualizeTab = page.locator("#visualize-tab") + const labelBtn = page.getByLabel('labels') + const radiusSlider = page.getByLabel('radius') + const extentSlider = page.getByLabel('extent') + const rotateSlider = page.getByLabel('rotate') + const dragSlider = page.getByLabel('drag precision') + const tidyBtn = page.getByLabel('tidy') + const clusterBtn = page.getByLabel('cluster') + const linksDropDown = page.getByLabel('links') -// await expect(visualizeView).toHaveClass("console-view visualize-view hidden") -// await expect(visualizeTab).toBeChecked({ checked: false }) + await expect(labelBtn).toBeChecked({ checked: true }) + await expect(radiusSlider).toHaveValue("350") + await expect(extentSlider).toHaveValue("360") + await expect(rotateSlider).toHaveValue("0") + await expect(dragSlider).toHaveValue("100") + await expect(tidyBtn).toBeChecked({ checked: true }) + await expect(clusterBtn).toBeChecked({ checked: false }) + await expect(linksDropDown).toHaveValue("line") -// await visualizeTab.click() + await labelBtn.click() + await radiusSlider.click() + await extentSlider.click() + await rotateSlider.click() + await dragSlider.click() + await clusterBtn.check() + await linksDropDown.selectOption("diagonal") + await expect(labelBtn).toBeChecked({ checked: false }) -// await expect(visualizeTab).toBeChecked({ checked: true }) -// await expect(visualizeView).toHaveClass("console-view visualize-view") + const radiusSliderValue = await radiusSlider.inputValue() + expect(parseInt(radiusSliderValue)).toBeLessThan(450) + expect(parseInt(radiusSliderValue)).toBeGreaterThan(330) -// const graphViewBtn = page.locator('#graph-view') -// const treeViewBtn = page.locator('#tree-view') + const extentSliderValue = await extentSlider.inputValue() + expect(parseInt(extentSliderValue)).toBeLessThan(190) + expect(parseInt(extentSliderValue)).toBeGreaterThan(170) -// await expect(graphViewBtn).toBeChecked({ checked: true }) -// await expect(treeViewBtn).toBeChecked({ checked: false }) + const rotateSliderValue = await rotateSlider.inputValue() + expect(parseInt(rotateSliderValue)).toBeLessThan(190) + expect(parseInt(rotateSliderValue)).toBeGreaterThan(170) -// await treeViewBtn.click() -// await expect(graphViewBtn).toBeChecked({ checked: false }) -// await expect(treeViewBtn).toBeChecked({ checked: true }) + const dragSliderValue = await dragSlider.inputValue() + expect(parseInt(dragSliderValue)).toBeLessThan(60) + expect(parseInt(dragSliderValue)).toBeGreaterThan(40) -// const labelBtn = page.getByLabel('labels') -// const radiusSlider = page.getByLabel('radius') -// const extentSlider = page.getByLabel('extent') -// const rotateSlider = page.getByLabel('rotate') -// const dragSlider = page.getByLabel('drag precision') -// const tidyBtn = page.getByLabel('tidy') -// const clusterBtn = page.getByLabel('cluster') -// const linksDropDown = page.getByLabel('links') + await expect(tidyBtn).toBeChecked({ checked: false }) + await expect(clusterBtn).toBeChecked({ checked: true }) + await expect(linksDropDown).toHaveValue("diagonal") -// await expect(labelBtn).toBeChecked({ checked: true }) -// await expect(radiusSlider).toHaveValue("350") -// await expect(extentSlider).toHaveValue("360") -// await expect(rotateSlider).toHaveValue("0") -// await expect(dragSlider).toHaveValue("100") -// await expect(tidyBtn).toBeChecked({ checked: true }) -// await expect(clusterBtn).toBeChecked({ checked: false }) -// await expect(linksDropDown).toHaveValue("line") + }) -// await labelBtn.click() -// await radiusSlider.click() -// await extentSlider.click() -// await rotateSlider.click() -// await dragSlider.click() -// await clusterBtn.check() -// await linksDropDown.selectOption("diagonal") -// await expect(labelBtn).toBeChecked({ checked: false }) + test("Open the tree visualization view with the thing template and download as SVG", async ({ page }) => { -// const radiusSliderValue = await radiusSlider.inputValue() -// expect(parseInt(radiusSliderValue)).toBeLessThan(450) -// expect(parseInt(radiusSliderValue)).toBeGreaterThan(330) + const visualizeView = page.locator('#visualize-view') + const visualizeTab = page.locator("#visualize-tab") -// const extentSliderValue = await extentSlider.inputValue() -// expect(parseInt(extentSliderValue)).toBeLessThan(190) -// expect(parseInt(extentSliderValue)).toBeGreaterThan(170) + await expect(visualizeView).toHaveClass("console-view visualize-view hidden") + await expect(visualizeTab).toBeChecked({ checked: false }) -// const rotateSliderValue = await rotateSlider.inputValue() -// expect(parseInt(rotateSliderValue)).toBeLessThan(190) -// expect(parseInt(rotateSliderValue)).toBeGreaterThan(170) + await visualizeTab.click() -// const dragSliderValue = await dragSlider.inputValue() -// expect(parseInt(dragSliderValue)).toBeLessThan(60) -// expect(parseInt(dragSliderValue)).toBeGreaterThan(40) + await expect(visualizeTab).toBeChecked({ checked: true }) + await expect(visualizeView).toHaveClass("console-view visualize-view") -// await expect(tidyBtn).toBeChecked({ checked: false }) -// await expect(clusterBtn).toBeChecked({ checked: true }) -// await expect(linksDropDown).toHaveValue("diagonal") + const graphViewBtn = page.locator('#graph-view') + const treeViewBtn = page.locator('#tree-view') -// }) + await expect(graphViewBtn).toBeChecked({ checked: true }) + await expect(treeViewBtn).toBeChecked({ checked: false }) -// test("Open the tree visualization view with the thing template and download as SVG", async ({ page }) => { + await treeViewBtn.click() + await expect(graphViewBtn).toBeChecked({ checked: false }) + await expect(treeViewBtn).toBeChecked({ checked: true }) -// const visualizeView = page.locator('#visualize-view') -// const visualizeTab = page.locator("#visualize-tab") + // Start waiting for download before clicking. + const svgDownload = page.locator('#download-svg') + const downloadPromise = page.waitForEvent('download') + await svgDownload.click() + const download = await downloadPromise + const expectedFilename = 'Tree-visualization.svg' + expect(download.suggestedFilename()).toBe(expectedFilename) + }) -// await expect(visualizeView).toHaveClass("console-view visualize-view hidden") -// await expect(visualizeTab).toBeChecked({ checked: false }) + test("Open the tree visualization view with the thing template and download as PNG", async ({ page }) => { -// await visualizeTab.click() + const visualizeView = page.locator('#visualize-view') + const visualizeTab = page.locator("#visualize-tab") -// await expect(visualizeTab).toBeChecked({ checked: true }) -// await expect(visualizeView).toHaveClass("console-view visualize-view") + await expect(visualizeView).toHaveClass("console-view visualize-view hidden") + await expect(visualizeTab).toBeChecked({ checked: false }) -// const graphViewBtn = page.locator('#graph-view') -// const treeViewBtn = page.locator('#tree-view') + await visualizeTab.click() -// await expect(graphViewBtn).toBeChecked({ checked: true }) -// await expect(treeViewBtn).toBeChecked({ checked: false }) + await expect(visualizeTab).toBeChecked({ checked: true }) + await expect(visualizeView).toHaveClass("console-view visualize-view") -// await treeViewBtn.click() -// await expect(graphViewBtn).toBeChecked({ checked: false }) -// await expect(treeViewBtn).toBeChecked({ checked: true }) + const graphViewBtn = page.locator('#graph-view') + const treeViewBtn = page.locator('#tree-view') -// // Start waiting for download before clicking. -// const svgDownload = page.locator('#download-svg') -// const downloadPromise = page.waitForEvent('download') -// await svgDownload.click() -// const download = await downloadPromise -// const expectedFilename = 'Tree-visualization.svg' -// expect(download.suggestedFilename()).toBe(expectedFilename) -// }) + await expect(graphViewBtn).toBeChecked({ checked: true }) + await expect(treeViewBtn).toBeChecked({ checked: false }) -// test("Open the tree visualization view with the thing template and download as PNG", async ({ page }) => { + await treeViewBtn.click() + await expect(graphViewBtn).toBeChecked({ checked: false }) + await expect(treeViewBtn).toBeChecked({ checked: true }) -// const visualizeView = page.locator('#visualize-view') -// const visualizeTab = page.locator("#visualize-tab") - -// await expect(visualizeView).toHaveClass("console-view visualize-view hidden") -// await expect(visualizeTab).toBeChecked({ checked: false }) - -// await visualizeTab.click() - -// await expect(visualizeTab).toBeChecked({ checked: true }) -// await expect(visualizeView).toHaveClass("console-view visualize-view") - -// const graphViewBtn = page.locator('#graph-view') -// const treeViewBtn = page.locator('#tree-view') - -// await expect(graphViewBtn).toBeChecked({ checked: true }) -// await expect(treeViewBtn).toBeChecked({ checked: false }) - -// await treeViewBtn.click() -// await expect(graphViewBtn).toBeChecked({ checked: false }) -// await expect(treeViewBtn).toBeChecked({ checked: true }) - -// // Start waiting for download before clicking. -// const pngDownload = page.locator('#download-png') -// const downloadPromise = page.waitForEvent('download') -// await pngDownload.click() -// const download = await downloadPromise -// const expectedFilename = 'Tree-visualization.png' -// expect(download.suggestedFilename()).toBe(expectedFilename) -// }) -// }) + // Start waiting for download before clicking. + const pngDownload = page.locator('#download-png') + const downloadPromise = page.waitForEvent('download') + await pngDownload.click() + const download = await downloadPromise + const expectedFilename = 'Tree-visualization.png' + expect(download.suggestedFilename()).toBe(expectedFilename) + }) +})