Add latest changes from gitlab-org/gitlab@master

4 files changed, 177 insertions, 1 deletions

diff --git a/spec/frontend/feature_flags/components/strategies/flexible_rollout_spec.js b/spec/frontend/feature_flags/components/strategies/flexible_rollout_spec.js
new file mode 100644
index 00000000000..f3f70a325d0
--- /dev/null
+++ b/spec/frontend/feature_flags/components/strategies/flexible_rollout_spec.js
@@ -0,0 +1,116 @@
+import { mount } from '@vue/test-utils';
+import { GlFormInput, GlFormSelect } from '@gitlab/ui';
+import FlexibleRollout from '~/feature_flags/components/strategies/flexible_rollout.vue';
+import ParameterFormGroup from '~/feature_flags/components/strategies/parameter_form_group.vue';
+import { PERCENT_ROLLOUT_GROUP_ID } from '~/feature_flags/constants';
+import { flexibleRolloutStrategy } from '../../mock_data';
+
+const DEFAULT_PROPS = {
+  strategy: flexibleRolloutStrategy,
+};
+
+describe('feature_flags/components/strategies/flexible_rollout.vue', () => {
+  let wrapper;
+  let percentageFormGroup;
+  let percentageInput;
+  let stickinessFormGroup;
+  let stickinessSelect;
+
+  const factory = (props = {}) =>
+    mount(FlexibleRollout, { propsData: { ...DEFAULT_PROPS, ...props } });
+
+  afterEach(() => {
+    if (wrapper?.destroy) {
+      wrapper.destroy();
+    }
+
+    wrapper = null;
+  });
+
+  describe('with valid percentage', () => {
+    beforeEach(() => {
+      wrapper = factory();
+
+      percentageFormGroup = wrapper
+        .find('[data-testid="strategy-flexible-rollout-percentage"]')
+        .find(ParameterFormGroup);
+      percentageInput = percentageFormGroup.find(GlFormInput);
+      stickinessFormGroup = wrapper
+        .find('[data-testid="strategy-flexible-rollout-stickiness"]')
+        .find(ParameterFormGroup);
+      stickinessSelect = stickinessFormGroup.find(GlFormSelect);
+    });
+
+    it('displays the current percentage value', () => {
+      expect(percentageInput.element.value).toBe(flexibleRolloutStrategy.parameters.rollout);
+    });
+
+    it('displays the current stickiness value', () => {
+      expect(stickinessSelect.element.value).toBe(flexibleRolloutStrategy.parameters.stickiness);
+    });
+
+    it('emits a change when the percentage value changes', async () => {
+      percentageInput.setValue('75');
+      await wrapper.vm.$nextTick();
+      expect(wrapper.emitted('change')).toEqual([
+        [
+          {
+            parameters: {
+              rollout: '75',
+              groupId: PERCENT_ROLLOUT_GROUP_ID,
+              stickiness: flexibleRolloutStrategy.parameters.stickiness,
+            },
+          },
+        ],
+      ]);
+    });
+
+    it('emits a change when the stickiness value changes', async () => {
+      stickinessSelect.setValue('USERID');
+      await wrapper.vm.$nextTick();
+      expect(wrapper.emitted('change')).toEqual([
+        [
+          {
+            parameters: {
+              rollout: flexibleRolloutStrategy.parameters.rollout,
+              groupId: PERCENT_ROLLOUT_GROUP_ID,
+              stickiness: 'USERID',
+            },
+          },
+        ],
+      ]);
+    });
+
+    it('does not show errors', () => {
+      expect(percentageFormGroup.attributes('state')).toBe('true');
+    });
+  });
+
+  describe('with percentage that is out of range', () => {
+    beforeEach(() => {
+      wrapper = factory({ strategy: { parameters: { rollout: '101' } } });
+    });
+
+    it('shows errors', () => {
+      const formGroup = wrapper
+        .find('[data-testid="strategy-flexible-rollout-percentage"]')
+        .find(ParameterFormGroup);
+
+      expect(formGroup.attributes('state')).toBeUndefined();
+    });
+  });
+
+  describe('with percentage that is not a whole number', () => {
+    beforeEach(() => {
+      wrapper = factory({ strategy: { parameters: { rollout: '3.14' } } });
+    });
+
+    it('shows errors', () => {
+      const formGroup = wrapper
+        .find('[data-testid="strategy-flexible-rollout-percentage"]')
+        .find(ParameterFormGroup);
+
+      expect(formGroup.attributes('state')).toBeUndefined();
+    });
+  });
+});
diff --git a/spec/frontend/feature_flags/components/strategies/percent_rollout_spec.js b/spec/frontend/feature_flags/components/strategies/percent_rollout_spec.js
index da61f5ef420..de0b439f1c5 100644
--- a/spec/frontend/feature_flags/components/strategies/percent_rollout_spec.js
+++ b/spec/frontend/feature_flags/components/strategies/percent_rollout_spec.js
@@ -62,4 +62,17 @@ describe('~/feature_flags/components/strategies/percent_rollout.vue', () => {
       expect(formGroup.attributes('state')).toBeUndefined();
     });
   });
