diff --git a/ee/app/assets/javascripts/analytics/devops_report/devops_adoption/components/devops_adoption_overview_table.vue b/ee/app/assets/javascripts/analytics/devops_report/devops_adoption/components/devops_adoption_overview_table.vue index f4dbe73e962b69798962c1af96eff57906bf30bb..ae61a08b0e1aad498220e48e6e1f8a7dfca3da77 100644 --- a/ee/app/assets/javascripts/analytics/devops_report/devops_adoption/components/devops_adoption_overview_table.vue +++ b/ee/app/assets/javascripts/analytics/devops_report/devops_adoption/components/devops_adoption_overview_table.vue @@ -12,14 +12,11 @@ import { uniqueId } from 'lodash'; import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue'; import { formatNumber } from '~/locale'; import { - TABLE_TEST_IDS_HEADERS, I18N_GROUP_COL_LABEL, I18N_TABLE_REMOVE_BUTTON_DISABLED, I18N_TABLE_REMOVE_BUTTON, I18N_OVERVIEW_TABLE_HEADER_GROUP, I18N_OVERVIEW_TABLE_HEADER_SUBGROUP, - TABLE_TEST_IDS_ACTIONS, - TABLE_TEST_IDS_NAMESPACE, DEVOPS_ADOPTION_TABLE_CONFIGURATION, OVERVIEW_TABLE_SORT_BY_STORAGE_KEY, OVERVIEW_TABLE_SORT_DESC_STORAGE_KEY, @@ -39,7 +36,7 @@ const formatter = (value, key, item) => { const fieldOptions = { thClass, - thAttr: { 'data-testid': TABLE_TEST_IDS_HEADERS }, + thAttr: { 'data-testid': 'headers' }, sortable: true, sortByFormatted: true, formatter, @@ -65,10 +62,6 @@ export default { default: null, }, }, - testids: { - ACTIONS: TABLE_TEST_IDS_ACTIONS, - NAMESPACE: TABLE_TEST_IDS_NAMESPACE, - }, cols: DEVOPS_ADOPTION_TABLE_CONFIGURATION, sortByStorageKey: OVERVIEW_TABLE_SORT_BY_STORAGE_KEY, sortDescStorageKey: OVERVIEW_TABLE_SORT_DESC_STORAGE_KEY, @@ -174,7 +167,7 @@ export default { </template> <template #cell(name)="{ item }"> - <div :data-testid="$options.testids.NAMESPACE"> + <div data-testid="namespace"> <span v-if="item.group.latestSnapshot" class="gl-font-weight-bold">{{ item.group.namespace.fullName }}</span> @@ -206,10 +199,7 @@ export default { </template> <template #cell(actions)="{ item }"> - <span - v-gl-tooltip.hover="getDeleteButtonTooltipText(item.group)" - :data-testid="$options.testids.ACTIONS" - > + <span v-gl-tooltip.hover="getDeleteButtonTooltipText(item.group)" data-testid="actions"> <gl-button v-gl-modal="deleteModalId" :disabled="isCurrentGroup(item.group)" diff --git a/ee/app/assets/javascripts/analytics/devops_report/devops_adoption/components/devops_adoption_table.vue b/ee/app/assets/javascripts/analytics/devops_report/devops_adoption/components/devops_adoption_table.vue index 31cc7c053178bbb9b8501011f6aaf1a7fc438c33..263764a3c080424b11ee8326ae24669fa8c15c40 100644 --- a/ee/app/assets/javascripts/analytics/devops_report/devops_adoption/components/devops_adoption_table.vue +++ b/ee/app/assets/javascripts/analytics/devops_report/devops_adoption/components/devops_adoption_table.vue @@ -10,11 +10,6 @@ import { import { uniqueId } from 'lodash'; import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue'; import { - TABLE_TEST_IDS_HEADERS, - TABLE_TEST_IDS_NAMESPACE, - TABLE_TEST_IDS_ACTIONS, - TABLE_TEST_IDS_LOCAL_STORAGE_SORT_BY, - TABLE_TEST_IDS_LOCAL_STORAGE_SORT_DESC, TABLE_SORT_BY_STORAGE_KEY, TABLE_SORT_DESC_STORAGE_KEY, I18N_TABLE_REMOVE_BUTTON, @@ -44,7 +39,7 @@ const thClass = ['gl-bg-white!', 'gl-text-gray-400']; const fieldOptions = { thClass, - thAttr: { 'data-testid': TABLE_TEST_IDS_HEADERS }, + thAttr: { 'data-testid': 'headers' }, formatter, sortable: true, sortByFormatted: true, @@ -74,12 +69,6 @@ export default { removeButtonDisabled: I18N_TABLE_REMOVE_BUTTON_DISABLED, removeButton: I18N_TABLE_REMOVE_BUTTON, }, - testids: { - NAMESPACE: TABLE_TEST_IDS_NAMESPACE, - ACTIONS: TABLE_TEST_IDS_ACTIONS, - LOCAL_STORAGE_SORT_BY: TABLE_TEST_IDS_LOCAL_STORAGE_SORT_BY, - LOCAL_STORAGE_SORT_DESC: TABLE_TEST_IDS_LOCAL_STORAGE_SORT_DESC, - }, sortByStorageKey: TABLE_SORT_BY_STORAGE_KEY, sortDescStorageKey: TABLE_SORT_DESC_STORAGE_KEY, props: { @@ -145,18 +134,8 @@ export default { </script> <template> <div> - <local-storage-sync - v-model="sortBy" - :storage-key="$options.sortByStorageKey" - :data-testid="$options.testids.LOCAL_STORAGE_SORT_BY" - as-json - /> - <local-storage-sync - v-model="sortDesc" - :storage-key="$options.sortDescStorageKey" - :data-testid="$options.testids.LOCAL_STORAGE_SORT_DESC" - as-json - /> + <local-storage-sync v-model="sortBy" :storage-key="$options.sortByStorageKey" as-json /> + <local-storage-sync v-model="sortDesc" :storage-key="$options.sortDescStorageKey" as-json /> <gl-table :fields="tableHeaderFields" :items="enabledNamespaces" @@ -179,7 +158,7 @@ export default { </template> <template #cell(name)="{ item }"> - <div :data-testid="$options.testids.NAMESPACE"> + <div data-testid="namespace"> <strong v-if="item.latestSnapshot">{{ item.namespace.fullName }}</strong> <template v-else> <span class="gl-text-gray-400">{{ item.namespace.fullName }}</span> @@ -201,10 +180,7 @@ export default { </template> <template #cell(actions)="{ item }"> - <span - v-gl-tooltip.hover="getDeleteButtonTooltipText(item)" - :data-testid="$options.testids.ACTIONS" - > + <span v-gl-tooltip.hover="getDeleteButtonTooltipText(item)" data-testid="actions"> <gl-button v-gl-modal="deleteModalId" :disabled="isCurrentGroup(item)" diff --git a/ee/app/assets/javascripts/analytics/devops_report/devops_adoption/constants.js b/ee/app/assets/javascripts/analytics/devops_report/devops_adoption/constants.js index 669bebb1da2181dc93473712813a670394091a57..e27aec327c2ba3e54d6e8d64587faf34a2bb15b2 100644 --- a/ee/app/assets/javascripts/analytics/devops_report/devops_adoption/constants.js +++ b/ee/app/assets/javascripts/analytics/devops_report/devops_adoption/constants.js @@ -7,11 +7,6 @@ export const PROGRESS_BAR_HEIGHT = '8px'; export const DATE_TIME_FORMAT = 'yyyy-mm-dd HH:MM'; export const OVERVIEW_TABLE_NAME_KEY = 'name'; -export const TABLE_TEST_IDS_HEADERS = 'header'; -export const TABLE_TEST_IDS_NAMESPACE = 'namespaceCol'; -export const TABLE_TEST_IDS_ACTIONS = 'actionsCol'; -export const TABLE_TEST_IDS_LOCAL_STORAGE_SORT_BY = 'localStorageSortBy'; -export const TABLE_TEST_IDS_LOCAL_STORAGE_SORT_DESC = 'localStorageSortDesc'; export const TABLE_SORT_BY_STORAGE_KEY = 'devops_adoption_table_sort_by'; export const TABLE_SORT_DESC_STORAGE_KEY = 'devops_adoption_table_sort_desc'; diff --git a/ee/spec/frontend/analytics/devops_report/devops_adoption/components/devops_adoption_overview_table_spec.js b/ee/spec/frontend/analytics/devops_report/devops_adoption/components/devops_adoption_overview_table_spec.js index f6918fad7c616a626642d3465da3ddbcecefa364..c3eec3f4bfbe9965cfc593d1c243f97e579e5f35 100644 --- a/ee/spec/frontend/analytics/devops_report/devops_adoption/components/devops_adoption_overview_table_spec.js +++ b/ee/spec/frontend/analytics/devops_report/devops_adoption/components/devops_adoption_overview_table_spec.js @@ -1,18 +1,16 @@ import { GlButton, GlIcon, GlBadge, GlProgressBar } from '@gitlab/ui'; import DevopsAdoptionDeleteModal from 'ee/analytics/devops_report/devops_adoption/components/devops_adoption_delete_modal.vue'; import DevopsAdoptionOverviewTable from 'ee/analytics/devops_report/devops_adoption/components/devops_adoption_overview_table.vue'; -import { - TABLE_TEST_IDS_NAMESPACE, - TABLE_TEST_IDS_ACTIONS, - TABLE_TEST_IDS_HEADERS, - DEVOPS_ADOPTION_TABLE_CONFIGURATION, -} from 'ee/analytics/devops_report/devops_adoption/constants'; +import { DEVOPS_ADOPTION_TABLE_CONFIGURATION } from 'ee/analytics/devops_report/devops_adoption/constants'; import { createMockDirective, getBinding } from 'helpers/vue_mock_directive'; import { mountExtended } from 'helpers/vue_test_utils_helper'; import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue'; import { devopsAdoptionNamespaceData } from '../mock_data'; const DELETE_MODAL_ID = 'delete-modal-test-unique-id'; +const TABLE_TEST_IDS_HEADERS = 'headers'; +const TABLE_TEST_IDS_NAMESPACE = 'namespace'; +const TABLE_TEST_IDS_ACTIONS = 'actions'; jest.mock('lodash/uniqueId', () => (x) => `${x}test-unique-id`); diff --git a/ee/spec/frontend/analytics/devops_report/devops_adoption/components/devops_adoption_table_spec.js b/ee/spec/frontend/analytics/devops_report/devops_adoption/components/devops_adoption_table_spec.js index e4e3ef3b9e66011a57fbd4e9e1a9dc377742c4c0..43ebf0b8ff30272635927605047cc29071e00c76 100644 --- a/ee/spec/frontend/analytics/devops_report/devops_adoption/components/devops_adoption_table_spec.js +++ b/ee/spec/frontend/analytics/devops_report/devops_adoption/components/devops_adoption_table_spec.js @@ -4,16 +4,15 @@ import { nextTick } from 'vue'; import DevopsAdoptionDeleteModal from 'ee/analytics/devops_report/devops_adoption/components/devops_adoption_delete_modal.vue'; import DevopsAdoptionTable from 'ee/analytics/devops_report/devops_adoption/components/devops_adoption_table.vue'; import DevopsAdoptionTableCellFlag from 'ee/analytics/devops_report/devops_adoption/components/devops_adoption_table_cell_flag.vue'; -import { - TABLE_TEST_IDS_NAMESPACE, - TABLE_TEST_IDS_ACTIONS, - TABLE_TEST_IDS_HEADERS, - DEVOPS_ADOPTION_TABLE_CONFIGURATION, -} from 'ee/analytics/devops_report/devops_adoption/constants'; +import { DEVOPS_ADOPTION_TABLE_CONFIGURATION } from 'ee/analytics/devops_report/devops_adoption/constants'; import { createMockDirective, getBinding } from 'helpers/vue_mock_directive'; import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue'; import { devopsAdoptionNamespaceData, devopsAdoptionTableHeaders } from '../mock_data'; +const TABLE_TEST_IDS_HEADERS = 'headers'; +const TABLE_TEST_IDS_NAMESPACE = 'namespace'; +const TABLE_TEST_IDS_ACTIONS = 'actions'; + describe('DevopsAdoptionTable', () => { let wrapper;