80 lines
2.7 KiB
TypeScript
80 lines
2.7 KiB
TypeScript
// src/components/MapView.test.tsx
|
|
import React from 'react';
|
|
import { render, screen } from '@testing-library/react';
|
|
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
|
import { MapView } from './MapView';
|
|
import config from '../config';
|
|
|
|
// Create a type-safe mocked version of the config for easier manipulation
|
|
const mockedConfig = vi.mocked(config);
|
|
|
|
// Mock the config module statically.
|
|
// This allows us to manipulate the default export directly in tests because
|
|
// import { MapView } from './MapView' and import config from '../config' share the same mock object.
|
|
vi.mock('../config', () => ({
|
|
default: {
|
|
google: {
|
|
mapsEmbedApiKey: undefined as string | undefined,
|
|
},
|
|
app: {
|
|
version: 'test',
|
|
commitMessage: 'test',
|
|
commitUrl: 'test',
|
|
},
|
|
},
|
|
}));
|
|
|
|
describe('MapView', () => {
|
|
const defaultProps = {
|
|
latitude: 40.7128,
|
|
longitude: -74.006,
|
|
};
|
|
|
|
beforeEach(() => {
|
|
vi.clearAllMocks();
|
|
// Reset config to a known state (undefined) before each test
|
|
// By casting to unknown first, then to the desired type, we can safely
|
|
// bypass the initial type mismatch without resorting to `any`.
|
|
(mockedConfig.google.mapsEmbedApiKey as unknown as string | undefined) = undefined;
|
|
});
|
|
|
|
describe('when API key is not configured', () => {
|
|
it('should render a disabled message', () => {
|
|
render(<MapView {...defaultProps} />);
|
|
expect(
|
|
screen.getByText('Map view is disabled: API key is not configured.'),
|
|
).toBeInTheDocument();
|
|
});
|
|
|
|
it('should not render the iframe', () => {
|
|
render(<MapView {...defaultProps} />);
|
|
// Use queryByTitle because iframes don't have a default "iframe" role
|
|
expect(screen.queryByTitle('Map view')).not.toBeInTheDocument();
|
|
});
|
|
});
|
|
|
|
describe('when API key is configured', () => {
|
|
const mockApiKey = 'test-api-key';
|
|
|
|
beforeEach(() => {
|
|
// Set a specific API key for this suite
|
|
mockedConfig.google.mapsEmbedApiKey = mockApiKey;
|
|
});
|
|
|
|
it('should render the iframe with the correct src URL', () => {
|
|
render(<MapView {...defaultProps} />);
|
|
|
|
// Use getByTitle to access the iframe
|
|
const iframe = screen.getByTitle('Map view');
|
|
const expectedSrc = `https://www.google.com/maps/embed/v1/view?key=${mockApiKey}¢er=${defaultProps.latitude},${defaultProps.longitude}&zoom=14`;
|
|
|
|
expect(iframe).toBeInTheDocument();
|
|
expect(iframe).toHaveAttribute('src', expectedSrc);
|
|
expect(iframe).toHaveAttribute('width', '100%');
|
|
expect(iframe).toHaveAttribute('height', '100%');
|
|
expect(iframe).toHaveAttribute('loading', 'lazy');
|
|
expect(iframe).toHaveAttribute('allowFullScreen');
|
|
});
|
|
});
|
|
});
|