test(externallink): improve use cases and code

src/components/ExternalLink/__tests__/ExternalLink.spec.tsx

@@ -1,23 +1,25 @@
 import { render, screen } from '@/utils/testUtils';
 import { ExternalLink } from '..';
 
-test('renders children correctly', () => {
-  const testText = 'Test Link';
-  render(<ExternalLink href="http://test.com">{testText}</ExternalLink>);
-  const linkElement = screen.getByText(testText);
-  expect(linkElement).toBeInTheDocument();
+test('renders link text (children) correctly', () => {
+  render(<ExternalLink href="http://test.com">Test Link</ExternalLink>);
+
+  expect(screen.getByText(/test link/i)).toBeInTheDocument();
 });
 
-test('has correct href attribute', () => {
-  const testHref = 'http://test.com';
-  render(<ExternalLink href={testHref}>Test Link</ExternalLink>);
-  const linkElement = screen.getByRole('link');
-  expect(linkElement).toHaveAttribute('href', testHref);
+test('has href attribute passed to component', () => {
+  render(<ExternalLink href="http://test.com">Test Link</ExternalLink>);
+
+  expect(screen.getByText(/test link/i)).toHaveAttribute(
+    'href',
+    'http://test.com'
+  );
 });
 
-test('opens in new tab', () => {
+test('be able to open in new tab', () => {
   render(<ExternalLink href="http://test.com">Test Link</ExternalLink>);
-  const linkElement = screen.getByRole('link');
+  const linkElement = screen.getByText(/test link/i);
+
   expect(linkElement).toHaveAttribute('target', '_blank');
   expect(linkElement).toHaveAttribute('rel', 'noopener noreferrer');
 });