Commit 71377ae9 authored by Jannik Lehmann's avatar Jannik Lehmann

Replace GlTable with GlTablelite for DevOps Score

parent 96d21031
<script> <script>
import { GlBadge, GlTable, GlLink, GlEmptyState } from '@gitlab/ui'; import { GlBadge, GlTableLite, GlLink, GlEmptyState } from '@gitlab/ui';
import { GlSingleStat } from '@gitlab/ui/dist/charts'; import { GlSingleStat } from '@gitlab/ui/dist/charts';
import { helpPagePath } from '~/helpers/help_page_helper'; import { helpPagePath } from '~/helpers/help_page_helper';
import { sprintf, s__ } from '~/locale'; import { sprintf, s__ } from '~/locale';
...@@ -13,7 +13,7 @@ const defaultHeaderAttrs = { ...@@ -13,7 +13,7 @@ const defaultHeaderAttrs = {
export default { export default {
components: { components: {
GlBadge, GlBadge,
GlTable, GlTableLite,
GlSingleStat, GlSingleStat,
GlLink, GlLink,
GlEmptyState, GlEmptyState,
...@@ -94,7 +94,7 @@ export default { ...@@ -94,7 +94,7 @@ export default {
:meta-text="devopsScoreMetrics.averageScore.scoreLevel.label" :meta-text="devopsScoreMetrics.averageScore.scoreLevel.label"
:variant="devopsScoreMetrics.averageScore.scoreLevel.variant" :variant="devopsScoreMetrics.averageScore.scoreLevel.variant"
/> />
<gl-table <gl-table-lite
:fields="$options.tableHeaderFields" :fields="$options.tableHeaderFields"
:items="devopsScoreMetrics.cards" :items="devopsScoreMetrics.cards"
thead-class="gl-border-t-0 gl-border-b-solid gl-border-b-1 gl-border-b-gray-100" thead-class="gl-border-t-0 gl-border-b-solid gl-border-b-1 gl-border-b-gray-100"
...@@ -108,7 +108,7 @@ export default { ...@@ -108,7 +108,7 @@ export default {
}}</gl-badge> }}</gl-badge>
</div> </div>
</template> </template>
</gl-table> </gl-table-lite>
</div> </div>
</div> </div>
</template> </template>
import { GlTable, GlBadge, GlEmptyState } from '@gitlab/ui'; import { GlTableLite, GlBadge, GlEmptyState } from '@gitlab/ui';
import { GlSingleStat } from '@gitlab/ui/dist/charts'; import { GlSingleStat } from '@gitlab/ui/dist/charts';
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
import { extendedWrapper } from 'helpers/vue_test_utils_helper'; import { extendedWrapper } from 'helpers/vue_test_utils_helper';
...@@ -20,7 +20,7 @@ describe('DevopsScore', () => { ...@@ -20,7 +20,7 @@ describe('DevopsScore', () => {
); );
}; };
const findTable = () => wrapper.findComponent(GlTable); const findTable = () => wrapper.findComponent(GlTableLite);
const findEmptyState = () => wrapper.findComponent(GlEmptyState); const findEmptyState = () => wrapper.findComponent(GlEmptyState);
const findCol = (testId) => findTable().find(`[data-testid="${testId}"]`); const findCol = (testId) => findTable().find(`[data-testid="${testId}"]`);
const findUsageCol = () => findCol('usageCol'); const findUsageCol = () => findCol('usageCol');
...@@ -124,11 +124,11 @@ describe('DevopsScore', () => { ...@@ -124,11 +124,11 @@ describe('DevopsScore', () => {
describe('table columns', () => { describe('table columns', () => {
describe('Your usage', () => { describe('Your usage', () => {
it('displays the corrrect value', () => { it('displays the correct value', () => {
expect(findUsageCol().text()).toContain('3.2'); expect(findUsageCol().text()).toContain('3.2');
}); });
it('displays the corrrect badge', () => { it('displays the correct badge', () => {
const badge = findUsageCol().find(GlBadge); const badge = findUsageCol().find(GlBadge);
expect(badge.exists()).toBe(true); expect(badge.exists()).toBe(true);
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment