Skip to content

Commit

Permalink
Add unit test for AppsUsageCard
Browse files Browse the repository at this point in the history
  • Loading branch information
tassoevan committed Sep 30, 2024
1 parent c6d6a3e commit c29b821
Show file tree
Hide file tree
Showing 7 changed files with 111 additions and 21 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
import { mockAppRoot } from '@rocket.chat/mock-providers';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import React from 'react';

import AppsUsageCard from './AppsUsageCard';

const appRoot = mockAppRoot().withTranslations('en', 'core', {
Apps_InfoText_limited:
'Community workspaces can enable up to {{marketplaceAppsMaxCount}} marketplace apps. Private apps can only be enabled in <1>premium plans</1>.',
Apps_InfoText:
'Community allows up to {{privateAppsMaxCount}} private apps and {{marketplaceAppsMaxCount}} marketplace apps to be enabled',
});

it('should render a skeleton if no data', () => {
render(<AppsUsageCard />, { wrapper: appRoot.build(), legacyRoot: true });

expect(screen.getByRole('heading', { name: 'Apps' })).toBeInTheDocument();
expect(screen.getByRole('presentation')).toBeInTheDocument();
});

it('should render data as progress bars', async () => {
render(<AppsUsageCard privateAppsLimit={{ value: 1, max: 3 }} marketplaceAppsLimit={{ value: 2, max: 5 }} />, {
wrapper: appRoot.build(),
legacyRoot: true,
});

expect(screen.getByRole('heading', { name: 'Apps' })).toBeInTheDocument();
expect(screen.getByRole('button', { name: 'Click_here_for_more_info' })).toBeInTheDocument();

expect(screen.getByRole('progressbar', { name: 'Marketplace_apps' })).toBeInTheDocument();
expect(screen.getByRole('progressbar', { name: 'Marketplace_apps' })).toHaveAttribute('aria-valuenow', '40');
expect(screen.getByText('2 / 5')).toBeInTheDocument();

expect(screen.getByRole('progressbar', { name: 'Private_apps' })).toBeInTheDocument();
expect(screen.getByRole('progressbar', { name: 'Private_apps' })).toHaveAttribute('aria-valuenow', '33');
expect(screen.getByText('1 / 3')).toBeInTheDocument();

await userEvent.click(screen.getByRole('button', { name: 'Click_here_for_more_info' }));

expect(
screen.getByText('Community workspaces can enable up to 5 marketplace apps. Private apps can only be enabled in premium plans.'),
).toBeInTheDocument();
});

it('should render an upgrade button if marketplace apps reached 80% of the limit', async () => {
render(<AppsUsageCard privateAppsLimit={{ value: 1, max: 3 }} marketplaceAppsLimit={{ value: 4, max: 5 }} />, {
wrapper: appRoot.build(),
legacyRoot: true,
});

expect(screen.getByRole('heading', { name: 'Apps' })).toBeInTheDocument();
expect(screen.getByRole('button', { name: 'Click_here_for_more_info' })).toBeInTheDocument();

expect(screen.getByRole('button', { name: 'Upgrade' })).toBeInTheDocument();

await userEvent.click(screen.getByRole('button', { name: 'Click_here_for_more_info' }));

expect(
screen.getByText('Community workspaces can enable up to 5 marketplace apps. Private apps can only be enabled in premium plans.'),
).toBeInTheDocument();
});

