Add specs for feature flag changes

Remove usage of GlDeprecatedButton
Some other minor cleanup

ee/app/assets/javascripts/burndown_chart/components/burn_charts.vue

 <script>
-import { GlDeprecatedButton, GlButtonGroup } from '@gitlab/ui';
+import { GlButton, GlButtonGroup } from '@gitlab/ui';
 import { __ } from '~/locale';
 import BurndownChart from './burndown_chart.vue';
 
 export default {
   components: {
-    GlDeprecatedButton,
+    GlButton,
     GlButtonGroup,
     BurndownChart,
   },
@@ -39,6 +39,12 @@ export default {
     title() {
       return this.burnupChartsEnabled ? __('Charts') : __('Burndown chart');
     },
+    issueButtonCategory() {
+      return this.issuesSelected ? 'primary' : 'secondary';
+    },
+    weightButtonCategory() {
+      return this.issuesSelected ? 'secondary' : 'primary';
+    },
   },
   methods: {
     showIssueCount() {
@@ -54,25 +60,27 @@ export default {
 <template>
   <div data-qa-selector="burndown_chart">
     <div class="burndown-header d-flex align-items-center">
-      <h3>{{ title }}</h3>
+      <h3 ref="chartsTitle">{{ title }}</h3>
       <gl-button-group class="ml-3 js-burndown-data-selector">
-        <gl-deprecated-button
+        <gl-button
           ref="totalIssuesButton"
-          :variant="issuesSelected ? 'primary' : 'inverted-primary'"
-          size="sm"
+          :category="issueButtonCategory"
+          variant="info"
+          size="small"
           @click="showIssueCount"
         >
           {{ __('Issues') }}
-        </gl-deprecated-button>
-        <gl-deprecated-button
+        </gl-button>
+        <gl-button
           ref="totalWeightButton"
-          :variant="issuesSelected ? 'inverted-primary' : 'primary'"
-          size="sm"
+          :category="weightButtonCategory"
+          variant="info"
+          size="small"
           data-qa-selector="weight_button"
           @click="showIssueWeight"
         >
           {{ __('Issue weight') }}
-        </gl-deprecated-button>
+        </gl-button>
       </gl-button-group>
     </div>
     <div v-if="burnupChartsEnabled" class="row">

ee/spec/frontend/burndown_chart/components/burn_charts_spec.js

 import { shallowMount } from '@vue/test-utils';
+import { GlButton } from '@gitlab/ui';
 import BurnCharts from 'ee/burndown_chart/components/burn_charts.vue';
+import BurndownChart from 'ee/burndown_chart/components/burndown_chart.vue';
 
 describe('burndown_chart', () => {
   let wrapper;
 
-  const issuesButton = () => wrapper.find({ ref: 'totalIssuesButton' });
-  const weightButton = () => wrapper.find({ ref: 'totalWeightButton' });
+  const findChartsTitle = () => wrapper.find({ ref: 'chartsTitle' });
+  const findIssuesButton = () => wrapper.find({ ref: 'totalIssuesButton' });
+  const findWeightButton = () => wrapper.find({ ref: 'totalWeightButton' });
+  const findActiveButtons = () =>
+    wrapper.findAll(GlButton).filter(button => button.attributes().category === 'primary');
+  const findBurndownChart = () => wrapper.find(BurndownChart);
 
   const defaultProps = {
     startDate: '2019-08-07T00:00:00.000Z',
@@ -29,7 +35,7 @@ describe('burndown_chart', () => {
     origProp = window.gon;
     window.gon = {
       features: {
-        monacoSnippets: false,
+        burnupCharts: false,
       },
     };
   });
@@ -38,28 +44,71 @@ describe('burndown_chart', () => {
     window.gon = origProp;
   });
 
-  it('inclues Issues and Issue weight buttons', () => {
+  it('includes Issues and Issue weight buttons', () => {
     createComponent();
 
-    expect(issuesButton().text()).toBe('Issues');
-    expect(weightButton().text()).toBe('Issue weight');
+    expect(findIssuesButton().text()).toBe('Issues');
+    expect(findWeightButton().text()).toBe('Issue weight');
   });
 
   it('defaults to total issues', () => {
     createComponent();
 
-    expect(issuesButton().attributes('variant')).toBe('primary');
-    expect(weightButton().attributes('variant')).toBe('inverted-primary');
+    expect(findActiveButtons().length).toBe(1);
+    expect(
+      findActiveButtons()
+        .at(0)
+        .text(),
+    ).toBe('Issues');
+    expect(findBurndownChart().props().issuesSelected).toBe(true);
   });
 
   it('toggles Issue weight', () => {
     createComponent();
 
-    weightButton().vm.$emit('click');
+    findWeightButton().vm.$emit('click');
 
     return wrapper.vm.$nextTick().then(() => {
-      expect(issuesButton().attributes('variant')).toBe('inverted-primary');
-      expect(weightButton().attributes('variant')).toBe('primary');
+      expect(findActiveButtons().length).toBe(1);
+      expect(
+        findActiveButtons()
+          .at(0)
+          .text(),
+      ).toBe('Issue weight');
+    });
+  });
+
+  describe('feature disabled', () => {
+    beforeEach(() => {
+      window.gon.features.burnupCharts = false;
+
+      createComponent();
+    });
+
+    it('does not reduce width of burndown chart', () => {
+      expect(findBurndownChart().classes()).toEqual([]);
+    });
+
+    it('sets section title and chart title correctly', () => {
+      expect(findChartsTitle().text()).toBe('Burndown chart');
+      expect(findBurndownChart().props().showTitle).toBe(false);
+    });
+  });
+
+  describe('feature enabled', () => {
+    beforeEach(() => {
+      window.gon.features.burnupCharts = true;
+
+      createComponent();
+    });
+
+    it('reduces width of burndown chart', () => {
+      expect(findBurndownChart().classes()).toContain('col-md-6');
+    });
+
+    it('sets section title and chart title correctly', () => {
+      expect(findChartsTitle().text()).toBe('Charts');
+      expect(findBurndownChart().props().showTitle).toBe(true);
     });
   });
 });