test(setup): add basics e2e tests
This commit is contained in:
parent
19361ae3c7
commit
3a59779913
|
@ -0,0 +1,110 @@
|
||||||
|
// @flow
|
||||||
|
|
||||||
|
import { getApp } from '../setup/utils';
|
||||||
|
|
||||||
|
const app = getApp();
|
||||||
|
|
||||||
|
beforeAll(async () => {
|
||||||
|
await app.start();
|
||||||
|
await app.client.waitUntilWindowLoaded();
|
||||||
|
await app.client.waitUntilTextExists('#sidebar', 'Dashboard', 120000);
|
||||||
|
});
|
||||||
|
afterAll(() => app.stop());
|
||||||
|
|
||||||
|
describe('Sidebar', () => {
|
||||||
|
test('should see the active dashboard route', async () => {
|
||||||
|
await app.client.element('#sidebar a:nth-child(1)').click();
|
||||||
|
|
||||||
|
expect(await app.client.getUrl()).toEndWith('/');
|
||||||
|
|
||||||
|
expect(
|
||||||
|
await app.client.element('#sidebar a:nth-child(1)').getHTML(),
|
||||||
|
).toEqual(expect.stringContaining('Dashboard'));
|
||||||
|
|
||||||
|
expect(
|
||||||
|
await app.client
|
||||||
|
.element('#sidebar a:nth-child(1) img')
|
||||||
|
.getAttribute('src'),
|
||||||
|
).toEqual(expect.stringContaining('/assets/dashboard_icon_active.svg'));
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should see the active send route', async () => {
|
||||||
|
await app.client.element('#sidebar a:nth-child(2)').click();
|
||||||
|
|
||||||
|
expect(await app.client.getUrl()).toEndWith('/send');
|
||||||
|
|
||||||
|
expect(
|
||||||
|
await app.client.element('#sidebar a:nth-child(2)').getHTML(),
|
||||||
|
).toEqual(expect.stringContaining('Send'));
|
||||||
|
|
||||||
|
expect(
|
||||||
|
await app.client
|
||||||
|
.element('#sidebar a:nth-child(2) img')
|
||||||
|
.getAttribute('src'),
|
||||||
|
).toEqual(expect.stringContaining('/assets/send_icon_active.svg'));
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should see the active receive route', async () => {
|
||||||
|
await app.client.element('#sidebar a:nth-child(3)').click();
|
||||||
|
|
||||||
|
expect(await app.client.getUrl()).toEndWith('/receive');
|
||||||
|
|
||||||
|
expect(
|
||||||
|
await app.client.element('#sidebar a:nth-child(3)').getHTML(),
|
||||||
|
).toEqual(expect.stringContaining('Receive'));
|
||||||
|
|
||||||
|
expect(
|
||||||
|
await app.client
|
||||||
|
.element('#sidebar a:nth-child(3) img')
|
||||||
|
.getAttribute('src'),
|
||||||
|
).toEqual(expect.stringContaining('/assets/receive_icon_active.svg'));
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should see the active transactions route', async () => {
|
||||||
|
await app.client.element('#sidebar a:nth-child(4)').click();
|
||||||
|
|
||||||
|
expect(await app.client.getUrl()).toEndWith('/transactions');
|
||||||
|
|
||||||
|
expect(
|
||||||
|
await app.client.element('#sidebar a:nth-child(4)').getHTML(),
|
||||||
|
).toEqual(expect.stringContaining('Transactions'));
|
||||||
|
|
||||||
|
expect(
|
||||||
|
await app.client
|
||||||
|
.element('#sidebar a:nth-child(4) img')
|
||||||
|
.getAttribute('src'),
|
||||||
|
).toEqual(expect.stringContaining('/assets/transactions_icon_active.svg'));
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should see the active settings route', async () => {
|
||||||
|
await app.client.element('#sidebar a:nth-child(5)').click();
|
||||||
|
|
||||||
|
expect(await app.client.getUrl()).toEndWith('/settings');
|
||||||
|
|
||||||
|
expect(
|
||||||
|
await app.client.element('#sidebar a:nth-child(5)').getHTML(),
|
||||||
|
).toEqual(expect.stringContaining('Settings'));
|
||||||
|
|
||||||
|
expect(
|
||||||
|
await app.client
|
||||||
|
.element('#sidebar a:nth-child(5) img')
|
||||||
|
.getAttribute('src'),
|
||||||
|
).toEqual(expect.stringContaining('/assets/settings_icon_active.svg'));
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should see the active console route', async () => {
|
||||||
|
await app.client.element('#sidebar a:nth-child(6)').click();
|
||||||
|
|
||||||
|
expect(await app.client.getUrl()).toEndWith('/console');
|
||||||
|
|
||||||
|
expect(
|
||||||
|
await app.client.element('#sidebar a:nth-child(6)').getHTML(),
|
||||||
|
).toEqual(expect.stringContaining('Console'));
|
||||||
|
|
||||||
|
expect(
|
||||||
|
await app.client
|
||||||
|
.element('#sidebar a:nth-child(6) img')
|
||||||
|
.getAttribute('src'),
|
||||||
|
).toEqual(expect.stringContaining('/assets/console_icon_active.svg'));
|
||||||
|
});
|
||||||
|
});
|
|
@ -2,17 +2,34 @@
|
||||||
|
|
||||||
import { getApp } from '../setup/utils';
|
import { getApp } from '../setup/utils';
|
||||||
|
|
||||||
describe('Zcash', () => {
|
const app = getApp();
|
||||||
const app = getApp();
|
|
||||||
|
|
||||||
beforeEach(() => app.start());
|
beforeAll(async () => {
|
||||||
afterEach(() => {
|
await app.start();
|
||||||
app.stop();
|
await app.client.waitUntilWindowLoaded();
|
||||||
|
});
|
||||||
|
afterAll(() => app.stop());
|
||||||
|
|
||||||
|
describe('Startup', () => {
|
||||||
|
test('should open the window', async () => expect(await app.client.getWindowCount()).toEqual(1));
|
||||||
|
|
||||||
|
test('should have the right title', async () => {
|
||||||
|
expect(await app.client.getTitle()).toEqual('ZEC Wallet');
|
||||||
});
|
});
|
||||||
|
|
||||||
test('should open the window', () => {
|
test('should show the text "ZEC Wallet Starting" in loading screen', async () => {
|
||||||
app.client
|
expect(await app.client.getText('#loading-screen p')).toEqual(
|
||||||
.getWindowCount()
|
'ZEC Wallet Starting',
|
||||||
.then((count: number) => expect(count).toEqual(1));
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should show the zcash logo in loading screen', async () => expect(await app.client.getAttribute('#loading-screen img', 'src')).toEqual(
|
||||||
|
expect.stringContaining('/assets/zcash-simple-icon.svg'),
|
||||||
|
));
|
||||||
|
|
||||||
|
test('should show the loading circle in loading screen', async () => {
|
||||||
|
expect(
|
||||||
|
await app.client.element('#loading-screen svg').isExisting(),
|
||||||
|
).toEqual(true);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -21,5 +21,5 @@ export const LayoutComponent = (props: Props) => {
|
||||||
// $FlowFixMe
|
// $FlowFixMe
|
||||||
const { children } = props; // eslint-disable-line
|
const { children } = props; // eslint-disable-line
|
||||||
|
|
||||||
return <Layout>{children}</Layout>;
|
return <Layout id='layout'>{children}</Layout>;
|
||||||
};
|
};
|
||||||
|
|
|
@ -36,7 +36,7 @@ const Logo = styled.img`
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export const LoadingScreen = ({ progress }: { progress: number }) => (
|
export const LoadingScreen = ({ progress }: { progress: number }) => (
|
||||||
<Wrapper>
|
<Wrapper id='loading-screen'>
|
||||||
<CircleWrapper>
|
<CircleWrapper>
|
||||||
<Logo src={zcashLogo} alt='Zcash logo' />
|
<Logo src={zcashLogo} alt='Zcash logo' />
|
||||||
<CircleProgressComponent
|
<CircleProgressComponent
|
||||||
|
|
|
@ -40,10 +40,10 @@ const StyledLink = styled(Link)`
|
||||||
transition: all 0.03s ${props => props.theme.colors.transitionEase};
|
transition: all 0.03s ${props => props.theme.colors.transitionEase};
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: ${/* eslint-disable-next-line max-len */
|
color: ${
|
||||||
props => (props.isActive
|
/* eslint-disable-next-line max-len */
|
||||||
? props.theme.colors.sidebarItemActive
|
props => (props.isActive ? props.theme.colors.sidebarItemActive : '#ddd')
|
||||||
: '#ddd')}
|
}
|
||||||
background-color: ${props => props.theme.colors.sidebarHoveredItem};
|
background-color: ${props => props.theme.colors.sidebarHoveredItem};
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
@ -70,16 +70,12 @@ type Props = {
|
||||||
};
|
};
|
||||||
|
|
||||||
export const SidebarComponent = ({ options, location }: Props) => (
|
export const SidebarComponent = ({ options, location }: Props) => (
|
||||||
<Wrapper>
|
<Wrapper id='sidebar'>
|
||||||
{(options || []).map((item) => {
|
{(options || []).map((item) => {
|
||||||
const isActive = location.pathname === item.route;
|
const isActive = location.pathname === item.route;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<StyledLink
|
<StyledLink isActive={isActive} key={item.route} to={item.route}>
|
||||||
isActive={isActive}
|
|
||||||
key={item.route}
|
|
||||||
to={item.route}
|
|
||||||
>
|
|
||||||
<Icon
|
<Icon
|
||||||
isActive={isActive}
|
isActive={isActive}
|
||||||
src={item.icon(isActive)}
|
src={item.icon(isActive)}
|
||||||
|
|
Loading…
Reference in New Issue