Run Prettier
CI Pipeline / test (18) (pull_request) Successful in 4m51s
CI Pipeline / test (20) (pull_request) Successful in 4m57s
CI Pipeline / e2e (chromium) (pull_request) Failing after 5m28s
CI Pipeline / e2e (firefox) (pull_request) Successful in 8m35s
CI Pipeline / e2e (webkit) (pull_request) Failing after 6m0s
CI Pipeline / visual-regression (pull_request) Failing after 5m38s
CI Pipeline / performance (pull_request) Failing after 3m53s
CI Pipeline / lint (pull_request) Successful in 5m27s
CI Pipeline / storybook (pull_request) Successful in 7m6s
CI Pipeline / build (pull_request) Successful in 6m59s

This commit is contained in:
adilallo
2025-09-03 09:33:23 -06:00
parent 1e299af234
commit 6b1bed3395
6 changed files with 76 additions and 79 deletions
+2 -2
View File
@@ -60,7 +60,7 @@ test.describe("Accessibility Testing", () => {
focusedElements.push( focusedElements.push(
`${elementInfo.tagName}${ `${elementInfo.tagName}${
elementInfo.role ? `[role="${elementInfo.role}"]` : "" elementInfo.role ? `[role="${elementInfo.role}"]` : ""
}: ${elementInfo.accessibleName}` }: ${elementInfo.accessibleName}`,
); );
await page.keyboard.press("Tab"); await page.keyboard.press("Tab");
@@ -190,7 +190,7 @@ test.describe("Accessibility Testing", () => {
test("focus indicators - visible focus", async ({ page }) => { test("focus indicators - visible focus", async ({ page }) => {
// Test that focus indicators are visible // Test that focus indicators are visible
const focusableElements = page.locator( const focusableElements = page.locator(
"button, a, input, textarea, select, [tabindex]" "button, a, input, textarea, select, [tabindex]",
); );
const elementCount = await focusableElements.count(); const elementCount = await focusableElements.count();
+8 -8
View File
@@ -28,42 +28,42 @@ test.describe("Footer responsive behavior", () => {
// Test navigation links // Test navigation links
await expect( await expect(
page.getByRole("contentinfo").getByRole("link", { name: /use cases/i }) page.getByRole("contentinfo").getByRole("link", { name: /use cases/i }),
).toBeVisible(); ).toBeVisible();
await expect( await expect(
page.getByRole("contentinfo").getByRole("link", { name: /learn/i }) page.getByRole("contentinfo").getByRole("link", { name: /learn/i }),
).toBeVisible(); ).toBeVisible();
await expect( await expect(
page.getByRole("contentinfo").getByRole("link", { name: /about/i }) page.getByRole("contentinfo").getByRole("link", { name: /about/i }),
).toBeVisible(); ).toBeVisible();
// Test legal links // Test legal links
await expect( await expect(
page page
.getByRole("contentinfo") .getByRole("contentinfo")
.getByRole("link", { name: /privacy policy/i }) .getByRole("link", { name: /privacy policy/i }),
).toBeVisible(); ).toBeVisible();
await expect( await expect(
page page
.getByRole("contentinfo") .getByRole("contentinfo")
.getByRole("link", { name: /terms of service/i }) .getByRole("link", { name: /terms of service/i }),
).toBeVisible(); ).toBeVisible();
await expect( await expect(
page page
.getByRole("contentinfo") .getByRole("contentinfo")
.getByRole("link", { name: /cookies settings/i }) .getByRole("link", { name: /cookies settings/i }),
).toBeVisible(); ).toBeVisible();
// Test social links // Test social links
await expect( await expect(
page page
.getByRole("contentinfo") .getByRole("contentinfo")
.getByRole("link", { name: /follow us on bluesky/i }) .getByRole("link", { name: /follow us on bluesky/i }),
).toBeVisible(); ).toBeVisible();
await expect( await expect(
page page
.getByRole("contentinfo") .getByRole("contentinfo")
.getByRole("link", { name: /follow us on gitlab/i }) .getByRole("link", { name: /follow us on gitlab/i }),
).toBeVisible(); ).toBeVisible();
}); });
+5 -5
View File
@@ -20,13 +20,13 @@ test.describe("Header responsive behavior", () => {
// All breakpoints should have navigation items // All breakpoints should have navigation items
await expect( await expect(
page.getByRole("menuitem", { name: /use cases/i }) page.getByRole("menuitem", { name: /use cases/i }),
).toBeVisible(); ).toBeVisible();
await expect( await expect(
page.getByRole("menuitem", { name: /learn/i }) page.getByRole("menuitem", { name: /learn/i }),
).toBeVisible(); ).toBeVisible();
await expect( await expect(
page.getByRole("menuitem", { name: /about/i }) page.getByRole("menuitem", { name: /about/i }),
).toBeVisible(); ).toBeVisible();
}); });
@@ -38,14 +38,14 @@ test.describe("Header responsive behavior", () => {
// All breakpoints should have login button // All breakpoints should have login button
await expect( await expect(
page.getByRole("menuitem", { name: /log in to your account/i }) page.getByRole("menuitem", { name: /log in to your account/i }),
).toBeVisible(); ).toBeVisible();
// All breakpoints should have create rule button // All breakpoints should have create rule button
await expect( await expect(
page.getByRole("button", { page.getByRole("button", {
name: /create a new rule with avatar decoration/i, name: /create a new rule with avatar decoration/i,
}) }),
).toBeVisible(); ).toBeVisible();
}); });
+40 -40
View File
@@ -12,19 +12,19 @@ test.describe("Homepage", () => {
// Check main sections are present // Check main sections are present
await expect( await expect(
page.locator("h1, h2").filter({ hasText: "Collaborate" }) page.locator("h1, h2").filter({ hasText: "Collaborate" }),
).toBeVisible(); ).toBeVisible();
await expect( await expect(
page.locator("h2").filter({ hasText: "How CommunityRule works" }) page.locator("h2").filter({ hasText: "How CommunityRule works" }),
).toBeVisible(); ).toBeVisible();
await expect( await expect(
page.locator("h1").filter({ hasText: "We've got your back" }) page.locator("h1").filter({ hasText: "We've got your back" }),
).toBeVisible(); ).toBeVisible();
// Check key components are rendered // Check key components are rendered
await expect(page.locator('img[alt="Hero illustration"]')).toBeVisible(); await expect(page.locator('img[alt="Hero illustration"]')).toBeVisible();
await expect( await expect(
page.locator("text=Trusted by leading cooperators") page.locator("text=Trusted by leading cooperators"),
).toBeVisible(); ).toBeVisible();
await expect(page.locator("text=Jo Freeman")).toBeVisible(); await expect(page.locator("text=Jo Freeman")).toBeVisible();
}); });
@@ -34,12 +34,12 @@ test.describe("Homepage", () => {
await expect(page.locator("text=Collaborate")).toBeVisible(); await expect(page.locator("text=Collaborate")).toBeVisible();
await expect(page.locator("text=with clarity")).toBeVisible(); await expect(page.locator("text=with clarity")).toBeVisible();
await expect( await expect(
page.locator("text=Help your community make important decisions") page.locator("text=Help your community make important decisions"),
).toBeVisible(); ).toBeVisible();
// Check CTA button // Check CTA button
const learnButtons = page.locator( const learnButtons = page.locator(
'button:has-text("Learn how CommunityRule works")' 'button:has-text("Learn how CommunityRule works")',
); );
const buttonCount = await learnButtons.count(); const buttonCount = await learnButtons.count();
let visibleButton = null; let visibleButton = null;
@@ -54,7 +54,7 @@ test.describe("Homepage", () => {
if (!visibleButton) { if (!visibleButton) {
throw new Error( throw new Error(
'No visible "Learn how CommunityRule works" button found' 'No visible "Learn how CommunityRule works" button found',
); );
} }
@@ -64,14 +64,14 @@ test.describe("Homepage", () => {
await visibleButton.click(); await visibleButton.click();
// Should scroll to the numbered cards section // Should scroll to the numbered cards section
await expect( await expect(
page.locator('h2:has-text("How CommunityRule works")') page.locator('h2:has-text("How CommunityRule works")'),
).toBeVisible(); ).toBeVisible();
}); });
test("logo wall section displays correctly", async ({ page }) => { test("logo wall section displays correctly", async ({ page }) => {
// Check section label // Check section label
await expect( await expect(
page.locator("text=Trusted by leading cooperators") page.locator("text=Trusted by leading cooperators"),
).toBeVisible(); ).toBeVisible();
// Check logos are present // Check logos are present
@@ -95,23 +95,23 @@ test.describe("Homepage", () => {
test("numbered cards section functionality", async ({ page }) => { test("numbered cards section functionality", async ({ page }) => {
// Check section header // Check section header
await expect( await expect(
page.locator('h2:has-text("How CommunityRule works")') page.locator('h2:has-text("How CommunityRule works")'),
).toBeVisible(); ).toBeVisible();
await expect( await expect(
page.locator("text=Here's a quick overview of the process") page.locator("text=Here's a quick overview of the process"),
).toBeVisible(); ).toBeVisible();
// Check all three cards are present // Check all three cards are present
await expect( await expect(
page.locator("text=Document how your community makes decisions") page.locator("text=Document how your community makes decisions"),
).toBeVisible(); ).toBeVisible();
await expect( await expect(
page.locator("text=Build an operating manual for a successful community") page.locator("text=Build an operating manual for a successful community"),
).toBeVisible(); ).toBeVisible();
await expect( await expect(
page.locator( page.locator(
"text=Get a link to your manual for your group to review and evolve" "text=Get a link to your manual for your group to review and evolve",
) ),
).toBeVisible(); ).toBeVisible();
// Check numbered indicators - target the specific numbered cards section // Check numbered indicators - target the specific numbered cards section
@@ -119,18 +119,18 @@ test.describe("Homepage", () => {
.locator("section") .locator("section")
.filter({ has: page.locator('h2:has-text("How CommunityRule works")') }); .filter({ has: page.locator('h2:has-text("How CommunityRule works")') });
await expect( await expect(
numberedCardsSection.locator("span").filter({ hasText: "1" }).first() numberedCardsSection.locator("span").filter({ hasText: "1" }).first(),
).toBeVisible(); ).toBeVisible();
await expect( await expect(
numberedCardsSection.locator("span").filter({ hasText: "2" }).first() numberedCardsSection.locator("span").filter({ hasText: "2" }).first(),
).toBeVisible(); ).toBeVisible();
await expect( await expect(
numberedCardsSection.locator("span").filter({ hasText: "3" }).first() numberedCardsSection.locator("span").filter({ hasText: "3" }).first(),
).toBeVisible(); ).toBeVisible();
// Check CTA buttons // Check CTA buttons
const createButtons = page.locator( const createButtons = page.locator(
'button:has-text("Create CommunityRule")' 'button:has-text("Create CommunityRule")',
); );
const createButtonCount = await createButtons.count(); const createButtonCount = await createButtons.count();
let visibleCreateButton = null; let visibleCreateButton = null;
@@ -148,7 +148,7 @@ test.describe("Homepage", () => {
} }
await expect( await expect(
page.locator('button:has-text("See how it works")') page.locator('button:has-text("See how it works")'),
).toBeVisible(); ).toBeVisible();
}); });
@@ -161,16 +161,16 @@ test.describe("Homepage", () => {
// Check rule descriptions // Check rule descriptions
await expect( await expect(
page.locator("text=Units called Circles have the ability to decide") page.locator("text=Units called Circles have the ability to decide"),
).toBeVisible(); ).toBeVisible();
await expect( await expect(
page.locator("text=Decisions that affect the group collectively") page.locator("text=Decisions that affect the group collectively"),
).toBeVisible(); ).toBeVisible();
await expect( await expect(
page.locator("text=An elected board determines policies") page.locator("text=An elected board determines policies"),
).toBeVisible(); ).toBeVisible();
await expect( await expect(
page.locator("text=All participants can propose and vote") page.locator("text=All participants can propose and vote"),
).toBeVisible(); ).toBeVisible();
// Test card interactions // Test card interactions
@@ -180,19 +180,19 @@ test.describe("Homepage", () => {
// Check "See all templates" button // Check "See all templates" button
await expect( await expect(
page.locator('button:has-text("See all templates")') page.locator('button:has-text("See all templates")'),
).toBeVisible(); ).toBeVisible();
}); });
test("feature grid section functionality", async ({ page }) => { test("feature grid section functionality", async ({ page }) => {
// Check section header // Check section header
await expect( await expect(
page.locator('h1:has-text("We\'ve got your back")') page.locator('h1:has-text("We\'ve got your back")'),
).toBeVisible(); ).toBeVisible();
await expect( await expect(
page.locator( page.locator(
"text=Use our toolkit to improve, document, and evolve your organization" "text=Use our toolkit to improve, document, and evolve your organization",
) ),
).toBeVisible(); ).toBeVisible();
// Check all four feature cards - use more specific selectors to avoid conflicts // Check all four feature cards - use more specific selectors to avoid conflicts
@@ -214,23 +214,23 @@ test.describe("Homepage", () => {
test("quote block section displays correctly", async ({ page }) => { test("quote block section displays correctly", async ({ page }) => {
// Check quote content // Check quote content
await expect( await expect(
page.locator("text=The rules of decision-making must be open") page.locator("text=The rules of decision-making must be open"),
).toBeVisible(); ).toBeVisible();
// Check author and source // Check author and source
await expect(page.locator("text=Jo Freeman")).toBeVisible(); await expect(page.locator("text=Jo Freeman")).toBeVisible();
await expect( await expect(
page.locator("text=The Tyranny of Structurelessness") page.locator("text=The Tyranny of Structurelessness"),
).toBeVisible(); ).toBeVisible();
// Check avatar // Check avatar
await expect( await expect(
page.locator('img[alt="Portrait of Jo Freeman"]') page.locator('img[alt="Portrait of Jo Freeman"]'),
).toBeVisible(); ).toBeVisible();
// Check decorative elements // Check decorative elements
await expect( await expect(
page.locator('[class*="pointer-events-none absolute z-0"]').first() page.locator('[class*="pointer-events-none absolute z-0"]').first(),
).toBeVisible(); ).toBeVisible();
}); });
@@ -238,7 +238,7 @@ test.describe("Homepage", () => {
// Check section content // Check section content
await expect(page.locator("text=Still have questions?")).toBeVisible(); await expect(page.locator("text=Still have questions?")).toBeVisible();
await expect( await expect(
page.locator("text=Get answers from an experienced organizer") page.locator("text=Get answers from an experienced organizer"),
).toBeVisible(); ).toBeVisible();
// Check CTA button (it's actually a link) // Check CTA button (it's actually a link)
@@ -295,19 +295,19 @@ test.describe("Homepage", () => {
// Test mobile viewport // Test mobile viewport
await page.setViewportSize({ width: 375, height: 667 }); await page.setViewportSize({ width: 375, height: 667 });
await expect( await expect(
page.locator("h1, h2").filter({ hasText: "Collaborate" }) page.locator("h1, h2").filter({ hasText: "Collaborate" }),
).toBeVisible(); ).toBeVisible();
// Test tablet viewport // Test tablet viewport
await page.setViewportSize({ width: 768, height: 1024 }); await page.setViewportSize({ width: 768, height: 1024 });
await expect( await expect(
page.locator("h1, h2").filter({ hasText: "Collaborate" }) page.locator("h1, h2").filter({ hasText: "Collaborate" }),
).toBeVisible(); ).toBeVisible();
// Test desktop viewport // Test desktop viewport
await page.setViewportSize({ width: 1440, height: 900 }); await page.setViewportSize({ width: 1440, height: 900 });
await expect( await expect(
page.locator("h1, h2").filter({ hasText: "Collaborate" }) page.locator("h1, h2").filter({ hasText: "Collaborate" }),
).toBeVisible(); ).toBeVisible();
}); });
@@ -371,7 +371,7 @@ test.describe("Homepage", () => {
test("scroll behavior and smooth scrolling", async ({ page }) => { test("scroll behavior and smooth scrolling", async ({ page }) => {
// Test smooth scrolling to sections // Test smooth scrolling to sections
const learnButtons = page.locator( const learnButtons = page.locator(
'button:has-text("Learn how CommunityRule works")' 'button:has-text("Learn how CommunityRule works")',
); );
const buttonCount = await learnButtons.count(); const buttonCount = await learnButtons.count();
let visibleButton = null; let visibleButton = null;
@@ -386,7 +386,7 @@ test.describe("Homepage", () => {
if (!visibleButton) { if (!visibleButton) {
throw new Error( throw new Error(
'No visible "Learn how CommunityRule works" button found' 'No visible "Learn how CommunityRule works" button found',
); );
} }
@@ -397,7 +397,7 @@ test.describe("Homepage", () => {
// Check we're at the numbered cards section // Check we're at the numbered cards section
await expect( await expect(
page.locator('h2:has-text("How CommunityRule works")') page.locator('h2:has-text("How CommunityRule works")'),
).toBeVisible(); ).toBeVisible();
}); });
@@ -415,7 +415,7 @@ test.describe("Homepage", () => {
const brokenImages = await page.evaluate(() => { const brokenImages = await page.evaluate(() => {
const imgs = document.querySelectorAll("img"); const imgs = document.querySelectorAll("img");
return Array.from(imgs).filter( return Array.from(imgs).filter(
(img) => !img.complete || img.naturalWidth === 0 (img) => !img.complete || img.naturalWidth === 0,
); );
}); });
+20 -23
View File
@@ -65,7 +65,7 @@ test.describe("Performance Monitoring", () => {
// Assert individual metrics // Assert individual metrics
expect(result.metrics.ttfb).toBeLessThan(PERFORMANCE_BUDGETS.ttfb); expect(result.metrics.ttfb).toBeLessThan(PERFORMANCE_BUDGETS.ttfb);
expect(result.metrics.domContentLoaded).toBeLessThan( expect(result.metrics.domContentLoaded).toBeLessThan(
PERFORMANCE_BUDGETS.dom_content_loaded PERFORMANCE_BUDGETS.dom_content_loaded,
); );
expect(result.metrics.load).toBeLessThan(PERFORMANCE_BUDGETS.full_load); expect(result.metrics.load).toBeLessThan(PERFORMANCE_BUDGETS.full_load);
@@ -121,10 +121,10 @@ test.describe("Performance Monitoring", () => {
// Assert Core Web Vitals are within acceptable ranges // Assert Core Web Vitals are within acceptable ranges
expect(coreWebVitals.lcp).toBeLessThan( expect(coreWebVitals.lcp).toBeLessThan(
PERFORMANCE_BUDGETS.largest_contentful_paint PERFORMANCE_BUDGETS.largest_contentful_paint,
); );
expect(coreWebVitals.fid).toBeLessThan( expect(coreWebVitals.fid).toBeLessThan(
PERFORMANCE_BUDGETS.first_input_delay PERFORMANCE_BUDGETS.first_input_delay,
); );
expect(coreWebVitals.cls).toBeLessThan(0.1); // CLS should be less than 0.1 expect(coreWebVitals.cls).toBeLessThan(0.1); // CLS should be less than 0.1
}); });
@@ -133,27 +133,24 @@ test.describe("Performance Monitoring", () => {
await page.goto("/"); await page.goto("/");
// Measure header render time // Measure header render time
const headerRenderTime = await performanceMonitor.measureComponentRender( const headerRenderTime =
"header" await performanceMonitor.measureComponentRender("header");
);
expect(headerRenderTime).toBeLessThan( expect(headerRenderTime).toBeLessThan(
PERFORMANCE_BUDGETS.component_render_time PERFORMANCE_BUDGETS.component_render_time,
); );
// Measure footer render time // Measure footer render time
const footerRenderTime = await performanceMonitor.measureComponentRender( const footerRenderTime =
"footer" await performanceMonitor.measureComponentRender("footer");
);
expect(footerRenderTime).toBeLessThan( expect(footerRenderTime).toBeLessThan(
PERFORMANCE_BUDGETS.component_render_time PERFORMANCE_BUDGETS.component_render_time,
); );
// Measure main content render time // Measure main content render time
const mainRenderTime = await performanceMonitor.measureComponentRender( const mainRenderTime =
"main" await performanceMonitor.measureComponentRender("main");
);
expect(mainRenderTime).toBeLessThan( expect(mainRenderTime).toBeLessThan(
PERFORMANCE_BUDGETS.component_render_time PERFORMANCE_BUDGETS.component_render_time,
); );
}); });
@@ -169,7 +166,7 @@ test.describe("Performance Monitoring", () => {
'button:has-text("Learn how CommunityRule works")', 'button:has-text("Learn how CommunityRule works")',
async () => { async () => {
const learnButtons = page.locator( const learnButtons = page.locator(
'button:has-text("Learn how CommunityRule works")' 'button:has-text("Learn how CommunityRule works")',
); );
const buttonCount = await learnButtons.count(); const buttonCount = await learnButtons.count();
let visibleButton = null; let visibleButton = null;
@@ -189,12 +186,12 @@ test.describe("Performance Monitoring", () => {
} }
await visibleButton.click(); await visibleButton.click();
} },
); );
if (buttonClickTime !== null) { if (buttonClickTime !== null) {
expect(buttonClickTime).toBeLessThan( expect(buttonClickTime).toBeLessThan(
PERFORMANCE_BUDGETS.interaction_time PERFORMANCE_BUDGETS.interaction_time,
); );
} }
@@ -221,7 +218,7 @@ test.describe("Performance Monitoring", () => {
} }
await visibleLink.click(); await visibleLink.click();
} },
); );
if (linkClickTime !== null) { if (linkClickTime !== null) {
@@ -261,7 +258,7 @@ test.describe("Performance Monitoring", () => {
const summary = performanceMonitor.getSummary(); const summary = performanceMonitor.getSummary();
if (summary.network_request_duration) { if (summary.network_request_duration) {
expect(summary.network_request_duration.average).toBeLessThan( expect(summary.network_request_duration.average).toBeLessThan(
PERFORMANCE_BUDGETS.network_request_duration PERFORMANCE_BUDGETS.network_request_duration,
); );
} }
}); });
@@ -304,7 +301,7 @@ test.describe("Performance Monitoring", () => {
// Even under load, page should load within reasonable time // Even under load, page should load within reasonable time
expect(result.loadTime).toBeLessThan( expect(result.loadTime).toBeLessThan(
PERFORMANCE_BUDGETS.page_load_time * 1.5 PERFORMANCE_BUDGETS.page_load_time * 1.5,
); );
}); });
@@ -354,7 +351,7 @@ test.describe("Performance Monitoring", () => {
console.log( console.log(
"Exported Performance Data:", "Exported Performance Data:",
JSON.stringify(exportedData, null, 2) JSON.stringify(exportedData, null, 2),
); );
}); });
@@ -413,7 +410,7 @@ test.describe("Performance Regression Testing", () => {
const variance = const variance =
results.reduce( results.reduce(
(acc, val) => acc + Math.pow(val - averageLoadTime, 2), (acc, val) => acc + Math.pow(val - averageLoadTime, 2),
0 0,
) / results.length; ) / results.length;
// Performance should be consistent (low variance) // Performance should be consistent (low variance)
+1 -1
View File
@@ -360,7 +360,7 @@ test.describe("Visual Regression Tests", () => {
await page.evaluate(() => { await page.evaluate(() => {
document.documentElement.style.setProperty( document.documentElement.style.setProperty(
"--prefers-reduced-motion", "--prefers-reduced-motion",
"reduce" "reduce",
); );
}); });