creevey 0.9.0 → 0.9.1

package/src/client/shared/components/PageFooter/Paging.tsx

@@ -1,7 +1,5 @@
 import React from 'react';
-import { Button, Icons } from '@storybook/components';
-import { styled } from '@storybook/theming';
-import { noop } from '../../../../types.js';
+import { TabButton } from '@storybook/components';
 
 export interface PagingProps {
   activePage: number;
@@ -9,56 +7,43 @@ export interface PagingProps {
   pagesCount: number;
 }
 
-export type ItemType = number | '.' | 'forward';
-
-const StyledButton = styled(Button)({
-  transform: 'none',
-  marginLeft: '8px',
-});
+export type ItemType = number | '.';
 
 export function Paging(props: PagingProps): JSX.Element {
   const renderItem = (item: ItemType, index: number): JSX.Element => {
     switch (item) {
       case '.': {
         return (
-          <StyledButton disabled key={`dots${index < 5 ? 'Left' : 'Right'}`}>
-            {'...'}
-          </StyledButton>
-        );
-      }
-      case 'forward': {
-        const disabled = props.activePage === props.pagesCount;
-        return (
-          <StyledButton
-            outline
-            disabled={disabled}
-            onClick={
-              disabled
-                ? noop
-                : () => {
-                    goToPage(props.activePage + 1);
-                  }
-            }
-            key="forward"
+          <TabButton
+            disabled
+            key={`dots${index < 5 ? 'Left' : 'Right'}`}
+            autoFocus={false}
+            content={''}
+            nonce={''}
+            rel={''}
+            rev={''}
           >
-            <span>
-              Next <Icons icon="arrowright" />
-            </span>
-          </StyledButton>
+            {'...'}
+          </TabButton>
         );
       }
+
       default: {
         return (
-          <StyledButton
-            outline
-            secondary={props.activePage === item}
+          <TabButton
+            rel={item}
+            rev={item}
+            autoFocus={false}
+            nonce={item}
+            content={item}
             key={item}
             onClick={() => {
               goToPage(item);
             }}
+            active={props.activePage === item}
           >
             {item}
-          </StyledButton>
+          </TabButton>
         );
       }
     }
@@ -101,5 +86,5 @@ function getItems(active: number, total: number): ItemType[] {
     result.push(total);
   }
 
-  return result.concat('forward');
+  return result;
 }

package/src/client/shared/components/PageHeader/PageHeader.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect } from 'react';
 import { Icons, Tabs } from '@storybook/components';
 import { styled, withTheme, Theme } from '@storybook/theming';
 import { ImagesViewMode, Images } from '../../../../types.js';
@@ -8,10 +8,10 @@ import { viewModes } from '../../viewMode.js';
 
 interface PageHeaderProps {
   title: string[];
+  imageName: string;
   images?: Partial<Record<string, Images>>;
   errorMessage?: string | null;
   showViewModes: boolean;
-  showTitle?: boolean;
   viewMode: ImagesViewMode;
   imagesWithError?: string[];
   onImageChange: (name: string) => void;
@@ -63,34 +63,40 @@ const ImagesEntriesContainer = styled.div({
   margin: '16px 0 8px',
 });
 
+// TODO Move images to sidebar
 export function PageHeader({
   title,
+  imageName,
   images = {},
   errorMessage,
   showViewModes,
-  showTitle,
   viewMode,
   imagesWithError = [],
   onImageChange,
   onViewModeChange,
 }: PageHeaderProps): JSX.Element | null {
   const imageEntires = Object.entries(images) as [string, Images][];
-  const [imageName, setImageName] = useState(imageEntires.at(0)?.[0] ?? '');
 
-  const handleImageChange = (name: string): void => {
-    setImageName(name);
-    onImageChange(name);
-  };
   const handleViewModeChange = (mode: string): void => {
     onViewModeChange(mode as ImagesViewMode);
   };
+
+  useEffect(() => {
+    if (imageName === '') {
+      if (imagesWithError.length > 0) {
+        onImageChange(imagesWithError[0]);
+        return;
+      }
+      const firstImage = Object.keys(images).at(0);
+      if (firstImage) onImageChange(firstImage);
+    }
+  }, [imageName, images, imagesWithError, onImageChange]);
+
   const error = errorMessage || imagesWithError.includes(imageName) ? (images[imageName]?.error ?? errorMessage) : null;
 
-  return showTitle || error || imageEntires.length > 1 || showViewModes ? (
+  return (
     <Container>
-      {showTitle && (
-        <H1>{title.flatMap((token) => [token, <HeaderDivider key={token}>/</HeaderDivider>]).slice(0, -1)}</H1>
-      )}
+      <H1>{title.flatMap((token) => [token, <HeaderDivider key={token}>/</HeaderDivider>]).slice(0, -1)}</H1>
       {error && (
         <ErrorContainer>
           <Icons icon="closeAlt" />
@@ -105,7 +111,7 @@ export function PageHeader({
               imageName={name}
               url={`${getImageUrl(title, name)}/${image.actual}`}
               isActive={name === imageName}
-              onClick={handleImageChange}
+              onClick={onImageChange}
               error={imagesWithError.includes(name)}
             />
           ))}
@@ -119,5 +125,5 @@ export function PageHeader({
         </Tabs>
       )}
     </Container>
-  ) : null;
+  );
 }

package/src/client/shared/components/ResultsPage.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import { Placeholder, ScrollArea } from '@storybook/components';
 import { styled, withTheme, Theme } from '@storybook/theming';
 import { ImagesView } from './ImagesView/ImagesView.js';
@@ -8,15 +8,17 @@ import { getImageUrl } from '../helpers.js';
 import { getViewMode, VIEW_MODE_KEY } from '../viewMode.js';
 import { ImagesViewMode, TestResult } from '../../../types.js';
 
-interface TestResultsProps {
-  id: string;
+interface ResultsPageProps {
   path: string[];
   results?: TestResult[];
-  approved?: Partial<Record<string, number>>;
+  approved?: Partial<Record<string, number>> | null;
   showTitle?: boolean;
-  onImageApprove: (id: string, retry: number, image: string) => void;
   theme: Theme;
   height?: string;
+  retry: number;
+  imageName: string;
+  onImageChange: (image: string) => void;
+  onRetryChange: (retry: number) => void;
 }
 
 const Wrapper = styled.div({
@@ -52,38 +54,29 @@ const Container = styled.div<{ height?: string }>(({ height = '100vh' }) => ({
 }));
 
 export function ResultsPageInternal({
-  id,
   path,
   results = [],
-  approved = {},
+  approved,
   theme,
-  onImageApprove,
-  showTitle = false,
   height,
-}: TestResultsProps): JSX.Element {
-  const [retry, setRetry] = useState(results.length);
+  retry,
+  imageName,
+  onImageChange,
+  onRetryChange,
+}: ResultsPageProps): JSX.Element {
   const result = results[retry - 1] ?? {};
-  const [imageName, setImageName] = useState(Object.keys(result.images ?? {})[0] ?? '');
   const [viewMode, setViewMode] = useState<ImagesViewMode>(getViewMode());
-
-  useEffect(() => {
-    setRetry(results.length);
-  }, [results.length]);
-
   const url = getImageUrl(path, imageName);
   const image = result.images?.[imageName];
-  const canApprove = Boolean(image && approved[imageName] != retry - 1 && result.status != 'success');
+  const canApprove = Boolean(image && approved?.[imageName] != retry - 1 && result.status != 'success');
   const hasDiffAndExpect = canApprove && Boolean(image?.diff && image.expect);
   const imagesWithError = result.images
     ? Object.keys(result.images).filter(
         (imageName) =>
-          result.status != 'success' && approved[imageName] != retry - 1 && result.images?.[imageName]?.error != null,
+          result.status != 'success' && approved?.[imageName] != retry - 1 && result.images?.[imageName]?.error != null,
       )
     : [];
 
-  const handleApprove = (): void => {
-    onImageApprove(id, retry - 1, imageName);
-  };
   const handleChangeViewMode = (mode: ImagesViewMode): void => {
     localStorage.setItem(VIEW_MODE_KEY, mode);
     setViewMode(mode);
@@ -94,13 +87,13 @@ export function ResultsPageInternal({
       <HeaderContainer>
         <PageHeader
           title={path}
+          imageName={imageName}
           images={result.images}
           errorMessage={result.error}
           showViewModes={hasDiffAndExpect}
           viewMode={viewMode}
           onViewModeChange={handleChangeViewMode}
-          onImageChange={setImageName}
-          showTitle={showTitle}
+          onImageChange={onImageChange}
           imagesWithError={imagesWithError}
         />
       </HeaderContainer>
@@ -119,13 +112,7 @@ export function ResultsPageInternal({
       </BodyContainer>
       {results.length ? (
         <FooterContainer>
-          <PageFooter
-            canApprove={canApprove}
-            retry={retry}
-            retriesCount={results.length}
-            onRetryChange={setRetry}
-            onApprove={handleApprove}
-          />
+          <PageFooter retry={retry} retriesCount={results.length} onRetryChange={onRetryChange} />
         </FooterContainer>
       ) : null}
     </Container>

package/src/client/shared/creeveyClientApi.ts

@@ -5,6 +5,7 @@ export interface CreeveyClientApi {
   start: (ids: string[]) => void;
   stop: () => void;
   approve: (id: string, retry: number, image: string) => void;
+  approveAll: () => void;
   onUpdate: (fn: (update: CreeveyUpdate) => void) => () => void;
   readonly status: Promise<CreeveyStatus>;
 }
@@ -32,6 +33,9 @@ export async function initCreeveyClientApi(): Promise<CreeveyClientApi> {
       approve(id: string, retry: number, image: string) {
         send({ type: 'approve', payload: { id, retry, image } });
       },
+      approveAll() {
+        send({ type: 'approveAll' });
+      },
       onUpdate(fn: (update: CreeveyUpdate) => void) {
         updateListeners.add(fn);
         return () => updateListeners.delete(fn);

package/src/client/shared/helpers.ts

@@ -12,13 +12,14 @@ export interface CreeveyTestsStatus {
   successCount: number;
   failedCount: number;
   pendingCount: number;
-  skippedCount: number;
+  approvedCount: number;
 }
 
 const statusUpdatesMap = new Map<TestStatus | undefined, RegExp>([
-  [undefined, /(unknown|success|failed|pending|running)/],
-  ['unknown', /(success|failed|pending|running)/],
-  ['success', /(failed|pending|running)/],
+  [undefined, /(unknown|success|approved|failed|pending|running)/],
+  ['unknown', /(success|approved|failed|pending|running)/],
+  ['success', /(approved|failed|pending|running)/],
+  ['approved', /(failed|pending|running)/],
   ['failed', /(pending|running)/],
   ['pending', /running/],
 ]);
@@ -153,6 +154,16 @@ export function getCheckedTests(suite: CreeveySuite): CreeveyTest[] {
     });
 }
 
+export function getFailedTests(suite: CreeveySuite): CreeveyTest[] {
+  return Object.values(suite.children)
+    .filter(isDefined)
+    .flatMap((suiteOrTest) => {
+      if (isTest(suiteOrTest)) return suiteOrTest.status === 'failed' ? suiteOrTest : [];
+
+      return getFailedTests(suiteOrTest);
+    });
+}
+
 export function updateTestStatus(suite: CreeveySuite, path: string[], update: Partial<TestData>): void {
   const title = path.shift();
 
@@ -173,7 +184,8 @@ export function updateTestStatus(suite: CreeveySuite, path: string[], update: Pa
       if (test.results) test.results.push(...results);
       else test.results = results;
     }
-    if (isDefined(approved))
+    if (approved === null) test.approved = null;
+    else if (approved !== undefined)
       Object.entries(approved).forEach(
         ([image, retry]) => retry !== undefined && ((test.approved = test.approved ?? {})[image] = retry),
       );
@@ -215,6 +227,8 @@ export function removeTests(suite: CreeveySuite, path: string[]): void {
     .reduce(calcStatus);
 }
 
+// TODO Include images to test suite
+// TODO If only one image in test, don't include it
 export function filterTests(suite: CreeveySuite, filter: CreeveyViewFilter): CreeveySuite {
   const { status, subStrings } = filter;
   if (!status && !subStrings.length) return suite;
@@ -258,14 +272,14 @@ export function flattenSuite(suite: CreeveySuite): { title: string; suite: Creev
 export function countTestsStatus(suite: CreeveySuite): CreeveyTestsStatus {
   let successCount = 0;
   let failedCount = 0;
-  let skippedCount = 0;
+  let approvedCount = 0;
   let pendingCount = 0;
 
   const cases: (CreeveySuite | CreeveyTest)[] = Object.values(suite.children).filter(isDefined);
   let suiteOrTest;
   while ((suiteOrTest = cases.pop())) {
     if (isTest(suiteOrTest)) {
-      if (suiteOrTest.skip) skippedCount++;
+      if (suiteOrTest.status === 'approved') approvedCount++;
       if (suiteOrTest.status === 'success') successCount++;
       if (suiteOrTest.status === 'failed') failedCount++;
       if (suiteOrTest.status === 'pending') pendingCount++;
@@ -274,7 +288,7 @@ export function countTestsStatus(suite: CreeveySuite): CreeveyTestsStatus {
     }
   }
 
-  return { successCount, failedCount, skippedCount, pendingCount };
+  return { approvedCount, successCount, failedCount, pendingCount };
 }
 
 export function getConnectionUrl(): string {

package/src/client/web/CreeveyApp.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useImmer } from 'use-immer';
 import { ensure, styled, ThemeProvider, themes, withTheme } from '@storybook/theming';
 import { CreeveyUpdate, CreeveySuite, isDefined, CreeveyTest } from '../../types.js';
@@ -15,6 +15,7 @@ import {
   setSearchParams,
   getTestPathFromSearch,
   CreeveyViewFilter,
+  getFailedTests,
 } from '../shared/helpers.js';
 import { CreeveyContext } from './CreeveyContext.js';
 import { KeyboardEvents } from './KeyboardEventsContext.js';
@@ -55,6 +56,21 @@ export function CreeveyApp({ api, initialState }: CreeveyAppProps): JSX.Element
   const [theme, setTheme] = useTheme();
 
   const openedTest = getTestByPath(tests, openedTestPath);
+  const failedTests = useMemo(() => getFailedTests(tests), [tests]);
+
+  const [retry, setRetry] = useState(openedTest?.results?.length ?? 0);
+  const result = openedTest?.results?.[retry - 1] ?? { images: {} };
+  const [imageName, setImageName] = useState(Object.keys(result.images ?? {})[0] ?? '');
+  const canApprove = useMemo(
+    () =>
+      Boolean(
+        openedTest?.results?.[retry - 1]?.images &&
+          openedTest.approved?.[imageName] != retry - 1 &&
+          openedTest.results[retry - 1].status != 'success',
+      ),
+    [imageName, openedTest, retry],
+  );
+
   if (openedTestPath.length > 0 && !isDefined(openedTest)) openTest([]);
 
   const handleSuiteOpen = useCallback(
@@ -73,10 +89,42 @@ export function CreeveyApp({ api, initialState }: CreeveyAppProps): JSX.Element
     },
     [updateTests],
   );
-  const handleImageApprove = useCallback(
-    (id: string, retry: number, image: string): void => api?.approve(id, retry, image),
-    [api],
+
+  const handleOpenTest = useCallback(
+    (test: CreeveyTest): void => {
+      const testPath = getTestPath(test);
+      setSearchParams(testPath);
+      updateTests((draft) => {
+        openSuite(draft, testPath, true);
+        openTest(testPath);
+      });
+    },
+    [updateTests],
   );
+
+  const handleGoToNextFailedTest = useCallback(() => {
+    if (failedTests.length <= 1) return;
+    const currentTest = failedTests.findIndex((t) => t.id === openedTest?.id);
+    const nextFailedTest = failedTests[currentTest + 1] || failedTests[0];
+    handleOpenTest(nextFailedTest);
+  }, [failedTests, handleOpenTest, openedTest?.id]);
+
+  const handleImageApproveNew = useCallback((): void => {
+    const id = openedTest?.id;
+
+    if (!id) return;
+    api?.approve(id, retry - 1, imageName);
+  }, [api, imageName, openedTest?.id, retry]);
+
+  const handleImageApproveAndGoNext = useCallback((): void => {
+    handleImageApproveNew();
+    handleGoToNextFailedTest();
+  }, [handleImageApproveNew, handleGoToNextFailedTest]);
+
+  const handleApproveAll = useCallback(() => {
+    api?.approveAll();
+  }, [api]);
+
   const handleStart = useCallback(
     (tests: CreeveySuite): void => api?.start(getCheckedTests(tests).map((test) => test.id)),
     [api],
@@ -88,11 +136,13 @@ export function CreeveyApp({ api, initialState }: CreeveyAppProps): JSX.Element
     },
     [setTheme],
   );
-  const handleOpenTest = useCallback((test: CreeveyTest): void => {
-    const testPath = getTestPath(test);
-    setSearchParams(testPath);
-    openTest(testPath);
-  }, []);
+
+  useEffect(() => {
+    const retry = openedTest?.results?.length ?? 0;
+    const result = openedTest?.results?.[retry - 1] ?? { images: {} };
+    setImageName(Object.keys(result.images ?? {})[0] ?? '');
+    setRetry(retry);
+  }, [openedTest?.results]);
 
   useEffect(() => {
     window.addEventListener('popstate', (event) => {
@@ -139,6 +189,8 @@ export function CreeveyApp({ api, initialState }: CreeveyAppProps): JSX.Element
       value={{
         isReport: initialState.isReport,
         isRunning,
+        onImageApprove: canApprove ? handleImageApproveAndGoNext : undefined,
+        onApproveAll: handleApproveAll,
         onStart: handleStart,
         onStop: handleStop,
         onSuiteOpen: handleSuiteOpen,
@@ -150,7 +202,7 @@ export function CreeveyApp({ api, initialState }: CreeveyAppProps): JSX.Element
           <FlexContainer>
             <SideBar
               rootSuite={tests}
-              openedTest={openedTest}
+              testId={openedTest?.id}
               onOpenTest={handleOpenTest}
               filter={filter}
               setFilter={setFilter}
@@ -158,12 +210,13 @@ export function CreeveyApp({ api, initialState }: CreeveyAppProps): JSX.Element
             {openedTest && (
               <ResultsPage
                 key={`${openedTest.id}_${openedTest.results?.length ?? 0}`}
-                id={openedTest.id}
                 path={openedTestPath}
                 results={openedTest.results}
                 approved={openedTest.approved}
-                showTitle
-                onImageApprove={handleImageApprove}
+                retry={retry}
+                imageName={imageName}
+                onImageChange={setImageName}
+                onRetryChange={setRetry}
               />
             )}
             <ToggleContainer>

package/src/client/web/CreeveyContext.tsx

@@ -1,10 +1,12 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { CreeveySuite, noop } from '../../types.js';
 
 export interface CreeveyContextType {
   isReport: boolean;
   isRunning: boolean;
   onStop: () => void;
+  onImageApprove?: () => void;
+  onApproveAll: () => void;
   onStart: (rootSuite: CreeveySuite) => void;
   onSuiteOpen: (path: string[], opened: boolean) => void;
   onSuiteToggle: (path: string[], checked: boolean) => void;
@@ -13,8 +15,12 @@ export interface CreeveyContextType {
 export const CreeveyContext = React.createContext<CreeveyContextType>({
   isReport: true,
   isRunning: false,
+  onImageApprove: noop,
+  onApproveAll: noop,
   onStop: noop,
   onStart: noop,
   onSuiteOpen: noop,
   onSuiteToggle: noop,
 });
+
+export const useCreeveyContext = () => useContext(CreeveyContext);

package/src/client/web/CreeveyView/SideBar/Checkbox.tsx

@@ -70,11 +70,11 @@ interface CheckboxState {
   indeterminate: boolean;
 }
 
-export const CheckboxContainer = styled.div({
-  position: 'absolute',
-  left: '64px',
-  top: '6px',
-  zIndex: 2,
+export const CheckboxContainer = styled.span({
+  paddingLeft: '8px',
+  verticalAlign: 'middle',
+  alignSelf: 'center',
+  lineHeight: '18px',
 });
 
 export class Checkbox extends React.Component<CheckboxProps, CheckboxState> {

package/src/client/web/CreeveyView/SideBar/SideBar.tsx

@@ -1,7 +1,7 @@
-import React, { createContext, useContext } from 'react';
+import React, { createContext } from 'react';
 import { transparentize } from 'polished';
 import { ScrollArea } from '@storybook/components';
-import { styled, withTheme } from '@storybook/theming';
+import { styled, Theme, withTheme } from '@storybook/theming';
 import { SideBarHeader } from './SideBarHeader.js';
 import { CreeveySuite, CreeveyTest, noop, isTest } from '../../../../types.js';
 import {
@@ -11,17 +11,18 @@ import {
   countTestsStatus,
   getCheckedTests,
 } from '../../../shared/helpers.js';
-import { CreeveyContext } from '../../CreeveyContext.js';
+import { useCreeveyContext } from '../../CreeveyContext.js';
 import { SuiteLink } from './SuiteLink.js';
 import { TestLink } from './TestLink.js';
+import { SideBarFooter } from './SideBarFooter.js';
 
 export const SideBarContext = createContext<{ onOpenTest: (test: CreeveyTest) => void }>({
   onOpenTest: noop,
 });
 
 export interface SideBarProps {
+  testId?: string;
   rootSuite: CreeveySuite;
-  openedTest: CreeveyTest | null;
   onOpenTest: (test: CreeveyTest) => void;
   filter: CreeveyViewFilter;
   setFilter: (filter: CreeveyViewFilter) => void;
@@ -37,7 +38,7 @@ const Container = withTheme(
 );
 
 const ScrollContainer = styled.div({
-  height: 'calc(100vh - 165px)',
+  height: 'calc(100vh - 245px)',
   width: 300,
   flex: 'none',
   overflowY: 'auto',
@@ -46,10 +47,16 @@ const ScrollContainer = styled.div({
   left: '0',
 });
 
+const StyledScrollArea = styled(ScrollArea)({
+  '& > div > div': {
+    height: 'calc(100% - 8px)',
+  },
+});
+
 const Shadow = withTheme(
-  styled.div(({ theme }) => ({
+  styled.div<{ theme: Theme; position: 'top' | 'bottom' }>(({ theme, position }) => ({
+    [position]: '0px',
     position: 'sticky',
-    top: '0px',
     boxShadow: `0 0 5px 2.5px ${transparentize(0.8, theme.color.defaultText)}`,
     zIndex: 3,
   })),
@@ -62,21 +69,22 @@ const SelectAllContainer = styled.div({
 
 const TestsContainer = styled.div({
   position: 'relative',
-  paddingBottom: '40px',
+  paddingBottom: '8px',
+  height: '100%',
 });
 
 const Divider = withTheme(
-  styled.div(({ theme }) => ({
-    position: 'absolute',
+  styled.div<{ theme: Theme; position: 'top' | 'bottom' }>(({ theme, position }) => ({
+    ...(position === 'top' ? { position: 'absolute' } : { position: 'relative', bottom: '8px', marginBottom: '-8px' }),
     height: '8px',
     width: '100%',
-    zIndex: 3,
+    zIndex: 4,
     background: theme.background.content,
   })),
 );
 
-export function SideBar({ rootSuite, openedTest, onOpenTest, filter, setFilter }: SideBarProps): JSX.Element {
-  const { onStart, onStop } = useContext(CreeveyContext);
+export function SideBar({ rootSuite, testId, onOpenTest, filter, setFilter }: SideBarProps): JSX.Element {
+  const { onStart, onStop } = useCreeveyContext();
 
   // TODO Maybe need to do flatten first?
   const suite = filterTests(rootSuite, filter);
@@ -100,10 +108,10 @@ export function SideBar({ rootSuite, openedTest, onOpenTest, filter, setFilter }
           canStart={countCheckedTests !== 0}
         />
         <ScrollContainer>
-          <ScrollArea vertical>
-            <Shadow />
+          <StyledScrollArea vertical>
+            <Shadow position="top" />
             <TestsContainer>
-              <Divider />
+              <Divider position="top" />
               {/* TODO Output message when nothing found */}
               <SelectAllContainer>
                 <SuiteLink title="Select all" suite={rootSuite} data-testid="selectAll" />
@@ -111,14 +119,17 @@ export function SideBar({ rootSuite, openedTest, onOpenTest, filter, setFilter }
               {suiteList.map(({ title, suite }) =>
                 // TODO Update components without re-mount
                 isTest(suite) ? (
-                  <TestLink key={suite.id} title={title} opened={suite.id == openedTest?.id} test={suite} />
+                  <TestLink key={suite.id} title={title} opened={suite.id == testId} test={suite} />
                 ) : (
                   <SuiteLink key={suite.path.join('/')} title={title} suite={suite} data-testid={title} />
                 ),
               )}
             </TestsContainer>
-          </ScrollArea>
+            <Divider position="bottom" />
+          </StyledScrollArea>
+          <Shadow position="bottom" />
         </ScrollContainer>
+        <SideBarFooter />
       </Container>
     </SideBarContext.Provider>
   );