Add tests for duration calculation

This adds tests for the duration calculation and moves it down a
component to make this easier. Adding tests for the
`VariantAnalysisHeader` would require constructing a complete variant
analysis object, while this is now just a simple unit test.

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

@@ -59,16 +59,6 @@ export const VariantAnalysisHeader = ({
     return getSkippedRepoCount(variantAnalysis.skippedRepos) > 0;
   }, [variantAnalysis.skippedRepos]);
 
-  const duration = useMemo(() => {
-    if (!variantAnalysis?.completedAt) {
-      return undefined;
-    }
-
-    const createdAt = parseDate(variantAnalysis.createdAt);
-    const completedAt = parseDate(variantAnalysis.completedAt);
-    return completedAt.getTime() - createdAt.getTime();
-  }, [variantAnalysis?.completedAt, variantAnalysis?.createdAt]);
-
   return (
     <Container>
       <Row>
@@ -91,7 +81,7 @@ export const VariantAnalysisHeader = ({
         completedRepositoryCount={completedRepositoryCount}
         resultCount={resultCount}
         hasWarnings={hasSkippedRepos}
-        duration={duration}
+        createdAt={parseDate(variantAnalysis.createdAt)}
         completedAt={parseDate(variantAnalysis.completedAt)}
         onViewLogsClick={onViewLogsClick}
       />

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

@@ -17,7 +17,7 @@ export type VariantAnalysisStatsProps = {
   hasWarnings?: boolean;
 
   resultCount?: number | undefined;
-  duration?: number | undefined;
+  createdAt: Date;
   completedAt?: Date | undefined;
 
   onViewLogsClick: () => void;
@@ -35,7 +35,7 @@ export const VariantAnalysisStats = ({
   completedRepositoryCount = 0,
   hasWarnings,
   resultCount,
-  duration,
+  createdAt,
   completedAt,
   onViewLogsClick,
 }: VariantAnalysisStatsProps) => {
@@ -59,6 +59,14 @@ export const VariantAnalysisStats = ({
     return 'Succeeded';
   }, [variantAnalysisStatus, hasWarnings]);
 
+  const duration = useMemo(() => {
+    if (!completedAt) {
+      return undefined;
+    }
+
+    return completedAt.getTime() - createdAt.getTime();
+  }, [completedAt, createdAt]);
+
   return (
     <Row>
       <StatItem title="Results">

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

@@ -17,6 +17,7 @@ describe(VariantAnalysisStats.name, () => {
         variantAnalysisStatus={VariantAnalysisStatus.InProgress}
         totalRepositoryCount={10}
         onViewLogsClick={onViewLogsClick}
+        createdAt={new Date()}
         {...props}
       />
     );
@@ -100,4 +101,22 @@ describe(VariantAnalysisStats.name, () => {
     expect(screen.getByText('Succeeded')).toBeInTheDocument();
     expect(screen.queryByText('Succeeded warnings')).not.toBeInTheDocument();
   });
+
+  it('renders the duration when it is less than a second', () => {
+    render({ createdAt: new Date('2021-05-01T00:00:00Z'), completedAt: new Date('2021-05-01T00:00:00Z') });
+
+    expect(screen.getByText('Less than a second')).toBeInTheDocument();
+  });
+
+  it('renders the duration when it is less than a minute', () => {
+    render({ createdAt: new Date('2021-05-01T00:00:00Z'), completedAt: new Date('2021-05-01T00:00:34Z') });
+
+    expect(screen.getByText('34 seconds')).toBeInTheDocument();
+  });
+
+  it('renders the duration when it is more than a minute', () => {
+    render({ createdAt: new Date('2021-05-01T00:00:00Z'), completedAt: new Date('2021-05-01T00:10:22Z') });
+
+    expect(screen.getByText('10 minutes')).toBeInTheDocument();
+  });
 });