Skip to content

Commit

Permalink
oct-2122: cypress testnet
Browse files Browse the repository at this point in the history
  • Loading branch information
@jmikolajczyk
jmikolajczyk committed Nov 8, 2024
1 parent cf73920 commit 01e7c20
Show file tree
Hide file tree
Showing 11 changed files with 170 additions and 137 deletions.
265 changes: 139 additions & 126 deletions client/cypress/e2e/layoutTopBar.cy.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,159 +40,172 @@ describe('AW IS CLOSED: move time', () => {
});

Object.values(viewports).forEach(({ device, viewportWidth, viewportHeight }) => {
describe(`[AW IS CLOSED] LayoutTopBar: ${device}`, { viewportHeight, viewportWidth }, () => {
before(() => {
cy.clearLocalStorage();
});

beforeEach(() => {
mockCoinPricesServer();
localStorage.setItem(IS_ONBOARDING_ALWAYS_VISIBLE, 'false');
localStorage.setItem(IS_ONBOARDING_DONE, 'true');
localStorage.setItem(HAS_ONBOARDING_BEEN_CLOSED, 'true');
visitWithLoader(ROOT.absolute, ROOT_ROUTES.home.absolute);
});

it('Top bar is visible ', () => {
cy.get('[data-test=Layout__topBarWrapper]').should('be.visible');
cy.get('[data-test=LayoutTopBar]').should('be.visible');
});
describe(
`[AW IS CLOSED] [NOT TESTNET] LayoutTopBar: ${device}`,
{ viewportHeight, viewportWidth },
() => {
before(() => {
cy.clearLocalStorage();
});

if (device !== 'mobile') {
it('Top bar is visible when user scrolls down/up', () => {
// scroll down
cy.scrollTo(0, 500);
cy.get('[data-test=Layout__topBarWrapper]').should('be.visible');
cy.get('[data-test=LayoutTopBar]').should('be.visible');
// scroll up
cy.scrollTo(0, 250);
cy.get('[data-test=Layout__topBarWrapper]').should('be.visible');
cy.get('[data-test=LayoutTopBar]').should('be.visible');
beforeEach(() => {
mockCoinPricesServer();
localStorage.setItem(IS_ONBOARDING_ALWAYS_VISIBLE, 'false');
localStorage.setItem(IS_ONBOARDING_DONE, 'true');
localStorage.setItem(HAS_ONBOARDING_BEEN_CLOSED, 'true');
visitWithLoader(ROOT.absolute, ROOT_ROUTES.home.absolute);
});
} else {
it('Top bar hides when user scrolls down then top bar shows when user scrolls up', () => {
cy.get('[data-test=Layout__topBarWrapper]').should('be.visible');
cy.get('[data-test=LayoutTopBar]').should('be.visible');
cy.scrollTo(0, 500);
cy.get('[data-test=Layout__topBarWrapper]').should('not.be.visible');
cy.get('[data-test=LayoutTopBar]').should('not.be.visible');
cy.scrollTo(0, 250);

it('Top bar is visible ', () => {
cy.get('[data-test=Layout__topBarWrapper]').should('be.visible');
cy.get('[data-test=LayoutTopBar]').should('be.visible');
});
}

it('Octant logo is visible', () => {
cy.get('[data-test=LayoutTopBar__Logo]').should('be.visible');
});
if (device !== 'mobile') {
it('Top bar is visible when user scrolls down/up', () => {
// scroll down
cy.scrollTo(0, 500);
cy.get('[data-test=Layout__topBarWrapper]').should('be.visible');
cy.get('[data-test=LayoutTopBar]').should('be.visible');
// scroll up
cy.scrollTo(0, 250);
cy.get('[data-test=Layout__topBarWrapper]').should('be.visible');
cy.get('[data-test=LayoutTopBar]').should('be.visible');
});
} else {
it('Top bar hides when user scrolls down then top bar shows when user scrolls up', () => {
cy.get('[data-test=Layout__topBarWrapper]').should('be.visible');
cy.get('[data-test=LayoutTopBar]').should('be.visible');
cy.scrollTo(0, 500);
cy.get('[data-test=Layout__topBarWrapper]').should('not.be.visible');
cy.get('[data-test=LayoutTopBar]').should('not.be.visible');
cy.scrollTo(0, 250);
cy.get('[data-test=Layout__topBarWrapper]').should('be.visible');
cy.get('[data-test=LayoutTopBar]').should('be.visible');
});
}

it('Clicking on Octant logo scrolls view to the top on logo click (Home view)', () => {
cy.get('[data-test=HomeView]').should('be.visible');
cy.scrollTo(0, 500);
cy.get('[data-test=LayoutTopBar__Logo]').click();
// waiting for scrolling to finish
cy.wait(2000);
cy.window().then(cyWindow => {
expect(cyWindow.scrollY).to.be.eq(0);
it('Octant logo is visible and has correct background colour', () => {
cy.get('[data-test=LayoutTopBar__Logo]').should('be.visible');
cy.get('[data-test=LayoutTopBar__Logo]').within(() => {
cy.get('path')
.then($el => $el.css('fill'))
.should('be.colored', '#171717');
});
});
});

if (device === 'large-desktop' || device === 'desktop') {
it('Projects view link is visible and redirects to Projects view after click', () => {
cy.get('[data-test=HomeView]').should('be.visible');
cy.get('[data-test=LayoutTopBar__link--projects]').click();
cy.get('[data-test=ProjectsView]').should('be.visible');
it('Octant testnet indicator not exist', () => {
cy.get('[data-test=LayoutTopBar__Logo__testnetIndicator]').should('not.exist');
});

it('Metrics view link is visible and redirects to Metrics view after click', () => {
it('Clicking on Octant logo scrolls view to the top on logo click (Home view)', () => {
cy.get('[data-test=HomeView]').should('be.visible');
cy.get('[data-test=LayoutTopBar__link--metrics]').click();
cy.get('[data-test=MetricsView]').should('be.visible');
cy.scrollTo(0, 500);
cy.get('[data-test=LayoutTopBar__Logo]').click();
// waiting for scrolling to finish
cy.wait(2000);
cy.window().then(cyWindow => {
expect(cyWindow.scrollY).to.be.eq(0);
});
});

it('Home view link is visible and redirects to Home view after click', () => {
cy.get('[data-test=HomeView]').should('be.visible');
cy.get('[data-test=LayoutTopBar__link--metrics]').click();
if (device === 'large-desktop' || device === 'desktop') {
it('Projects view link is visible and redirects to Projects view after click', () => {
cy.get('[data-test=HomeView]').should('be.visible');
cy.get('[data-test=LayoutTopBar__link--projects]').click();
cy.get('[data-test=ProjectsView]').should('be.visible');
});

it('Metrics view link is visible and redirects to Metrics view after click', () => {
cy.get('[data-test=HomeView]').should('be.visible');
cy.get('[data-test=LayoutTopBar__link--metrics]').click();
cy.get('[data-test=MetricsView]').should('be.visible');
});

it('Home view link is visible and redirects to Home view after click', () => {
cy.get('[data-test=HomeView]').should('be.visible');
cy.get('[data-test=LayoutTopBar__link--metrics]').click();
cy.get('[data-test=MetricsView]').should('be.visible');
cy.get('[data-test=LayoutTopBar__link--home]').click();
cy.get('[data-test=HomeView]').should('be.visible');
});

it('Active/Inactive link has proper style', () => {
cy.get('[data-test=HomeView]').should('be.visible');
cy.get('[data-test=LayoutTopBar__link--home]')
.then($el => $el.css('color'))
.should('be.colored', '#171717');
cy.get('[data-test=LayoutTopBar__underline--home]').should('be.visible');
cy.get('[data-test=LayoutTopBar__link--projects]')
.then($el => $el.css('color'))
.should('be.colored', '#cdd1cd');
cy.get('[data-test=LayoutTopBar__link--metrics]')
.then($el => $el.css('color'))
.should('be.colored', '#cdd1cd');
});
}

it('Clicking on Octant logo redirects to Home view (outside Home view)', () => {
if (device === 'large-desktop' || device === 'desktop') {
cy.get('[data-test=LayoutTopBar__link--metrics]').click();
} else {
cy.get(`[data-test=Navbar__Button--metrics]`).click();
}
cy.get('[data-test=MetricsView]').should('be.visible');
cy.get('[data-test=LayoutTopBar__link--home]').click();
cy.get('[data-test=LayoutTopBar__Logo]').click();
cy.get('[data-test=HomeView]').should('be.visible');
});

it('Active/Inactive link has proper style', () => {
cy.get('[data-test=HomeView]').should('be.visible');
cy.get('[data-test=LayoutTopBar__link--home]')
.then($el => $el.css('color'))
.should('be.colored', '#171717');
cy.get('[data-test=LayoutTopBar__underline--home]').should('be.visible');
cy.get('[data-test=LayoutTopBar__link--projects]')
.then($el => $el.css('color'))
.should('be.colored', '#cdd1cd');
cy.get('[data-test=LayoutTopBar__link--metrics]')
.then($el => $el.css('color'))
.should('be.colored', '#cdd1cd');
it('Epoch info badge is visible', () => {
cy.get('[data-test=LayoutTopBarCalendar]').should('be.visible');
});
}

it('Clicking on Octant logo redirects to Home view (outside Home view)', () => {
if (device === 'large-desktop' || device === 'desktop') {
cy.get('[data-test=LayoutTopBar__link--metrics]').click();
} else {
cy.get(`[data-test=Navbar__Button--metrics]`).click();
it('Epoch info badge has border on hover', () => {
cy.get('[data-test=LayoutTopBarCalendar]')
.then($el => $el.css('border-color'))
.should('be.colored', 'transparent');
cy.get('[data-test=LayoutTopBarCalendar]').realHover();
cy.get('[data-test=LayoutTopBarCalendar]')
.then($el => $el.css('border-color'))
.should('be.colored', '#c5e7e1');
});
}
cy.get('[data-test=MetricsView]').should('be.visible');
cy.get('[data-test=LayoutTopBar__Logo]').click();
cy.get('[data-test=HomeView]').should('be.visible');
});

it('Epoch info badge is visible', () => {
cy.get('[data-test=LayoutTopBarCalendar]').should('be.visible');
});

if (device === 'large-desktop' || device === 'desktop') {
it('Epoch info badge has border on hover', () => {
cy.get('[data-test=LayoutTopBarCalendar]')
.then($el => $el.css('border-color'))
.should('be.colored', 'transparent');
cy.get('[data-test=LayoutTopBarCalendar]').realHover();
cy.get('[data-test=LayoutTopBarCalendar]')
.then($el => $el.css('border-color'))
.should('be.colored', '#c5e7e1');
it('Epoch info badge opens Calendar on click', () => {
cy.get('[data-test=LayoutTopBarCalendar]').click();
cy.get('[data-test=Calendar]').should('be.visible');
});
}

it('Epoch info badge opens Calendar on click', () => {
cy.get('[data-test=LayoutTopBarCalendar]').click();
cy.get('[data-test=Calendar]').should('be.visible');
});

it('Connect wallet button is visible', () => {
cy.get('[data-test=LayoutTopBar__Button]').should('be.visible');
});

it('Connect wallet button has proper label', () => {
cy.get('[data-test=LayoutTopBar__Button]')
.invoke('text')
.should('eq', device === 'mobile' ? 'Connect' : 'Connect wallet');
});

if (device === 'large-desktop' || device === 'desktop') {
it('Settings button is visible', () => {
cy.get('[data-test=LayoutTopBar__settingsButton]').should('be.visible');
});

it('Settings button opens Settings drawer', () => {
cy.get('[data-test=LayoutTopBar__settingsButton]').click();
cy.get('[data-test=SettingsDrawer]').should('be.visible');
it('Connect wallet button is visible', () => {
cy.get('[data-test=LayoutTopBar__Button]').should('be.visible');
});

it('Allocation button is visible', () => {
cy.get('[data-test=LayoutTopBar__allocationButton]').should('be.visible');
it('Connect wallet button has proper label', () => {
cy.get('[data-test=LayoutTopBar__Button]')
.invoke('text')
.should('eq', device === 'mobile' ? 'Connect' : 'Connect wallet');
});

it('Allocation button opens Allocation drawer', () => {
cy.get('[data-test=LayoutTopBar__allocationButton]').click();
cy.get('[data-test=AllocationDrawer]').should('be.visible');
});
}
});
if (device === 'large-desktop' || device === 'desktop') {
it('Settings button is visible', () => {
cy.get('[data-test=LayoutTopBar__settingsButton]').should('be.visible');
});

it('Settings button opens Settings drawer', () => {
cy.get('[data-test=LayoutTopBar__settingsButton]').click();
cy.get('[data-test=SettingsDrawer]').should('be.visible');
});

it('Allocation button is visible', () => {
cy.get('[data-test=LayoutTopBar__allocationButton]').should('be.visible');
});

it('Allocation button opens Allocation drawer', () => {
cy.get('[data-test=LayoutTopBar__allocationButton]').click();
cy.get('[data-test=AllocationDrawer]').should('be.visible');
});
}
},
);
});
2 changes: 1 addition & 1 deletion client/cypress/tsconfig.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
"@synthetixio/synpress/support",
"cypress-wait-until",
"@testing-library/cypress",
"../src/global"
"../global"
],
"outDir": "./output"
},
Expand Down
1 change: 1 addition & 0 deletions client/global.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ export declare global {
[WINDOW_PROJECTS_LOADED_ARCHIVED_EPOCHS_NUMBER]?: number;
[WINDOW_PROJECTS_SCROLL_Y]?: number;
clientReactQuery?: QueryClient;
isTestnetCypress?: boolean;
mutateAsyncMakeSnapshot: (type: 'pending' | 'finalized') => Promise<void>;
mutateAsyncMoveToDecisionWindowClosed: UseMutateAsyncFunction<
boolean,
Expand Down
4 changes: 3 additions & 1 deletion ...components/Metrics/MetricsEpoch/MetricsEpochGridFundsUsage/MetricsEpochGridFundsUsage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,8 +72,10 @@ const MetricsEpochGridFundsUsage: FC<MetricsEpochGridFundsUsageProps> = ({
communityFund +
leftover;

const isTestnet = window.Cypress ? !!window.isTestnetCypress : networkConfig.isTestnet;

// Testnet has much lower staking proceeds. Number of places needs to be bigger to see more than 0.
const numberOfDecimalPlacesToUse = networkConfig.isTestnet ? 10 : 2;
const numberOfDecimalPlacesToUse = isTestnet ? 10 : 2;

const getFormattedEthValueProps = {
isUsingHairSpace: true,
Expand Down
3 changes: 2 additions & 1 deletion client/src/components/shared/Layout/Layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ const Layout: FC<LayoutProps> = ({
const scrollRef = useRef(window.scrollY);
const lastScrollYUpRef = useRef(0);
const { pathname } = useLocation();
const isTestnet = window.Cypress ? !!window.isTestnetCypress : networkConfig.isTestnet;

const isProjectView = pathname.includes(`${ROOT_ROUTES.project.absolute}/`);

Expand Down Expand Up @@ -119,7 +120,7 @@ const Layout: FC<LayoutProps> = ({
styles.topBarWrapper,
isProjectAdminMode && styles.isProjectAdminMode,
isPatronMode && styles.isPatronMode,
networkConfig.isTestnet && styles.isTestnet,
isTestnet && styles.isTestnet,
)}
data-test={`${dataTestRoot}__topBarWrapper`}
>
Expand Down
3 changes: 2 additions & 1 deletion client/src/components/shared/Layout/LayoutConnectWallet/LayoutConnectWallet.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ const LayoutConnectWallet: FC = () => {
}));
const { connectors, status, connect: onConnectAnyConnector } = useConnect();
const { connectModalOpen: isOpen } = useConnectModal();
const isTestnet = window.Cypress ? !!window.isTestnetCypress : networkConfig.isTestnet;

const browserWalletConnector = connectors.find(
// eslint-disable-next-line @typescript-eslint/naming-convention
Expand Down Expand Up @@ -114,7 +115,7 @@ const LayoutConnectWallet: FC = () => {
</BoxRounded>
)}
</WalletButton.Custom>
{!networkConfig.isTestnet && (
{!isTestnet && (
<WalletButton.Custom wallet="ledger">
{({ ready: isReady, connect: onConnect }) => (
<BoxRounded
Expand Down
Loading

0 comments on commit 01e7c20

Please sign in to comment.