diff --git a/src/ui/control/attribution_control.test.ts b/src/ui/control/attribution_control.test.ts index aa15e74faf..7302687916 100644 --- a/src/ui/control/attribution_control.test.ts +++ b/src/ui/control/attribution_control.test.ts @@ -401,7 +401,7 @@ NodeList [ `); }); - test('The attribute open="" SHOULD change on resize.', () => { + test('The attribute open="" SHOULD change on resize from size > 640 to <= 640 and and vice versa.', () => { Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 640, configurable: true}); const attributionControl = new AttributionControl({ }); @@ -463,6 +463,206 @@ NodeList [ /> , ] +`); + }); + + test('The attribute open="" should NOT change on resize from > 640 to another > 640.', () => { + Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 641, configurable: true}); + const attributionControl = new AttributionControl({ + }); + map.addControl(attributionControl); + + expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` +NodeList [ +
+ +
+
, +] +`); + + Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 650, configurable: true}); + map.resize(); + + expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` +NodeList [ +
+ +
+
, +] +`); + + Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 641, configurable: true}); + map.resize(); + + expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` +NodeList [ +
+ +
+
, +] +`); + }); + + test('The attribute open="" should NOT change on resize from <= 640 to another <= 640 if it is closed.', () => { + Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 640, configurable: true}); + const attributionControl = new AttributionControl({ + }); + map.addControl(attributionControl); + + expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` +NodeList [ +
+ +
+
, +] +`); + + Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 630, configurable: true}); + map.resize(); + + expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` +NodeList [ +
+ +
+
, +] +`); + + Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 640, configurable: true}); + map.resize(); + + expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` +NodeList [ +
+ +
+
, +] +`); + }); + + test('The attribute open="" should NOT change on resize from <= 640 to another <= 640 if it is open.', () => { + Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 640, configurable: true}); + const attributionControl = new AttributionControl({ + }); + map.addControl(attributionControl); + const toggle = map.getContainer().querySelector('.maplibregl-ctrl-attrib-button'); + simulate.click(toggle); + + expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` +NodeList [ +
+ +
+
, +] +`); + + Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 630, configurable: true}); + map.resize(); + + expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` +NodeList [ +
+ +
+
, +] +`); + + Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 640, configurable: true}); + map.resize(); + + expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` +NodeList [ +
+ +
+
, +] `); }); });