2 files changed, 38 insertions, 10 deletions

diff --git a/spec/frontend/invite_members/components/invite_members_modal_spec.js b/spec/frontend/invite_members/components/invite_members_modal_spec.js
index 22fcedb2eaf..b6b34e1063b 100644
--- a/spec/frontend/invite_members/components/invite_members_modal_spec.js
+++ b/spec/frontend/invite_members/components/invite_members_modal_spec.js
@@ -24,7 +24,11 @@ import {
 import eventHub from '~/invite_members/event_hub';
 import ContentTransition from '~/vue_shared/components/content_transition.vue';
 import axios from '~/lib/utils/axios_utils';
-import httpStatus, { HTTP_STATUS_CREATED } from '~/lib/utils/http_status';
+import {
+  HTTP_STATUS_BAD_REQUEST,
+  HTTP_STATUS_CREATED,
+  HTTP_STATUS_INTERNAL_SERVER_ERROR,
+} from '~/lib/utils/http_status';
 import { getParameterValues } from '~/lib/utils/url_utility';
 import {
   displaySuccessfulInvitationAlert,
@@ -361,7 +365,7 @@ describe('InviteMembersModal', () => {
 
   describe('rendering the user limit notification', () => {
     it('shows the user limit notification alert when reached limit', () => {
-      const usersLimitDataset = { reachedLimit: true };
+      const usersLimitDataset = { alertVariant: 'reached' };
 
       createInviteMembersToProjectWrapper(usersLimitDataset);
 
@@ -369,7 +373,15 @@ describe('InviteMembersModal', () => {
     });
 
     it('shows the user limit notification alert when close to dashboard limit', () => {
-      const usersLimitDataset = { closeToDashboardLimit: true };
+      const usersLimitDataset = { alertVariant: 'close' };
+
+      createInviteMembersToProjectWrapper(usersLimitDataset);
+
+      expect(findUserLimitAlert().exists()).toBe(true);
+    });
+
+    it('shows the user limit notification alert when :preview_free_user_cap is enabled', () => {
+      const usersLimitDataset = { alertVariant: 'notification' };
 
       createInviteMembersToProjectWrapper(usersLimitDataset);
 
@@ -549,7 +561,7 @@ describe('InviteMembersModal', () => {
 
         it('displays the generic error for http server error', async () => {
           mockInvitationsApi(
-            httpStatus.INTERNAL_SERVER_ERROR,
+            HTTP_STATUS_INTERNAL_SERVER_ERROR,
             'Request failed with status code 500',
           );
 
@@ -648,7 +660,7 @@ describe('InviteMembersModal', () => {
         });
 
         it('displays the api error for invalid email syntax', async () => {
-          mockInvitationsApi(httpStatus.BAD_REQUEST, invitationsApiResponse.EMAIL_INVALID);
+          mockInvitationsApi(HTTP_STATUS_BAD_REQUEST, invitationsApiResponse.EMAIL_INVALID);
 
           clickInviteButton();
 
@@ -660,7 +672,7 @@ describe('InviteMembersModal', () => {
         });
 
         it('clears the error when the modal is hidden', async () => {
-          mockInvitationsApi(httpStatus.BAD_REQUEST, invitationsApiResponse.EMAIL_INVALID);
+          mockInvitationsApi(HTTP_STATUS_BAD_REQUEST, invitationsApiResponse.EMAIL_INVALID);
 
           clickInviteButton();
 
@@ -715,7 +727,7 @@ describe('InviteMembersModal', () => {
         });
 
         it('displays the invalid syntax error for bad request', async () => {
-          mockInvitationsApi(httpStatus.BAD_REQUEST, invitationsApiResponse.ERROR_EMAIL_INVALID);
+          mockInvitationsApi(HTTP_STATUS_BAD_REQUEST, invitationsApiResponse.ERROR_EMAIL_INVALID);
 
           clickInviteButton();
 
@@ -739,7 +751,7 @@ describe('InviteMembersModal', () => {
           createInviteMembersToGroupWrapper();
 
           await triggerMembersTokenSelect([user3, user4]);
-          mockInvitationsApi(httpStatus.BAD_REQUEST, invitationsApiResponse.ERROR_EMAIL_INVALID);
+          mockInvitationsApi(HTTP_STATUS_BAD_REQUEST, invitationsApiResponse.ERROR_EMAIL_INVALID);
 
           clickInviteButton();
 
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 2a780490468..490b2e8bc7c 100644
--- a/spec/frontend/invite_members/components/user_limit_notification_spec.js
+++ b/spec/frontend/invite_members/components/user_limit_notification_spec.js
@@ -1,9 +1,14 @@
 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_VARIANT, CLOSE_TO_LIMIT_VARIANT } from '~/invite_members/constants';
+import {
+  NOTIFICATION_LIMIT_VARIANT,
+  REACHED_LIMIT_VARIANT,
+  CLOSE_TO_LIMIT_VARIANT,
+} from '~/invite_members/constants';
 import { freeUsersLimit, remainingSeats } from '../mock_data/member_modal';
 
+const INFO_ALERT_TITLE = 'Your top-level group name is over the 5 user limit.';
 const WARNING_ALERT_TITLE = 'You only have space for 2 more members in name';
 
 describe('UserLimitNotification', () => {
@@ -31,6 +36,17 @@ describe('UserLimitNotification', () => {
     });
   };
 
+  describe('when previewing free user cap', () => {
+    it("renders user's preview limit notification", () => {
+      createComponent(NOTIFICATION_LIMIT_VARIANT);
+
+      const alert = findAlert();
+
+      expect(alert.attributes('title')).toEqual(INFO_ALERT_TITLE);
+      expect(alert.text()).toContain('GitLab will enforce this limit in the future.');
+    });
+  });
+
   describe('when close to limit within a group', () => {
     it("renders user's limit notification", () => {
       createComponent(CLOSE_TO_LIMIT_VARIANT);
@@ -51,7 +67,7 @@ describe('UserLimitNotification', () => {
 
       expect(alert.attributes('title')).toEqual("You've reached your 5 members limit for name");
       expect(alert.text()).toContain(
-        'To invite new users to this namespace, you must remove existing users.',
+        'To invite new users to this top-level group, you must remove existing users.',
       );
     });
   });