mirror of
https://github.com/symfony/ux-google-map.git
synced 2026-03-23 23:42:13 +01:00
[Map] Add E2E tests
This commit is contained in:
13
assets/test/browser/map.test.ts
Normal file
13
assets/test/browser/map.test.ts
Normal 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."
|
||||
);
|
||||
});
|
||||
@@ -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="{"version":"weekly","libraries":["maps","marker"],"apiKey":""}"
|
||||
data-symfony--ux-google-map--map-center-value="{"lat":48.8566,"lng":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="{"mapId":null,"gestureHandling":"auto","backgroundColor":null,"disableDoubleClickZoom":false,"zoomControlOptions":{"position":22},"mapTypeControlOptions":{"mapTypeIds":[],"position":14,"style":0},"streetViewControlOptions":{"position":22},"fullscreenControlOptions":{"position":20},"@provider":"google"}"
|
||||
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'));
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user