diff --git a/webapp/channels/src/components/self_hosted_purchases/self_hosted_expansion_modal/index.test.tsx b/webapp/channels/src/components/self_hosted_purchases/self_hosted_expansion_modal/index.test.tsx
index 8a6efee355..2915d932de 100644
--- a/webapp/channels/src/components/self_hosted_purchases/self_hosted_expansion_modal/index.test.tsx
+++ b/webapp/channels/src/components/self_hosted_purchases/self_hosted_expansion_modal/index.test.tsx
@@ -283,22 +283,6 @@ describe('SelfHostedExpansionModal Open', () => {
fillForm(defaultSuccessForm);
});
- it('disables expansion if too few seats or no seats entered', () => {
- renderWithIntlAndStore(
, initialState);
- fillForm(defaultSuccessForm);
-
- // 0 seats entered.
- const tooFewSeats = 0;
- fireEvent.change(screen.getByTestId('seatsInput').querySelector('input') as HTMLElement, valueEvent(tooFewSeats.toString()));
- expect(screen.getByText('Complete purchase')).toBeDisabled();
- expect(screen.getByText('You must add a seat to continue')).toBeVisible();
-
- // No seats value entered.
- fireEvent.change(screen.getByTestId('seatsInput').querySelector('input') as HTMLElement, undefined);
- expect(screen.getByText('Complete purchase')).toBeDisabled();
- expect(screen.getByText('You must add a seat to continue')).toBeVisible();
- });
-
it('happy path submit shows success screen when confirmation succeeds', async () => {
renderWithIntlAndStore(
, initialState);
expect(screen.getByText('Complete purchase')).toBeDisabled();
@@ -336,13 +320,49 @@ describe('SelfHostedExpansionModal RHS Card', () => {
it('New seats input should be pre-populated with the difference from the active users and licensed seats', () => {
renderWithIntlAndStore(
, initialState);
- const expectedPrePopulatedSeats = (initialState.entities?.users?.filteredStats?.total_users_count || 1) - parseInt(initialState.entities?.general?.license?.Users || '0', 10);
+ const expectedPrePopulatedSeats = (initialState.entities?.users?.filteredStats?.total_users_count || 1) - parseInt(initialState.entities?.general?.license?.Users || '1', 10);
const seatsField = screen.getByTestId('seatsInput').querySelector('input');
expect(seatsField).toBeInTheDocument();
expect(seatsField?.value).toBe(expectedPrePopulatedSeats.toString());
});
+ it('Seat input only allows users to fill input with the licensed seats and active users difference if it is not 0', () => {
+ const expectedUserOverage = '50';
+
+ renderWithIntlAndStore(
, initialState);
+ fillForm(defaultSuccessForm);
+
+ // The seat input should already have the expected value.
+ expect(screen.getByTestId('seatsInput').querySelector('input')?.value).toContain(expectedUserOverage);
+
+ // Try to set an undefined value.
+ fireEvent.change(screen.getByTestId('seatsInput').querySelector('input') as HTMLElement, undefined);
+
+ // Expecting the seats input to now contain the difference between active users and licensed seats.
+ expect(screen.getByTestId('seatsInput').querySelector('input')?.value).toContain(expectedUserOverage);
+ expect(screen.getByText('Complete purchase')).toBeEnabled();
+ });
+
+ it('New seats input cannot be less than 1', () => {
+ if (initialState.entities?.users?.filteredStats?.total_users_count) {
+ initialState.entities.users.filteredStats.total_users_count = 50;
+ }
+
+ const expectedAddNewSeats = '1';
+
+ renderWithIntlAndStore(
, initialState);
+ fillForm(defaultSuccessForm);
+
+ // Try to set a negative value.
+ fireEvent.change(screen.getByTestId('seatsInput').querySelector('input') as HTMLElement, -10);
+ expect(screen.getByTestId('seatsInput').querySelector('input')?.value).toContain(expectedAddNewSeats);
+
+ // Try to set a 0 value.
+ fireEvent.change(screen.getByTestId('seatsInput').querySelector('input') as HTMLElement, 0);
+ expect(screen.getByTestId('seatsInput').querySelector('input')?.value).toContain(expectedAddNewSeats);
+ });
+
it('Cost per User should be represented as the current subscription price multiplied by the remaining months', () => {
renderWithIntlAndStore(
, initialState);
@@ -366,7 +386,7 @@ describe('SelfHostedExpansionModal RHS Card', () => {
const costAmount = document.getElementsByClassName('totalCostAmount')[0];
expect(costAmount).toBeInTheDocument();
- expect(costAmount).toHaveTextContent('$' + expectedTotalCost);
+ expect(costAmount).toHaveTextContent(Intl.NumberFormat('en-US', {style: 'currency', currency: 'USD'}).format(expectedTotalCost));
});
});