tests: new refresh button component

Author: followynne

src/Serilog.Ui.Web/src/__tests__/_setup/mocks/fetch.ts

@@ -1,5 +1,6 @@
 import dayjs from 'dayjs';
 import { http, HttpResponse } from 'msw';
+import { defaultAuthType } from '../../../app/hooks/useSerilogUiProps.tsx';
 import {
   AuthType,
   EncodedSeriLogObject,
@@ -9,7 +10,6 @@ import {
   SortPropertyOptions,
 } from '../../../types/types';
 import { dbKeysMock, fakeLogs, fakeLogs2ndTable, fakeLogs3rdTable } from './samples';
-import { defaultAuthType } from '../../../app/hooks/useSerilogUiProps.tsx';
 
 export const developmentListenersHost = ['https://localhost:3001'];
 
@@ -51,7 +51,9 @@ export const handlers = developmentListenersHost.flatMap((dlh) => [
   http.get(`${dlh}/api/keys`, ({ request }) => {
     const auth = request.headers.get('authorization');
 
-    return defaultAuthType !== AuthType.Custom && !auth ? HttpResponse.error() : HttpResponse.json(dbKeysMock);
+    return defaultAuthType !== AuthType.Custom && !auth
+      ? HttpResponse.error()
+      : HttpResponse.json(dbKeysMock);
   }),
 ]);
 

src/Serilog.Ui.Web/src/__tests__/components/Refresh/RefreshButton.spec.tsx

@@ -0,0 +1,81 @@
+import { act, render, screen, userEvent } from '__tests__/_setup/testing-utils';
+import { RefreshButton } from 'app/components/Refresh/RefreshButton';
+import { liveRefreshOptions } from 'app/hooks/useLiveRefresh';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+vi.mock('react-hook-form', async () => {
+  const actual =
+    await vi.importActual<typeof import('react-hook-form')>('react-hook-form');
+
+  return { ...actual, useWatch: () => 'page' };
+});
+
+const headers = () => {
+  const head = new Headers();
+  head.append('authorization', 'test');
+  return head;
+};
+vi.mock('../../../app/hooks/useAuthProperties', () => ({
+  useAuthProperties: () => ({
+    fetchInfo: {
+      headers: { headers: headers() },
+      routePrefix: '',
+    },
+    isHeaderReady: true,
+  }),
+}));
+
+describe('RefreshButton', () => {
+  beforeEach(() => {
+    vi.useFakeTimers({ shouldAdvanceTime: true });
+  });
+  afterEach(vi.useRealTimers);
+
+  it('renders', async () => {
+    render(<RefreshButton />);
+
+    const durationSelector = screen.getByLabelText('refresh-duration-selector');
+    expect(durationSelector).toBeInTheDocument();
+
+    await userEvent.click(durationSelector);
+    await act(vi.advanceTimersToNextTimerAsync);
+
+    const times = liveRefreshOptions.map((lro) => lro.value);
+    times.forEach((time) => {
+      expect(screen.getByLabelText('refresh-duration-' + time)).toBeInTheDocument();
+    });
+  });
+
+  it('runs live feed activies with refetch sample', async () => {
+    const spy = vi.spyOn(global, 'fetch');
+    render(<RefreshButton />);
+
+    const durationSelector = screen.getByLabelText('refresh-duration-selector');
+    await userEvent.click(durationSelector);
+    await act(vi.advanceTimersToNextTimerAsync);
+
+    const sampleOpt = liveRefreshOptions[5];
+    const timeSelector = screen.getByLabelText('refresh-duration-' + sampleOpt.value);
+    await userEvent.click(timeSelector);
+    await act(vi.advanceTimersToNextTimerAsync);
+
+    expect(spy).toHaveBeenCalledOnce();
+
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(1000 * 300 + 1);
+    });
+    expect(spy).toHaveBeenCalledTimes(2);
+
+    const durationStopper = screen.getByLabelText('refresh-duration-cancel-button');
+    expect(screen.queryByLabelText('refresh-duration-selector')).not.toBeInTheDocument();
+    expect(durationStopper).toBeInTheDocument();
+
+    await userEvent.click(durationStopper);
+    await act(vi.advanceTimersToNextTimerAsync);
+
+    expect(
+      screen.queryByLabelText('refresh-duration-cancel-button'),
+    ).not.toBeInTheDocument();
+    expect(screen.getByLabelText('refresh-duration-selector')).toBeInTheDocument();
+  });
+});

src/Serilog.Ui.Web/src/__tests__/components/ShellStructure/Header.spec.tsx

@@ -23,8 +23,8 @@ describe('Header', () => {
     await waitFor(() => {
       expect(screen.getByRole('button', { name: 'Filter' })).toBeInTheDocument();
     });
-    await waitFor(() => {
-      expect(screen.getByText('Serilog UI')).toBeInTheDocument();
-    });
+
+    expect(screen.getByText('Serilog UI')).toBeInTheDocument();
+    expect(screen.getByLabelText('refresh-duration-selector')).toBeInTheDocument();
   });
 });

src/Serilog.Ui.Web/src/app/components/Refresh/RefreshButton.tsx

@@ -15,6 +15,7 @@ export const RefreshButton = () => {
         <Button
           fz={9}
           size="compact-md"
+          aria-label="refresh-duration-cancel-button"
           color={theme.colors?.green?.[7]}
           onClick={stopLiveRefresh}
           className={classes.refreshButton}
@@ -31,6 +32,7 @@ export const RefreshButton = () => {
           <Button
             fz={9}
             size="compact-md"
+            aria-label="refresh-duration-selector"
             color={theme.colors?.gray?.[7]}
             className={classes.activateRefreshButton}
           >
@@ -47,6 +49,7 @@ export const RefreshButton = () => {
                 startLiveRefresh(p.value);
               }}
               variant="default"
+              aria-label={`refresh-duration-${p.value}`}
             >
               {p.label}
             </Button>