Reorganize classes, align label with filter tags, fix filtertag tests

src/components/Filters/FilterTag.vue

@@ -1,17 +1,18 @@
 <template>
-  <button
+  <div
     class="button tiny tag"
     :aria-label="$t('filters.filter-tag-aria', { filterLabel: filterLabel })"
   >
     <span>{{ filterLabel }}</span>
     <span
+      role="button"
       class="close ml-2 p-2"
       tabindex="0"
       @click="onClick"
       @keyup.enter="onClick"
       ><i class="icon cross"
     /></span>
-  </button>
+  </div>
 </template>
 <script>
 export default {

test/unit/specs/components/__snapshots__/filter-display.spec.js.snap

@@ -6,14 +6,14 @@ exports[`FilterDisplay should render correct contents 1`] = `
   class="flex flex-wrap items-center p-4"
 >
   <span
-    class="mr-2 font-semibold"
+    class="mr-2 font-semibold mb-2"
   >
     
     filters.filter-by
   
   </span>
    
-  <button
+  <div
     aria-label="filters.filter-tag-aria"
     class="button tiny tag mx-1 mb-2 ml-2"
   >
@@ -23,12 +23,13 @@ exports[`FilterDisplay should render correct contents 1`] = `
      
     <span
       class="close ml-2 p-2"
+      role="button"
       tabindex="0"
     >
       <i
         class="icon cross"
       />
     </span>
-  </button>
+  </div>
 </div>
 `;

test/unit/specs/components/__snapshots__/filter-tag.spec.js.snap

@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FilterTag should render correct contents 1`] = `
+<div
+  aria-label="filters.filter-tag-aria"
+  class="button tiny tag"
+>
+  <span>
+    bar-foo
+  </span>
+   
+  <span
+    class="close ml-2 p-2"
+    role="button"
+    tabindex="0"
+  >
+    <i
+      class="icon cross"
+    />
+  </span>
+</div>
+`;

test/unit/specs/components/filter-tag.spec.js

@@ -0,0 +1,30 @@
+import FilterTag from '~/components/Filters/FilterTag'
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
+
+describe('FilterTag', () => {
+  let options = {}
+  let props = null
+  beforeEach(() => {
+    props = {
+      code: 'foo',
+      label: 'bar-foo',
+      filterType: 'bar',
+    }
+    options = { propsData: props, listeners: { filterChanged: jest.fn() } }
+  })
+
+  it('should render correct contents', () => {
+    const { container } = render(FilterTag, options)
+    expect(container.firstChild).toMatchSnapshot()
+  })
+
+  it('should emit filterChanged event', () => {
+    render(FilterTag, options)
+    userEvent.click(screen.getByRole('button'))
+    expect(options.listeners.filterChanged).toHaveBeenCalledWith({
+      code: 'foo',
+      filterType: 'bar',
+    })
+  })
+})