Merge branch 'ss-psimyn/upgrade-slot-syntax' into 'master'

Update Slot syntax and specs for header_cell

See merge request gitlab-org/gitlab!40048

ee/app/assets/javascripts/licenses/components/cells/header_cell.vue

@@ -23,7 +23,7 @@ export default {
 
 <template>
   <cell class="license-header-cell" :is-flexible="false">
-    <template slot="title">
+    <template #title>
       <gl-icon class="icon" :name="icon" />
       <span class="ml-2 font-weight-bold">{{ title }}</span>
     </template>

ee/spec/frontend/licenses/components/cells/__snapshots__/header_cell_spec.js.snap

-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`HeaderCell renders an inflexible cell with a title with an icon through props 1`] = `
-<cell-stub
-  class="license-header-cell"
->
-  <template>
-    <gl-icon-stub
-      class="icon"
-      name="retry"
-      size="16"
-    />
-     
-    <span
-      class="ml-2 font-weight-bold"
-    >
-      title
-    </span>
-  </template>
-</cell-stub>
-`;

ee/spec/frontend/licenses/components/cells/header_cell_spec.js

 import { shallowMount } from '@vue/test-utils';
+import { GlIcon } from '@gitlab/ui';
+import Cell from 'ee/licenses/components/cells/cell.vue';
 import { HeaderCell } from 'ee/licenses/components/cells';
 
 describe('HeaderCell', () => {
@@ -10,16 +12,26 @@ describe('HeaderCell', () => {
         title: 'title',
         icon: 'retry',
       },
+      stubs: {
+        Cell,
+      },
     });
   }
 
+  beforeEach(() => {
+    createComponent();
+  });
+
   afterEach(() => {
     if (wrapper) wrapper.destroy();
   });
 
-  it('renders an inflexible cell with a title with an icon through props', () => {
-    createComponent();
+  it('renders a cell with the correct "inflexible" value', () => {
+    expect(wrapper.find(Cell).props('isFlexible')).toBe(false);
+  });
 
-    expect(wrapper.element).toMatchSnapshot();
+  it('renders an icon and title', () => {
+    expect(wrapper.find(GlIcon).props('name')).toBe('retry');
+    expect(wrapper.find(Cell).text()).toContain('title');
   });
 });