1 files changed, 37 insertions, 22 deletions

diff --git a/spec/frontend/invite_members/components/user_limit_notification_spec.js b/spec/frontend/invite_members/components/user_limit_notification_spec.js
index c779cf2ee3f..4c9adbfcc44 100644
--- a/spec/frontend/invite_members/components/user_limit_notification_spec.js
+++ b/spec/frontend/invite_members/components/user_limit_notification_spec.js
@@ -2,21 +2,31 @@ import { GlAlert, GlSprintf } from '@gitlab/ui';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import UserLimitNotification from '~/invite_members/components/user_limit_notification.vue';
 
+import {
+  REACHED_LIMIT_MESSAGE,
+  REACHED_LIMIT_UPGRADE_SUGGESTION_MESSAGE,
+} from '~/invite_members/constants';
+
+import { freeUsersLimit, membersCount } from '../mock_data/member_modal';
+
 describe('UserLimitNotification', () => {
   let wrapper;
 
   const findAlert = () => wrapper.findComponent(GlAlert);
 
-  const createComponent = (providers = {}) => {
+  const createComponent = (reachedLimit = false, usersLimitDataset = {}) => {
     wrapper = shallowMountExtended(UserLimitNotification, {
-      provide: {
-        name: 'my group',
-        newTrialRegistrationPath: 'newTrialRegistrationPath',
-        purchasePath: 'purchasePath',
-        freeUsersLimit: 5,
-        membersCount: 1,
-        ...providers,
+      propsData: {
+        reachedLimit,
+        usersLimitDataset: {
+          freeUsersLimit,
+          membersCount,
+          newTrialRegistrationPath: 'newTrialRegistrationPath',
+          purchasePath: 'purchasePath',
+          ...usersLimitDataset,
+        },
       },
+      provide: { name: 'my group' },
       stubs: { GlSprintf },
     });
   };
@@ -26,21 +36,17 @@ describe('UserLimitNotification', () => {
   });
 
   describe('when limit is not reached', () => {
-    beforeEach(() => {
+    it('renders empty block', () => {
       createComponent();
-    });
 
-    it('renders empty block', () => {
       expect(findAlert().exists()).toBe(false);
     });
   });
 
   describe('when close to limit', () => {
-    beforeEach(() => {
-      createComponent({ membersCount: 3 });
-    });
-
     it("renders user's limit notification", () => {
+      createComponent(false, { membersCount: 3 });
+
       const alert = findAlert();
 
       expect(alert.attributes('title')).toEqual(
@@ -54,18 +60,27 @@ describe('UserLimitNotification', () => {
   });
 
   describe('when limit is reached', () => {
-    beforeEach(() => {
-      createComponent({ membersCount: 5 });
-    });
-
     it("renders user's limit notification", () => {
+      createComponent(true);
+
       const alert = findAlert();
 
       expect(alert.attributes('title')).toEqual("You've reached your 5 members limit for my group");
+      expect(alert.text()).toEqual(REACHED_LIMIT_UPGRADE_SUGGESTION_MESSAGE);
+    });
 
-      expect(alert.text()).toEqual(
-        'New members will be unable to participate. You can manage your members by removing ones you no longer need. To get more members an owner of this namespace can start a trial or upgrade to a paid tier.',
-      );
+    describe('when free user namespace', () => {
+      it("renders user's limit notification", () => {
+        createComponent(true, { userNamespace: true });
+
+        const alert = findAlert();
+
+        expect(alert.attributes('title')).toEqual(
+          "You've reached your 5 members limit for my group",
+        );
+
+        expect(alert.text()).toEqual(REACHED_LIMIT_MESSAGE);
+      });
     });
   });
 });