Fix E2E tests

client/e2e/src/po/anonymous-settings.po.ts

@@ -3,10 +3,8 @@ import { getCheckbox } from '../utils'
 export class AnonymousSettingsPage {
 
   async openSettings () {
-    const link = await $$('.menu-link').filter(async i => {
-      return await i.getText() === 'My settings'
-    }).then(links => links[0])
-
+    const link = await $('my-header .settings-button')
+    await link.waitForClickable()
     await link.click()
 
     await $('my-user-video-settings').waitForDisplayed()

client/e2e/src/po/login.po.ts

@@ -76,7 +76,7 @@ export class LoginPage {
   }
 
   async logout () {
-    const loggedInDropdown = $('.logged-in-more .logged-in-info')
+    const loggedInDropdown = $('.logged-in-container .logged-in-info')
 
     await loggedInDropdown.waitForClickable()
     await loggedInDropdown.click()
@@ -87,7 +87,7 @@ export class LoginPage {
     await logout.click()
 
     await browser.waitUntil(() => {
-      return $$('.login-buttons-block, my-error-page a[href="/login"]').some(e => e.isDisplayed())
+      return $$('my-login-link, my-error-page a[href="/login"]').some(e => e.isDisplayed())
     })
   }
 
@@ -98,7 +98,7 @@ export class LoginPage {
   }
 
   private getLoggedInInfoElem () {
-    return $('.logged-in-display-name')
+    return $('.logged-in-info .display-name')
   }
 
   private getSuffix () {

client/e2e/src/po/signup.po.ts

@@ -6,7 +6,7 @@ export class SignupPage {
     return $('.create-account-button')
   }
 
-  async clickOnRegisterInMenu () {
+  async clickOnRegisterButton () {
     const button = this.getRegisterMenuButton()
 
     await button.waitForClickable()
@@ -74,7 +74,7 @@ export class SignupPage {
       name: string
     }
   }) {
-    await this.clickOnRegisterInMenu()
+    await this.clickOnRegisterButton()
     await this.validateStep()
     await this.checkTerms()
     await this.validateStep()

client/e2e/src/po/video-list.po.ts

@@ -11,9 +11,9 @@ export class VideoListPage {
 
     // We did not upload a file on a mobile device
     if (this.isMobileDevice === true || this.isSafari === true) {
-      url = 'https://peertube2.cpy.re/videos/local'
+      url = 'https://peertube2.cpy.re/videos/browse?scope=local'
     } else {
-      url = '/videos/recently-added'
+      url = '/videos/browse'
     }
 
     await go(url)
@@ -24,19 +24,13 @@ export class VideoListPage {
     await this.waitForList()
   }
 
-  async goOnLocal () {
-    await $('.menu-link[href="/videos/local"]').click()
-    await this.waitForTitle('Local videos')
-  }
+  async goOnBrowseVideos () {
+    await $('.menu-link*=Home').click()
 
-  async goOnRecentlyAdded () {
-    await $('.menu-link[href="/videos/recently-added"]').click()
-    await this.waitForTitle('Recently added')
-  }
-
-  async goOnTrending () {
-    await $('.menu-link[href="/videos/trending"]').click()
-    await this.waitForTitle('Trending')
+    const browseVideos = $('a*=Browse videos')
+    await browseVideos.waitForClickable()
+    await browseVideos.click()
+    await this.waitForList()
   }
 
   async goOnHomepage () {
@@ -59,10 +53,11 @@ export class VideoListPage {
     await this.waitForList()
   }
 
-  getNSFWFilter () {
-    return $$('.active-filter').filter(async a => {
-      return (await a.getText()).includes('Sensitive')
-    }).then(f => f[0])
+  async getNSFWFilter () {
+    const el = $('.active-filter*=Sensitive')
+    await el.waitForDisplayed()
+
+    return el
   }
 
   async getVideosListName () {

client/e2e/src/po/video-upload.po.ts

@@ -3,7 +3,7 @@ import { getCheckbox, selectCustomSelect } from '../utils'
 
 export class VideoUploadPage {
   async navigateTo () {
-    const publishButton = await $('.root-header .publish-button')
+    const publishButton = await $('.publish-button > a')
 
     await publishButton.waitForClickable()
     await publishButton.click()
@@ -28,7 +28,7 @@ export class VideoUploadPage {
     // Wait for the upload to finish
     await browser.waitUntil(async () => {
       const warning = await $('=Publish will be available when upload is finished').isDisplayed()
-      const progress = await $('.progress-bar=100%').isDisplayed()
+      const progress = await $('.progress-container=100%').isDisplayed()
 
       return !warning && progress
     })

client/e2e/src/po/video-watch.po.ts

@@ -222,8 +222,9 @@ export class VideoWatchPage {
     await confirmButton.waitForClickable()
     await confirmButton.click()
 
-    const createdComment = await (await $('.is-child .comment-html p')).getText()
+    const createdComment = await $('.is-child .comment-html p')
+    await createdComment.waitForDisplayed()
 
-    return expect(createdComment).toBe(comment)
+    return expect(await createdComment.getTagName()).toBe(comment)
   }
 }

client/e2e/src/suites-local/plugins.e2e-spec.ts

@@ -13,7 +13,7 @@ describe('Plugins', () => {
   }
 
   async function expectSubmitState ({ disabled }: { disabled: boolean }) {
-    const disabledSubmit = await $('my-button .disabled')
+    const disabledSubmit = await $('my-button [disabled]')
 
     if (disabled) expect(await disabledSubmit.isDisplayed()).toBeTruthy()
     else expect(await disabledSubmit.isDisplayed()).toBeFalsy()

client/e2e/src/suites-local/signup.e2e-spec.ts

@@ -126,7 +126,7 @@ describe('Signup', () => {
       })
 
       it('Should go on signup page', async function () {
-        await signupPage.clickOnRegisterInMenu()
+        await signupPage.clickOnRegisterButton()
       })
 
       it('Should validate the first step (about page)', async function () {
@@ -179,7 +179,7 @@ describe('Signup', () => {
       })
 
       it('Should go on signup page', async function () {
-        await signupPage.clickOnRegisterInMenu()
+        await signupPage.clickOnRegisterButton()
       })
 
       it('Should validate the first step (about page)', async function () {
@@ -260,7 +260,7 @@ describe('Signup', () => {
       })
 
       it('Should go on signup page', async function () {
-        await signupPage.clickOnRegisterInMenu()
+        await signupPage.clickOnRegisterButton()
       })
 
       it('Should validate the first step (about page)', async function () {
@@ -328,7 +328,7 @@ describe('Signup', () => {
       })
 
       it('Should go on signup page', async function () {
-        await signupPage.clickOnRegisterInMenu()
+        await signupPage.clickOnRegisterButton()
       })
 
       it('Should validate the first step (about page)', async function () {

client/e2e/src/suites-local/videos-list.e2e-spec.ts

@@ -52,9 +52,7 @@ describe('Videos list', () => {
   async function checkCommonVideoListPages (policy: NSFWPolicy) {
     const promisesWithFilters = [
       videoListPage.goOnRootAccount.bind(videoListPage),
-      videoListPage.goOnLocal.bind(videoListPage),
-      videoListPage.goOnRecentlyAdded.bind(videoListPage),
-      videoListPage.goOnTrending.bind(videoListPage),
+      videoListPage.goOnBrowseVideos.bind(videoListPage),
       videoListPage.goOnRootChannel.bind(videoListPage)
     ]
 

client/e2e/src/utils/elements.ts

@@ -10,12 +10,12 @@ function isCheckboxSelected (name: string) {
 }
 
 async function selectCustomSelect (id: string, valueLabel: string) {
-  const wrapper = $(`[formcontrolname=${id}] .ng-arrow-wrapper`)
+  const wrapper = $(`[formcontrolname=${id}] span[role=combobox]`)
 
   await wrapper.waitForClickable()
   await wrapper.click()
 
-  const option = await $$(`[formcontrolname=${id}] .ng-option`).filter(async o => {
+  const option = await $$(`[formcontrolname=${id}] li[role=option]`).filter(async o => {
     const text = await o.getText()
 
     return text.trimStart().startsWith(valueLabel)

client/src/app/+videos/+video-watch/shared/action-buttons/action-buttons.component.html

@@ -21,7 +21,6 @@
     <div
       *ngIf="isVideoAddableToPlaylist()"
       class="action-dropdown" ngbDropdown placement="top" role="button" autoClose="outside"
-      (openChange)="addContent.openChange($event)"
       [ngbTooltip]="tooltipSaveToPlaylist" placement="bottom auto"
     >
       <button class="action-button action-button-save" ngbDropdownToggle>
@@ -30,7 +29,7 @@
       </button>
 
       <div ngbDropdownMenu>
-        <my-video-add-to-playlist #addContent [video]="video"></my-video-add-to-playlist>
+        <my-video-add-to-playlist [video]="video"></my-video-add-to-playlist>
       </div>
     </div>
 

client/src/app/+videos/+video-watch/shared/action-buttons/action-buttons.component.scss

@@ -15,6 +15,7 @@
     display: inline-block;
     white-space: nowrap;
     text-transform: uppercase;
+    border: 0;
 
     @include peertube-button;
     @include button-with-icon(21px, 0, -1px);

client/src/app/header/header.component.html

@@ -9,9 +9,9 @@
 
   <div class="d-flex align-items-center buttons-container">
     @if (!loggedIn) {
-      <my-button theme="tertiary" rounded="true" class="margin-button" icon="cog" (click)="openQuickSettings()"></my-button>
+      <my-button theme="tertiary" rounded="true" class="margin-button settings-button" icon="cog" (click)="openQuickSettings()"></my-button>
 
-      <a *ngIf="isRegistrationAllowed()" routerLink="/signup" class="peertube-button-link secondary-button w-100 ellipsis margin-button">
+      <a *ngIf="isRegistrationAllowed()" routerLink="/signup" class="peertube-button-link secondary-button w-100 ellipsis margin-button create-account-button">
         <my-signup-label [requiresApproval]="requiresApproval"></my-signup-label>
       </a>
 
@@ -22,7 +22,7 @@
 
       <my-button
         i18n-title title="Go to the manage your account page"
-        theme="tertiary" rounded="true" class="margin-button" icon="cog" ptRouterLink="/my-account"
+        theme="tertiary" rounded="true" class="margin-button settings-button" icon="cog" ptRouterLink="/my-account"
       ></my-button>
 
       <div

client/src/app/shared/shared-forms/select/select-options.component.ts

@@ -94,6 +94,8 @@ export class SelectOptionsComponent implements AfterContentInit, ControlValueAcc
       return
     }
 
+    this.wroteValue = undefined
+
     this.propagateChange(this.selectedId)
   }
 

client/src/app/shared/shared-main/buttons/action-dropdown.component.html

@@ -3,7 +3,7 @@
   ngbDropdown (openChange)="openChange.emit($event)" [placement]="placement" [container]="container"
 >
   <button
-    class="action-button peertube-button"
+    class="action-button peertube-button border-0"
     [ngClass]="{ 'icon-only': !label, 'peertube-button-small': buttonSize === 'small', 'secondary-button': buttonStyled && theme === 'secondary', 'primary-button': buttonStyled && theme === 'primary' }"
     ngbDropdownToggle aria-label="Open actions" i18n-aria-label
   >

client/src/app/shared/shared-main/buttons/button.component.html

@@ -1,13 +1,13 @@
 @if (ptRouterLink || ptQueryParams) {
   <a
     class="action-button"
-    [ngClass]="classes" [ngbTooltip]="tooltip" [title]="title"
+    [ngClass]="classes" [ngbTooltip]="tooltip" [attr.title]="title"
     [routerLink]="ptRouterLink" [queryParams]="ptQueryParams" [queryParamsHandling]="ptQueryParamsHandling" [routerLinkActive]="ptRouterLinkActive"
   >
     <ng-container *ngTemplateOutlet="content"></ng-container>
   </a>
 } @else {
-  <button type="button" class="action-button" [ngClass]="classes" [disabled]="disabled" [ngbTooltip]="tooltip" [title]="title">
+  <button type="button" class="action-button" [ngClass]="classes" [disabled]="disabled" [ngbTooltip]="tooltip" [attr.title]="title">
     <ng-container *ngTemplateOutlet="content"></ng-container>
   </button>
 }

client/src/app/shared/shared-main/common/progress-bar.component.scss

@@ -2,11 +2,13 @@
 @use '_mixins' as *;
 @use '_button-mixins' as *;
 
+$height: 36px;
+
 .progress-container {
   background-color: pvar(--bg-secondary-500);
   display: flex;
   overflow: hidden;
-  height: 2rem;
+  height: $height;
   font-size: 0.85rem;
   font-weight: $font-semibold;
   border-radius: 0.25rem;
@@ -15,7 +17,7 @@
   span {
     position: absolute;
     color: pvar(--fg-400);
-    line-height: 2rem;
+    line-height: $height;
     margin: 0 12px;
   }
 

client/src/app/shared/shared-main/users/signup-label.component.ts

@@ -1,12 +1,11 @@
 import { booleanAttribute, Component, Input } from '@angular/core'
-import { NgIf } from '@angular/common'
 import { ServerService } from '@app/core'
 
 @Component({
   selector: 'my-signup-label',
   templateUrl: './signup-label.component.html',
   standalone: true,
-  imports: [ NgIf ]
+  imports: []
 })
 export class SignupLabelComponent {
   @Input({ transform: booleanAttribute }) requiresApproval: boolean

client/src/app/shared/shared-video-miniature/video-filters-header.component.html

@@ -24,7 +24,7 @@
         <div class="d-inline-block active-filters">
           @for (filter of filters.getActiveFilters(); track filter.key + (filter.value || '')) {
             @if (filter.key !== 'scope') {
-              <div class="d-inline-block">
+              <div class="d-inline-block active-filter">
                 <span i18n *ngIf="filter.value">{{ filter.label }}: </span>
                 <strong>{{ getFilterValue(filter) || filter.label }}</strong>
               </div>

client/src/app/shared/shared-video-miniature/video-filters-header.component.scss

@@ -70,7 +70,7 @@ $filters-background: pvar(--bg-secondary-400);
 }
 
 .active-filters {
-  > div:not(:last-child)::after {
+  .active-filter:not(:last-child)::after {
     content: '•';
     font-weight: normal;
     display: inline-block;

client/src/sass/include/_button-mixins.scss

@@ -147,7 +147,6 @@
 
 @mixin peertube-button {
   padding: pvar(--input-y-padding) pvar(--input-x-padding);
-  border: 0;
   font-weight: $font-semibold;
 
   border-radius: 4px;

client/src/sass/primeng-custom.scss

@@ -2,7 +2,7 @@
 @use '_mixins' as *;
 @use '_icons' as *;
 
-$hover-bg: pvar(--bg-secondary-350);
+$hover-bg: pvar(--bg-secondary-400);
 
 /* stylelint-disable */
 @import 'primeng/resources/primeng.css';
@@ -233,11 +233,11 @@ body .p-dropdown-panel .p-dropdown-items .p-dropdown-item {
   margin-top: 0;
 }
 .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
-  color: pvar(--fg);
-  background: pvar(--bg-secondary-500);
+  color: pvar(--on-primary);
+  background: pvar(--primary);
 }
 .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
-  background: pvar(--bg-secondary-500);
+  background: pvar(--primary);
 }
 .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
   color: pvar(--fg);