@@ -78,6 +78,45 @@ describe('RadarChart', () => {
7878 expect ( screen . getAllByText ( 'Python' ) ) . toBeDefined ( ) ;
7979 } ) ;
8080
81+ it ( 'renders chart elements and layout structure visible across viewport sizes' , ( ) => {
82+ const mockLangsA = [
83+ { name : 'TypeScript' , percentage : 80 , color : '#3178c6' } ,
84+ { name : 'Python' , percentage : 60 , color : '#3572A5' } ,
85+ { name : 'JavaScript' , percentage : 40 , color : '#f1e05a' } ,
86+ ] ;
87+
88+ const mockLangsB = [
89+ { name : 'TypeScript' , percentage : 50 , color : '#3178c6' } ,
90+ { name : 'Python' , percentage : 70 , color : '#3572A5' } ,
91+ { name : 'JavaScript' , percentage : 30 , color : '#f1e05a' } ,
92+ ] ;
93+
94+ const { container } = render (
95+ < RadarChart languagesA = { mockLangsA } languagesB = { mockLangsB } labelA = "User A" labelB = "User B" />
96+ ) ;
97+
98+ // Check that SVG element is rendered
99+ const svg = container . querySelector ( 'svg' ) ;
100+ expect ( svg ) . toBeDefined ( ) ;
101+
102+ // Check that grid polygons are rendered (concentric levels)
103+ const polygons = container . querySelectorAll ( 'polygon' ) ;
104+ expect ( polygons . length ) . toBeGreaterThan ( 0 ) ;
105+
106+ // Check that axis lines are rendered
107+ const lines = container . querySelectorAll ( 'line' ) ;
108+ expect ( lines . length ) . toBeGreaterThan ( 0 ) ;
109+
110+ // Check that axis labels are rendered
111+ expect ( screen . getAllByText ( 'TypeScript' ) ) . toBeDefined ( ) ;
112+ expect ( screen . getAllByText ( 'Python' ) ) . toBeDefined ( ) ;
113+ expect ( screen . getAllByText ( 'JavaScript' ) ) . toBeDefined ( ) ;
114+
115+ // Check that data points (circles) are rendered
116+ const circles = container . querySelectorAll ( 'circle' ) ;
117+ expect ( circles . length ) . toBeGreaterThan ( 0 ) ;
118+ } ) ;
119+
81120 it ( 'deduplicates shared languages so TypeScript appears as a single axis label' , ( ) => {
82121 const langsA = [ { name : 'TypeScript' , percentage : 70 , color : '#3178c6' } ] ;
83122 const langsB = [ { name : 'TypeScript' , percentage : 50 , color : '#3178c6' } ] ;
@@ -110,7 +149,6 @@ describe('RadarChart', () => {
110149 labelB = "Low Scorer"
111150 />
112151 ) ;
113-
114152 expect ( screen . getAllByText ( 'TypeScript' ) ) . toBeDefined ( ) ;
115153 expect ( screen . getAllByText ( 'Python' ) ) . toBeDefined ( ) ;
116154 expect ( screen . getAllByText ( 'JavaScript' ) ) . toBeDefined ( ) ;
@@ -121,8 +159,52 @@ describe('RadarChart', () => {
121159 const svg = container . querySelector ( 'svg' ) ;
122160 expect ( svg ) . not . toBeNull ( ) ;
123161
162+ // Check that data points (circles) are rendered
163+ const circles = container . querySelectorAll ( 'circle' ) ;
164+ expect ( circles . length ) . toBeGreaterThan ( 0 ) ;
165+ } ) ;
166+
167+ it ( 'dynamically scales axis points based on dataset max score' , ( ) => {
168+ // Mock dataset with specific maximum score
169+ const mockLangsA = [
170+ { name : 'TypeScript' , percentage : 100 , color : '#3178c6' } , // Max score
171+ { name : 'Python' , percentage : 75 , color : '#3572A5' } ,
172+ { name : 'JavaScript' , percentage : 50 , color : '#f1e05a' } ,
173+ ] ;
174+
175+ const mockLangsB = [
176+ { name : 'TypeScript' , percentage : 90 , color : '#3178c6' } ,
177+ { name : 'Python' , percentage : 60 , color : '#3572A5' } ,
178+ { name : 'JavaScript' , percentage : 30 , color : '#f1e05a' } ,
179+ ] ;
180+
181+ const { container } = render (
182+ < RadarChart languagesA = { mockLangsA } languagesB = { mockLangsB } labelA = "User A" labelB = "User B" />
183+ ) ;
184+
185+ // Verify that polygons are rendered with points attribute
186+ const polygons = container . querySelectorAll ( 'polygon' ) ;
187+ expect ( polygons . length ) . toBeGreaterThan ( 0 ) ;
188+
189+ // Check that the data polygons have points attribute (indicating scaling)
190+ const dataPolygons = Array . from ( polygons ) . filter ( ( p ) =>
191+ p . getAttribute ( 'points' ) ?. includes ( ',' )
192+ ) ;
193+ expect ( dataPolygons . length ) . toBeGreaterThan ( 0 ) ;
194+
195+ // Verify that circles (data points) are rendered at different positions
124196 const circles = container . querySelectorAll ( 'circle' ) ;
125197 expect ( circles . length ) . toBeGreaterThan ( 0 ) ;
198+
199+ // Get all circle positions to verify they're scaled differently
200+ const circlePositions = Array . from ( circles ) . map ( ( circle ) => ( {
201+ cx : circle . getAttribute ( 'cx' ) ,
202+ cy : circle . getAttribute ( 'cy' ) ,
203+ } ) ) ;
204+
205+ // Verify that not all circles are at the same position (indicating dynamic scaling)
206+ const uniquePositions = new Set ( circlePositions . map ( ( pos ) => `${ pos . cx } ,${ pos . cy } ` ) ) ;
207+ expect ( uniquePositions . size ) . toBeGreaterThan ( 1 ) ;
126208 } ) ;
127209
128210 it ( 'check generation of different polygon coordinates for different score magnitudes' , ( ) => {
0 commit comments