Enhance plugin video fields

Add video form tab selection
Add ability to display an error

6 files changed, 128 insertions, 9 deletions

diff --git a/client/e2e/src/po/admin-plugin.po.ts b/client/e2e/src/po/admin-plugin.po.ts
new file mode 100644
index 000000000..6a3f3cf28
--- /dev/null
+++ b/client/e2e/src/po/admin-plugin.po.ts
@@ -0,0 +1,31 @@
+import { browserSleep, go } from '../utils'
+
+export class AdminPluginPage {
+
+  async navigateToSearch () {
+    await go('/admin/plugins/search')
+
+    await $('my-plugin-search').waitForDisplayed()
+  }
+
+  async search (name: string) {
+    const input = $('.search-bar input')
+    await input.waitForDisplayed()
+    await input.clearValue()
+    await input.setValue(name)
+
+    await browserSleep(1000)
+  }
+
+  async installHelloWorld () {
+    $('.plugin-name=hello-world').waitForDisplayed()
+
+    await $('.card-body my-button[icon=cloud-download]').click()
+
+    const submitModalButton = $('.modal-content input[type=submit]')
+    await submitModalButton.waitForClickable()
+    await submitModalButton.click()
+
+    await $('.card-body my-edit-button').waitForDisplayed()
+  }
+}
diff --git a/client/e2e/src/po/anonymous-settings.po.ts b/client/e2e/src/po/anonymous-settings.po.ts
index 180d371fa..21216a8f2 100644
--- a/client/e2e/src/po/anonymous-settings.po.ts
+++ b/client/e2e/src/po/anonymous-settings.po.ts
@@ -13,7 +13,7 @@ export class AnonymousSettingsPage {
   }
 
   async clickOnP2PCheckbox () {
-    const p2p = getCheckbox('p2pEnabled')
+    const p2p = await getCheckbox('p2pEnabled')
     await p2p.waitForClickable()
 
     await p2p.click()
diff --git a/client/e2e/src/po/my-account.po.ts b/client/e2e/src/po/my-account.po.ts
index 13a764e87..20dafbf06 100644
--- a/client/e2e/src/po/my-account.po.ts
+++ b/client/e2e/src/po/my-account.po.ts
@@ -31,7 +31,7 @@ export class MyAccountPage {
   }
 
   async clickOnP2PCheckbox () {
-    const p2p = getCheckbox('p2pEnabled')
+    const p2p = await getCheckbox('p2pEnabled')
 
     await p2p.waitForClickable()
     await p2p.scrollIntoView(false) // Avoid issues with fixed header on firefox
diff --git a/client/e2e/src/po/video-upload.po.ts b/client/e2e/src/po/video-upload.po.ts
index 2206b56c3..38395ea2f 100644
--- a/client/e2e/src/po/video-upload.po.ts
+++ b/client/e2e/src/po/video-upload.po.ts
@@ -3,7 +3,10 @@ import { getCheckbox, selectCustomSelect } from '../utils'
 
 export class VideoUploadPage {
   async navigateTo () {
-    await $('.header .publish-button').click()
+    const publishButton = await $('.header .publish-button')
+
+    await publishButton.waitForClickable()
+    await publishButton.click()
 
     await $('.upload-video-container').waitForDisplayed()
   }
@@ -24,15 +27,17 @@ export class VideoUploadPage {
 
     // Wait for the upload to finish
     await browser.waitUntil(async () => {
-      const actionButton = this.getSecondStepSubmitButton().$('.action-button')
+      const warning = await $('=Publish will be available when upload is finished').isDisplayed()
+      const progress = await $('.progress-bar=100%').isDisplayed()
 
-      const klass = await actionButton.getAttribute('class')
-      return !klass.includes('disabled')
+      return !warning && progress
     })
   }
 
-  setAsNSFW () {
-    return getCheckbox('nsfw').click()
+  async setAsNSFW () {
+    const checkbox = await getCheckbox('nsfw')
+
+    return checkbox.click()
   }
 
   async validSecondUploadStep (videoName: string) {
@@ -51,6 +56,10 @@ export class VideoUploadPage {
     return selectCustomSelect('privacy', 'Public')
   }
 
+  setAsPrivate () {
+    return selectCustomSelect('privacy', 'Private')
+  }
+
   private getSecondStepSubmitButton () {
     return $('.submit-container my-button')
   }
diff --git a/client/e2e/src/suites-local/plugins.e2e-spec.ts b/client/e2e/src/suites-local/plugins.e2e-spec.ts
new file mode 100644
index 000000000..14802c1ca
--- /dev/null
+++ b/client/e2e/src/suites-local/plugins.e2e-spec.ts
@@ -0,0 +1,79 @@
+import { AdminPluginPage } from '../po/admin-plugin.po'
+import { LoginPage } from '../po/login.po'
+import { VideoUploadPage } from '../po/video-upload.po'
+import { browserSleep, getCheckbox, waitServerUp } from '../utils'
+
+describe('Plugins', () => {
+  let videoUploadPage: VideoUploadPage
+  let loginPage: LoginPage
+  let adminPluginPage: AdminPluginPage
+
+  function getPluginCheckbox () {
+    return getCheckbox('hello-world-field-4')
+  }
+
+  async function expectSubmitState ({ disabled }: { disabled: boolean }) {
+    const disabledSubmit = await $('my-button .disabled')
+
+    if (disabled) expect(await disabledSubmit.isDisplayed()).toBeTruthy()
+    else expect(await disabledSubmit.isDisplayed()).toBeFalsy()
+  }
+
+  before(async () => {
+    await waitServerUp()
+  })
+
+  beforeEach(async () => {
+    loginPage = new LoginPage()
+    videoUploadPage = new VideoUploadPage()
+    adminPluginPage = new AdminPluginPage()
+
+    await browser.maximizeWindow()
+  })
+
+  it('Should install hello world plugin', async () => {
+    await loginPage.loginAsRootUser()
+
+    await adminPluginPage.navigateToSearch()
+    await adminPluginPage.search('hello-world')
+    await adminPluginPage.installHelloWorld()
+    await browser.refresh()
+  })
+
+  it('Should have checkbox in video edit page', async () => {
+    await videoUploadPage.navigateTo()
+    await videoUploadPage.uploadVideo()
+
+    await $('span=Super field 4 in main tab').waitForDisplayed()
+
+    const checkbox = await getPluginCheckbox()
+    expect(await checkbox.isDisplayed()).toBeTruthy()
+
+    await expectSubmitState({ disabled: true })
+  })
+
+  it('Should check the checkbox and be able to submit the video', async function () {
+    const checkbox = await getPluginCheckbox()
+    await checkbox.click()
+
+    await expectSubmitState({ disabled: false })
+  })
+
+  it('Should uncheck the checkbox and not be able to submit the video', async function () {
+    const checkbox = await getPluginCheckbox()
+    await checkbox.click()
+
+    await browserSleep(5000)
+
+    await expectSubmitState({ disabled: true })
+
+    const error = await $('.form-error*=Should be enabled')
+    expect(await error.isDisplayed()).toBeTruthy()
+  })
+
+  it('Should change the privacy and should hide the checkbox', async function () {
+    await videoUploadPage.setAsPrivate()
+
+    await expectSubmitState({ disabled: false })
+  })
+})
diff --git a/client/e2e/src/utils/elements.ts b/client/e2e/src/utils/elements.ts
index 315718879..3ffa5defd 100644
--- a/client/e2e/src/utils/elements.ts
+++ b/client/e2e/src/utils/elements.ts
@@ -1,5 +1,5 @@
 function getCheckbox (name: string) {
-  return $(`my-peertube-checkbox[inputname=${name}] label`)
+  return $(`my-peertube-checkbox input[id=${name}]`).parentElement()
 }
 
 async function selectCustomSelect (id: string, valueLabel: string) {