test: add SearchResults test/rename classes

webapp/components/_new/features/SearchResults/SearchResults.spec.js

@@ -0,0 +1,79 @@
+import { config, mount } from '@vue/test-utils'
+import Vuex from 'vuex'
+import SearchResults from './SearchResults'
+import { post } from '~/components/PostTeaser/PostTeaser.story'
+import { user } from '~/components/UserTeaser/UserTeaser.story'
+
+const localVue = global.localVue
+
+config.stubs['client-only'] = '<span><slot /></span>'
+config.stubs['nuxt-link'] = '<span><slot /></span>'
+
+describe('SearchResults', () => {
+  let mocks, getters, propsData, wrapper
+  const Wrapper = () => {
+    const store = new Vuex.Store({
+      getters,
+    })
+    return mount(SearchResults, { mocks, localVue, propsData, store })
+  }
+
+  beforeEach(() => {
+    mocks = {
+      $t: jest.fn(),
+    }
+    getters = {
+      'auth/user': () => {
+        return { id: 'u343', name: 'Matt' }
+      },
+      'auth/isModerator': () => false,
+    }
+    propsData = {}
+    wrapper = Wrapper()
+  })
+
+  describe('mount', () => {
+    it('renders tab-navigation component', () => {
+      expect(wrapper.find('.tab-navigation').exists()).toBe(true)
+    })
+
+    describe('searchResults', () => {
+      describe('contains no results', () => {
+        it('renders hc-empty component', () => {
+          expect(wrapper.find('.hc-empty').exists()).toBe(true)
+        })
+      })
+
+      describe('contains posts', () => {
+        beforeEach(() => {
+          wrapper.setData({ posts: [post], activeTab: 'Post' })
+        })
+
+        it('renders post-teaser component', () => {
+          expect(wrapper.find('.post-teaser').exists()).toBe(true)
+        })
+      })
+
+      describe('contains users', () => {
+        beforeEach(() => {
+          wrapper.setData({ users: [user], activeTab: 'User' })
+        })
+
+        it('renders user-list', () => {
+          expect(wrapper.find('.user-list').exists()).toBe(true)
+        })
+      })
+
+      describe('switchTab', () => {
+        beforeEach(() => {
+          wrapper.setData({ posts: [post], users: [user], activeTab: 'Post' })
+          wrapper.find('.tab-navigation').vm.$emit('switchTab', 'User')
+        })
+
+        it('switches activeTab when event is emitted', () => {
+          expect(wrapper.find('.user-list').exists()).toBe(true)
+        })
+      })
+    })
+  })
+})

webapp/components/_new/features/SearchResults/SearchResults.vue

@@ -1,8 +1,11 @@
 <template>
   <div class="search-results">
     <tab-navigation :tabs="tabOptions" :activeTab="activeTab" @switchTab="switchTab" />
-    <section :class="['results', activeTab === 'User' && '--user', !activeResources.length && '--empty']">
+    <section
-      <hc-empty v-if="!activeResources.length"
+      :class="['results', activeTab === 'User' && '--user', !activeResources.length && '--empty']"
+    >
+      <hc-empty
+        v-if="!activeResources.length"
         icon="tasks"
         :message="$t('search.no-results', { search })"
       />
@@ -49,7 +52,7 @@ export default {
     return {
       posts: [],
       users: [],
-      activeTab: 'Post',
+      activeTab: null,
     }
   },
   computed: {
@@ -125,7 +128,7 @@ export default {
   }
 
   .user-list > .item {
-    transition: opacity .1s;
+    transition: opacity 0.1s;
 
     &:not(:last-child) {
       margin-bottom: $space-small;

webapp/components/_new/generic/TabNavigation/TabNavigation.vue

@@ -1,5 +1,5 @@
 <template>
-  <ul class="tabs">
+  <ul class="tab-navigation">
     <li
       v-for="tab in tabs"
       :key="tab.type"
@@ -27,7 +27,7 @@ export default {
 </script>
 
 <style lang="scss">
-.tabs {
+.tab-navigation {
   display: flex;
   margin-top: $space-small;
 

webapp/pages/notifications/index.spec.js

@@ -90,7 +90,7 @@ describe('PostIndex', () => {
         expect(wrapper.vm.selected).toEqual(propsData.filterOptions[1].label)
       })
 
-      it('refreshes the notificaitons', () => {
+      it('refreshes the notifications', () => {
         expect(mocks.$apollo.queries.notifications.refresh).toHaveBeenCalledTimes(1)
       })
     })