Skip to content

Commit 4c5a4b7

Browse files
ayelenmuranoayelenmurano
authored
Adds developers page and improves navigation (#24)
* Adds developers page and improves navigation * Improves developers page UI and navigation Refactors the developers page and navigation for a better user experience. * upgrade next js * Create a shared CopyButton component * Adjust code * Fix tests * Delete old tests * Delete a test * Improves UI and navigation * fixes * Adjustments and fix theme flash using next-themes library Add theme toggle functionality using next-themes library. This commit introduces a new ThemeProvider component that wraps the application and provides a theme context. - Replaces custom ThemeProvider with next-themes. - Removes the ResourcesSection from the homepage. - Renames ComparisonSection to NetworkComparisonSection. - Updates the DevelopersHeroSection to link to RPC Endpoints. - Renames QuickStartSection to RpcEndpointsSection. - Moves "Tools & Docs" link to the developers footer section. - Adds suppressHydrationWarning to the html tag to prevent hydration errors. * Adjust test * fix a test * Add an Asset Hub endpoint Renames and refactors the QuickStartSection to RpcEndpointsSection within the developers page. This change involves: - Renaming the component and its corresponding files. - Updating the component's content and structure to focus on displaying RPC endpoints. - Modifying the DevelopersHeroSection to link to the new RpcEndpointsSection. - Updating the data structure for RPC endpoints to support multiple URLs per provider.
1 parent 88b733b commit 4c5a4b7

34 files changed

Lines changed: 935 additions & 700 deletions

‎e2e/buttons-links.spec.ts‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,15 @@ test.describe("Button and Link Interactions", () => {
1111

1212
test.describe("Link Interactions", () => {
1313
test("should open external links in new tab", async ({ page }) => {
14+
// Wait for page to be fully loaded
15+
await page.waitForLoadState("domcontentloaded");
16+
1417
// Scroll to footer where external links are
1518
await homePage.footer.scrollIntoViewIfNeeded();
19+
await expect(homePage.footer).toBeVisible();
1620

17-
// Find external links
18-
const externalLinks = page.locator('a[target="_blank"]');
21+
// Find external links in the footer
22+
const externalLinks = homePage.footer.locator('a[target="_blank"]');
1923
const count = await externalLinks.count();
2024

2125
if (count > 0) {

‎e2e/click-interactions.spec.ts‎

Lines changed: 10 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -37,111 +37,14 @@ test.describe("Click Interactions", () => {
3737
});
3838
});
3939

40-
test.describe("Resource Cards", () => {
40+
test.describe("About Section", () => {
4141
test.beforeEach(async ({ page }) => {
42-
await page
43-
.getByRole("menuitem", { name: "Resources", exact: true })
44-
.click();
45-
await expect(homePage.resourcesSection).toBeInViewport({ timeout: 1000 });
46-
});
47-
48-
test("should display resource cards with buttons", async () => {
49-
const resourceCards = homePage.resourcesSection.locator(
50-
"[class*='card'], article",
51-
);
52-
const cardCount = await resourceCards.count();
53-
54-
expect(cardCount).toBeGreaterThan(0);
55-
56-
for (let i = 0; i < Math.min(cardCount, 3); i++) {
57-
const card = resourceCards.nth(i);
58-
const button = card.locator("button");
59-
if ((await button.count()) > 0) {
60-
await expect(button.first()).toBeVisible();
61-
}
62-
}
63-
});
64-
65-
test("should handle resource card button clicks", async () => {
66-
const resourceButtons = homePage.resourcesSection.locator("button");
67-
const buttonCount = await resourceButtons.count();
68-
69-
if (buttonCount > 0) {
70-
const firstButton = resourceButtons.first();
71-
await expect(firstButton).toBeVisible();
72-
await expect(firstButton).toBeEnabled();
73-
74-
// Check if clicking opens a modal or navigates
75-
const buttonText = await firstButton.textContent();
76-
expect(buttonText).toBeTruthy();
77-
}
78-
});
79-
80-
test("should open modal when clicking View Details button", async ({
81-
page,
82-
}) => {
83-
const viewDetailsButtons = homePage.resourcesSection.getByRole("button", {
84-
name: /view details/i,
85-
});
86-
87-
if ((await viewDetailsButtons.count()) > 0) {
88-
await viewDetailsButtons.first().click();
89-
90-
// Wait for modal to appear
91-
const modal = page.locator('[role="dialog"]');
92-
await expect(modal).toBeVisible({ timeout: 2000 });
93-
94-
// Close modal
95-
const closeButton = modal.getByRole("button", { name: /close/i });
96-
if ((await closeButton.count()) > 0) {
97-
await closeButton.click();
98-
await expect(modal).not.toBeVisible({ timeout: 1000 });
99-
}
100-
}
101-
});
102-
});
103-
104-
test.describe("Chain Specs Download Buttons", () => {
105-
test.beforeEach(async ({ page }) => {
106-
await page
107-
.getByRole("menuitem", { name: "Chain Specs", exact: true })
108-
.click();
109-
await expect(homePage.chainSpecsSection).toBeInViewport({
110-
timeout: 1000,
111-
});
42+
await page.getByRole("menuitem", { name: "About", exact: true }).click();
43+
await expect(homePage.aboutSection).toBeInViewport({ timeout: 2000 });
11244
});
11345

114-
test("should display download buttons for chain specs", async () => {
115-
const downloadButtons = homePage.chainSpecsSection.locator(
116-
"button:has-text('Download')",
117-
);
118-
const buttonCount = await downloadButtons.count();
119-
120-
expect(buttonCount).toBeGreaterThan(0);
121-
122-
for (let i = 0; i < buttonCount; i++) {
123-
const button = downloadButtons.nth(i);
124-
await expect(button).toBeVisible();
125-
await expect(button).toBeEnabled();
126-
}
127-
});
128-
129-
test("should open chain spec file when clicking download", async ({
130-
page,
131-
}) => {
132-
const downloadButtons = homePage.chainSpecsSection.locator(
133-
"button:has-text('Download')",
134-
);
135-
136-
if ((await downloadButtons.count()) > 0) {
137-
const [newPage] = await Promise.all([
138-
page.context().waitForEvent("page"),
139-
downloadButtons.first().click(),
140-
]);
141-
142-
// Should open a new page with the spec file
143-
expect(newPage.url()).toBeTruthy();
144-
}
46+
test("should display about section content", async () => {
47+
await expect(homePage.aboutSection).toBeVisible();
14548
});
14649
});
14750

@@ -169,13 +72,16 @@ test.describe("Click Interactions", () => {
16972
});
17073
await aboutMenuItem.click();
17174

172-
await expect(homePage.aboutSection).toBeInViewport({ timeout: 1000 });
75+
await expect(homePage.aboutSection).toBeInViewport({ timeout: 2000 });
17376
});
17477
});
17578

17679
test.describe("Footer Link Clicks", () => {
177-
test.beforeEach(async () => {
80+
test.beforeEach(async ({ page }) => {
81+
// First wait for the page to be loaded then scroll to footer
82+
await page.waitForLoadState("domcontentloaded");
17883
await homePage.footer.scrollIntoViewIfNeeded();
84+
await expect(homePage.footer).toBeVisible();
17985
});
18086

18187
test("should have clickable footer links", async () => {

‎e2e/fixtures/HomePage.ts‎

Lines changed: 1 addition & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,6 @@ export class HomePage extends BasePage {
1515
// Sections
1616
readonly heroSection: Locator;
1717
readonly aboutSection: Locator;
18-
readonly resourcesSection: Locator;
19-
readonly logoSection: Locator;
20-
readonly featuresSection: Locator;
21-
readonly comparisonSection: Locator;
22-
readonly chainSpecsSection: Locator;
2318
readonly faqSection: Locator;
2419
readonly footer: Locator;
2520

@@ -37,13 +32,6 @@ export class HomePage extends BasePage {
3732
// Sections
3833
this.heroSection = page.locator("#hero");
3934
this.aboutSection = page.locator("#about");
40-
this.resourcesSection = page.locator("#resources");
41-
this.logoSection = page.locator("section").filter({
42-
has: page.locator("h2:has-text('Trusted by teams')"),
43-
});
44-
this.featuresSection = page.locator("#features");
45-
this.comparisonSection = page.locator("#comparison");
46-
this.chainSpecsSection = page.locator("#chain-specs");
4735
this.faqSection = page.locator("#faq");
4836
this.footer = page.locator("footer");
4937
}
@@ -95,15 +83,7 @@ export class HomePage extends BasePage {
9583
* Get all section IDs in order
9684
*/
9785
getSectionIds(): string[] {
98-
return [
99-
"hero",
100-
"about",
101-
"resources",
102-
"features",
103-
"comparison",
104-
"chain-specs",
105-
"faq",
106-
];
86+
return ["hero", "about", "faq"];
10787
}
10888

10989
/**

‎e2e/hover-focus-states.spec.ts‎

Lines changed: 0 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -65,78 +65,6 @@ test.describe("Hover and Focus States", () => {
6565
// Button should respond to hover (styles may or may not change based on CSS)
6666
await expect(learnMoreButton).toBeVisible();
6767
});
68-
69-
test("should show hover effect on resource card buttons", async ({
70-
page,
71-
}) => {
72-
await page
73-
.getByRole("menuitem", { name: "Resources", exact: true })
74-
.click();
75-
await expect(homePage.resourcesSection).toBeInViewport({ timeout: 1000 });
76-
77-
const resourceButtons = homePage.resourcesSection.locator("button");
78-
if ((await resourceButtons.count()) > 0) {
79-
const button = resourceButtons.first();
80-
await button.scrollIntoViewIfNeeded();
81-
82-
// Hover
83-
await button.hover();
84-
await page.waitForTimeout(100);
85-
86-
// Should be hoverable
87-
const isHovered = await button.evaluate((el) => el.matches(":hover"));
88-
expect(isHovered).toBe(true);
89-
}
90-
});
91-
});
92-
93-
test.describe("Card Hover States", () => {
94-
test("should show hover effect on feature cards", async ({ page }) => {
95-
await page
96-
.getByRole("menuitem", { name: "Features", exact: true })
97-
.first()
98-
.click();
99-
await expect(homePage.featuresSection).toBeInViewport({ timeout: 1000 });
100-
101-
const cards = homePage.featuresSection.locator(
102-
"article, div[class*='card']",
103-
);
104-
if ((await cards.count()) > 0) {
105-
const card = cards.first();
106-
await card.scrollIntoViewIfNeeded();
107-
108-
// Hover
109-
await card.hover();
110-
await page.waitForTimeout(200);
111-
112-
// Card should respond to hover
113-
await expect(card).toBeVisible();
114-
}
115-
});
116-
117-
test("should show hover effect on chain specs cards", async ({ page }) => {
118-
await page
119-
.getByRole("menuitem", { name: "Chain Specs", exact: true })
120-
.click();
121-
await expect(homePage.chainSpecsSection).toBeInViewport({
122-
timeout: 1000,
123-
});
124-
125-
const specCards = homePage.chainSpecsSection.locator(
126-
"[class*='rounded-2xl']",
127-
);
128-
if ((await specCards.count()) > 0) {
129-
const card = specCards.first();
130-
await card.scrollIntoViewIfNeeded();
131-
132-
// Hover
133-
await card.hover();
134-
await page.waitForTimeout(300);
135-
136-
// Card should be hoverable
137-
await expect(card).toBeVisible();
138-
}
139-
});
14068
});
14169

14270
test.describe("Focus States (Keyboard Navigation)", () => {

0 commit comments

Comments
 (0)