it('should render a full progress bar with private apps disabled', async () => {
render(<AppsUsageCard privateAppsLimit={{ value: 0, max: 0 }} marketplaceAppsLimit={{ value: 2, max: 5 }} />, {
wrapper: appRoot.build(),
legacyRoot: true,
});

expect(screen.getByRole('heading', { name: 'Apps' })).toBeInTheDocument();
expect(screen.getByRole('button', { name: 'Click_here_for_more_info' })).toBeInTheDocument();

expect(screen.getByRole('progressbar', { name: 'Marketplace_apps' })).toBeInTheDocument();
expect(screen.getByRole('progressbar', { name: 'Marketplace_apps' })).toHaveAttribute('aria-valuenow', '40');
expect(screen.getByText('2 / 5')).toBeInTheDocument();

expect(screen.getByRole('progressbar', { name: 'Private_apps' })).toBeInTheDocument();
expect(screen.getByRole('progressbar', { name: 'Private_apps' })).toHaveAttribute('aria-valuenow', '100');
expect(screen.getByText('0 / 0')).toBeInTheDocument();

await userEvent.click(screen.getByRole('button', { name: 'Click_here_for_more_info' }));

expect(screen.getByText('Community allows up to 0 private apps and 5 marketplace apps to be enabled')).toBeInTheDocument();
});
Original file line number Diff line number Diff line change
Expand Up @@ -22,14 +22,10 @@ const AppsUsageCard = ({ privateAppsLimit, marketplaceAppsLimit }: AppsUsageCard
const { t } = useTranslation();

if (!privateAppsLimit || !marketplaceAppsLimit) {
// FIXME: not accessible enough
return (
<FeatureUsageCard
card={{
title: t('Apps'),
infoText: t('Apps_InfoText'),
}}
>
<Skeleton variant='rect' width='x112' height='x112' />
<FeatureUsageCard card={{ title: t('Apps') }}>
<Skeleton variant='rect' width='x112' height='x112' role='presentation' />
</FeatureUsageCard>
);
}
Expand All @@ -46,15 +42,15 @@ const AppsUsageCard = ({ privateAppsLimit, marketplaceAppsLimit }: AppsUsageCard
title: t('Apps'),
infoText:
privateAppsCount > 0 ? (
<Trans i18nKey='Apps_InfoText_limited' tOptions={{ count: marketplaceAppsMaxCount }}>
Community workspaces can enable up to {marketplaceAppsMaxCount} marketplace apps. Private apps can only be enabled in
<Trans i18nKey='Apps_InfoText_limited' tOptions={{ marketplaceAppsMaxCount }}>
Community workspaces can enable up to {{ marketplaceAppsMaxCount }} marketplace apps. Private apps can only be enabled in{' '}
<Box is='a' href='https://www.rocket.chat/pricing' target='_blank' color='info'>
premium plans
</Box>
.
</Trans>
) : (
t('Apps_InfoText')
t('Apps_InfoText', { privateAppsMaxCount, marketplaceAppsMaxCount })
),
...(marketplaceAppsAboveWarning && {
upgradeButton: (
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { Box, ProgressBar } from '@rocket.chat/fuselage';
import { useUniqueId } from '@rocket.chat/fuselage-hooks';
import type { ReactNode } from 'react';
import React from 'react';

Expand All @@ -13,18 +14,27 @@ type AppsUsageCardSectionProps = {
const AppsUsageCardSection = ({ title, tip, appsCount, appsMaxCount, warningThreshold }: AppsUsageCardSectionProps) => {
const percentage = appsMaxCount === 0 ? 100 : Math.round((appsCount * 100) / appsMaxCount);
const warningThresholdCrossed = percentage >= warningThreshold;
const labelId = useUniqueId();

return (
<Box fontScale='c1' mb={12} title={tip}>
<Box display='flex' flexGrow='1' justifyContent='space-between' mbe={4}>
<div>{title}</div>
<div id={labelId}>{title}</div>

<Box color={warningThresholdCrossed ? 'status-font-on-danger' : 'status-font-on-success'}>
{appsCount} / {appsMaxCount}
</Box>
</Box>

<ProgressBar percentage={percentage} variant={warningThresholdCrossed ? 'danger' : 'success'} />
<ProgressBar
percentage={percentage}
variant={warningThresholdCrossed ? 'danger' : 'success'}
role='progressbar'
aria-labelledby={labelId}
aria-valuemin={0}
aria-valuemax={100}
aria-valuenow={percentage}
/>
</Box>
);
};
Expand Down
4 changes: 2 additions & 2 deletions packages/i18n/src/locales/en.i18n.json
Original file line number Diff line number Diff line change
Expand Up @@ -6481,8 +6481,8 @@
"MAC_InfoText": "(MAC) the number of unique omnichannel contacts engaged with during the billing month.",
"CountMAC_InfoText": "(MAC) the number of unique omnichannel contacts engaged with during the calendar month.",
"ActiveSessions_InfoText": "Total concurrent connections. A single user can be connected multiple times. User presence service is disabled at 200 or more to prevent performance issues.",
"Apps_InfoText": "Community allows up to 3 private apps and 5 marketplace apps to be enabled",
"Apps_InfoText_limited": "Community workspaces can enable up to {{count}} marketplace apps. Private apps can only be enabled in <1>premium plans</1>.",
"Apps_InfoText": "Community allows up to {{privateAppsMaxCount}} private apps and {{marketplaceAppsMaxCount}} marketplace apps to be enabled",
"Apps_InfoText_limited": "Community workspaces can enable up to {{marketplaceAppsMaxCount}} marketplace apps. Private apps can only be enabled in <1>premium plans</1>.",
"Remove_RocketChat_Watermark_InfoText": "Watermark is automatically removed when a paid license is active.",
"Remove_RocketChat_Watermark": "Remove Rocket.Chat watermark",
"High_scalabaility": "High scalabaility",
Expand Down
6 changes: 3 additions & 3 deletions packages/i18n/src/locales/es.i18n.json
Original file line number Diff line number Diff line change
Expand Up @@ -4107,7 +4107,7 @@
"The_application_name_is_required": "El nombre de la aplicación es obligatorio",
"The_channel_name_is_required": "El nombre del canal es obligatorio",
"The_emails_are_being_sent": "Los correos electrónicos se están enviando.",
"The_empty_room__roomName__will_be_removed_automatically": "La sala vacía <span style=\"font-weight: bold;\">{{roomName}}</span> se eliminará automáticamente.",
"The_empty_room__roomName__will_be_removed_automatically": "La sala vacía <span style=\"font-weight: bold;\">{{roomName}}</span> se eliminará automáticamente.",
"The_image_resize_will_not_work_because_we_can_not_detect_ImageMagick_or_GraphicsMagick_installed_in_your_server": "El ajuste de tamaño de las imágenes no funcionará porque no detectamos ImageMagick o GraphicsMagick instalados en tu servidor.",
"The_message_is_a_discussion_you_will_not_be_able_to_recover": "El mensaje es una discusión, así que no podrás recuperar los mensajes",
"The_mobile_notifications_were_disabled_to_all_users_go_to_Admin_Push_to_enable_the_Push_Gateway_again": "Las notificaciones móviles se han deshabilitado para todos los usuarios. Ve a \"Administración\" > \"Push\" para habilitar puerta de enlace push nuevamente",
Expand Down Expand Up @@ -5066,7 +5066,7 @@
"MAC_InfoText": "Contactos Activos Mensuales (MAC). El número de contactos únicos de Omnichannel con quienes se interactuó durante un mes de facturación",
"CountMAC_InfoText": "Contactos Activos Mensuales (MAC). El número de contactos únicos de Omnichannel con quienes se interactuó durante un mes calendario",
"ActiveSessions_InfoText": "Total de conexiones concurrentes. Un usuario puede estar conectado varias veces. El servicio de presencia de usuario se deshabilita cuando el total llega a 200 conexiones para prevenir problemas de rendimiento",
"Apps_InfoText": "Comunidad permite hasta 3 aplicaciones privadas y 5 aplicaciones de la tienda ser habilitadas",
"Apps_InfoText": "Comunidad permite hasta {{privateAppsMaxCount}} aplicaciones privadas y {{marketplaceAppsMaxCount}} aplicaciones de la tienda ser habilitadas",
"Remove_RocketChat_Watermark_InfoText": "La marca de agua es removida automticamente cuando una licencia de paga es activada",
"Remove_RocketChat_Watermark": "Remover marca de agua de Rocket.Chat",
"High_scalabaility": "Alta escalabilidad",
Expand All @@ -5085,4 +5085,4 @@
"Unlimited_seats": "Puestos ilimitados",
"Unlimited_MACs": "Contactos Activos por Mes (MAC) ilimitados",
"Unlimited_seats_MACs": "Puestos y Contactos Activos por Mes (MAC) ilimitados"
}
}
2 changes: 1 addition & 1 deletion packages/i18n/src/locales/hi-IN.i18n.json
Original file line number Diff line number Diff line change
Expand Up @@ -6108,7 +6108,7 @@
"MAC_InfoText": "(मैक) बिलिंग माह के दौरान जुड़े अद्वितीय सर्वचैनल संपर्कों की संख्या।",
"CountMAC_InfoText": "(मैक) कैलेंडर माह के दौरान जुड़े अद्वितीय ओमनीचैनल संपर्कों की संख्या।",
"ActiveSessions_InfoText": "कुल समवर्ती कनेक्शन. एक ही यूजर को कई बार कनेक्ट किया जा सकता है। प्रदर्शन समस्याओं को रोकने के लिए उपयोगकर्ता उपस्थिति सेवा 200 या उससे अधिक पर अक्षम है।",
"Apps_InfoText": "समुदाय 3 निजी ऐप्स और 5 मार्केटप्लेस ऐप्स को सक्षम करने की अनुमति देता है",
"Apps_InfoText": "समुदाय {{privateAppsMaxCount}} निजी ऐप्स और {{marketplaceAppsMaxCount}} मार्केटप्लेस ऐप्स को सक्षम करने की अनुमति देता है",
"Remove_RocketChat_Watermark_InfoText": "सशुल्क लाइसेंस सक्रिय होने पर वॉटरमार्क स्वचालित रूप से हटा दिया जाता है।",
"Remove_RocketChat_Watermark": "रॉकेट.चैट वॉटरमार्क हटाएँ",
"High_scalabaility": "उच्च मापनीयता",
Expand Down
6 changes: 3 additions & 3 deletions packages/i18n/src/locales/pl.i18n.json
Original file line number Diff line number Diff line change
Expand Up @@ -4541,7 +4541,7 @@
"The_application_name_is_required": "Wymagana jest nazwa aplikacji",
"The_channel_name_is_required": "Wymagana jest nazwa pokoju",
"The_emails_are_being_sent": "Wiadomości e-mail są wysyłane.",
"The_empty_room__roomName__will_be_removed_automatically": "Pusty pokój <span style=\"font-weight: bold;\">{{roomName}}</span> zostanie automatycznie usunięty.",
"The_empty_room__roomName__will_be_removed_automatically": "Pusty pokój <span style=\"font-weight: bold;\">{{roomName}}</span> zostanie automatycznie usunięty.",
"The_image_resize_will_not_work_because_we_can_not_detect_ImageMagick_or_GraphicsMagick_installed_in_your_server": "Zmiana rozmiaru obrazu nie będzie działać, ponieważ nie możemy wykryć zainstalowanego ImageMagick lub GraphicsMagick na serwerze.",
"The_message_is_a_discussion_you_will_not_be_able_to_recover": "Wiadomość jest dyskusją, której nie będziesz w stanie odzyskać!",
"The_mobile_notifications_were_disabled_to_all_users_go_to_Admin_Push_to_enable_the_Push_Gateway_again": "Powiadomienia mobilne zostały wyłączone dla wszystkich użytkowników, idź do \"Admin>Push\" aby uruchomić ponownie bramę push",
Expand Down Expand Up @@ -5420,10 +5420,10 @@
"UpgradeToGetMore_accessibility-certification_Body": "Zgodność ze standardami WCAG i BITV dzięki programowi dostępności Rocket.Chat.",
"UpgradeToGetMore_engagement-dashboard_Title": "Analityka",
"UpgradeToGetMore_auditing_Title": "Audyt wiadomości",
"Apps_InfoText": "Wersja Community umożliwia włączenie do 3 aplikacji prywatnych i 5 aplikacji marketplace",
"Apps_InfoText": "Wersja Community umożliwia włączenie do {{privateAppsMaxCount}} aplikacji prywatnych i {{marketplaceAppsMaxCount}} aplikacji marketplace",
"Anyone_can_react_to_messages": "Każdy może reagować na wiadomości",
"Anyone_can_access": "Każdy może uzyskać dostęp",
"Broadcast_hint_enabled": "Tylko właściciele {{roomType}} mogą pisać nowe wiadomości, ale każdy może odpowiadać w wątku",
"Anyone_can_send_new_messages": "Każdy może wysyłać nowe wiadomości",
"Select_messages_to_hide": "Wybierz wiadomości do ukrycia"
}
}

0 comments on commit c29b821

Please sign in to comment.