99 lines
2.9 KiB
TypeScript
99 lines
2.9 KiB
TypeScript
import { MemoryRouter } from 'react-router-dom';
|
|
import {
|
|
MockedWalletProvider,
|
|
mockConfig,
|
|
} from '@vegaprotocol/wallet-react/testing';
|
|
import { GetStarted } from './get-started';
|
|
import { render, screen, fireEvent, act } from '@testing-library/react';
|
|
import { useOnboardingStore } from '../../stores/onboarding';
|
|
|
|
let mockStep = 1;
|
|
|
|
jest.mock('../../lib/hooks/use-get-onboarding-step', () => ({
|
|
...jest.requireActual('../../lib/hooks/use-get-onboarding-step'),
|
|
useGetOnboardingStep: jest.fn(() => mockStep),
|
|
}));
|
|
|
|
describe('GetStarted', () => {
|
|
const renderComponent = () => {
|
|
return (
|
|
<MemoryRouter>
|
|
<MockedWalletProvider>
|
|
<GetStarted />
|
|
</MockedWalletProvider>
|
|
</MemoryRouter>
|
|
);
|
|
};
|
|
const checkTicks = (elements: Element[]) => {
|
|
elements.forEach((item, i) => {
|
|
if (i + 1 < mockStep - 1) {
|
|
expect(item.querySelector('[data-testid="icon-tick"]')).toBeTruthy();
|
|
}
|
|
});
|
|
};
|
|
|
|
beforeEach(() => {
|
|
jest.clearAllMocks();
|
|
});
|
|
|
|
afterEach(() => {
|
|
act(() => {
|
|
mockConfig.reset();
|
|
});
|
|
});
|
|
|
|
it('renders full get started content if not connected and no browser wallet detected', () => {
|
|
render(renderComponent());
|
|
expect(screen.getByTestId('get-started-banner')).toBeInTheDocument();
|
|
});
|
|
|
|
it('renders connect prompt if no pubKey but wallet installed', () => {
|
|
globalThis.window.vega = {} as Vega;
|
|
render(renderComponent());
|
|
expect(screen.getByTestId('get-started-banner')).toBeInTheDocument();
|
|
globalThis.window.vega = undefined as unknown as Vega;
|
|
});
|
|
|
|
it('renders nothing if dismissed', () => {
|
|
mockConfig.store.setState({ status: 'connected', pubKey: 'my-key' });
|
|
useOnboardingStore.setState({ dismissed: true });
|
|
mockStep = 0;
|
|
const { container } = render(renderComponent());
|
|
expect(container).toBeEmptyDOMElement();
|
|
});
|
|
|
|
it('steps should be ticked', () => {
|
|
mockConfig.store.setState({ status: 'connected', pubKey: 'my-key' });
|
|
useOnboardingStore.setState({ dismissed: false });
|
|
const navigatorGetter: jest.SpyInstance = jest.spyOn(
|
|
window.navigator,
|
|
'userAgent',
|
|
'get'
|
|
);
|
|
navigatorGetter.mockReturnValue('Chrome');
|
|
|
|
mockStep = 2;
|
|
const { rerender, container } = render(renderComponent());
|
|
checkTicks(screen.getAllByRole('listitem'));
|
|
expect(screen.getByRole('button', { name: 'Connect' })).toBeInTheDocument();
|
|
|
|
mockStep = 3;
|
|
rerender(renderComponent());
|
|
checkTicks(screen.getAllByRole('listitem'));
|
|
expect(screen.getByRole('link', { name: 'Deposit' })).toBeInTheDocument();
|
|
|
|
mockStep = 4;
|
|
rerender(renderComponent());
|
|
checkTicks(screen.getAllByRole('listitem'));
|
|
expect(
|
|
screen.getByRole('link', { name: 'Ready to trade' })
|
|
).toBeInTheDocument();
|
|
|
|
fireEvent.click(screen.getByRole('link', { name: 'Ready to trade' }));
|
|
|
|
mockStep = 5;
|
|
rerender(renderComponent());
|
|
expect(container).toBeEmptyDOMElement();
|
|
});
|
|
});
|