Merge branch 'koesie10/variant-analysis-header' into koesie10/variant-analysis-stats

Author: koesie10

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

@@ -0,0 +1,42 @@
+import React from 'react';
+
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+
+import { VariantAnalysisContainer } from '../../view/variant-analysis/VariantAnalysisContainer';
+import { QueryDetails as QueryDetailsComponent } from '../../view/variant-analysis/QueryDetails';
+
+export default {
+  title: 'Variant Analysis/Query Details',
+  component: QueryDetailsComponent,
+  decorators: [
+    (Story) => (
+      <VariantAnalysisContainer>
+        <Story />
+      </VariantAnalysisContainer>
+    )
+  ],
+  argTypes: {
+    onOpenQueryFileClick: {
+      action: 'open-query-file-clicked',
+      table: {
+        disable: true,
+      },
+    },
+    onViewQueryTextClick: {
+      action: 'view-query-text-clicked',
+      table: {
+        disable: true,
+      },
+    },
+  }
+} as ComponentMeta<typeof QueryDetailsComponent>;
+
+const Template: ComponentStory<typeof QueryDetailsComponent> = (args) => (
+  <QueryDetailsComponent {...args} />
+);
+
+export const QueryDetails = Template.bind({});
+QueryDetails.args = {
+  queryName: 'Query name',
+  queryFileName: 'example.ql',
+};

extensions/ql-vscode/src/stories/variant-analysis/VariantAnalysisActions.stories.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+
+import { VariantAnalysisContainer } from '../../view/variant-analysis/VariantAnalysisContainer';
+import { VariantAnalysisStatus } from '../../remote-queries/shared/variant-analysis';
+import { VariantAnalysisActions } from '../../view/variant-analysis/VariantAnalysisActions';
+
+export default {
+  title: 'Variant Analysis/Variant Analysis Actions',
+  component: VariantAnalysisActions,
+  decorators: [
+    (Story) => (
+      <VariantAnalysisContainer>
+        <Story />
+      </VariantAnalysisContainer>
+    )
+  ],
+  argTypes: {
+    onStopQueryClick: {
+      action: 'stop-query-clicked',
+      table: {
+        disable: true,
+      },
+    },
+    onCopyRepositoryListClick: {
+      action: 'copy-repository-list-clicked',
+      table: {
+        disable: true,
+      },
+    },
+    onExportResultsClick: {
+      action: 'export-results-clicked',
+      table: {
+        disable: true,
+      },
+    },
+  }
+} as ComponentMeta<typeof VariantAnalysisActions>;
+
+const Template: ComponentStory<typeof VariantAnalysisActions> = (args) => (
+  <VariantAnalysisActions {...args} />
+);
+
+export const InProgress = Template.bind({});
+InProgress.args = {
+  variantAnalysisStatus: VariantAnalysisStatus.InProgress,
+};
+
+export const Succeeded = Template.bind({});
+Succeeded.args = {
+  ...InProgress.args,
+  variantAnalysisStatus: VariantAnalysisStatus.Succeeded,
+};
+
+export const Failed = Template.bind({});
+Failed.args = {
+  ...InProgress.args,
+  variantAnalysisStatus: VariantAnalysisStatus.Failed,
+};

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);
+  });
+});