Commit c287f904 authored by Savas Vedova's avatar Savas Vedova

Merge branch 'cngo-add-labels-to-gltoggles' into 'master'

Add labels to GlToggles

See merge request gitlab-org/gitlab!56387
parents 68cb7ac0 d08e1b60
...@@ -64,6 +64,8 @@ export default { ...@@ -64,6 +64,8 @@ export default {
v-if="!activeIssue.emailsDisabled" v-if="!activeIssue.emailsDisabled"
:value="activeIssue.subscribed" :value="activeIssue.subscribed"
:is-loading="loading" :is-loading="loading"
:label="$options.i18n.header.title"
label-position="hidden"
data-testid="notification-subscribe-toggle" data-testid="notification-subscribe-toggle"
@change="handleToggleSubscription" @change="handleToggleSubscription"
/> />
......
...@@ -18,6 +18,9 @@ import { s__, __ } from '../../locale'; ...@@ -18,6 +18,9 @@ import { s__, __ } from '../../locale';
const { UPDATING, UNINSTALLING, INSTALLING, INSTALLED, UPDATED } = APPLICATION_STATUS; const { UPDATING, UNINSTALLING, INSTALLING, INSTALLED, UPDATED } = APPLICATION_STATUS;
export default { export default {
i18n: {
modSecurityEnabled: s__('ClusterIntegration|ModSecurity enabled'),
},
title: __('Web Application Firewall'), title: __('Web Application Firewall'),
modsecurityUrl: 'https://modsecurity.org/about.html', modsecurityUrl: 'https://modsecurity.org/about.html',
components: { components: {
...@@ -202,7 +205,12 @@ export default { ...@@ -202,7 +205,12 @@ export default {
</strong> </strong>
</p> </p>
<div class="form-check form-check-inline mt-3"> <div class="form-check form-check-inline mt-3">
<gl-toggle v-model="modSecurityEnabled" :disabled="saveButtonDisabled" /> <gl-toggle
v-model="modSecurityEnabled"
:disabled="saveButtonDisabled"
:label="$options.i18n.modSecurityEnabled"
label-position="hidden"
/>
</div> </div>
<div <div
v-if="ingress.modsecurity_enabled" v-if="ingress.modsecurity_enabled"
......
...@@ -9,8 +9,14 @@ import { ...@@ -9,8 +9,14 @@ import {
GlButton, GlButton,
} from '@gitlab/ui'; } from '@gitlab/ui';
import { mapState } from 'vuex'; import { mapState } from 'vuex';
import { s__ } from '~/locale';
export default { export default {
i18n: {
toggleLabel: s__(
"ClusterIntegration|Enable or disable GitLab's connection to your Kubernetes cluster.",
),
},
components: { components: {
GlFormGroup, GlFormGroup,
GlToggle, GlToggle,
...@@ -79,11 +85,9 @@ export default { ...@@ -79,11 +85,9 @@ export default {
data-qa-selector="integration_status_toggle" data-qa-selector="integration_status_toggle"
aria-describedby="toggleCluster" aria-describedby="toggleCluster"
:disabled="!editable" :disabled="!editable"
:title=" :label="$options.i18n.toggleLabel"
s__( label-position="hidden"
'ClusterIntegration|Enable or disable GitLab\'s connection to your Kubernetes cluster.', :title="$options.i18n.toggleLabel"
)
"
/> />
</div> </div>
</div> </div>
......
<script> <script>
import { GlBadge, GlButton, GlTooltipDirective, GlModal, GlToggle, GlIcon } from '@gitlab/ui'; import { GlBadge, GlButton, GlTooltipDirective, GlModal, GlToggle, GlIcon } from '@gitlab/ui';
import { sprintf, s__ } from '~/locale'; import { __, s__, sprintf } from '~/locale';
import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
import { ROLLOUT_STRATEGY_PERCENT_ROLLOUT, NEW_VERSION_FLAG, LEGACY_FLAG } from '../constants'; import { ROLLOUT_STRATEGY_PERCENT_ROLLOUT, NEW_VERSION_FLAG, LEGACY_FLAG } from '../constants';
import { labelForStrategy } from '../utils'; import { labelForStrategy } from '../utils';
export default { export default {
i18n: {
toggleLabel: __('Feature flag status'),
},
components: { components: {
GlBadge, GlBadge,
GlButton, GlButton,
...@@ -138,6 +141,8 @@ export default { ...@@ -138,6 +141,8 @@ export default {
v-if="featureFlag.update_path" v-if="featureFlag.update_path"
:value="featureFlag.active" :value="featureFlag.active"
:disabled="statusToggleDisabled(featureFlag)" :disabled="statusToggleDisabled(featureFlag)"
:label="$options.i18n.toggleLabel"
label-position="hidden"
data-testid="feature-flag-status-toggle" data-testid="feature-flag-status-toggle"
data-track-event="click_button" data-track-event="click_button"
data-track-label="feature_flag_toggle" data-track-label="feature_flag_toggle"
......
...@@ -4,6 +4,9 @@ import { __ } from '~/locale'; ...@@ -4,6 +4,9 @@ import { __ } from '~/locale';
import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
export default { export default {
i18n: {
toggleLabel: __('Activate Service Desk'),
},
components: { components: {
ClipboardButton, ClipboardButton,
GlButton, GlButton,
...@@ -99,11 +102,12 @@ export default { ...@@ -99,11 +102,12 @@ export default {
id="service-desk-checkbox" id="service-desk-checkbox"
:value="isEnabled" :value="isEnabled"
class="d-inline-block align-middle mr-1" class="d-inline-block align-middle mr-1"
label-position="left" :label="$options.i18n.toggleLabel"
label-position="hidden"
@change="onCheckboxToggle" @change="onCheckboxToggle"
/> />
<label class="align-middle" for="service-desk-checkbox"> <label class="align-middle">
{{ __('Activate Service Desk') }} {{ $options.i18n.toggleLabel }}
</label> </label>
<div v-if="isEnabled" class="row mt-3"> <div v-if="isEnabled" class="row mt-3">
<div class="col-md-9 mb-0"> <div class="col-md-9 mb-0">
......
<script> <script>
import { GlFormGroup, GlToggle, GlSprintf } from '@gitlab/ui'; import { GlFormGroup, GlToggle, GlSprintf } from '@gitlab/ui';
import { s__ } from '~/locale';
import { ENABLED_TOGGLE_DESCRIPTION, DISABLED_TOGGLE_DESCRIPTION } from '../constants'; import { ENABLED_TOGGLE_DESCRIPTION, DISABLED_TOGGLE_DESCRIPTION } from '../constants';
export default { export default {
i18n: {
toggleLabel: s__('ContainerRegistry|Enable expiration policy'),
},
components: { components: {
GlFormGroup, GlFormGroup,
GlToggle, GlToggle,
...@@ -39,7 +43,13 @@ export default { ...@@ -39,7 +43,13 @@ export default {
<template> <template>
<gl-form-group id="expiration-policy-toggle-group" label-for="expiration-policy-toggle"> <gl-form-group id="expiration-policy-toggle-group" label-for="expiration-policy-toggle">
<div class="gl-display-flex"> <div class="gl-display-flex">
<gl-toggle id="expiration-policy-toggle" v-model="enabled" :disabled="disabled" /> <gl-toggle
id="expiration-policy-toggle"
v-model="enabled"
:label="$options.i18n.toggleLabel"
label-position="hidden"
:disabled="disabled"
/>
<span class="gl-ml-5 gl-line-height-24" data-testid="description"> <span class="gl-ml-5 gl-line-height-24" data-testid="description">
<gl-sprintf :message="toggleText"> <gl-sprintf :message="toggleText">
<template #strong="{ content }"> <template #strong="{ content }">
......
...@@ -132,11 +132,11 @@ export default { ...@@ -132,11 +132,11 @@ export default {
<div class="settings-content"> <div class="settings-content">
<form name="self-monitoring-form"> <form name="self-monitoring-form">
<p ref="selfMonitoringFormText" v-html="selfMonitoringFormText"></p> <p ref="selfMonitoringFormText" v-html="selfMonitoringFormText"></p>
<gl-form-group :label="$options.formLabels.createProject" label-for="self-monitor-toggle"> <gl-form-group>
<gl-toggle <gl-toggle
v-model="selfMonitorEnabled" v-model="selfMonitorEnabled"
:is-loading="loading" :is-loading="loading"
name="self-monitor-toggle" :label="$options.formLabels.createProject"
/> />
</gl-form-group> </gl-form-group>
</form> </form>
......
---
title: Add labels to GlToggles
merge_request: 56387
author:
type: fixed
...@@ -41,7 +41,11 @@ export default { ...@@ -41,7 +41,11 @@ export default {
<gl-loading-icon v-if="loading" size="xl" /> <gl-loading-icon v-if="loading" size="xl" />
<gl-form v-else @submit.prevent="updateMaintenanceModeSettings"> <gl-form v-else @submit.prevent="updateMaintenanceModeSettings">
<div class="gl-display-flex gl-align-items-center gl-mb-4"> <div class="gl-display-flex gl-align-items-center gl-mb-4">
<gl-toggle v-model="maintenanceEnabled" /> <gl-toggle
v-model="maintenanceEnabled"
:label="$options.i18n.toggleLabel"
label-position="hidden"
/>
<div class="gl-ml-3"> <div class="gl-ml-3">
<p class="gl-mb-0">{{ $options.i18n.toggleLabel }}</p> <p class="gl-mb-0">{{ $options.i18n.toggleLabel }}</p>
<p class="gl-mb-0 gl-text-gray-500"> <p class="gl-mb-0 gl-text-gray-500">
......
<script> <script>
import { GlToggle } from '@gitlab/ui'; import { GlToggle } from '@gitlab/ui';
import { s__ } from '~/locale';
export default { export default {
i18n: {
toggleLabel: s__('Trial|GitLab Ultimate trial (optional)'),
},
components: { components: {
GlToggle, GlToggle,
}, },
...@@ -30,5 +34,12 @@ export default { ...@@ -30,5 +34,12 @@ export default {
}; };
</script> </script>
<template> <template>
<gl-toggle v-model="trial" name="trial" data-testid="trial" @change="toggleTrial" /> <gl-toggle
v-model="trial"
name="trial"
:label="$options.i18n.toggleLabel"
label-position="hidden"
data-testid="trial"
@change="toggleTrial"
/>
</template> </template>
...@@ -2,10 +2,14 @@ ...@@ -2,10 +2,14 @@
import { GlToggle } from '@gitlab/ui'; import { GlToggle } from '@gitlab/ui';
import { mapState, mapActions } from 'vuex'; import { mapState, mapActions } from 'vuex';
import { severityFilter, scannerFilter } from 'ee/security_dashboard/helpers'; import { severityFilter, scannerFilter } from 'ee/security_dashboard/helpers';
import { s__ } from '~/locale';
import { DISMISSAL_STATES } from '../store/modules/filters/constants'; import { DISMISSAL_STATES } from '../store/modules/filters/constants';
import StandardFilter from './filters/standard_filter.vue'; import StandardFilter from './filters/standard_filter.vue';
export default { export default {
i18n: {
toggleLabel: s__('SecurityReports|Hide dismissed'),
},
components: { components: {
StandardFilter, StandardFilter,
GlToggle, GlToggle,
...@@ -45,8 +49,7 @@ export default { ...@@ -45,8 +49,7 @@ export default {
<div class="gl-display-flex ml-lg-auto p-2"> <div class="gl-display-flex ml-lg-auto p-2">
<slot name="buttons"></slot> <slot name="buttons"></slot>
<div class="pl-md-6"> <div class="pl-md-6">
<strong>{{ s__('SecurityReports|Hide dismissed') }}</strong> <gl-toggle v-model="hideDismissed" :label="$options.i18n.toggleLabel" />
<gl-toggle v-model="hideDismissed" class="gl-mt-2 js-toggle" />
</div> </div>
</div> </div>
</div> </div>
......
...@@ -19,6 +19,9 @@ import { CiliumNetworkPolicyKind } from './policy_editor/constants'; ...@@ -19,6 +19,9 @@ import { CiliumNetworkPolicyKind } from './policy_editor/constants';
import PolicyDrawer from './policy_editor/policy_drawer.vue'; import PolicyDrawer from './policy_editor/policy_drawer.vue';
export default { export default {
i18n: {
enforcementStatus: s__('NetworkPolicies|Enforcement status'),
},
components: { components: {
GlTable, GlTable,
GlEmptyState, GlEmptyState,
...@@ -294,9 +297,13 @@ export default { ...@@ -294,9 +297,13 @@ export default {
</div> </div>
</div> </div>
<h5 class="gl-mt-6">{{ s__('NetworkPolicies|Enforcement status') }}</h5> <h5 class="gl-mt-6">{{ $options.i18n.enforcementStatus }}</h5>
<p>{{ s__('NetworkPolicies|Choose whether to enforce this policy.') }}</p> <p>{{ s__('NetworkPolicies|Choose whether to enforce this policy.') }}</p>
<gl-toggle v-model="selectedPolicy.isEnabled" data-testid="policyToggle" /> <gl-toggle
v-model="selectedPolicy.isEnabled"
:label="$options.i18n.enforcementStatus"
label-position="hidden"
/>
</div> </div>
</gl-drawer> </gl-drawer>
</div> </div>
......
...@@ -35,6 +35,9 @@ import PolicyPreview from './policy_preview.vue'; ...@@ -35,6 +35,9 @@ import PolicyPreview from './policy_preview.vue';
import PolicyRuleBuilder from './policy_rule_builder.vue'; import PolicyRuleBuilder from './policy_rule_builder.vue';
export default { export default {
i18n: {
toggleLabel: s__('NetworkPolicies|Policy status'),
},
components: { components: {
GlFormGroup, GlFormGroup,
GlFormSelect, GlFormSelect,
...@@ -253,8 +256,8 @@ export default { ...@@ -253,8 +256,8 @@ export default {
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-auto"> <div class="col-md-auto">
<gl-form-group :label="s__('NetworkPolicies|Policy status')" label-for="policyStatus"> <gl-form-group>
<gl-toggle id="policyStatus" v-model="policy.isEnabled" /> <gl-toggle v-model="policy.isEnabled" :label="$options.i18n.toggleLabel" />
</gl-form-group> </gl-form-group>
</div> </div>
</div> </div>
......
...@@ -26,7 +26,7 @@ describe('Registration Trial Toggle', () => { ...@@ -26,7 +26,7 @@ describe('Registration Trial Toggle', () => {
}); });
it('shows the toggle component', () => { it('shows the toggle component', () => {
expect(wrapper.find(GlToggle).exists()).toBe(true); expect(wrapper.find(GlToggle).props('label')).toBe(RegistrationTrialToggle.i18n.toggleLabel);
}); });
it('sets the default value to be false', () => { it('sets the default value to be false', () => {
......
...@@ -77,6 +77,12 @@ describe('MaintenanceModeSettingsApp', () => { ...@@ -77,6 +77,12 @@ describe('MaintenanceModeSettingsApp', () => {
}); });
describe('GlToggle', () => { describe('GlToggle', () => {
it('has label', () => {
createComponent();
expect(findGlToggle().props('label')).toBe(MaintenanceModeSettingsApp.i18n.toggleLabel);
});
describe('onChange', () => { describe('onChange', () => {
beforeEach(() => { beforeEach(() => {
createComponent(); createComponent();
......
import { GlToggle } from '@gitlab/ui';
import { shallowMount, createLocalVue } from '@vue/test-utils'; import { shallowMount, createLocalVue } from '@vue/test-utils';
import Vuex from 'vuex'; import Vuex from 'vuex';
import Filters from 'ee/security_dashboard/components/filters.vue'; import Filters from 'ee/security_dashboard/components/filters.vue';
...@@ -42,7 +43,7 @@ describe('Filter component', () => { ...@@ -42,7 +43,7 @@ describe('Filter component', () => {
}); });
it('should display "Hide dismissed vulnerabilities" toggle', () => { it('should display "Hide dismissed vulnerabilities" toggle', () => {
expect(wrapper.findAll('.js-toggle')).toHaveLength(1); expect(wrapper.findComponent(GlToggle).props('label')).toBe(Filters.i18n.toggleLabel);
}); });
}); });
......
import { GlTable } from '@gitlab/ui'; import { GlTable, GlToggle } from '@gitlab/ui';
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
import NetworkPolicyList from 'ee/threat_monitoring/components/network_policy_list.vue'; import NetworkPolicyList from 'ee/threat_monitoring/components/network_policy_list.vue';
import PolicyDrawer from 'ee/threat_monitoring/components/policy_editor/policy_drawer.vue'; import PolicyDrawer from 'ee/threat_monitoring/components/policy_editor/policy_drawer.vue';
...@@ -40,7 +40,7 @@ describe('NetworkPolicyList component', () => { ...@@ -40,7 +40,7 @@ describe('NetworkPolicyList component', () => {
const findTableEmptyState = () => wrapper.find({ ref: 'tableEmptyState' }); const findTableEmptyState = () => wrapper.find({ ref: 'tableEmptyState' });
const findEditorDrawer = () => wrapper.find({ ref: 'editorDrawer' }); const findEditorDrawer = () => wrapper.find({ ref: 'editorDrawer' });
const findPolicyEditor = () => wrapper.find({ ref: 'policyEditor' }); const findPolicyEditor = () => wrapper.find({ ref: 'policyEditor' });
const findPolicyToggle = () => wrapper.find('[data-testid="policyToggle"]'); const findPolicyToggle = () => wrapper.find(GlToggle);
const findApplyButton = () => wrapper.find({ ref: 'applyButton' }); const findApplyButton = () => wrapper.find({ ref: 'applyButton' });
const findCancelButton = () => wrapper.find({ ref: 'cancelButton' }); const findCancelButton = () => wrapper.find({ ref: 'cancelButton' });
const findAutodevopsAlert = () => wrapper.find('[data-testid="autodevopsAlert"]'); const findAutodevopsAlert = () => wrapper.find('[data-testid="autodevopsAlert"]');
...@@ -177,7 +177,10 @@ spec: ...@@ -177,7 +177,10 @@ spec:
it('renders network policy toggle', () => { it('renders network policy toggle', () => {
const policyToggle = findPolicyToggle(); const policyToggle = findPolicyToggle();
expect(policyToggle.exists()).toBe(true); expect(policyToggle.exists()).toBe(true);
expect(policyToggle.props('value')).toBe(mockData[0].isEnabled); expect(policyToggle.props()).toMatchObject({
label: NetworkPolicyList.i18n.enforcementStatus,
value: mockData[0].isEnabled,
});
}); });
it('renders disabled apply button', () => { it('renders disabled apply button', () => {
......
...@@ -111,12 +111,9 @@ exports[`PolicyEditorApp component renders the policy editor layout 1`] = ` ...@@ -111,12 +111,9 @@ exports[`PolicyEditorApp component renders the policy editor layout 1`] = `
<div <div
class="col-md-auto" class="col-md-auto"
> >
<gl-form-group-stub <gl-form-group-stub>
label="Policy status"
label-for="policyStatus"
>
<gl-toggle-stub <gl-toggle-stub
id="policyStatus" label="Policy status"
labelposition="top" labelposition="top"
/> />
</gl-form-group-stub> </gl-form-group-stub>
......
import { GlModal } from '@gitlab/ui'; import { GlModal, GlToggle } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import NetworkPolicyEditor from 'ee/threat_monitoring/components/network_policy_editor.vue'; import NetworkPolicyEditor from 'ee/threat_monitoring/components/network_policy_editor.vue';
import { import {
...@@ -103,6 +103,10 @@ spec: ...@@ -103,6 +103,10 @@ spec:
expect(wrapper.find('section').element).toMatchSnapshot(); expect(wrapper.find('section').element).toMatchSnapshot();
}); });
it('renders toggle with label', () => {
expect(wrapper.findComponent(GlToggle).props('label')).toBe(PolicyEditorApp.i18n.toggleLabel);
});
it('does not render yaml editor', () => { it('does not render yaml editor', () => {
expect(findYamlEditor().exists()).toBe(false); expect(findYamlEditor().exists()).toBe(false);
}); });
......
...@@ -6956,6 +6956,9 @@ msgstr "" ...@@ -6956,6 +6956,9 @@ msgstr ""
msgid "ClusterIntegration|Manage your Kubernetes cluster by visiting %{provider_link}" msgid "ClusterIntegration|Manage your Kubernetes cluster by visiting %{provider_link}"
msgstr "" msgstr ""
msgid "ClusterIntegration|ModSecurity enabled"
msgstr ""
msgid "ClusterIntegration|Namespace per environment" msgid "ClusterIntegration|Namespace per environment"
msgstr "" msgstr ""
...@@ -8126,6 +8129,9 @@ msgstr "" ...@@ -8126,6 +8129,9 @@ msgstr ""
msgid "ContainerRegistry|Docker connection error" msgid "ContainerRegistry|Docker connection error"
msgstr "" msgstr ""
msgid "ContainerRegistry|Enable expiration policy"
msgstr ""
msgid "ContainerRegistry|Expiration policy is disabled" msgid "ContainerRegistry|Expiration policy is disabled"
msgstr "" msgstr ""
......
...@@ -45,6 +45,12 @@ describe('~/boards/components/sidebar/board_sidebar_subscription_spec.vue', () = ...@@ -45,6 +45,12 @@ describe('~/boards/components/sidebar/board_sidebar_subscription_spec.vue', () =
expect(findNotificationHeader().text()).toBe('Notifications'); expect(findNotificationHeader().text()).toBe('Notifications');
}); });
it('renders toggle with label', () => {
createComponent();
expect(findToggle().props('label')).toBe(BoardSidebarSubscription.i18n.header.title);
});
it('renders toggle as "off" when currently not subscribed', () => { it('renders toggle as "off" when currently not subscribed', () => {
createComponent(); createComponent();
......
...@@ -59,6 +59,12 @@ describe('IngressModsecuritySettings', () => { ...@@ -59,6 +59,12 @@ describe('IngressModsecuritySettings', () => {
}); });
}); });
it('renders toggle with label', () => {
expect(findModSecurityToggle().props('label')).toBe(
IngressModsecuritySettings.i18n.modSecurityEnabled,
);
});
it('renders save and cancel buttons', () => { it('renders save and cancel buttons', () => {
expect(findSaveButton().exists()).toBe(true); expect(findSaveButton().exists()).toBe(true);
expect(findCancelButton().exists()).toBe(true); expect(findCancelButton().exists()).toBe(true);
......
...@@ -45,8 +45,12 @@ describe('ClusterIntegrationForm', () => { ...@@ -45,8 +45,12 @@ describe('ClusterIntegrationForm', () => {
beforeEach(() => createWrapper()); beforeEach(() => createWrapper());
it('enables toggle if editable is true', () => { it('enables toggle if editable is true', () => {
expect(findGlToggle().props('disabled')).toBe(false); expect(findGlToggle().props()).toMatchObject({
disabled: false,
label: IntegrationForm.i18n.toggleLabel,
});
}); });
it('sets the envScope to default', () => { it('sets the envScope to default', () => {
expect(wrapper.find('[id="cluster_environment_scope"]').attributes('value')).toBe('*'); expect(wrapper.find('[id="cluster_environment_scope"]').attributes('value')).toBe('*');
}); });
......
...@@ -129,7 +129,10 @@ describe('Feature flag table', () => { ...@@ -129,7 +129,10 @@ describe('Feature flag table', () => {
it('should have a toggle', () => { it('should have a toggle', () => {
expect(toggle.exists()).toBe(true); expect(toggle.exists()).toBe(true);
expect(toggle.props('value')).toBe(true); expect(toggle.props()).toMatchObject({
label: FeatureFlagsTable.i18n.toggleLabel,
value: true,
});
}); });
it('should trigger a toggle event', () => { it('should trigger a toggle event', () => {
......
...@@ -40,7 +40,7 @@ describe('ServiceDeskSetting', () => { ...@@ -40,7 +40,7 @@ describe('ServiceDeskSetting', () => {
}); });
it('should see activation checkbox', () => { it('should see activation checkbox', () => {
expect(findToggle().exists()).toBe(true); expect(findToggle().props('label')).toBe(ServiceDeskSetting.i18n.toggleLabel);
}); });
it('should see main panel with the email info', () => { it('should see main panel with the email info', () => {
......
...@@ -32,7 +32,7 @@ describe('ExpirationToggle', () => { ...@@ -32,7 +32,7 @@ describe('ExpirationToggle', () => {
it('has a toggle component', () => { it('has a toggle component', () => {
mountComponent(); mountComponent();
expect(findToggle().exists()).toBe(true); expect(findToggle().props('label')).toBe(component.i18n.toggleLabel);
}); });
it('has a description', () => { it('has a description', () => {
......
...@@ -45,13 +45,10 @@ exports[`self monitor component When the self monitor project has not been creat ...@@ -45,13 +45,10 @@ exports[`self monitor component When the self monitor project has not been creat
Enabling this feature creates a project that can be used to monitor the health of your instance. Enabling this feature creates a project that can be used to monitor the health of your instance.
</p> </p>
<gl-form-group-stub <gl-form-group-stub>
label="Create Project"
label-for="self-monitor-toggle"
>
<gl-toggle-stub <gl-toggle-stub
label="Create Project"
labelposition="top" labelposition="top"
name="self-monitor-toggle"
/> />
</gl-form-group-stub> </gl-form-group-stub>
</form> </form>
......
import { GlButton } from '@gitlab/ui'; import { GlButton, GlToggle } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import { TEST_HOST } from 'helpers/test_constants'; import { TEST_HOST } from 'helpers/test_constants';
import SelfMonitor from '~/self_monitor/components/self_monitor_form.vue'; import SelfMonitor from '~/self_monitor/components/self_monitor_form.vue';
...@@ -82,6 +82,14 @@ describe('self monitor component', () => { ...@@ -82,6 +82,14 @@ describe('self monitor component', () => {
wrapper.find({ ref: 'selfMonitoringFormText' }).find('a').attributes('href'), wrapper.find({ ref: 'selfMonitoringFormText' }).find('a').attributes('href'),
).toEqual(`${TEST_HOST}/instance-administrators-random/gitlab-self-monitoring`); ).toEqual(`${TEST_HOST}/instance-administrators-random/gitlab-self-monitoring`);
}); });
it('renders toggle', () => {
wrapper = shallowMount(SelfMonitor, { store });
expect(wrapper.findComponent(GlToggle).props('label')).toBe(
SelfMonitor.formLabels.createProject,
);
});
}); });
}); });
}); });
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