mirrors/mostlymatter
1
0
Форкнуть 0
Код Задачи Запросы на слияние Действия Пакеты Проекты Релизы Вики Активность

[MM-51878]: Migrate billing history unit test to testing library (#22900)

Просмотр исходного кода 
* migrate billing history unit test to testing library
Этот коммит содержится в:
Ashish Dhama
2023-04-12 12:50:36 +05:30
коммит произвёл GitHub
родитель 4cc370098e
Коммит 0190d7dca8
4 изменённых файлов: 73 добавлений и 72 удалений
Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

37
webapp/channels/src/components/admin_console/billing/__snapshots__/billing_history.test.tsx.snap
Просмотреть файл

@@ -1,37 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`components/admin_console/billing/billing_history should match snapshot 1`] = `
<ContextProvider
value={
Object {
"store": Object {
"clearActions": [Function],
"dispatch": [Function],
"getActions": [Function],
"getState": [Function],
"replaceReducer": [Function],
"subscribe": [Function],
},
"subscription": Subscription {
"handleChangeWrapper": [Function],
"listeners": Object {
"notify": [Function],
},
"onStateChange": [Function],
"parentSub": undefined,
"store": Object {
"clearActions": [Function],
"dispatch": [Function],
"getActions": [Function],
"getState": [Function],
"replaceReducer": [Function],
"subscribe": [Function],
},
"unsubscribe": null,
},
}
}
>
<BillingHistory />
</ContextProvider>
`;

92
webapp/channels/src/components/admin_console/billing/billing_history.test.tsx
Просмотреть файл

