test(*): form button data-testid changes (#274) (#276)

* test(*): form button data-testid changes

* test(*): form button data-testid changes

* chore(*): use published versions

(cherry picked from commit 34689ac)

Co-authored-by: Yi Yang <Leopoldthecoder@users.noreply.github.com>

package.json

@@ -24,19 +24,19 @@
   },
   "dependencies": {
     "@kong-ui-public/app-layout": "^4.2.24",
-    "@kong-ui-public/entities-certificates": "^3.5.2",
-    "@kong-ui-public/entities-consumer-credentials": "^3.2.33",
-    "@kong-ui-public/entities-consumers": "^3.4.2",
-    "@kong-ui-public/entities-data-plane-nodes": "^0.2.32",
-    "@kong-ui-public/entities-gateway-services": "^3.6.2",
-    "@kong-ui-public/entities-key-sets": "^3.4.2",
-    "@kong-ui-public/entities-keys": "^3.4.2",
-    "@kong-ui-public/entities-plugins": "^8.8.3",
-    "@kong-ui-public/entities-routes": "^3.2.0",
-    "@kong-ui-public/entities-shared": "^3.2.0",
-    "@kong-ui-public/entities-snis": "^3.4.2",
-    "@kong-ui-public/entities-upstreams-targets": "^3.4.2",
-    "@kong-ui-public/entities-vaults": "^3.10.2",
+    "@kong-ui-public/entities-certificates": "^3.5.4",
+    "@kong-ui-public/entities-consumer-credentials": "^3.2.35",
+    "@kong-ui-public/entities-consumers": "^3.4.4",
+    "@kong-ui-public/entities-data-plane-nodes": "^0.2.34",
+    "@kong-ui-public/entities-gateway-services": "^3.6.5",
+    "@kong-ui-public/entities-key-sets": "^3.4.4",
+    "@kong-ui-public/entities-keys": "^3.4.4",
+    "@kong-ui-public/entities-plugins": "^8.10.3",
+    "@kong-ui-public/entities-routes": "^3.6.6",
+    "@kong-ui-public/entities-shared": "^3.7.4",
+    "@kong-ui-public/entities-snis": "^3.4.4",
+    "@kong-ui-public/entities-upstreams-targets": "^3.4.4",
+    "@kong-ui-public/entities-vaults": "^3.10.4",
     "@kong-ui-public/forms": "^4.0.2",
     "@kong-ui-public/i18n": "^2.2.2",
     "@kong-ui-public/misc-widgets": "^2.1.14",

tests/playwright/commands/fillEntityForm.ts

@@ -16,7 +16,7 @@ interface Params {
   method?: 'type' | 'fill';
 
   /**
-   * If set to true, the helper assumes that a model will show up after performing the `*-submit` action.
+   * If set to true, the helper assumes that a modal will show up after performing the `*-submit` action.
    * And the primary button on the modal will be clicked.
    */
   handleModal?: boolean;
@@ -62,14 +62,12 @@ export const fillEntityForm = async (params: Params) => {
     }
   }
 
-  if (!withAction) {
-    return
+  if (withAction === 'submit') {
+    await page.getByTestId('form-actions').locator('.k-button.primary').click()
+  } else if (withAction === 'cancel') {
+    await page.getByTestId('form-actions').locator('.k-button.secondary').click()
   }
 
-  await page.getByTestId(`form-${withAction}`)
-    .or(page.getByTestId(`form-footer-action-${withAction}`))
-    .click()
-
   if (handleModal) {
     await page.locator('.modal-container .modal-footer .k-button.primary').click()
   }

tests/playwright/specs/ca-certificates/01-CACertificates.spec.ts

@@ -35,7 +35,7 @@ test.describe('CA certificates', () => {
 
   test('create a CA certificate - fail', async ({ page }) => {
     await page.getByTestId('new-ca-certificate').click()
-    await expect(page.getByTestId('form-submit')).toBeDisabled()
+    await expect(page.getByTestId('ca_certificate-form-submit')).toBeDisabled()
   })
 
   test('create a CA certificate', async ({ page }) => {

tests/playwright/specs/certificates/01-Certificates.spec.ts

@@ -36,7 +36,7 @@ test.describe('certificates', () => {
   test('create a certificate - fail', async ({ page }) => {
     await page.getByTestId('new-certificate').click()
     await page.waitForSelector('.k-breadcrumbs', { state: 'hidden' })
-    await expect(page.getByTestId('form-submit')).toBeDisabled()
+    await expect(page.getByTestId('certificate-form-submit')).toBeDisabled()
   })
 
   test('create a certificate', async ({ page }) => {

tests/playwright/specs/consumers/01-Consumers.spec.ts

@@ -41,14 +41,14 @@ test.describe('consumers', () => {
     await page.waitForSelector('.kong-ui-entities-consumer-form')
 
     // exit from cancel button
-    await expect(page.locator('[data-testid="form-cancel"]')).toContainText('Cancel')
-    await withNavigation(page, () => page.click('[data-testid="form-cancel"]'))
+    await expect(page.locator('[data-testid="consumer-form-cancel"]')).toContainText('Cancel')
+    await withNavigation(page, () => page.click('[data-testid="consumer-form-cancel"]'))
   })
 
   test('consumer create - save button is disabled', async ({ page }) => {
     await withNavigation(page, () => page.click('.table-empty-state .primary'))
     await page.waitForSelector('.kong-ui-entities-consumer-form')
-    await expect(page.getByTestId('form-submit')).toBeDisabled()
+    await expect(page.getByTestId('consumer-form-submit')).toBeDisabled()
   })
 
   test('consumer create - success', async ({ page }) => {
@@ -79,7 +79,7 @@ test.describe('consumers', () => {
     // enter edit mode then cancel
     await withNavigation(page, () => clickEntityListAction(page, 'edit'))
     await page.waitForSelector('.kong-ui-entities-consumer-form')
-    await withNavigation(page, () => page.click('[data-testid="form-cancel"]'))
+    await withNavigation(page, () => page.click('[data-testid="consumer-form-cancel"]'))
     await page.waitForSelector('.kong-ui-entities-consumers-list')
 
     // enter edit mode then modify and save
@@ -161,7 +161,7 @@ test.describe('consumers', () => {
     // enter edit mode then cancel
     await withNavigation(page, () => clickEntityListAction(page, 'edit'))
     await page.waitForSelector('.kong-ui-entities-consumer-form')
-    await withNavigation(page, () => page.click('[data-testid="form-cancel"]'))
+    await withNavigation(page, () => page.click('[data-testid="consumer-form-cancel"]'))
     await page.waitForSelector('.kong-ui-entities-consumers-list')
 
     // enter edit mode then modify and save

tests/playwright/specs/consumers/03-ConsumerPlugins.spec.ts

@@ -70,7 +70,7 @@ test.describe('consumer plugins', () => {
     await page.locator('#tags').fill(`${mockTag}${mockTag}`)
     await withNavigation(
       page,
-      async () => await page.locator('[data-testid="form-cancel"]').click(),
+      async () => await page.locator('[data-testid="plugin-form-cancel"]').click(),
     )
     await expect(page.locator('.k-table .table-wrapper [data-testid="tags"]')).toHaveText(mockTag)
   })

tests/playwright/specs/key-sets/01-KeySets.spec.ts

@@ -29,7 +29,7 @@ test.describe('keySets', () => {
   test('cancel the creation of a key set', async ({ page }) => {
     await expect(page.locator('.table-empty-state')).toBeVisible()
     await withNavigation(page, () => page.locator('.table-empty-state .primary').click())
-    await withNavigation(page, () => page.locator('.form-actions [data-testid="form-cancel"]').click())
+    await withNavigation(page, () => page.locator('.form-actions [data-testid="set-form-cancel"]').click())
     await expect(page.locator('.table-empty-state')).toBeVisible()
   })
 

tests/playwright/specs/routes-expressions/01-Routes.spec.ts

@@ -47,26 +47,26 @@ test.describe('route creation page', () => {
     // traditional tab should be active by default
     await expect(page.locator('#traditional-tab')).toHaveClass(/active/)
     // submit button should be disabled
-    await expect(page.getByTestId('form-submit')).toBeDisabled()
+    await expect(page.getByTestId('route-form-submit')).toBeDisabled()
     // fill in a path
     await page.getByTestId('route-form-paths-input-1').fill('/trad/1')
     // submit button should be enabled
-    await expect(page.getByTestId('form-submit')).toBeEnabled()
+    await expect(page.getByTestId('route-form-submit')).toBeEnabled()
 
     // switch to the expressions tab
     await page.locator('#expressions-tab').click()
     // submit button should be disabled again
-    await expect(page.getByTestId('form-submit')).toBeDisabled()
+    await expect(page.getByTestId('route-form-submit')).toBeDisabled()
 
     // switch back to the traditional tab
     await page.locator('#traditional-tab').click()
     // submit button should be enabled again
-    await expect(page.getByTestId('form-submit')).toBeEnabled()
+    await expect(page.getByTestId('route-form-submit')).toBeEnabled()
 
     // switch back to the expressions tab
     await page.locator('#expressions-tab').click()
     // submit button should be disabled again
-    await expect(page.getByTestId('form-submit')).toBeDisabled()
+    await expect(page.getByTestId('route-form-submit')).toBeDisabled()
 
     // the editor shows invalid because it is empty
     await expect(page.locator('.expression-editor')).toHaveClass(/invalid/)
@@ -79,21 +79,21 @@ test.describe('route creation page', () => {
     // the editor should be no longer invalid
     await expect(page.locator('.expression-editor')).not.toHaveClass(/invalid/)
     // and the submit button should be enabled
-    await expect(page.getByTestId('form-submit')).toBeEnabled()
+    await expect(page.getByTestId('route-form-submit')).toBeEnabled()
 
     // delete the last character
     await page.keyboard.press('Backspace')
     // the editor should be invalid again
     await expect(page.locator('.expression-editor')).toHaveClass(/invalid/)
     // but the submit button is still enabled because we let the server handle uncaught errors
-    await expect(page.getByTestId('form-submit')).toBeEnabled()
+    await expect(page.getByTestId('route-form-submit')).toBeEnabled()
   })
 
   test('view configuration', async ({ page }) => {
     await page.getByTestId('form-content').isVisible()
 
     // open the slide out
-    await page.getByTestId('form-view-configuration').click()
+    await page.getByTestId('route-form-view-configuration').click()
     await page.locator('#yaml-tab').click()
     const slideOutTabs = page.getByTestId('form-view-configuration-slideout-tabs')
     const configBlock = slideOutTabs.getByTestId('k-code-block').locator('code')
@@ -146,7 +146,7 @@ test.describe('route creation page', () => {
 
     await page.getByTestId('route-form-name').fill('trad-1')
     await page.getByTestId('route-form-paths-input-1').fill('/trad/1')
-    const submit = page.getByTestId('form-submit')
+    const submit = page.getByTestId('route-form-submit')
 
     await expect(submit).toBeEnabled()
     await submit.click()
@@ -172,7 +172,7 @@ test.describe('route creation page', () => {
     await editor.click()
     await page.keyboard.type('http.path == "/expr/1"')
 
-    const submit = page.getByTestId('form-submit')
+    const submit = page.getByTestId('route-form-submit')
 
     await expect(submit).toBeEnabled()
     await submit.click()
@@ -202,7 +202,7 @@ test.describe('route creation page', () => {
     // switch back to the traditional tab
     await page.locator('#traditional-tab').click()
 
-    const submit = page.getByTestId('form-submit')
+    const submit = page.getByTestId('route-form-submit')
 
     await expect(submit).toBeEnabled()
     await submit.click()
@@ -237,7 +237,7 @@ test.describe('route creation page', () => {
     // switch to the expressions tab
     await page.locator('#expressions-tab').click()
 
-    const submit = page.getByTestId('form-submit')
+    const submit = page.getByTestId('route-form-submit')
 
     await expect(submit).toBeEnabled()
     await submit.click()
@@ -267,7 +267,7 @@ test.describe('route creation page', () => {
     // the editor shows invalid
     await expect(page.locator('.expression-editor')).toHaveClass(/invalid/)
 
-    const submit = page.getByTestId('form-submit')
+    const submit = page.getByTestId('route-form-submit')
 
     // we can still submit
     await expect(submit).toBeEnabled()

tests/playwright/specs/routes/01-Routes.spec.ts

@@ -85,7 +85,7 @@ test.describe('routes', () => {
     await withNavigation(page, () =>
       page.locator('.table-empty-state .primary').click(),
     )
-    await page.locator('[data-testid="form-cancel"]').click()
+    await page.locator('[data-testid="route-form-cancel"]').click()
     await expectEmptyEntityList(page, 'routes', 'Configure a New Route')
   })
 
@@ -94,7 +94,7 @@ test.describe('routes', () => {
       page.locator('.table-empty-state .primary').click(),
     )
 
-    await expect(page.locator('[data-testid="form-submit"]')).toBeDisabled()
+    await expect(page.locator('[data-testid="route-form-submit"]')).toBeDisabled()
   })
 
   test('route create - cannot be submit if only protocol is clicked', async ({ page }) => {
@@ -103,7 +103,7 @@ test.describe('routes', () => {
     )
 
     await page.locator('[data-testid="route-form-protocols"]').fill('http')
-    await expect(page.locator('[data-testid="form-submit"]')).toBeDisabled()
+    await expect(page.locator('[data-testid="route-form-submit"]')).toBeDisabled()
   })
 
   test('route create - fail with invalid paths', async ({ page }) => {

tests/playwright/specs/services/01-Service.spec.ts

@@ -49,7 +49,7 @@ test.describe('services', () => {
     await withNavigation(page, () =>
       page.locator('.table-empty-state .primary').click(),
     )
-    await page.getByTestId('form-cancel').click()
+    await page.getByTestId('service-form-cancel').click()
     await expectEmptyEntityList(page, 'gateway-services', 'Configure a New Gateway Service')
   })
 
@@ -61,7 +61,7 @@ test.describe('services', () => {
       page,
       formData: { 'gateway-service-name-input': 'mockbin.service' },
     })
-    await expect(page.getByTestId('form-submit')).toBeDisabled()
+    await expect(page.getByTestId('service-form-submit')).toBeDisabled()
   })
 
   test('service create - successful create', async ({ page }) => {
@@ -301,7 +301,7 @@ test.describe('services', () => {
     await expect(page.getByTestId('gateway-service-tls-verify-checkbox')).not.toBeChecked()
     await page.getByTestId('gateway-service-tls-verify-checkbox').click()
     await page.getByTestId('gateway-service-tls-verify-false-option').click()
-    await withNavigation(page, () => page.getByTestId('form-submit').click())
+    await withNavigation(page, () => page.getByTestId('service-form-submit').click())
     await expect(page.locator('[data-testid="tls_verify-property-value"]')).toHaveText('Off')
     await waitAndDismissToasts(page)
 
@@ -310,7 +310,7 @@ test.describe('services', () => {
 
     await expect(page.getByTestId('gateway-service-tls-verify-false-option')).toBeChecked()
     await page.getByTestId('gateway-service-tls-verify-true-option').click()
-    await withNavigation(page, () => page.getByTestId('form-submit').click())
+    await withNavigation(page, () => page.getByTestId('service-form-submit').click())
     await expect(page.locator('[data-testid="tls_verify-property-value"]')).toHaveText('On')
     await waitAndDismissToasts(page)
 

tests/playwright/specs/services/02-ServiceRoutes.spec.ts

@@ -56,7 +56,7 @@ test.describe('service routes', () => {
     )
 
     await expect(page.locator('.kong-ui-entities-route-form')).toBeVisible()
-    await page.locator('[data-testid="form-cancel"]').click()
+    await page.locator('[data-testid="route-form-cancel"]').click()
 
     await expectEmptyEntityList(page, 'routes', 'Configure a New Route')
   })
@@ -69,7 +69,7 @@ test.describe('service routes', () => {
       page.locator('.kong-ui-entities-routes-list .table-empty-state .primary').click(),
     )
 
-    await expect(page.locator('[data-testid="form-submit"]')).toBeDisabled()
+    await expect(page.locator('[data-testid="route-form-submit"]')).toBeDisabled()
   })
 
   test('create an service-associated route via tab', async ({ page }) => {

tests/playwright/specs/services/03-ServicePlugins.spec.ts

@@ -91,7 +91,7 @@ test.describe('service plugins', () => {
     await withNavigation(page, () =>
       page
         .locator('[data-testid="form-actions"]')
-        .locator('[data-testid="form-cancel"]')
+        .locator('[data-testid="plugin-form-cancel"]')
         .click(),
     )
     await page.waitForSelector('.kong-ui-entities-plugins-list')

tests/playwright/specs/snis/01-SNIs.spec.ts

@@ -57,7 +57,7 @@ test.describe('snis', () => {
     await page.locator('[data-testid="sni-form-certificate-id"]').fill(certificate.id)
     await (await page.waitForSelector(`[data-testid="select-item-${certificate.id}"]`)).click()
 
-    await expect(page.locator('[data-testid="form-submit"]')).toBeDisabled()
+    await expect(page.locator('[data-testid="sni-form-submit"]')).toBeDisabled()
   })
 
   test('create an sni', async ({ page }) => {