Skip to content

Commit d1e33d1

Browse files
adibarraadibarra
committed
footer: add data-testid attrs, update copy, fix grid proportions, update tests
1 parent 5aa6511 commit d1e33d1

2 files changed

Lines changed: 46 additions & 31 deletions

File tree

‎packages/app/cypress/component/footer.cy.tsx‎

Lines changed: 15 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -25,48 +25,45 @@ describe('Footer', () => {
2525
cy.get('[data-testid="footer-copyright"]').should('contain', year);
2626
});
2727

28-
it('shows the GitHub star CTA linking to GitHub repo', () => {
28+
it('shows the GitHub star CTA', () => {
2929
cy.get('[data-testid="footer-star-cta"]').should('be.visible');
30-
cy.get('[data-testid="footer-star-cta"]')
31-
.should('have.attr', 'href')
32-
.and('include', 'github.com/SemiAnalysisAI/InferenceX');
33-
});
34-
35-
it('footer star CTA opens in new tab', () => {
36-
cy.get('[data-testid="footer-star-cta"]').should('have.attr', 'target', '_blank');
30+
cy.get('[data-testid="footer-star-cta"]').should('contain', 'Star');
3731
});
3832

3933
it('shows social share buttons', () => {
40-
cy.get('[data-testid="social-share-buttons"]').should('be.visible');
34+
cy.get('[data-testid="footer-social-buttons"]').should('be.visible');
35+
cy.get('[data-testid="footer-social-buttons"]')
36+
.find('button')
37+
.should('have.length.greaterThan', 1);
4138
});
4239

4340
it('has Privacy Policy link', () => {
44-
cy.get('[data-testid="footer"]')
45-
.contains('Privacy Policy')
41+
cy.get('[data-testid="footer-link-privacy"]')
4642
.should('have.attr', 'href')
4743
.and('include', 'semianalysis.com/privacy-policy');
4844
});
4945

5046
it('has Cookie Policy link', () => {
51-
cy.get('[data-testid="footer"]')
52-
.contains('Cookie Policy')
47+
cy.get('[data-testid="footer-link-cookies"]')
5348
.should('have.attr', 'href')
5449
.and('include', 'semianalysis.com/cookie-policy');
5550
});
5651

57-
it('has Contribute link pointing to GitHub', () => {
58-
cy.get('[data-testid="footer"]')
59-
.contains('Contribute')
52+
it('has Contribute section with GitHub links', () => {
53+
cy.get('[data-testid="footer-link-benchmarks"]')
6054
.should('have.attr', 'href')
6155
.and('include', 'github.com/SemiAnalysisAI/InferenceX');
56+
cy.get('[data-testid="footer-link-frontend"]')
57+
.should('have.attr', 'href')
58+
.and('include', 'github.com/SemiAnalysisAI/InferenceX-app');
6259
});
6360

6461
it('shows the SemiAnalysis logo', () => {
65-
cy.get('[data-testid="footer"]').find('img[alt="SemiAnalysis logo"]').should('exist');
62+
cy.get('[data-testid="footer-brand"]').find('img[alt="SemiAnalysis logo"]').should('exist');
6663
});
6764

6865
it('all external links open in a new tab', () => {
69-
cy.get('[data-testid="footer"]')
66+
cy.get('[data-testid="footer-links"]')
7067
.find('a[target="_blank"]')
7168
.should('have.length.greaterThan', 0);
7269
});

‎packages/app/src/components/footer/footer.tsx‎

Lines changed: 31 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -32,10 +32,14 @@ export const Footer = () => {
3232
>
3333
<div className="container mx-auto px-4 lg:px-8 py-12">
3434
{/* Main grid */}
35-
<div className="grid grid-cols-1 md:grid-cols-3 gap-10 md:gap-8 mb-10">
35+
<div className="grid grid-cols-1 md:grid-cols-[4fr_3fr_3fr] gap-10 md:gap-8 mb-10">
3636
{/* Left — Brand */}
37-
<div className="flex flex-col gap-4 items-center md:items-start">
37+
<div
38+
data-testid="footer-brand"
39+
className="flex flex-col gap-4 items-center md:items-start"
40+
>
3841
<Link
42+
data-testid="footer-brand-link"
3943
target="_blank"
4044
href="https://semianalysis.com/"
4145
className="inline-block w-35 h-14.5"
@@ -55,17 +59,21 @@ export const Footer = () => {
5559
className="dark:hidden"
5660
/>
5761
</Link>
58-
<p className="text-sm text-muted-foreground max-w-xs">
59-
Continuous open-source inference benchmarks. Transparent, real-world GPU performance
60-
data for the ML community.
62+
<p
63+
data-testid="footer-brand-description"
64+
className="text-sm text-muted-foreground max-w-xs"
65+
>
66+
Continuous open-source inference benchmarking. Real-world, reproducible, auditable
67+
performance data you can trust.
6168
</p>
6269
</div>
6370

6471
{/* Center — Links */}
65-
<div className="grid grid-cols-3 gap-6">
66-
<div className="flex flex-col gap-2.5">
72+
<div data-testid="footer-links" className="grid grid-cols-3 gap-6">
73+
<div data-testid="footer-links-semianalysis" className="flex flex-col gap-2.5">
6774
<span className="text-sm font-medium text-foreground">SemiAnalysis</span>
6875
<a
76+
data-testid="footer-link-main-site"
6977
href="https://semianalysis.com"
7078
target="_blank"
7179
rel="noopener noreferrer"
@@ -74,6 +82,7 @@ export const Footer = () => {
7482
Main Site
7583
</a>
7684
<a
85+
data-testid="footer-link-newsletter"
7786
href="https://newsletter.semianalysis.com"
7887
target="_blank"
7988
rel="noopener noreferrer"
@@ -82,6 +91,7 @@ export const Footer = () => {
8291
Newsletter
8392
</a>
8493
<a
94+
data-testid="footer-link-about"
8595
href="https://semianalysis.com/about/"
8696
target="_blank"
8797
rel="noopener noreferrer"
@@ -90,9 +100,10 @@ export const Footer = () => {
90100
About
91101
</a>
92102
</div>
93-
<div className="flex flex-col gap-2.5">
103+
<div data-testid="footer-links-legal" className="flex flex-col gap-2.5">
94104
<span className="text-sm font-medium text-foreground">Legal</span>
95105
<a
106+
data-testid="footer-link-privacy"
96107
href="https://semianalysis.com/privacy-policy/"
97108
target="_blank"
98109
rel="noopener noreferrer"
@@ -101,6 +112,7 @@ export const Footer = () => {
101112
Privacy Policy
102113
</a>
103114
<a
115+
data-testid="footer-link-cookies"
104116
href="https://semianalysis.com/cookie-policy/"
105117
target="_blank"
106118
rel="noopener noreferrer"
@@ -109,9 +121,10 @@ export const Footer = () => {
109121
Cookie Policy
110122
</a>
111123
</div>
112-
<div className="flex flex-col gap-2.5">
124+
<div data-testid="footer-links-contribute" className="flex flex-col gap-2.5">
113125
<span className="text-sm font-medium text-foreground">Contribute</span>
114126
<a
127+
data-testid="footer-link-benchmarks"
115128
href="https://github.com/SemiAnalysisAI/InferenceX"
116129
target="_blank"
117130
rel="noopener noreferrer"
@@ -120,6 +133,7 @@ export const Footer = () => {
120133
Benchmarks
121134
</a>
122135
<a
136+
data-testid="footer-link-frontend"
123137
href="https://github.com/SemiAnalysisAI/InferenceX-app"
124138
target="_blank"
125139
rel="noopener noreferrer"
@@ -131,8 +145,8 @@ export const Footer = () => {
131145
</div>
132146

133147
{/* Right — CTA + Social */}
134-
<div className="flex flex-col gap-4 md:items-end">
135-
<div className="flex items-center gap-1.5">
148+
<div data-testid="footer-cta" className="flex flex-col gap-4 md:items-end">
149+
<div data-testid="footer-social-buttons" className="flex items-center gap-1.5">
136150
<div className="rounded-md bg-background/80 w-fit">
137151
<StarButton />
138152
</div>
@@ -144,13 +158,17 @@ export const Footer = () => {
144158
</div>
145159
</div>
146160
<p className="text-sm text-muted-foreground md:text-right max-w-xs">
147-
If this data helps your work, star us or share with your network.
161+
If this data helps your work, consider starring us on GitHub or sharing with your
162+
network.
148163
</p>
149164
</div>
150165
</div>
151166

152167
{/* Bottom bar */}
153-
<div className="border-t border-border/40 pt-6 flex flex-col md:flex-row items-center justify-between gap-4">
168+
<div
169+
data-testid="footer-bottom-bar"
170+
className="border-t border-border/40 pt-6 flex flex-col md:flex-row items-center justify-between gap-4"
171+
>
154172
<p data-testid="footer-copyright" className="text-xs text-muted-foreground">
155173
&copy; {new Date().getFullYear()} semianalysis.com. All rights reserved.
156174
</p>

0 commit comments

Comments
 (0)