1150 equivalent frontend test scope in cypress with admin UI changes

.github/workflows/ci.yml

@@ -205,7 +205,7 @@ jobs:
       fail-fast: false
       matrix:
         # run copies of the current job in parallel
-        containers: [1, 2, 3, 4, 5]
+        containers: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
 
     steps:
       - name: Checkout

CHANGELOG.md

@@ -9,6 +9,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- Add missing loading retry button (Admin RoomTypesIndex) ([#1588])
+- Add reload button for replacement room type (RoomTypesDeleteButton) ([#1588])
 - Permission restrictions to prevent non-superusers from editing and deleting superusers ([#1651])
 - Permission restrictions to prevent non-superusers from assigning the superuser role ([#1651])
 - Environment variable for configuring restricted permissions that cannot be assigned to non-superuser roles ([#1651])
@@ -21,11 +23,22 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Real-time input validation on create superuser command ([#1651])
 - Error handling in room statistics ([#1535], [#1600])
 - Error handling in room attendance ([#1535], [#1600])
+- Close multiselect dropdowns on selection ([#1588])
+- Permissions loading behaviour (AdminRolesView) ([#1588])
 - Improve frontend tests for login page ([#1794])
 - Access code input type on room settings section to hide browser arrow buttons ([#1827], [#1829])
 
 ### Fixed
 
+- Search not disabled during loading (admin index pages) ([#1675], [#1588])
+- Overlays not shown after loading error (admin view pages) ([#1677], [#1588])
+- Dialog buttons not disabled correctly during actions on admin pages ([#1711], [#1588])
+- Error messages (AdminServerPoolsView, AdminRoomTypesView, AdminSettings) ([#1588])
+- Error handling (AdminUsersIndex, AdminServerPoolsView (staleError), RoomTypesDeleteButton (404 error)) ([#1588])
+- BBB logo image url input ([#1751], [#1588])
+- Access superuser attribute ([#1588])
+- Accessing multiselect ref ([#1588])
+- Overlay reload buttons ([#1588])
 - Wrong error message shown for 422 errors when verifying email ([#1744], [#1758])
 - Broken banner link style 'warning' ([#1759], [#1760])
 - Inconsistent select/multiselect loading states ([#1772])
@@ -331,6 +344,7 @@ You can find the changelog for older versions there [here](https://github.com/TH
 [#1559]: https://github.com/THM-Health/PILOS/issues/1559
 [#1561]: https://github.com/THM-Health/PILOS/pull/1561
 [#1565]: https://github.com/THM-Health/PILOS/pull/1565
+[#1588]: https://github.com/THM-Health/PILOS/pull/1588
 [#1569]: https://github.com/THM-Health/PILOS/pull/1569
 [#1595]: https://github.com/THM-Health/PILOS/pull/1595
 [#1600]: https://github.com/THM-Health/PILOS/pull/1600
@@ -342,13 +356,17 @@ You can find the changelog for older versions there [here](https://github.com/TH
 [#1618]: https://github.com/THM-Health/PILOS/pull/1618
 [#1636]: https://github.com/THM-Health/PILOS/issues/1636
 [#1651]: https://github.com/THM-Health/PILOS/issues/1651
+[#1675]: https://github.com/THM-Health/PILOS/issues/1675
+[#1677]: https://github.com/THM-Health/PILOS/issues/1677
 [#1678]: https://github.com/THM-Health/PILOS/pull/1678
 [#1679]: https://github.com/THM-Health/PILOS/issues/1679
 [#1702]: https://github.com/THM-Health/PILOS/pull/1702
 [#1704]: https://github.com/THM-Health/PILOS/pull/1704
+[#1711]: https://github.com/THM-Health/PILOS/issues/1711
 [#1721]: https://github.com/THM-Health/PILOS/issues/1721
 [#1724]: https://github.com/THM-Health/PILOS/pull/1724
 [#1744]: https://github.com/THM-Health/PILOS/issues/1744
+[#1751]: https://github.com/THM-Health/PILOS/issues/1751
 [#1758]: https://github.com/THM-Health/PILOS/pull/1758
 [#1759]: https://github.com/THM-Health/PILOS/issues/1759
 [#1760]: https://github.com/THM-Health/PILOS/pull/1760

app/Http/Requests/UpdateSettings.php

@@ -77,7 +77,7 @@ public function rules()
             'recording_attendance_retention_period' => ['required', 'numeric', Rule::enum(TimePeriod::class)],
             'recording_recording_retention_period' => ['required', 'numeric',  Rule::enum(TimePeriod::class)->except($disabledRecordingRetentionPeriods)],
 
-            'bbb_logo' => ['string', 'max:255'],
+            'bbb_logo' => ['nullable', 'string', 'max:255'],
             'bbb_logo_file' => ['image', 'max:500'],
             'bbb_style' => ['nullable', 'file', 'max:500'],
             'bbb_default_presentation' => ['nullable', 'file', 'max:'.(config('bigbluebutton.max_filesize') * 1000), 'mimes:'.config('bigbluebutton.allowed_file_mimes')],

resources/js/components/AppBanner.vue

@@ -1,5 +1,6 @@
 <template>
   <Message
+    data-test="app-banner"
     :style="{
       'border-color': background,
       'background-color': background,
@@ -20,14 +21,19 @@
     <template #messageicon> </template>
 
     <div class="container flex flex-col gap-2">
-      <p v-if="title" class="m-0 text-lg font-bold">
-        <i v-if="icon" :class="`${icon}`" />
+      <p v-if="title" class="m-0 text-lg font-bold" data-test="banner-title">
+        <i v-if="icon" :class="`${icon}`" data-test="banner-icon" />
         {{ title }}
       </p>
-      <p class="m-0 whitespace-pre-wrap">
+      <p class="m-0 whitespace-pre-wrap" data-test="banner-message">
         {{ message }}
       </p>
-      <a v-if="link" :href="link" :target="`_${linkTarget}`">
+      <a
+        v-if="link"
+        :href="link"
+        :target="`_${linkTarget}`"
+        data-test="banner-link-button"
+      >
         <Button
           :link="linkStyle === 'link'"
           :style="linkStyle === 'link' ? { color: color } : {}"

resources/js/components/AppFooter.vue

@@ -9,6 +9,7 @@
       "
       ref="footer_container"
       class="border-t bg-white p-2 border-surface dark:bg-surface-900"
+      data-test="app-footer"
     >
       <div class="container">
         <div
@@ -21,6 +22,7 @@
               link
               :href="settingsStore.getSetting('general.legal_notice_url')"
               class="p-0 text-sm"
+              data-test="legal-notice-button"
             >
               {{ $t("app.footer.legal_notice") }}
             </Button>
@@ -41,6 +43,7 @@
               rel="privacy-policy nofollow"
               :href="settingsStore.getSetting('general.privacy_policy_url')"
               class="p-0 text-sm"
+              data-test="privacy-policy-button"
             >
               {{ $t("app.footer.privacy_policy") }}
             </Button>
@@ -53,11 +56,13 @@
               class="p-0 text-sm"
               href="https://github.com/THM-Health/PILOS"
               target="_blank"
+              data-test="github-button"
               ><raw-text>PILOS</raw-text></Button
             >
             <span
               v-if="settingsStore.getSetting('general.version')"
               class="ml-2 text-sm"
+              data-test="version"
             >
               {{ $t("app.version") }}
               {{ settingsStore.getSetting("general.version") }}

resources/js/components/ColorSelect.vue

@@ -10,6 +10,7 @@
         selected: isColorSelected(color),
         'pointer-events-none cursor-not-allowed opacity-80': props.disabled,
       }"
+      data-test="color-button"
       @click="selectColor(color)"
     >
       <div class="overlay">

resources/js/components/FileInput.vue

@@ -4,6 +4,7 @@
     class="p-button p-component shrink-0"
     :class="{ 'p-disabled': disabled }"
     tabindex="0"
+    data-test="file-input-button"
     @keyup.enter="fileInputRef.click()"
     @keyup.space="fileInputRef.click()"
   >
@@ -17,6 +18,7 @@
     class="sr-only"
     :disabled="disabled"
     :accept="accept"
+    data-test="file-input-input"
     @input="fileSelected"
   />
 </template>

resources/js/components/LoginTabLocal.vue

@@ -48,6 +48,7 @@
           link
           class="self-start p-0"
           to="/forgot_password"
+          data-test="forgot-password-button"
         >
           {{ $t("auth.forgot_password") }}
         </Button>

resources/js/components/RoleSelect.vue

@@ -1,7 +1,7 @@
 <template>
   <InputGroup>
     <multiselect
-      ref="rolesMultiselectRef"
+      ref="roles-multiselect"
       :aria-labelledby="ariaLabelledby"
       data-test="role-dropdown"
       :placeholder="$t('admin.roles.select_roles')"
@@ -44,7 +44,7 @@
         </div>
       </template>
       <template #tag="{ option, remove }">
-        <Chip :label="option.name">
+        <Chip :label="option.name" data-test="role-chip">
           <span>{{ option.name }}</span>
           <Button
             v-if="
@@ -56,6 +56,7 @@
             class="h-5 w-5 rounded-full text-sm"
             icon="fas fa-xmark"
             :aria-label="$t('admin.users.remove_role', { name: option.name })"
+            data-test="remove-role-button"
             @click="remove(option)"
           />
         </Chip>
@@ -68,6 +69,7 @@
             outlined
             icon="fa-solid fa-arrow-left"
             :label="$t('app.previous_page')"
+            data-test="previous-page-button"
             @click="loadRoles(Math.max(1, currentPage - 1))"
           />
           <Button
@@ -76,6 +78,7 @@
             outlined
             icon="fa-solid fa-arrow-right"
             :label="$t('app.next_page')"
+            data-test="next-page-button"
             @click="loadRoles(currentPage + 1)"
           />
         </div>
@@ -94,7 +97,7 @@
 </template>
 
 <script setup>
-import { onBeforeMount, ref, watch } from "vue";
+import { onBeforeMount, ref, useTemplateRef, watch } from "vue";
 import { useApi } from "../composables/useApi.js";
 import { Multiselect } from "vue-multiselect";
 
@@ -139,7 +142,7 @@ const loading = ref(false);
 const loadingError = ref(false);
 const currentPage = ref(1);
 const hasNextPage = ref(false);
-const rolesMultiselectRef = ref(null);
+const rolesMultiselectRef = useTemplateRef("roles-multiselect");
 
 watch(
   () => props.modelValue,

resources/js/components/RoomTypeBadge.vue

@@ -5,6 +5,7 @@
     :pt="{
       root: { style: { background: roomType.color } },
     }"
+    data-test="room-type-badge"
   >
     {{ roomType.name }}
   </Tag>

resources/js/components/SettingsFileSelector.vue

@@ -18,6 +18,7 @@
           severity="danger"
           :label="$t('app.cancel')"
           icon="fa-solid fa-times"
+          data-test="settings-file-cancel-button"
           @click="resetFileUpload"
         />
 
@@ -27,13 +28,15 @@
           severity="danger"
           :label="$t('app.delete')"
           icon="fa-solid fa-trash"
+          data-test="settings-file-delete-button"
           @click="fileDeleted = true"
         />
         <Button
           v-if="fileDeleted"
           severity="secondary"
           icon="fa-solid fa-undo"
           :label="$t('app.undo_delete')"
+          data-test="settings-file-undo-delete-button"
           @click="fileDeleted = false"
         />
 
@@ -44,6 +47,7 @@
           :href="fileUrl"
           target="_blank"
           :label="$t('app.view')"
+          data-test="settings-file-view-button"
           icon="fa-solid fa-eye"
         />
       </div>

resources/js/components/SettingsImageSelector.vue

@@ -9,6 +9,7 @@
           type="text"
           :invalid="urlInvalid"
           :required="!showDelete"
+          data-test="settings-image-url-input"
         />
 
         <FileInput
@@ -27,6 +28,7 @@
           severity="danger"
           :label="$t('app.cancel')"
           icon="fa-solid fa-times"
+          data-test="settings-image-cancel-button"
           @click="resetFileUpload"
         />
 
@@ -36,13 +38,15 @@
           severity="danger"
           :label="$t('app.delete')"
           icon="fa-solid fa-trash"
+          data-test="settings-image-delete-button"
           @click="imageDeleted = true"
         />
         <Button
           v-if="imageDeleted"
           severity="secondary"
           :label="$t('app.undo_delete')"
           icon="fa-solid fa-undo"
+          data-test="settings-image-undo-delete-button"
           @click="imageDeleted = false"
         />
       </div>
@@ -66,6 +70,7 @@
         :src="newImageUrl ?? imageUrl"
         :width="previewWidth"
         :alt="previewAlt"
+        data-test="settings-image-preview"
       />
     </div>
   </div>

resources/js/components/SettingsRolesDeleteButton.vue

@@ -5,6 +5,7 @@
     :disabled="isBusy"
     severity="danger"
     icon="fa-solid fa-trash"
+    data-test="roles-delete-button"
     @click="showModal"
   />
 
@@ -18,20 +19,24 @@
     :dismissable-mask="!isBusy"
     :closeable="!isBusy"
     :draggable="false"
+    data-test="roles-delete-dialog"
   >
     <span>
       {{ $t("admin.roles.delete.confirm", { name: props.name }) }}
     </span>
     <template #footer>
       <Button
         :label="$t('app.no')"
+        :disabled="isBusy"
         severity="secondary"
+        data-test="dialog-cancel-button"
         @click="modalVisible = false"
       />
       <Button
         :label="$t('app.yes')"
         severity="danger"
         :loading="isBusy"
+        data-test="dialog-continue-button"
         @click="deleteRole"
       />
     </template>