[Map] Add E2E tests

This commit is contained in:
Hugo Alliaume
2025-08-21 10:36:16 +02:00
parent 142e5a9d04
commit ac1320de89
2 changed files with 13 additions and 71 deletions

View File

@@ -0,0 +1,13 @@
import { expect, test } from '@playwright/test';
test('Can render basic map', async ({ page }) => {
await page.goto('/ux-map/basic?renderer=google');
await expect(await page.getByTestId('map')).toBeVisible();
// Since we can't test Google Maps rendering due to API costs, we only assert that Google Maps API is (wrongly) loaded
await expect(await page.getByTestId('map')).toContainText('Oops! Something went wrong.');
await expect(await page.getByTestId('map')).toContainText(
"This page didn't load Google Maps correctly. See the JavaScript console for technical details."
);
});

View File

@@ -1,71 +0,0 @@
/*
* This file is part of the Symfony package.
*
* (c) Fabien Potencier <fabien@symfony.com>
*
* For the full copyright and license information, please view the LICENSE
* file that was distributed with this source code.
*/
import { Application, Controller } from '@hotwired/stimulus';
import { getByTestId, waitFor } from '@testing-library/dom';
import { afterEach, beforeEach, describe, expect, it } from 'vitest';
import { clearDOM, mountDOM } from '../../../../../../../../test/stimulus-helpers';
import GoogleController from '../../src/map_controller';
// Controller used to check the actual controller was properly booted
class CheckController extends Controller {
connect() {
this.element.addEventListener('ux:map:pre-connect', (_event) => {
this.element.classList.add('pre-connected');
});
this.element.addEventListener('ux:map:connect', (_event) => {
this.element.classList.add('connected');
});
}
}
const startStimulus = () => {
const application = Application.start();
application.register('check', CheckController);
application.register('symfony--ux-google-map--map', GoogleController);
};
describe('GoogleMapsController', () => {
let container: HTMLElement;
beforeEach(() => {
container = mountDOM(`
<div
data-testid="map"
data-controller="check symfony--ux-google-map--map"
data-symfony--ux-google-map--map-provider-options-value="{&quot;version&quot;:&quot;weekly&quot;,&quot;libraries&quot;:[&quot;maps&quot;,&quot;marker&quot;],&quot;apiKey&quot;:&quot;&quot;}"
data-symfony--ux-google-map--map-center-value="{&quot;lat&quot;:48.8566,&quot;lng&quot;:2.3522}"
data-symfony--ux-google-map--map-zoom-value="7"
data-symfony--ux-google-map--map-fit-bounds-to-markers-value="false"
data-symfony--ux-google-map--map-options-value="{&quot;mapId&quot;:null,&quot;gestureHandling&quot;:&quot;auto&quot;,&quot;backgroundColor&quot;:null,&quot;disableDoubleClickZoom&quot;:false,&quot;zoomControlOptions&quot;:{&quot;position&quot;:22},&quot;mapTypeControlOptions&quot;:{&quot;mapTypeIds&quot;:[],&quot;position&quot;:14,&quot;style&quot;:0},&quot;streetViewControlOptions&quot;:{&quot;position&quot;:22},&quot;fullscreenControlOptions&quot;:{&quot;position&quot;:20},&quot;@provider&quot;:&quot;google&quot;}"
data-symfony--ux-google-map--map-markers-value="[]"
data-symfony--ux-google-map--map-polygons-value="[]"
data-symfony--ux-google-map--map-polylines-value="[]"
data-symfony--ux-google-map--map-circles-value="[]"
data-symfony--ux-google-map--map-rectangles-value="[]"
style="height: 600px"
></div>
`);
});
afterEach(() => {
clearDOM();
});
it('connect', async () => {
const div = getByTestId(container, 'map');
expect(div).not.toHaveClass('pre-connected');
expect(div).not.toHaveClass('connected');
startStimulus();
await waitFor(() => expect(div).toHaveClass('pre-connected'));
await waitFor(() => expect(div).toHaveClass('connected'));
});
});