-
Notifications
You must be signed in to change notification settings - Fork 298
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Niloofar Sadeghi / Refactor tests in the network-status.spec.tsx file (…
…#7230) * test: writting test for network-status component * refactor: improve namings * refactor: improve tests * build: remove extra packages from core Co-authored-by: Niloofar Sadeghi <niloofar.sadeghi@firstsource.tech>
- Loading branch information
1 parent
fe8cc3f
commit 773ece1
Showing
3 changed files
with
44 additions
and
50 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
90 changes: 41 additions & 49 deletions
90
packages/core/src/App/Components/Layout/Footer/__tests__/network-status.spec.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,56 +1,48 @@ | ||
// TODO refactor old tests in this component | ||
import React from 'react'; | ||
import { Popover } from '@deriv/components'; | ||
import { NetworkStatus } from '../network-status.jsx'; | ||
import userEvent from '@testing-library/user-event'; | ||
import { render, screen } from '@testing-library/react'; | ||
import { NetworkStatus } from '../network-status.jsx'; | ||
|
||
const MockNetworkStatus = ({ is_mobile = true }) => ( | ||
<NetworkStatus status={{ class: 'offline' }} is_mobile={is_mobile} /> | ||
); | ||
|
||
describe('network-status component', () => { | ||
it('should has "network-status__wrapper--is-mobile" class when the "is_mobile" property is true', () => { | ||
render(<MockNetworkStatus />); | ||
const div_element = screen.getByTestId('dt_network_status'); | ||
expect(div_element).toHaveClass('network-status__wrapper--is-mobile'); | ||
}); | ||
|
||
const status = { | ||
class: 'online', | ||
tooltip: 'Online', | ||
}; | ||
it('should has correct class based on class passed in the "status" property', () => { | ||
const { rerender } = render(<NetworkStatus status={{ class: 'offline' }} />); | ||
expect(screen.getByTestId('dt_network_status_element')).toHaveClass('network-status__circle--offline'); | ||
|
||
describe('NetworkStatus Component', () => { | ||
it('should has "network-status__wrapper--is-mobile" class when the "is_mobile" is true', () => { | ||
render(<NetworkStatus status={status} is_mobile />); | ||
const divElement = screen.getByTestId('dt_network_status_id'); | ||
expect(divElement).toHaveClass('network-status__wrapper--is-mobile'); | ||
rerender(<NetworkStatus status={{ class: 'online' }} />); | ||
expect(screen.getByTestId('dt_network_status_element')).toHaveClass('network-status__circle--online'); | ||
|
||
rerender(<NetworkStatus status={{ class: 'blinker' }} />); | ||
expect(screen.getByTestId('dt_network_status_element')).toHaveClass('network-status__circle--blinker'); | ||
}); | ||
|
||
it('should contain "Popover" with default message when "status.tooltip" is empty', () => { | ||
render(<MockNetworkStatus is_mobile={false} />); | ||
const popover_wrapper = screen.getByTestId('dt_popover_wrapper'); | ||
userEvent.hover(popover_wrapper); | ||
const network_status = screen.getByText(/connecting to server/i); | ||
expect(network_status).toBeInTheDocument(); | ||
}); | ||
|
||
// it('should render one <NetworkStatus /> component', () => { | ||
// const wrapper = shallow(<NetworkStatus status={status} />); | ||
// expect(wrapper).toHaveLength(1); | ||
// }); | ||
// it('should have correct class based on class passed in status', () => { | ||
// const wrapper = shallow(<NetworkStatus status={status} />); | ||
// expect(wrapper.find('.network-status__circle--online').exists()).toBe(true); | ||
// wrapper.setProps({ status: { class: 'offline' } }); | ||
// expect(wrapper.find('.network-status__circle--offline').exists()).toBe(true); | ||
// wrapper.setProps({ status: { class: 'blinker' } }); | ||
// expect(wrapper.find('.network-status__circle--blinker').exists()).toBe(true); | ||
// }); | ||
// it('should contain Tooltip message passed in status', () => { | ||
// const wrapper = shallow(<NetworkStatus status={status} />); | ||
// expect( | ||
// wrapper.contains( | ||
// <Popover classNameBubble='network-status__tooltip' alignment='top' message='Network status: Online'> | ||
// <div className='network-status__circle network-status__circle--online' /> | ||
// </Popover> | ||
// ) | ||
// ).toBe(true); | ||
// }); | ||
// it('should contain Popover with default message and div with only default class if status does not contain them', () => { | ||
// status = {}; | ||
// const wrapper = shallow(<NetworkStatus status={status} />); | ||
// expect( | ||
// wrapper.contains( | ||
// <Popover | ||
// classNameBubble='network-status__tooltip' | ||
// alignment='top' | ||
// message='Network status: Connecting to server' | ||
// > | ||
// <div className='network-status__circle' /> | ||
// </Popover> | ||
// ) | ||
// ).toBe(true); | ||
// }); | ||
it('should contain "Tooltip" message passed in the status property', () => { | ||
const status = { | ||
class: 'online', | ||
tooltip: 'Online', | ||
}; | ||
|
||
render(<NetworkStatus status={status} />); | ||
const popover_wrapper = screen.getByTestId('dt_popover_wrapper'); | ||
userEvent.hover(popover_wrapper); | ||
const network_status = screen.getByText(/online/i); | ||
expect(network_status).toBeInTheDocument(); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters