style: visual and content updates #65
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughThe updates include a CSS class change for paragraph rendering, a simplification of consortium member descriptions in the About page, and the addition of a new team member, Laura Därr, to the Team page with a detailed profile. The Team component's HTML structure was made more semantic by switching containers to Changes
Poem
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #65 +/- ##
==========================================
+ Coverage 17.07% 25.89% +8.81%
==========================================
Files 44 45 +1
Lines 328 336 +8
Branches 54 54
==========================================
+ Hits 56 87 +31
+ Misses 272 249 -23 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
src/components/templates/About.tsx (1)
34-40: Readability nit – consider splitting the long sentenceLines 34-40 pack four disciplines and their parentheticals into one sentence. Breaking it into two sentences or using a list (as done elsewhere) would improve scannability without changing meaning.
src/components/templates/Team.tsx (1)
206-226: Keep bio formatting consistent with other membersOther bios use multiple
<Paragraph>blocks to leverage default bottom-margin spacing. The new entry wraps everything in a single paragraph, so the text renders as one dense block.- <Paragraph> - Laura Därr is an artistic research associate in New Media at - Kunsthochschule Kassel and a member of the SENTIMENT project. Her - artistic research focuses on algorithmic intervention, particularly - within AI-based systems that autonomously structure and influence human - interaction patterns. This theme formed the core of both her completed - diploma thesis under Prof. Alba d'Urbano and her completed master's - thesis under Prof. Joel Baumann and Prof. Dr. Johanna Schaffer. Her - practice employs critical making methodologies to interrogate the - sociopolitical implications of automated decision-making processes, - developing experimental frameworks that expose the hidden logics - embedded within computational systems. Through interdisciplinary - collaboration and speculative design approaches, her work contributes to - emerging discourses on algorithmic agency and the democratization of - technological literacy within contemporary art contexts. - </Paragraph> + <> + <Paragraph> + Laura Därr is an artistic research associate in New Media at + Kunsthochschule Kassel and a member of the SENTIMENT project. + </Paragraph> + <Paragraph> + Her artistic research focuses on algorithmic intervention, particularly + within AI-based systems that autonomously structure and influence human + interaction patterns. This theme formed the core of both her diploma + thesis (Prof. Alba d'Urbano) and her master's thesis (Prof. Joel Baumann, + Prof. Dr. Johanna Schaffer). + </Paragraph> + <Paragraph> + Employing critical-making methodologies, she interrogates the + sociopolitical implications of automated decision-making processes, + developing experimental frameworks that expose the hidden logics + embedded within computational systems. Through interdisciplinary + collaboration and speculative-design approaches, her work contributes + to emerging discourses on algorithmic agency and the democratization of + technological literacy within contemporary art contexts. + </Paragraph> + </>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/components/helpers/BlockRendererClient.tsx(1 hunks)src/components/templates/About.tsx(1 hunks)src/components/templates/Team.tsx(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (2)
src/components/helpers/BlockRendererClient.tsx (1)
src/components/ui/typography/Paragraph.tsx (1)
Paragraph(15-39)
src/components/templates/Team.tsx (1)
src/components/ui/typography/Paragraph.tsx (1)
Paragraph(15-39)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: ⬣ ESLint, ʦ TypeScript, 💅 Prettier, and 🃏 Test
🔇 Additional comments (1)
src/components/helpers/BlockRendererClient.tsx (1)
52-54: font-primary is correctly defined in Tailwind configConfirmed that
fontFamily.primaryis declared in tailwind.config.ts (lines 9–12), so thefont-primaryutility exists and will apply as intended. No further action needed.
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
src/__tests__/components/ui/NavLink.test.tsx (1)
5-10: Basic smoke test is functional but could be enhanced.The test correctly verifies that the NavLink component renders without error. Consider adding tests for:
hrefattribute validation- Accessibility features (role, aria attributes)
- Active/inactive states if applicable
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
src/__e2e__/team.spec.ts(1 hunks)src/__tests__/components/templates/Team.test.tsx(1 hunks)src/__tests__/components/ui/NavLink.test.tsx(1 hunks)src/__tests__/components/ui/typography/Title.test.tsx(1 hunks)src/__tests__/lib/format-date.test.ts(1 hunks)src/components/templates/Team.tsx(3 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/components/templates/Team.tsx
🧰 Additional context used
🧬 Code Graph Analysis (3)
src/__tests__/components/templates/Team.test.tsx (1)
src/components/templates/Team.tsx (1)
Team(315-327)
src/__tests__/components/ui/typography/Title.test.tsx (1)
src/components/ui/typography/Title.tsx (1)
Title(15-44)
src/__tests__/lib/format-date.test.ts (1)
src/lib/format-date.ts (1)
formatDate(1-9)
🪛 GitHub Check: codecov/patch
src/__e2e__/team.spec.ts
[warning] 1-1: src/e2e/team.spec.ts#L1
Added line #L1 was not covered by tests
[warning] 3-3: src/e2e/team.spec.ts#L3
Added line #L3 was not covered by tests
[warning] 5-5: src/e2e/team.spec.ts#L5
Added line #L5 was not covered by tests
[warning] 7-7: src/e2e/team.spec.ts#L7
Added line #L7 was not covered by tests
[warning] 9-9: src/e2e/team.spec.ts#L9
Added line #L9 was not covered by tests
[warning] 11-11: src/e2e/team.spec.ts#L11
Added line #L11 was not covered by tests
[warning] 13-14: src/e2e/team.spec.ts#L13-L14
Added lines #L13 - L14 were not covered by tests
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: ⬣ ESLint, ʦ TypeScript, 💅 Prettier, and 🃏 Test
🔇 Additional comments (3)
src/__tests__/lib/format-date.test.ts (1)
1-22: Comprehensive test coverage with good edge case testing.The test suite provides excellent coverage of the
formatDatefunction, including valid dates, leap years, and error handling. The use of@ts-expect-errorfor testing invalid input is appropriate.Note: The function parameter in
src/lib/format-date.tsis nameddateStringbut expects aDateobject, which could be confusing. Consider renaming it todatefor clarity.src/__tests__/components/templates/Team.test.tsx (1)
34-36: Image count should match the actual team member count.The test expects 9 images, but verify this matches the actual number of team members in the component to ensure consistency.
src/__tests__/components/ui/typography/Title.test.tsx (1)
5-40: Excellent comprehensive test coverage for Title component.The test suite thoroughly validates all aspects of the Title component:
- Basic rendering and content presence
- Size prop functionality with correct CSS classes
- Margin prop behavior (both true and false cases)
- Custom className application
- renderAs prop for different HTML elements
- Default behavior validation
The test structure is clean and assertions are appropriate for each scenario.
| const memberNames = [ | ||
| 'Dr. Jessica Szczuka', | ||
| 'M. Sc. Lisa Mühl', | ||
| 'B. Sc. Anna Straub', | ||
| 'Prof. Dr. Veelasha Moonsamy', | ||
| 'M. Sc. Ramya Kandula', | ||
| 'Joel Baumann', | ||
| 'Laura Därr', | ||
| 'Dr. Maxi Nebel', | ||
| 'PD Dr. Christian Geminn', | ||
| ]; |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Verify team member count consistency across tests.
The test lists 9 team members, but the E2E test in src/__e2e__/team.spec.ts expects 11 team members (line 14). This inconsistency suggests either:
- Missing team members in this list
- Incorrect count in the E2E test
- Some team members don't have corresponding images
🏁 Script executed:
#!/bin/bash
# Description: Verify the actual number of team members in the Team component
# Expected: Find the actual team member count to resolve the discrepancy
# Search for team member data/array in Team component
ast-grep --pattern 'teamMembers = [$$$]'
# Also search for team member rendering logic
rg -A 10 -B 5 "teamMembers|team.*member" src/components/templates/Team.tsxLength of output: 1107
🏁 Script executed:
#!/bin/bash
# Locate the E2E test file
fd team.spec.ts
# Count actual entries in the Team component
awk '/const teamMembers/,/\];/ { if ($0 ~ /name:/) count++ } END { print "Actual teamMembers count:", count }' src/components/templates/Team.tsx
# Show the assertion in the E2E test for expected count
rg -n "should.*length" src/__e2e__/team.spec.tsLength of output: 267
🏁 Script executed:
#!/bin/bash
# Display assertions and occurrences in E2E test
echo "Searching for length assertions in E2E test:"
grep -En "have\.length|should\(.+length" src/__e2e__/team.spec.ts || echo "No length assertions found"
echo -e "\nSearching for numeric literals (e.g., 11) in E2E test:"
grep -En "[0-9]+" src/__e2e__/team.spec.ts
echo -e "\nPrinting E2E test file content for manual review:"
sed -n '1,200p' src/__e2e__/team.spec.tsLength of output: 1663
Inconsistent Team Member Count in Tests
There’s a mismatch between the Team component (and its unit test) listing 9 members and the E2E test expecting 11:
• src/components/templates/Team.tsx – teamMembers array defines 9 entries
• src/tests/components/templates/Team.test.tsx – memberNames array lists 9 names
• src/e2e/team.spec.ts (line 14) – await expect(teamMembers).toHaveCount(11)
Please align these counts by either:
- Adding the two missing members to
teamMembers(and updating the unit test’smemberNames), or - Adjusting the E2E assertion to
toHaveCount(9)if only nine members should be shown.
🤖 Prompt for AI Agents
In src/__tests__/components/templates/Team.test.tsx around lines 16 to 26, the
test lists 9 team members while the E2E test expects 11. To fix this, either add
the two missing members to the teamMembers array in
src/components/templates/Team.tsx and update the memberNames array in this test
accordingly, or change the E2E test assertion in src/__e2e__/team.spec.ts to
expect 9 members instead of 11 to keep the counts consistent.
| test('should navigate to the team page', async ({ page }) => { | ||
| // Start from the index page (the baseURL is set via the webServer in the playwright.config.ts) | ||
| await page.goto('http://localhost:3000/'); | ||
| // Find an element with the text 'Team' and click on it | ||
| await page.click('text=Team'); | ||
| // The new URL should be "/team" (baseURL is used there) | ||
| await expect(page).toHaveURL('http://localhost:3000/team'); | ||
| // The new page should contain an h1 with "Meet the (Team)" | ||
| await expect(page.locator('h1')).toContainText('Meet the'); | ||
| // Check if the page contains a list of team members | ||
| const teamMembers = page.locator('ul.team-list li'); | ||
| await expect(teamMembers).toHaveCount(11); // Adjust the count based on your | ||
| }); |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Well-structured E2E test with team member count discrepancy.
The test properly covers navigation flow and content validation. However, there's an inconsistency: this test expects 11 team members (line 14), while the unit test in src/__tests__/components/templates/Team.test.tsx expects only 9.
The static analysis codecov warnings are false positives - E2E tests typically aren't included in code coverage metrics.
🏁 Script executed:
#!/bin/bash
# Description: Count actual team members rendered in the DOM structure
# Expected: Verify the correct number of team members to resolve discrepancy
# Search for the team-list class usage and li elements
rg -A 5 -B 5 "team-list|<li>" src/components/templates/Team.tsx
# Count team member entries in the component
ast-grep --pattern 'name: $_' src/components/templates/Team.tsx | wc -lLength of output: 914
🏁 Script executed:
#!/bin/bash
# Locate the teamMembers array definition and count entries
rg -n "const teamMembers" -A200 src | sed -n '/const teamMembers/,/\];/p' | grep -c "name:"Length of output: 93
Mismatch in team member count—tests must align with actual data
The teamMembers array in src/components/templates/Team.tsx currently defines 7 entries, but:
- The E2E test in
src/__e2e__/team.spec.tsexpects 11 - The unit test in
src/__tests__/components/templates/Team.test.tsxexpects 9
Please update both tests so their expected counts match the source of truth (7 members), or adjust the data if additional members were intended.
• src/e2e/team.spec.ts (around line 14)
- await expect(teamMembers).toHaveCount(11);
+ await expect(teamMembers).toHaveCount(7);• src/tests/components/templates/Team.test.tsx
- expect(wrapper.find('li')).toHaveLength(9);
+ expect(wrapper.find('li')).toHaveLength(7);The Codecov warnings can be ignored for E2E tests.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| test('should navigate to the team page', async ({ page }) => { | |
| // Start from the index page (the baseURL is set via the webServer in the playwright.config.ts) | |
| await page.goto('http://localhost:3000/'); | |
| // Find an element with the text 'Team' and click on it | |
| await page.click('text=Team'); | |
| // The new URL should be "/team" (baseURL is used there) | |
| await expect(page).toHaveURL('http://localhost:3000/team'); | |
| // The new page should contain an h1 with "Meet the (Team)" | |
| await expect(page.locator('h1')).toContainText('Meet the'); | |
| // Check if the page contains a list of team members | |
| const teamMembers = page.locator('ul.team-list li'); | |
| await expect(teamMembers).toHaveCount(11); // Adjust the count based on your | |
| }); | |
| test('should navigate to the team page', async ({ page }) => { | |
| // Start from the index page (the baseURL is set via the webServer in the playwright.config.ts) | |
| await page.goto('http://localhost:3000/'); | |
| // Find an element with the text 'Team' and click on it | |
| await page.click('text=Team'); | |
| // The new URL should be "/team" (baseURL is used there) | |
| await expect(page).toHaveURL('http://localhost:3000/team'); | |
| // The new page should contain an h1 with "Meet the (Team)" | |
| await expect(page.locator('h1')).toContainText('Meet the'); | |
| // Check if the page contains a list of team members | |
| const teamMembers = page.locator('ul.team-list li'); | |
| - await expect(teamMembers).toHaveCount(11); // Adjust the count based on your | |
| + await expect(teamMembers).toHaveCount(7); | |
| }); |
🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 3-3: src/e2e/team.spec.ts#L3
Added line #L3 was not covered by tests
[warning] 5-5: src/e2e/team.spec.ts#L5
Added line #L5 was not covered by tests
[warning] 7-7: src/e2e/team.spec.ts#L7
Added line #L7 was not covered by tests
[warning] 9-9: src/e2e/team.spec.ts#L9
Added line #L9 was not covered by tests
[warning] 11-11: src/e2e/team.spec.ts#L11
Added line #L11 was not covered by tests
[warning] 13-14: src/e2e/team.spec.ts#L13-L14
Added lines #L13 - L14 were not covered by tests
🤖 Prompt for AI Agents
In src/__e2e__/team.spec.ts around line 14, the test expects 11 team members,
which does not match the actual 7 entries defined in
src/components/templates/Team.tsx. Update the expected count in the E2E test to
7 to align with the source of truth. Also, ensure the unit test in
src/__tests__/components/templates/Team.test.tsx is updated similarly to expect
7 members for consistency.
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/components/ui/icons/BMBF.tsx(1 hunks)
🧰 Additional context used
🪛 GitHub Actions: CI
src/components/ui/icons/BMBF.tsx
[warning] 3-3: ESLint: 'className' is defined but never used. Allowed unused args must match /^_/u (unused-imports/no-unused-vars)
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (1)
src/__e2e__/team.spec.ts (1)
14-14: Team member count still incorrect—update to match actual data.This is the same issue identified in the previous review. The test expects 9 team members, but the actual
teamMembersarray contains only 7 entries. Please update the expected count to align with the source of truth.Apply this fix:
- await expect(teamMembers).toHaveCount(9); // Adjust the count based on your + await expect(teamMembers).toHaveCount(7); // Matches actual team members array
🧹 Nitpick comments (1)
src/__e2e__/team.spec.ts (1)
5-5: Consider using relative URLs for better maintainability.The hardcoded localhost URLs make the test environment-specific. Consider using relative URLs to improve portability.
- await page.goto('http://localhost:3000/'); + await page.goto('/');- await expect(page).toHaveURL('http://localhost:3000/team'); + await expect(page).toHaveURL('/team');Also applies to: 9-9
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/__e2e__/team.spec.ts(1 hunks)src/components/templates/Team.tsx(4 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/components/templates/Team.tsx
🧰 Additional context used
🪛 GitHub Check: codecov/patch
src/__e2e__/team.spec.ts
[warning] 1-1: src/e2e/team.spec.ts#L1
Added line #L1 was not covered by tests
[warning] 3-3: src/e2e/team.spec.ts#L3
Added line #L3 was not covered by tests
[warning] 5-5: src/e2e/team.spec.ts#L5
Added line #L5 was not covered by tests
[warning] 7-7: src/e2e/team.spec.ts#L7
Added line #L7 was not covered by tests
[warning] 9-9: src/e2e/team.spec.ts#L9
Added line #L9 was not covered by tests
[warning] 11-11: src/e2e/team.spec.ts#L11
Added line #L11 was not covered by tests
[warning] 13-14: src/e2e/team.spec.ts#L13-L14
Added lines #L13 - L14 were not covered by tests
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: ⬣ ESLint, ʦ TypeScript, 💅 Prettier, and 🃏 Test
🔇 Additional comments (1)
src/__e2e__/team.spec.ts (1)
1-15: Well-structured E2E test with proper navigation flow.The test follows good E2E testing practices with clear navigation steps and appropriate content validation. The static analysis codecov warnings can be ignored as they're false positives for E2E tests.
Summary by CodeRabbit
New Features
Style
Documentation
Tests
UI Enhancements