Merge pull request #8 from blockcoders/feature/add-switch-language

Feature/add switch language

__test__/components/infoCard.test.tsx

@@ -33,10 +33,17 @@ jest.mock('binance-api-node', () => {
   }
 })
 
-// jest.mock('react', () => ({
-//   ...jest.requireActual('react'),
-//   useState: () => [price, () => ''],
-// }))
+jest.mock('next/router', () => ({
+  useRouter: jest.fn(() => ({
+    locale: 'en',
+  })),
+}))
+
+jest.mock('../../hooks/useFormatIntl', () => ({
+  useFormatIntl: jest.fn(() => ({
+    format: jest.fn(() => 'Latest Block'),
+  })),
+}))
 
 describe('InfoCard', () => {
   it('show render', async () => {

__test__/hooks/useToast.test.tsx

@@ -1,6 +1,8 @@
 import '@testing-library/jest-dom'
-import { renderHook } from '@testing-library/react'
+import { render, renderHook } from '@testing-library/react'
+import { IntlProvider } from 'react-intl'
 import { useToast } from '../../hooks'
+import { messages } from '../../pages/_app'
 
 const dismissMock = jest.fn()
 const successMock = jest.fn()
@@ -16,7 +18,17 @@ jest.mock('react-toastify', () => ({
   },
 }))
 
+jest.mock('../../hooks/useFormatIntl', () => ({
+  useFormatIntl: jest.fn(() => ({
+    format: jest.fn(),
+  })),
+}))
+
 describe('useToast', () => {
+  beforeEach(() => {
+    render(<IntlProvider locale="en" messages={messages['en']}></IntlProvider>)
+  })
+
   it('should call success toast', () => {
     const { result } = renderHook(() => useToast())
 

__test__/pages/block-details.test.tsx

@@ -4,6 +4,8 @@ import userEvent from '@testing-library/user-event'
 import { oneBlockMock } from '../../_mocks/block-mocks'
 import { formatTimeAgo } from '../../lib/utils'
 import BlockDetails from '../../pages/block/details/[hash]'
+import { IntlProvider } from 'react-intl'
+import { messages } from '../../pages/_app'
 
 userEvent.setup()
 
@@ -40,17 +42,27 @@ jest.mock('../../generated', () => ({
   }),
 }))
 
+jest.mock('next/router', () => ({
+  useRouter: jest.fn(() => ({
+    locale: 'en',
+  })),
+}))
+
 describe('Block details', () => {
   beforeEach(() => {
-    render(<BlockDetails />)
+    render(
+      <IntlProvider locale="en" messages={messages['en']}>
+        <BlockDetails />
+      </IntlProvider>,
+    )
   })
 
   it('should show block info', async () => {
     const blockInfo = await screen.getByTestId('tbody-block')
 
     expect(blockInfo.children[0].children[1].innerHTML).toContain(oneBlockMock.number.toString())
     expect(blockInfo.children[1].children[1].innerHTML).toContain(oneBlockMock.hash)
-    expect(blockInfo.children[2].children[1].innerHTML).toContain(formatTimeAgo(oneBlockMock.timestamp))
+    expect(blockInfo.children[2].children[1].innerHTML).toContain(formatTimeAgo(oneBlockMock.timestamp, 'en'))
     expect(blockInfo.children[3].children[1].innerHTML).toContain(oneBlockMock.parentHash)
     expect(blockInfo.children[4].children[1].innerHTML).toContain(`${oneBlockMock.encodedLength} bytes`)
   })

__test__/pages/blocks.test.tsx

@@ -1,7 +1,9 @@
 import '@testing-library/jest-dom'
 import { fireEvent, render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
+import { IntlProvider } from 'react-intl'
 import { blockMocks } from '../../_mocks/block-mocks'
+import { messages } from '../../pages/_app'
 import Blocks from '../../pages/blocks'
 
 userEvent.setup()
@@ -28,12 +30,19 @@ jest.mock('../../generated', () => ({
   }),
 }))
 
-describe('Home', () => {
-  let container: HTMLElement | null = null
+jest.mock('next/router', () => ({
+  useRouter: jest.fn(() => ({
+    locale: 'en',
+  })),
+}))
 
+describe('Home', () => {
   beforeEach(() => {
-    const r = render(<Blocks />)
-    container = r.container
+    render(
+      <IntlProvider locale="en" messages={messages['en']}>
+        <Blocks />
+      </IntlProvider>,
+    )
   })
 
   it('should render 10 block rows', async () => {

__test__/pages/contract-details.test.tsx

@@ -6,6 +6,8 @@ import React from 'react'
 import { contractBase64Metada, contractDetailsMock } from '../../_mocks/contracts-mocks'
 import * as hook from '../../hooks/useSendingTx'
 import ContractDetails from '../../pages/contracts/contract/[address]'
+import { IntlProvider } from 'react-intl'
+import { messages } from '../../pages/_app'
 
 userEvent.setup()
 
@@ -49,11 +51,17 @@ jest.mock('../../hooks', () => ({
 
 const web3EnableMock = jest.fn(() => [{ address: '1234' }])
 
+const MockComponent = () => (
+  <IntlProvider locale="en" messages={messages['en']}>
+    <ContractDetails />
+  </IntlProvider>
+)
+
 describe('Contract Details', () => {
   let element: HTMLElement
   beforeEach(async () => {
     await act(() => {
-      const { container } = render(<ContractDetails />)
+      const { container } = render(<MockComponent />)
       element = container
     })
   })
@@ -86,7 +94,7 @@ describe('Contract Details', () => {
     let localElement: HTMLElement
 
     await act(() => {
-      const { container: _container } = render(<ContractDetails />)
+      const { container: _container } = render(<MockComponent />)
       localElement = _container
     })
 
@@ -141,7 +149,7 @@ describe('Contract Details', () => {
     let localElement: HTMLElement
 
     await act(() => {
-      const { container } = render(<ContractDetails />)
+      const { container } = render(<MockComponent />)
       localElement = container
     })
 
@@ -180,7 +188,7 @@ describe('Contract Details', () => {
       fireEvent.click(el)
 
       const textAreaEl = await screen.getByPlaceholderText(
-        'Plase upload the metadata of the contract in a Base64 encoded format.',
+        'Please upload the metadata of the contract in a Base64 encoded format.',
       )
 
       expect(textAreaEl).toBeInTheDocument()
@@ -198,7 +206,7 @@ describe('Contract Details', () => {
       fireEvent.click(el)
 
       const textAreaEl = screen.getByPlaceholderText(
-        'Plase upload the metadata of the contract in a Base64 encoded format.',
+        'Please upload the metadata of the contract in a Base64 encoded format.',
       )
 
       fireEvent.change(textAreaEl, { target: { value: contractBase64Metada } })
@@ -296,7 +304,7 @@ describe('Contract Details', () => {
     let localElement: HTMLElement
 
     await act(() => {
-      const { container } = render(<ContractDetails />)
+      const { container } = render(<MockComponent />)
       localElement = container
     })
 
@@ -312,7 +320,7 @@ describe('Contract Details', () => {
     })
 
     await act(() => {
-      const { container } = render(<ContractDetails />)
+      const { container } = render(<MockComponent />)
       localElement = container
     })
 
@@ -358,7 +366,7 @@ describe('Contract Details', () => {
     let container: any
 
     await act(() => {
-      const { container: c } = render(<ContractDetails />)
+      const { container: c } = render(<MockComponent />)
       container = c
     })
 
@@ -387,7 +395,7 @@ describe('Contract Details', () => {
       }))
 
       await act(() => {
-        render(<ContractDetails />)
+        render(<MockComponent />)
       })
 
       expect(showErrorToastMock).toHaveBeenCalled()

__test__/pages/contract-events.test.tsx

@@ -3,6 +3,8 @@ import { fireEvent, render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { contractEventsMocks } from '../../_mocks/contracts-mocks'
 import ContractTransactions from '../../pages/contracts/events/[address]'
+import { IntlProvider } from 'react-intl'
+import { messages } from '../../pages/_app'
 
 userEvent.setup()
 
@@ -32,9 +34,19 @@ jest.mock('../../generated', () => ({
   }),
 }))
 
+jest.mock('next/router', () => ({
+  useRouter: jest.fn(() => ({
+    locale: 'en',
+  })),
+}))
+
 describe('Contract Events', () => {
   beforeEach(() => {
-    render(<ContractTransactions />)
+    render(
+      <IntlProvider locale="en" messages={messages['en']}>
+        <ContractTransactions />
+      </IntlProvider>,
+    )
   })
 
   it('should render 5 transactions', async () => {

__test__/pages/contract-transactions.test.tsx

@@ -3,6 +3,8 @@ import { fireEvent, render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { contractTransactionsMocks } from '../../_mocks/contracts-mocks'
 import ContractTransactions from '../../pages/contracts/transactions/[address]'
+import { IntlProvider } from 'react-intl'
+import { messages } from '../../pages/_app'
 
 userEvent.setup()
 
@@ -11,6 +13,7 @@ jest.mock('next/router', () => ({
     query: {
       hash: '5G63pMxBnvnvdxDDbGrNsR27vkBmgLbSLXi134dxzaDhTL9v',
     },
+    locale: 'en',
   }),
 }))
 
@@ -37,7 +40,11 @@ jest.mock('../../generated', () => ({
 
 describe('Contract transactions', () => {
   beforeEach(() => {
-    render(<ContractTransactions />)
+    render(
+      <IntlProvider locale="en" messages={messages['en']}>
+        <ContractTransactions />
+      </IntlProvider>,
+    )
   })
 
   it('should render 5 transactions', async () => {

__test__/pages/contracts.test.tsx

@@ -1,7 +1,9 @@
 import '@testing-library/jest-dom'
 import { fireEvent, render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
+import { IntlProvider } from 'react-intl'
 import { contractsMocks } from '../../_mocks/contracts-mocks'
+import { messages } from '../../pages/_app'
 import Contracts from '../../pages/contracts'
 
 userEvent.setup()
@@ -24,9 +26,19 @@ jest.mock('../../generated', () => ({
   }),
 }))
 
+jest.mock('next/router', () => ({
+  useRouter: jest.fn(() => ({
+    locale: 'en',
+  })),
+}))
+
 describe('Contracts', () => {
   beforeEach(() => {
-    render(<Contracts />)
+    render(
+      <IntlProvider locale="en" messages={messages['en']}>
+        <Contracts />
+      </IntlProvider>,
+    )
   })
 
   it('should render 10 contracts', async () => {

__test__/pages/transaction-details.test.tsx

@@ -1,8 +1,10 @@
 import '@testing-library/jest-dom'
 import { act, fireEvent, render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
+import { IntlProvider } from 'react-intl'
 import { oneTransactionMck } from '../../_mocks/transactions-mocks'
 import { formatTimeAgo } from '../../lib/utils'
+import { messages } from '../../pages/_app'
 import TransactionDetails from '../../pages/transaction/details/[hash]'
 
 userEvent.setup()
@@ -12,6 +14,7 @@ jest.mock('next/router', () => ({
     query: {
       hash: oneTransactionMck.hash,
     },
+    locale: 'en',
   }),
 }))
 
@@ -29,7 +32,11 @@ describe('Transaction details', () => {
   let element: HTMLElement
 
   beforeEach(() => {
-    const { container } = render(<TransactionDetails />)
+    const { container } = render(
+      <IntlProvider locale="en" messages={messages['en']}>
+        <TransactionDetails />
+      </IntlProvider>,
+    )
     element = container
   })
 
@@ -38,7 +45,7 @@ describe('Transaction details', () => {
 
     expect(txInfo.children[0].children[1].innerHTML).toContain(oneTransactionMck.hash)
     expect(txInfo.children[1].children[1].innerHTML).toContain(oneTransactionMck.blockHash)
-    expect(txInfo.children[2].children[1].innerHTML).toContain(formatTimeAgo(oneTransactionMck.timestamp))
+    expect(txInfo.children[2].children[1].innerHTML).toContain(formatTimeAgo(oneTransactionMck.timestamp, 'en'))
     expect(txInfo.children[3].children[1].innerHTML).toContain(oneTransactionMck.section)
     expect(txInfo.children[4].children[1].innerHTML).toContain(oneTransactionMck.method)
     expect(txInfo.children[5].children[1].innerHTML).toContain(oneTransactionMck.signer)

__test__/pages/transactions.test.tsx

@@ -1,7 +1,9 @@
 import '@testing-library/jest-dom'
 import { fireEvent, render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
+import { IntlProvider } from 'react-intl'
 import { transactionsMocks } from '../../_mocks/transactions-mocks'
+import { messages } from '../../pages/_app'
 import Transactions from '../../pages/transactions'
 
 userEvent.setup()
@@ -24,9 +26,19 @@ jest.mock('../../generated', () => ({
   }),
 }))
 
+jest.mock('next/router', () => ({
+  useRouter: jest.fn(() => ({
+    locale: 'en',
+  })),
+}))
+
 describe('Transactions', () => {
   beforeEach(() => {
-    render(<Transactions />)
+    render(
+      <IntlProvider locale="en" messages={messages['en']}>
+        <Transactions />
+      </IntlProvider>,
+    )
   })
 
   it('should render 10 transaction rows', async () => {

__test__/utils/pagetitle.test.ts

@@ -0,0 +1,10 @@
+import '@testing-library/jest-dom'
+import { getTitle } from '../../utils/pagetitile'
+
+describe('Page title', () => {
+  it('should show Block titile', () => {
+    const title = getTitle('localhost/block')
+
+    expect(title).toBe('Block')
+  })
+})