q-blog/tests/features/ImageOverlay.test.tsx

import React from 'react';
import { describe, it, expect } from 'vitest';
import { Provider } from 'react-redux';
import { store } from '@/state/store';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import { MemoryRouter, Route, Routes } from 'react-router-dom';
import { render, screen, fireEvent } from '@testing-library/react';
import { BlogIndividualPost } from '@/pages/BlogIndividualPost/BlogIndividualPost';
import { http, HttpResponse } from 'msw';
import { server } from '../msw/server';

describe('Image overlay', () => {
  it('opens lightbox when clicking post image', async () => {
    server.use(
      http.get('/arbitrary/BLOG/:user/:blog', ({ params }) =>
        HttpResponse.json({ title: 'My Blog', blogId: params.blog }),
      ),
      http.get('/arbitrary/BLOG_POST/:user/:fullId', ({ params }) => {
        const { fullId, user } = params as any;
        if (typeof fullId === 'string' && fullId.includes('-post-') && user) {
          return HttpResponse.json({
            title: 'Post With Image',
            createdAt: 1,
            postContent: [{ type: 'image', id: 'img1', version: 1, content: { image: 'data:' } }],
          });
        }
        return HttpResponse.json({}, { status: 404 });
      }),
      http.get('/arbitrary/resources/search', () => HttpResponse.json([])),
    );

    render(
      <Provider store={store}>
        <ThemeProvider theme={createTheme()}>
          <MemoryRouter initialEntries={[`/alice/myblog/123`]}>
            <Routes>
              <Route path="/:user/:blog/:postId" element={<BlogIndividualPost />} />
            </Routes>
          </MemoryRouter>
        </ThemeProvider>
      </Provider>,
    );

    const img = await screen.findByRole('img', { name: /image/i });
    fireEvent.click(img);
    expect(await screen.findByTestId('image-lightbox-overlay')).toBeInTheDocument();
  });
});