Enhance ResponsiveImage component test coverage

- Add tests for partial image sources
- Verify alt text accessibility
- Test media query responsiveness
- Validate prop forwarding to picture element
- Improve component test robustness

Author: pstackebrandt

src/components/ResponsiveImage/ResponsiveImage.test.js

@@ -96,4 +96,75 @@ describe('ResponsiveImage', () => {
     expect(sourceElements[3].getAttribute('srcSet')).toBe('/images/test-large.jpg');
     expect(sourceElements[3].getAttribute('media')).toBe('(min-width: 1024px)');
   });
+
+  it('renders correctly with only some sources provided', () => {
+    const partialProps = {
+      sources: {
+        small: '/images/test-small.jpg',
+        large: '/images/test-large.jpg',
+        largeWebp: '/images/test-large.webp'
+      },
+      alt: 'Test image',
+      'data-testid': 'responsive-image'
+    };
+  
+    render(<ResponsiveImage {...partialProps} />);
+    
+    // Source elements don't have roles or accessible attributes that can be
+    // targeted with standard Testing Library queries, so we need to use
+    // direct DOM access with querySelectorAll to verify them
+    // eslint-disable-next-line testing-library/no-node-access
+    const sourceElements = screen.getByTestId('responsive-image').querySelectorAll('source');
+    expect(sourceElements).toHaveLength(2);
+  });
+
+  it('maintains alt text for accessibility', () => {
+    render(<ResponsiveImage {...minimalProps} alt="Descriptive alt text" />);
+    expect(screen.getByAltText('Descriptive alt text')).toBeInTheDocument();
+  });
+
+  it('applies correct media queries for responsive behavior', () => {
+    const fullProps = {
+      sources: {
+        small: '/images/test-small.jpg',
+        medium: '/images/test-medium.jpg',
+        large: '/images/test-large.jpg',
+        smallWebp: '/images/test-small.webp',
+        mediumWebp: '/images/test-medium.webp',
+        largeWebp: '/images/test-large.webp'
+      },
+      alt: 'Test image',
+      'data-testid': 'responsive-image'
+    };
+    
+    const { container } = render(
+      <ResponsiveImage {...fullProps} />
+    );
+    
+    // Source elements have no accessible role or text content, so we need to use
+    // direct DOM querying to verify their media queries and source attributes.
+    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+    const mediumSourcePresent = Array.from(container.querySelectorAll('source'))
+      .some(source => 
+        source.getAttribute('srcSet') === '/images/test-medium.jpg' && 
+        source.getAttribute('media') === '(min-width: 768px)'
+      );
+    
+    expect(mediumSourcePresent).toBe(true);
+  });
+
+  it('forwards additional props to picture element', () => {
+    render(
+      <ResponsiveImage 
+        {...minimalProps} 
+        data-testid="responsive-image"
+        data-custom="test-value"
+        role="img" 
+      />
+    );
+    
+    const picture = screen.getByTestId('responsive-image');
+    expect(picture).toHaveAttribute('data-custom', 'test-value');
+    expect(picture).toHaveAttribute('role', 'img');
+  });
 });