Fix the thumbnail specs

app/javascript/dashboard/components/widgets/Thumbnail.spec.js

@@ -2,8 +2,8 @@ import { mount } from '@vue/test-utils';
 import Avatar from './Avatar.vue';
 import Thumbnail from './Thumbnail.vue';
 
-describe(`when there are NO errors loading the thumbnail`, () => {
-  it(`should render the agent thumbnail`, () => {
+describe('Thumbnail.vue', () => {
+  it('should render the agent thumbnail if valid image is passed', () => {
     const wrapper = mount(Thumbnail, {
       propsData: {
         src: 'https://some_valid_url.com',
@@ -14,14 +14,12 @@ describe(`when there are NO errors loading the thumbnail`, () => {
         };
       },
     });
-    expect(wrapper.find('#image').exists()).toBe(true);
+    expect(wrapper.find('.user-thumbnail').exists()).toBe(true);
     const avatarComponent = wrapper.findComponent(Avatar);
     expect(avatarComponent.exists()).toBe(false);
   });
-});
 
-describe(`when there ARE errors loading the thumbnail`, () => {
-  it(`should render the agent avatar`, () => {
+  it('should render the avatar component if invalid image is passed', () => {
     const wrapper = mount(Thumbnail, {
       propsData: {
         src: 'https://some_invalid_url.com',
@@ -32,19 +30,17 @@ describe(`when there ARE errors loading the thumbnail`, () => {
         };
       },
     });
-    expect(wrapper.find('#image').exists()).toBe(false);
+    expect(wrapper.find('.avatar-container').exists()).toBe(true);
     const avatarComponent = wrapper.findComponent(Avatar);
     expect(avatarComponent.exists()).toBe(true);
   });
-});
 
-describe(`when Avatar shows`, () => {
-  it(`initials shold correspond to username`, () => {
+  it('should the initial of the name if no image is passed', () => {
     const wrapper = mount(Avatar, {
       propsData: {
         username: 'Angie Rojas',
       },
     });
-    expect(wrapper.find('span').text()).toBe('AR');
+    expect(wrapper.find('div').text()).toBe('AR');
   });
 });