From 0190d7dca8b1b91b719885b7222f0dc71a72d1ac Mon Sep 17 00:00:00 2001 From: Ashish Dhama <16203333+AshishDhama@users.noreply.github.com> Date: Wed, 12 Apr 2023 12:50:36 +0530 Subject: [PATCH] [MM-51878]: Migrate billing history unit test to testing library (#22900) * migrate billing history unit test to testing library --- .../billing_history.test.tsx.snap | 37 -------- .../billing/billing_history.test.tsx | 92 ++++++++++++------- .../admin_console/billing/billing_history.tsx | 6 +- .../billing/billing_history_table.tsx | 10 +- 4 files changed, 73 insertions(+), 72 deletions(-) delete mode 100644 webapp/channels/src/components/admin_console/billing/__snapshots__/billing_history.test.tsx.snap diff --git a/webapp/channels/src/components/admin_console/billing/__snapshots__/billing_history.test.tsx.snap b/webapp/channels/src/components/admin_console/billing/__snapshots__/billing_history.test.tsx.snap deleted file mode 100644 index d62de0083b..0000000000 --- a/webapp/channels/src/components/admin_console/billing/__snapshots__/billing_history.test.tsx.snap +++ /dev/null @@ -1,37 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`components/admin_console/billing/billing_history should match snapshot 1`] = ` - - - -`; diff --git a/webapp/channels/src/components/admin_console/billing/billing_history.test.tsx b/webapp/channels/src/components/admin_console/billing/billing_history.test.tsx index 424eb55c2b..34bb1d2a07 100644 --- a/webapp/channels/src/components/admin_console/billing/billing_history.test.tsx +++ b/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( , ); - 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( , ); - 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( , ); - 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( , ); - 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( , ); - 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( , ); - 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); }); }); diff --git a/webapp/channels/src/components/admin_console/billing/billing_history.tsx b/webapp/channels/src/components/admin_console/billing/billing_history.tsx index 512cea1e9e..f89bf195c6 100644 --- a/webapp/channels/src/components/admin_console/billing/billing_history.tsx +++ b/webapp/channels/src/components/admin_console/billing/billing_history.tsx @@ -39,6 +39,7 @@ export const NoBillingHistorySection = (props: NoBillingHistorySectionProps) => /> { defaultMessage='Transactions' /> -
+
- +
- + - {getPaymentStatus(invoice.status)} + {getPaymentStatus(invoice.status)} e.stopPropagation()}