Move variant analysis header tests to individual components

Author: koesie10

extensions/ql-vscode/src/view/variant-analysis/QueryDetails.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import ViewTitle from '../remote-queries/ViewTitle';
 import { LinkIconButton } from './LinkIconButton';
 
-type Props = {
+export type QueryDetailsProps = {
   queryName: string;
   queryFileName: string;
 
@@ -25,7 +25,7 @@ export const QueryDetails = ({
   queryFileName,
   onOpenQueryFileClick,
   onViewQueryTextClick,
-}: Props) => {
+}: QueryDetailsProps) => {
   return (
     <Container>
       <ViewTitle>{queryName}</ViewTitle>

extensions/ql-vscode/src/view/variant-analysis/__tests__/QueryDetails.spec.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { render as reactRender, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { QueryDetails, QueryDetailsProps } from '../QueryDetails';
+
+describe(QueryDetails.name, () => {
+  const onOpenQueryFileClick = jest.fn();
+  const onViewQueryTextClick = jest.fn();
+  const onStopQueryClick = jest.fn();
+  const onCopyRepositoryListClick = jest.fn();
+  const onExportResultsClick = jest.fn();
+
+  afterEach(() => {
+    onOpenQueryFileClick.mockReset();
+    onViewQueryTextClick.mockReset();
+    onStopQueryClick.mockReset();
+    onCopyRepositoryListClick.mockReset();
+    onExportResultsClick.mockReset();
+  });
+
+  const render = (props: Partial<QueryDetailsProps> = {}) =>
+    reactRender(
+      <QueryDetails
+        queryName="Query name"
+        queryFileName="example.ql"
+        onOpenQueryFileClick={onOpenQueryFileClick}
+        onViewQueryTextClick={onViewQueryTextClick}
+        {...props}
+      />
+    );
+
+  it('renders correctly', () => {
+    render();
+
+    expect(screen.getByText('Query name')).toBeInTheDocument();
+  });
+
+  it('renders the query file name as a button', async () => {
+    render();
+
+    await userEvent.click(screen.getByText('example.ql'));
+    expect(onOpenQueryFileClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders a view query button', async () => {
+    render();
+
+    await userEvent.click(screen.getByText('View query'));
+    expect(onViewQueryTextClick).toHaveBeenCalledTimes(1);
+  });
+});