@@ -5,11 +5,9 @@ import React from 'react';
import {Provider} from 'react-redux';
import {shallow} from 'enzyme';
import {screen} from '@testing-library/react';
import {renderWithIntlAndStore} from 'tests/react_testing_utils';
import {mountWithIntl} from 'tests/helpers/intl-test-helper';
import {renderWithIntl, renderWithIntlAndStore} from 'tests/react_testing_utils';
import mockStore from 'tests/test_store';
import {CloudLinks, HostedCustomerLinks} from 'utils/constants';
@@ -35,7 +33,7 @@ const invoiceA = {
quantity: 1,
price_per_unit: 1000,
description:
'1 × Cloud Professional (at $10.00 / month)',
'1 × Cloud Professional (at $10.00 / month)',
type: 'onpremise',
metadata: {},
},
@@ -59,7 +57,7 @@ const invoiceB = {
quantity: 1,
price_per_unit: 1000,
description:
'Trial period for Cloud Professional',
'Trial period for Cloud Professional',
type: 'onpremise',
metadata: {},
},
@@ -98,13 +96,21 @@ describe('components/admin_console/billing/billing_history', () => {
const store = mockStore(state);
test('should match snapshot', () => {
const wrapper = shallow(
test('should match the default state of the component with given props', () => {
renderWithIntl(
<Provider store={store}>
<BillingHistory/>
</Provider>,
);
expect(wrapper).toMatchSnapshot();
expect(screen.queryByText('Billing History')).toBeInTheDocument();
expect(screen.queryByText('Transactions')).toBeInTheDocument();
expect(screen.queryByText('All of your invoices will be shown here')).toBeInTheDocument();
expect(screen.getByTestId(invoiceA.number)).toHaveTextContent((invoiceA.total / 100.0).toString());
expect(screen.getByTestId(invoiceB.number)).toHaveTextContent((invoiceB.total / 100.0).toString());
expect(screen.getByTestId(invoiceA.id)).toHaveTextContent('Pending');
expect(screen.getByTestId(invoiceB.id)).toHaveTextContent('Paid');
});
test('Billing history section shows template when no invoices have been emitted yet', () => {
@@ -113,42 +119,54 @@ describe('components/admin_console/billing/billing_history', () => {
entities: {...state.entities, cloud: {invoices: {}, errors: {}}},
};
const storeNoBillingHistory = mockStore(noBillingHistoryState);
const wrapper = mountWithIntl(
renderWithIntl(
<Provider store={storeNoBillingHistory}>
<BillingHistory/>
</Provider>,
);
const legend = wrapper.find(
'.BillingHistory__cardHeaderText-bottom span',
);
expect(legend.text()).toBe(NO_INVOICES_LEGEND);
expect(screen.queryByText('Date')).not.toBeInTheDocument();
expect(screen.queryByText('Description')).not.toBeInTheDocument();
expect(screen.queryByText('Total')).not.toBeInTheDocument();
expect(screen.queryByText('Status')).not.toBeInTheDocument();
expect(screen.queryByTestId(invoiceA.number)).not.toBeInTheDocument();
expect(screen.queryByTestId(invoiceB.number)).not.toBeInTheDocument();
expect(screen.queryByTestId(invoiceA.id)).not.toBeInTheDocument();
expect(screen.queryByTestId(invoiceB.id)).not.toBeInTheDocument();
expect(screen.getByRole('link')).toHaveAttribute('href', 'https://docs.mattermost.com/cloud/cloud-billing/cloud-billing.html?utm_source=mattermost&utm_medium=in-product-cloud&utm_content=billing_history&uid=current_user_id&sid=');
expect(screen.getByRole('link')).toHaveTextContent('See how billing works');
expect(screen.getByTestId('no-invoices')).toHaveTextContent(NO_INVOICES_LEGEND);
});
test('Billing history section shows two invoices to download', () => {
const wrapper = mountWithIntl(
renderWithIntl(
<Provider store={store}>
<BillingHistory/>
</Provider>,
);
const invoiceTableRows = wrapper.find('table.BillingHistory__table tr.BillingHistory__table-row');
expect(screen.queryByText('Date')).toBeInTheDocument();
expect(screen.queryByText('Description')).toBeInTheDocument();
expect(screen.queryByText('Total')).toBeInTheDocument();
expect(screen.queryByText('Status')).toBeInTheDocument();
expect(invoiceTableRows.length).toBe(2);
expect(screen.getAllByTestId('billingHistoryTableRow')).toHaveLength(2);
});
test('Billing history section download button has the target property set as _self so it works well in desktop app', () => {
const wrapper = mountWithIntl(
renderWithIntl(
<Provider store={store}>
<BillingHistory/>
</Provider>,
);
const invoiceTableRow = wrapper.find('table.BillingHistory__table tr.BillingHistory__table-row').at(0);
const downloadLink = invoiceTableRow.find('td.BillingHistory__table-invoice a');
expect(downloadLink.prop('target')).toBe('_self');
expect(screen.getByTestId(`billingHistoryLink-${invoiceA.id}`)).toHaveAttribute('target', '_self');
expect(screen.getByTestId(`billingHistoryLink-${invoiceB.id}`)).toHaveAttribute('target', '_self');
expect(screen.getByTestId(`billingHistoryLink-${invoiceA.id}`)).toHaveAttribute('href', '/api/v4/cloud/subscription/invoices/in_1KNb3DI67GP2qpb4ueaJYBt8/pdf');
expect(screen.getByTestId(`billingHistoryLink-${invoiceB.id}`)).toHaveAttribute('href', '/api/v4/cloud/subscription/invoices/in_1KIWNTI67GP2qpb4KjGj1KAy/pdf');
});
});
@@ -191,30 +209,42 @@ describe('BillingHistory -- self-hosted', () => {
entities: {...state.entities, hostedCustomer: {invoices: {invoices: {}, invoicesLoaded: true}, errors: {}}},
};
const storeNoBillingHistory = mockStore(noBillingHistoryState);
const wrapper = mountWithIntl(
renderWithIntl(
<Provider store={storeNoBillingHistory}>
<BillingHistory/>
</Provider>,
);
const legend = wrapper.find(
'.BillingHistory__cardHeaderText-bottom span',
);
expect(legend.text()).toBe(NO_INVOICES_LEGEND);
expect(screen.queryByText('Date')).not.toBeInTheDocument();
expect(screen.queryByText('Description')).not.toBeInTheDocument();
expect(screen.queryByText('Total')).not.toBeInTheDocument();
expect(screen.queryByText('Status')).not.toBeInTheDocument();
expect(screen.queryByTestId(invoiceA.number)).not.toBeInTheDocument();
expect(screen.queryByTestId(invoiceB.number)).not.toBeInTheDocument();
expect(screen.queryByTestId(invoiceA.id)).not.toBeInTheDocument();
expect(screen.queryByTestId(invoiceB.id)).not.toBeInTheDocument();
expect(screen.getByRole('link')).toHaveAttribute('href', 'https://docs.mattermost.com/manage/self-hosted-billing.html?utm_source=mattermost&utm_medium=in-product&utm_content=billing_history&uid=current_user_id&sid=');
expect(screen.getByRole('link')).toHaveTextContent('See how billing works');
expect(screen.getByTestId('no-invoices')).toHaveTextContent(NO_INVOICES_LEGEND);
});
test('Billing history section shows two invoices to download', () => {
const store = mockStore(state);
const wrapper = mountWithIntl(
renderWithIntl(
<Provider store={store}>
<BillingHistory/>
</Provider>,
);
const invoiceTableRows = wrapper.find('table.BillingHistory__table tr.BillingHistory__table-row');
expect(invoiceTableRows.length).toBe(2);
expect(screen.queryByText('Date')).toBeInTheDocument();
expect(screen.queryByText('Description')).toBeInTheDocument();
expect(screen.queryByText('Total')).toBeInTheDocument();
expect(screen.queryByText('Status')).toBeInTheDocument();
expect(screen.getAllByTestId('billingHistoryTableRow')).toHaveLength(2);
});
});

6
webapp/channels/src/components/admin_console/billing/billing_history.tsx
Просмотреть файл

@@ -39,6 +39,7 @@ export const NoBillingHistorySection = (props: NoBillingHistorySectionProps) =>
/>
</div>
<ExternalLink
data-testid='billingHistoryLink'
location='billing_history'
href={props.selfHosted ? HostedCustomerLinks.SELF_HOSTED_BILLING : CloudLinks.BILLING_DOCS}
className='BillingHistory__noHistory-link'
@@ -84,7 +85,10 @@ const BillingHistory = () => {
defaultMessage='Transactions'
/>
</div>
<div className='BillingHistory__cardHeaderText-bottom'>
<div
data-testid='no-invoices'
className='BillingHistory__cardHeaderText-bottom'
>
<FormattedMessage
id='admin.billing.history.allPaymentsShowHere'
defaultMessage='All of your invoices will be shown here'

10
webapp/channels/src/components/admin_console/billing/billing_history_table.tsx
Просмотреть файл

@@ -176,7 +176,7 @@ export default function BillingHistoryTable({invoices}: BillingHistoryTableProps
);
}}
>
<td>
<td data-testid='billingHistoryTableRow'>
<FormattedDate
value={new Date(invoice.period_start)}
month='2-digit'
@@ -191,7 +191,10 @@ export default function BillingHistoryTable({invoices}: BillingHistoryTableProps
<InvoiceUserCount invoice={invoice}/>
</div>
</td>
<td className='BillingHistory__table-total'>
<td
data-testid={invoice.number}
className='BillingHistory__table-total'
>
<FormattedNumber
value={invoice.total / 100.0}
// eslint-disable-next-line react/style-prop-object
@@ -199,9 +202,10 @@ export default function BillingHistoryTable({invoices}: BillingHistoryTableProps
currency='USD'
/>
</td>
<td>{getPaymentStatus(invoice.status)}</td>
<td data-testid={invoice.id}>{getPaymentStatus(invoice.status)}</td>
<td className='BillingHistory__table-invoice'>
<a
data-testid={`billingHistoryLink-${invoice.id}`}
target='_self'
rel='noopener noreferrer'
onClick={(e) => e.stopPropagation()}