+
+  describe('with percentage that is not a whole number', () => {
+    beforeEach(() => {
+      wrapper = factory({ strategy: { parameters: { percentage: '3.14' } } });
+
+      input = wrapper.find(GlFormInput);
+      formGroup = wrapper.find(ParameterFormGroup);
+    });
+
+    it('shows errors', () => {
+      expect(formGroup.attributes('state')).toBeUndefined();
+    });
+  });
 });
diff --git a/spec/frontend/feature_flags/components/strategy_spec.js b/spec/frontend/feature_flags/components/strategy_spec.js
index 04fa3c40af9..1e3e1a76afb 100644
--- a/spec/frontend/feature_flags/components/strategy_spec.js
+++ b/spec/frontend/feature_flags/components/strategy_spec.js
@@ -1,10 +1,11 @@
 import { mount } from '@vue/test-utils';
 import { last } from 'lodash';
-import { GlFormSelect, GlLink, GlToken, GlButton } from '@gitlab/ui';
+import { GlAlert, GlFormSelect, GlLink, GlToken, GlButton } from '@gitlab/ui';
 import {
   PERCENT_ROLLOUT_GROUP_ID,
   ROLLOUT_STRATEGY_ALL_USERS,
   ROLLOUT_STRATEGY_PERCENT_ROLLOUT,
+  ROLLOUT_STRATEGY_FLEXIBLE_ROLLOUT,
   ROLLOUT_STRATEGY_USER_ID,
   ROLLOUT_STRATEGY_GITLAB_USER_LIST,
 } from '~/feature_flags/constants';
@@ -66,6 +67,7 @@ describe('Feature flags strategy', () => {
     name
     ${ROLLOUT_STRATEGY_ALL_USERS}
     ${ROLLOUT_STRATEGY_PERCENT_ROLLOUT}
+    ${ROLLOUT_STRATEGY_FLEXIBLE_ROLLOUT}
     ${ROLLOUT_STRATEGY_USER_ID}
     ${ROLLOUT_STRATEGY_GITLAB_USER_LIST}
   `('with strategy $name', ({ name }) => {
@@ -91,6 +93,26 @@ describe('Feature flags strategy', () => {
     });
   });
 
+  describe('with the gradualRolloutByUserId strategy', () => {
+    let strategy;
+
+    beforeEach(() => {
+      strategy = {
+        name: ROLLOUT_STRATEGY_PERCENT_ROLLOUT,
+        parameters: { percentage: '50', groupId: 'default' },
+        scopes: [{ environmentScope: 'production' }],
+      };
+      const propsData = { strategy, index: 0, endpoint: '' };
+      factory({ propsData, provide });
+    });
+
+    it('shows an alert asking users to consider using flexibleRollout instead', () => {
+      expect(wrapper.find(GlAlert).text()).toContain(
+        'Consider using the more flexible "Percent rollout" strategy instead.',
+      );
+    });
+  });
+
   describe('with a strategy', () => {
     describe('with a single environment scope defined', () => {
       let strategy;
diff --git a/spec/frontend/feature_flags/mock_data.js b/spec/frontend/feature_flags/mock_data.js
index d72356bad8d..ed06ea059a7 100644
--- a/spec/frontend/feature_flags/mock_data.js
+++ b/spec/frontend/feature_flags/mock_data.js
@@ -1,6 +1,7 @@
 import {
   ROLLOUT_STRATEGY_ALL_USERS,
   ROLLOUT_STRATEGY_PERCENT_ROLLOUT,
+  ROLLOUT_STRATEGY_FLEXIBLE_ROLLOUT,
   ROLLOUT_STRATEGY_GITLAB_USER_LIST,
   ROLLOUT_STRATEGY_USER_ID,
 } from '~/feature_flags/constants';
@@ -78,6 +79,24 @@ export const featureFlag = {
         },
       ],
     },
+    {
+      id: 5,
+      active: true,
+      environment_scope: 'development',
+      can_update: true,
+      protected: false,
+      created_at: '2019-01-14T06:41:40.987Z',
+      updated_at: '2019-01-14T06:41:40.987Z',
+      strategies: [
+        {
+          name: ROLLOUT_STRATEGY_FLEXIBLE_ROLLOUT,
+          parameters: {
+            rollout: '42',
+            stickiness: 'DEFAULT',
+          },
+        },
+      ],
+    },
   ],
 };
 
@@ -117,6 +136,12 @@ export const percentRolloutStrategy = {
   scopes: [],
 };
 
+export const flexibleRolloutStrategy = {
+  name: ROLLOUT_STRATEGY_FLEXIBLE_ROLLOUT,
+  parameters: { rollout: '50', groupId: 'default', stickiness: 'DEFAULT' },
+  scopes: [],
+};
+
 export const usersWithIdStrategy = {
   name: ROLLOUT_STRATEGY_USER_ID,
   parameters: { userIds: '1,2,3' },