quick fix tests relying on classes of child components

changing class names in the UserTeaser leads to tests failing for other components, like SearchableInput and NotificationsTable – I just updated the classes but long-term it would be good to find a way to not rely on implementation details of child components – maybe just test if the child component is rendered?

webapp/components/NotificationsTable/NotificationsTable.spec.js

@@ -89,8 +89,8 @@ describe('NotificationsTable.vue', () => {
         })
 
         it('renders the author', () => {
-          const username = firstRowNotification.find('.username')
-          expect(username.text()).toEqual(postNotification.from.author.name)
+          const userinfo = firstRowNotification.find('.user-teaser > .info')
+          expect(userinfo.text()).toContain(postNotification.from.author.name)
         })
 
         it('renders the reason for the notification', () => {
@@ -122,8 +122,8 @@ describe('NotificationsTable.vue', () => {
         })
 
         it('renders the author', () => {
-          const username = secondRowNotification.find('.username')
-          expect(username.text()).toEqual(commentNotification.from.author.name)
+          const userinfo = secondRowNotification.find('.user-teaser > .info')
+          expect(userinfo.text()).toContain(commentNotification.from.author.name)
         })
 
         it('renders the reason for the notification', () => {

webapp/components/features/ReportRow/ReportRow.vue

@@ -19,11 +19,7 @@
       <!-- Content Column -->
       <td class="ds-table-col" data-test="report-content">
         <client-only v-if="isUser">
-          <user-teaser
-            :user="report.resource"
-            :showAvatar="false"
-            :showPopover="false"
-          />
+          <user-teaser :user="report.resource" :showAvatar="false" :showPopover="false" />
         </client-only>
         <nuxt-link v-else class="title" :to="linkTarget">
           {{ linkText | truncate(50) }}
@@ -33,11 +29,7 @@
       <!-- Author Column -->
       <td class="ds-table-col" data-test="report-author">
         <client-only v-if="!isUser">
-          <user-teaser
-            :user="report.resource.author"
-            :showAvatar="false"
-            :showPopover="false"
-          />
+          <user-teaser :user="report.resource.author" :showAvatar="false" :showPopover="false" />
         </client-only>
         <span v-else>—</span>
       </td>

webapp/components/generic/SearchableInput/SearchableInput.spec.js

@@ -97,7 +97,7 @@ describe('SearchableInput.vue', () => {
       it("pushes to user's profile", async () => {
         select.element.value = 'Bob'
         select.trigger('input')
-        const users = wrapper.findAll('.user-slug')
+        const users = wrapper.findAll('.slug')
         const bob = users.filter(item => item.text().match(/@bob-der-baumeister/))
         bob.trigger('click')
         await Vue.nextTick()