Merge pull request #466 from GatherPress/mauteri-updates-4

Added tests for EditCover component.

build/blocks/venue/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('moment', 'react', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n'), 'version' => '8021becf5cd361aaca25');
+<?php return array('dependencies' => array('moment', 'react', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n'), 'version' => '13b88270358cb87aa9cd');

build/blocks/venue/venue.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'wp-components', 'wp-data', 'wp-dom-ready', 'wp-element', 'wp-i18n'), 'version' => '11e7b54272b76b0ed446');
+<?php return array('dependencies' => array('react', 'wp-components', 'wp-data', 'wp-dom-ready', 'wp-element', 'wp-i18n'), 'version' => '3291e30a443c794afab6');

src/components/EditCover.js

@@ -1,3 +1,12 @@
+/**
+ * EditCover component provides an overlay for content to indicate its editability.
+ *
+ * @param {Object}      props            - The properties passed to the component.
+ * @param {boolean}     props.isSelected - Indicates whether the content is selected for editing.
+ * @param {JSX.Element} props.children   - The child elements to be rendered within the component.
+ *
+ * @return {JSX.Element} The rendered EditCover component.
+ */
 const EditCover = (props) => {
 	const { isSelected } = props;
 	const display = isSelected ? 'none' : 'block';

src/components/MapEmbed.js

@@ -1,16 +1,34 @@
+/**
+ * MapEmbed component renders an embedded Google Map based on provided location and settings.
+ *
+ * @param {number} props             - The properties passed to the component.
+ * @param {string} props.location    - The location to be displayed on the map (address or coordinates).
+ * @param {number} [props.zoom=1]    - The zoom level of the map.
+ * @param {string} [props.type='']   - The map type (e.g., 'roadmap', 'satellite').
+ * @param {number} [props.height]    - The height of the embedded map.
+ * @param {string} [props.className] - Additional CSS class names for styling.
+ *
+ * @return {JSX.Element} The rendered MapEmbed component.
+ */
 const MapEmbed = (props) => {
-	const { location, zoom, type, height, className } = props;
+	const { location, zoom, type, className } = props;
+	let { height } = props;
+
+	if (!height) {
+		height = 300;
+	}
+
 	const style = { border: 0, height, width: '100%' };
 	const baseUrl = 'https://maps.google.com/maps';
 
 	if (!location) {
-		return '';
+		return <></>;
 	}
 
 	const params = new URLSearchParams({
 		q: location,
-		z: zoom || 1,
-		t: type,
+		z: zoom || 10,
+		t: type || 'm',
 		output: 'embed',
 	});
 

test/unit/js/src/components/EditCover.test.js

@@ -0,0 +1,35 @@
+/**
+ * External dependencies.
+ */
+import { render } from '@testing-library/react';
+import { expect, test } from '@jest/globals';
+import '@testing-library/jest-dom';
+
+/**
+ * Internal dependencies.
+ */
+import EditCover from '../../../../../src/components/EditCover';
+
+/**
+ * Coverage for EditCover.
+ */
+test('EditCover is display block by default', () => {
+	const { container } = render(<EditCover />);
+
+	expect(container.children[0]).toHaveStyle('position: relative');
+	expect(container.children[0].children[0]).toHaveStyle('display: block');
+});
+
+test('EditCover is display block when isSelected is false', () => {
+	const { container } = render(<EditCover isSelected={false} />);
+
+	expect(container.children[0]).toHaveStyle('position: relative');
+	expect(container.children[0].children[0]).toHaveStyle('display: block');
+});
+
+test('EditCover is display none when isSelected is true', () => {
+	const { container } = render(<EditCover isSelected={true} />);
+
+	expect(container.children[0]).toHaveStyle('position: relative');
+	expect(container.children[0].children[0]).toHaveStyle('display: none');
+});

test/unit/js/src/components/MapEmbed.test.js

@@ -0,0 +1,59 @@
+/**
+ * External dependencies.
+ */
+import { render } from '@testing-library/react';
+import { expect, test } from '@jest/globals';
+import '@testing-library/jest-dom';
+
+/**
+ * Internal dependencies.
+ */
+import MapEmbed from '../../../../../src/components/MapEmbed';
+
+/**
+ * Coverage for MapEmbed.
+ */
+test('MapEmbed returns empty when no location is provided', () => {
+	const { container } = render(<MapEmbed />);
+
+	expect(container).toBeEmptyDOMElement();
+});
+
+test('MapEmbed returns address in source when location is set', () => {
+	const { container } = render(
+		<MapEmbed location="50 South Fullerton Avenue, Montclair, NJ 07042" />
+	);
+
+	expect(container.children[0].getAttribute('src')).toContain(
+		'?q=50+South+Fullerton+Avenue%2C+Montclair%2C+NJ+07042'
+	);
+	expect(container.children[0].getAttribute('src')).toContain('&z=10');
+	expect(container.children[0].getAttribute('src')).toContain('&t=m');
+	expect(container.children[0].getAttribute('src')).toContain(
+		'&output=embed'
+	);
+	expect(container.children[0]).toHaveStyle(
+		'border: 0px; height: 300px; width: 100%;'
+	);
+});
+
+test('MapEmbed returns address in source when location, zoom, map type, height, and class are set', () => {
+	const { container } = render(
+		<MapEmbed
+			location="50 South Fullerton Avenue, Montclair, NJ 07042"
+			zoom={20}
+			type="k"
+			className="unit-test"
+			height={100}
+		/>
+	);
+	expect(container.children[0].getAttribute('src')).toContain(
+		'q=50+South+Fullerton+Avenue%2C+Montclair%2C+NJ+07042'
+	);
+	expect(container.children[0].getAttribute('src')).toContain('&z=20');
+	expect(container.children[0].getAttribute('src')).toContain('&t=k');
+	expect(container.children[0]).toHaveStyle(
+		'border: 0px; height: 100px; width: 100%;'
+	);
+	expect(container.children[0]).toHaveClass('unit-test');
+});