Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add deploy page e2e tests #448

Open
wants to merge 3 commits into
base: dev
Choose a base branch
from
Open

feat: add deploy page e2e tests #448

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
152f085
feat: add deploy page e2e tests
valfaro123 Jul 10, 2023
3ee1f94
fix: convert mockDeploys to function
valfaro123 Jul 11, 2023
b122dc3
Merge branch 'dev' into feat/423/deploy-page-tests
valfaro123 Jul 12, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion app/src/components/cards/DeployDetailsCard/DeployDetailsCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ export const DeployDetailsCard: React.FC<DeployDetailsCardProps> = ({
const navigate = useNavigate();

return (
<div data-testid="deploy-details-card">
<div data-cy="deploy-details-card" data-testid="deploy-details-card">
<HeaderContent>
<HashWrapper>
{withSkeletonLoading(
Expand Down Expand Up @@ -65,6 +65,7 @@ export const DeployDetailsCard: React.FC<DeployDetailsCardProps> = ({
{withSkeletonLoading(
<>
<StyledHashLink
data-cy="block-hash-link"
data-testid="block-hash-link"
onClick={() => {
navigate(`/block/${deploy?.blockHash ?? ''}`);
Expand All @@ -87,6 +88,7 @@ export const DeployDetailsCard: React.FC<DeployDetailsCardProps> = ({
{withSkeletonLoading(
<>
<StyledHashLink
data-cy="public-key-link"
data-testid="public-key-link"
onClick={() => {
navigate(`/account/${deploy?.publicKey ?? ''}`);
Expand Down
189 changes: 97 additions & 92 deletions app/src/components/cards/TransactionDetailsCard/TransactionDetailsCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,111 +37,116 @@ export const TransactionDetailsCard: React.FC<TransactionDetailsCardProps> = ({
);

return (
<InfoCardContentWrapper>
<Card.Body>
<HeadContentWrapper>
<TransactionHeading type="h2">
{t('transaction-details')}
</TransactionHeading>
</HeadContentWrapper>
<DetailDataWrapper>
<TransactionGrid gap="2rem">
<DetailDataList gap="2rem">
{!!deploy?.amount && (
<div data-cy="transaction-details-card">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This doesn't mess with any of the existing styling does it?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No visible style changes. Only did this for testing purposes. Adding the data-cy id on InfoCardContentWrapper did not work.

<InfoCardContentWrapper>
<Card.Body>
<HeadContentWrapper>
<TransactionHeading type="h2">
{t('transaction-details')}
</TransactionHeading>
</HeadContentWrapper>
<DetailDataWrapper>
<TransactionGrid gap="2rem">
<DetailDataList gap="2rem">
{!!deploy?.amount && (
<li>
<Grid gap="1rem" templateColumns="9rem auto">
<DetailDataLabel>{t('amount')}</DetailDataLabel>
<DetailDataValue data-testid="deploy-amount">
<Coin>{deploy?.amount}</Coin>
</DetailDataValue>
</Grid>
</li>
)}
<li>
<Grid gap="1rem" templateColumns="9rem auto">
<DetailDataLabel>{t('amount')}</DetailDataLabel>
<DetailDataValue data-testid="deploy-amount">
<Coin>{deploy?.amount}</Coin>
<Grid gap="1rem" templateColumns="9rem 1fr">
<DetailDataLabel>{t('cost')}</DetailDataLabel>
<DetailDataValue data-testid="deploy-cost">
{withSkeletonLoading(
<Coin>{deploy?.cost ?? ''}</Coin>,
isLoading,
{},
)}
</DetailDataValue>
</Grid>
</li>
)}
<li>
<Grid gap="1rem" templateColumns="9rem 1fr">
<DetailDataLabel>{t('cost')}</DetailDataLabel>
<DetailDataValue data-testid="deploy-cost">
{withSkeletonLoading(
<Coin>{deploy?.cost ?? ''}</Coin>,
isLoading,
{},
)}
</DetailDataValue>
</Grid>
</li>
<li>
<Grid gap="1rem" templateColumns="9rem 1fr">
<DetailDataLabel>{t('payment-amount')}</DetailDataLabel>
<DetailDataValue data-testid="deploy-payment-amount">
{withSkeletonLoading(
<Coin>{deploy?.paymentAmount ?? ''}</Coin>,
isLoading,
{},
)}
</DetailDataValue>
</Grid>
</li>
</DetailDataList>
<Grid templateColumns="1fr 1fr" templateRows="1fr" gap="2rem 1rem">
<div>
<DetailDataLabel>{t('timestamp')}</DetailDataLabel>
<TransactionDetailData data-testid="readable-time-stamp">
{withSkeletonLoading(
deploy?.readableTimestamp,
isLoading,
{},
)}
</TransactionDetailData>
</div>
<HideOnMobile>
<li>
<Grid gap="1rem" templateColumns="9rem 1fr">
<DetailDataLabel>{t('payment-amount')}</DetailDataLabel>
<DetailDataValue data-testid="deploy-payment-amount">
{withSkeletonLoading(
<Coin>{deploy?.paymentAmount ?? ''}</Coin>,
isLoading,
{},
)}
</DetailDataValue>
</Grid>
</li>
</DetailDataList>
<Grid
templateColumns="1fr 1fr"
templateRows="1fr"
gap="2rem 1rem">
<div>
<DetailDataLabel>{t('status')}</DetailDataLabel>
<DeployStatusData data-testid="status">
<DetailDataLabel>{t('timestamp')}</DetailDataLabel>
<TransactionDetailData data-testid="readable-time-stamp">
{withSkeletonLoading(
<>
{deploy?.status}
<StatusIconWrapper>{statusIcon}</StatusIconWrapper>
</>,
deploy?.readableTimestamp,
isLoading,
{},
)}
</DeployStatusData>
</TransactionDetailData>
Comment on lines +91 to +98
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we not care about status on desktop?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Both screens will get status. One is show on HideOnMobile and the other on HideOnDesktop

</div>
</HideOnMobile>
<HideOnDesktop>
<SpanTwoCols>
<DetailDataLabel>{t('status')}</DetailDataLabel>
<DeployStatusData>
{withSkeletonLoading(
<>
{deploy?.status}
<StatusIconWrapper>{statusIcon}</StatusIconWrapper>
</>,
isLoading,
{ width: 100 },
)}
</DeployStatusData>
</SpanTwoCols>
</HideOnDesktop>
<ActionAndDeployTypeWrapper>
<DetailDataLabel>{t('action')}</DetailDataLabel>
<TransactionDetailData data-testid="action">
{withSkeletonLoading(deploy?.action, isLoading, {})}
</TransactionDetailData>
</ActionAndDeployTypeWrapper>
{!!deploy?.deployType && (
<HideOnMobile>
<div>
<DetailDataLabel>{t('status')}</DetailDataLabel>
<DeployStatusData data-testid="status">
{withSkeletonLoading(
<>
{deploy?.status}
<StatusIconWrapper>{statusIcon}</StatusIconWrapper>
</>,
isLoading,
{},
)}
</DeployStatusData>
</div>
</HideOnMobile>
<HideOnDesktop>
<SpanTwoCols>
<DetailDataLabel>{t('status')}</DetailDataLabel>
<DeployStatusData>
{withSkeletonLoading(
<>
{deploy?.status}
<StatusIconWrapper>{statusIcon}</StatusIconWrapper>
</>,
isLoading,
{ width: 100 },
)}
</DeployStatusData>
</SpanTwoCols>
</HideOnDesktop>
<ActionAndDeployTypeWrapper>
<DetailDataLabel>{t('deploy-type')}</DetailDataLabel>
<TransactionDetailData data-testid="deploy-type">
{deploy?.deployType}
<DetailDataLabel>{t('action')}</DetailDataLabel>
<TransactionDetailData data-testid="action">
{withSkeletonLoading(deploy?.action, isLoading, {})}
</TransactionDetailData>
</ActionAndDeployTypeWrapper>
)}
</Grid>
</TransactionGrid>
</DetailDataWrapper>
</Card.Body>
</InfoCardContentWrapper>
{!!deploy?.deployType && (
<ActionAndDeployTypeWrapper>
<DetailDataLabel>{t('deploy-type')}</DetailDataLabel>
<TransactionDetailData data-testid="deploy-type">
{deploy?.deployType}
</TransactionDetailData>
</ActionAndDeployTypeWrapper>
)}
</Grid>
</TransactionGrid>
</DetailDataWrapper>
</Card.Body>
</InfoCardContentWrapper>
</div>
);
};

Expand Down
6 changes: 5 additions & 1 deletion app/src/pages/Deploy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,11 @@ export const DeployPage: React.FC = () => {
<PageHead pageTitle={pageTitle} />
<Grid gap="2.5rem">
<DeployDetailsCard deploy={deploy} isLoading={isLoading} />
<TransactionDetailsCard deploy={deploy} isLoading={isLoading} />
<TransactionDetailsCard
data-cy="transaction-details-card"
deploy={deploy}
isLoading={isLoading}
/>
</Grid>
</PageWrapper>
);
Expand Down
10 changes: 10 additions & 0 deletions test/cypress/e2e/data/mockDeploy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
export const mockDeploy = {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you please update this to a function that returns this object? We should get in the habit of only assigning variables for mocks this way.

deployHash:
'7e2cad6ae20875b6a3ffcbb4e743ab5e0fc0f8b5ecc444e222f0204a7ee9120f',
truncatedDeployHash: '7e2ca...9120f',
blockHash: 'b315d3b20eb2a9d14d2260a78494cada02108cc7d218c812ade3a173a48a15b5',
truncatedBlockHash: 'b315d...a15b5',
publicKey:
'0203e6b3f236f340ea8d355bd438f5176ed1a2eea21c8d4d4de66c0ee96334de44f5',
truncatedPublicKey: '0203e...e44f5',
};
Loading