Add tests for react component

.gitignore

@@ -17,3 +17,4 @@ tests-examples/
 build-script.sh
 integration-coverage.xml
 unit-coverage.xml
+.idea/

includes/Flag.php

@@ -23,7 +23,7 @@ class Flag {
 	 *
 	 * @var string $option_name
 	 */
-	public static $option_name = 'codeb_feature_flags';
+	public static string $option_name = 'codeb_feature_flags';
 
 
 	/**

jest-setup.js

@@ -1 +1,13 @@
 import '@testing-library/jest-dom';
+
+Object.defineProperty(window, 'matchMedia', {
+	writable: true,
+	value: (query) => ({
+		matches: false,
+		media: query,
+		onchange: null,
+		addEventListener: () => {},
+		removeEventListener: () => {},
+		dispatchEvent: () => {},
+	}),
+});

package.json

@@ -12,7 +12,7 @@
 		"lint:js:fix": "wp-scripts lint-js --fix",
 		"prepare": "husky",
 		"start": "wp-scripts start",
-		"test:e2e": "npx playwright test --reporter=list",
+		"test:e2e": "wp-scripts test-playwright",
 		"test:js": "wp-scripts test-unit-js",
 		"test:watch": "wp-scripts test-unit-js --watch",
 		"version:major": "node ./scripts/version major",
@@ -25,6 +25,7 @@
 		"php:multisite": "wp-env run tests-wordpress --env-cwd=wp-content/plugins/feature-flags composer test:multisite"
 	},
 	"dependencies": {
+		"@testing-library/user-event": "^14.5.2",
 		"@wordpress/api-fetch": "^6.48.0",
 		"@wordpress/components": "^27.0.0",
 		"@wordpress/data": "^9.22.0",

plugin.php

@@ -39,7 +39,7 @@
 	include_once __DIR__ . '/vendor/autoload.php';
 }
 
-// Enqueure scripts, styles in settings page.
+// Enqueue scripts, styles in settings page.
 add_action(
 	'admin_enqueue_scripts',
 	static function ( string $page ): void {
@@ -156,7 +156,7 @@ static function ( $links ) {
 
 /**
  * Uninstall method for the plugin.
- * 
+ *
  * @return void
  */
 function codeb_feature_flags_uninstall(): void {

src/components/Flags.tsx

@@ -8,7 +8,7 @@ import Header from './Header';
 import { __ } from '@wordpress/i18n';
 import { useDispatch } from '@wordpress/data';
 
-const Layout = (): JSX.Element => {
+const Flags = () => {
 	const [flags, setFlags] = useState<Flag[]>([]);
 	const [isLoading, setIsLoading] = useState<boolean>(true);
 	const [isSaving, setIsSaving] = useState<boolean>(false);
@@ -64,7 +64,7 @@ const Layout = (): JSX.Element => {
 			return prevFlags.filter((f) => f.name !== '');
 		});
 
-		remoteApi(flags);
+		await remoteApi(flags);
 		setIsSaving(false);
 	};
 
@@ -74,7 +74,7 @@ const Layout = (): JSX.Element => {
 		const latestFlags = flags.filter((f) => f.id !== flagId);
 		setFlags(latestFlags);
 
-		remoteApi(latestFlags);
+		await remoteApi(latestFlags);
 		setIsSaving(false);
 	};
 
@@ -120,4 +120,4 @@ const Layout = (): JSX.Element => {
 	);
 };
 
-export default Layout;
+export default Flags;

src/components/__tests__/FlagRow.test.js

@@ -0,0 +1,42 @@
+import { render, fireEvent } from '@testing-library/react';
+import FlagRow from '../FlagRow';
+
+test('FlagRow Function Test', async () => {
+	const item = {
+		id: 1,
+		name: 'Test Flag',
+		enabled: false,
+	};
+	const flags = [{ ...item }];
+	const setFlags = jest.fn();
+	const setDisableSave = jest.fn();
+	const handleSave = jest.fn();
+	const handleDeleteFlag = jest.fn();
+
+	const { getByRole, getByLabelText } = render(
+		<FlagRow
+			flags={flags}
+			setFlags={setFlags}
+			item={item}
+			setDisableSave={setDisableSave}
+			handleSave={handleSave}
+			handleDeleteFlag={handleDeleteFlag}
+		/>
+	);
+
+	// Test flipping the toggle
+	fireEvent.click(getByRole('checkbox'));
+	expect(setFlags).toHaveBeenCalledTimes(1);
+	expect(handleSave).toHaveBeenCalledTimes(1);
+
+	// Test editing the flag name
+	const input = getByRole('textbox');
+	fireEvent.change(input, { target: { value: 'New Flag' } });
+	expect(setFlags).toHaveBeenCalledTimes(2);
+
+	const sdkButton = getByLabelText('Click to see SDK setting');
+	expect(sdkButton).toBeInTheDocument();
+
+	const deleteButton = getByLabelText('Delete Flag');
+	expect(deleteButton).toBeInTheDocument();
+});

src/components/__tests__/SubmitControls.test.js

@@ -0,0 +1,78 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+
+import SubmitControls from '../SubmitControls';
+
+describe('SubmitControls component', () => {
+	let mockHandleSave, mockSetFlags;
+
+	beforeEach(() => {
+		mockHandleSave = jest.fn();
+		mockSetFlags = jest.fn();
+	});
+
+	it('renders component with all header fields', () => {
+		render(
+			<SubmitControls
+				flags={[]}
+				setFlags={mockSetFlags}
+				lastFlag={0}
+				disableSave={false}
+				isSaving={false}
+				handleSave={mockHandleSave}
+			/>
+		);
+
+		const addFlagButton = screen.getByText('Add Flag');
+		const saveButton = screen.queryByText('Save');
+		const cancelButton = screen.queryByText('Cancel');
+
+		// Click on Add Flag button
+		fireEvent.click(addFlagButton);
+
+		// Assert setFlags is called
+		expect(mockSetFlags).toHaveBeenCalled();
+
+		// Assert Save & Cancel buttons do not exist when `lastFlag` is 0
+		expect(saveButton).toBeNull();
+		expect(cancelButton).toBeNull();
+	});
+
+	test('save button interaction', () => {
+		render(
+			<SubmitControls
+				flags={[]}
+				setFlags={mockSetFlags}
+				lastFlag={1}
+				disableSave={false}
+				isSaving={false}
+				handleSave={mockHandleSave}
+			/>
+		);
+
+		const saveButton = screen.getByText('Save');
+
+		// Click on Save button
+		fireEvent.click(saveButton);
+
+		// Assert handleSave is called
+		expect(mockHandleSave).toHaveBeenCalled();
+	});
+
+	test('display saving text', () => {
+		render(
+			<SubmitControls
+				flags={[]}
+				setFlags={mockSetFlags}
+				lastFlag={1}
+				disableSave={false}
+				isSaving={true}
+				handleSave={mockHandleSave}
+			/>
+		);
+
+		const savingButton = screen.getByText('Saving');
+
+		// Assert Save button is now displaying "Saving"
+		expect(savingButton).toBeTruthy();
+	});
+});

src/components/snippets/JsSnippet.tsx

@@ -3,7 +3,7 @@ import { useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import Clipboard from '../common/Clipboard';
 
-export default function ({ flag }: { flag: string }): JSX.Element {
+const JsSnippet = ({ flag }: { flag: string }) => {
 	const jsSnippet = useMemo(() => {
 		return `import domReady from '@wordpress/dom-ready';
 domReady(function () {
@@ -22,4 +22,6 @@ domReady(function () {
 			<Snippet data={jsSnippet} language={'typescript'} />
 		</div>
 	);
-}
+};
+
+export default JsSnippet;

src/components/snippets/PhpSnippet.tsx

@@ -3,7 +3,7 @@ import { useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import Clipboard from '../common/Clipboard';
 
-export default function ({ flag }: { flag: string }): JSX.Element {
+const PhpSnippet = ({ flag }: { flag: string }) => {
 	const phpSnippet = useMemo(() => {
 		return `use CodeB\\FeatureFlags\\Flag;
 if ( class_exists( '\\CodeB\\FeatureFlags\\Flag' ) && Flag::is_enabled( '${flag}' ) ) {
@@ -17,4 +17,6 @@ if ( class_exists( '\\CodeB\\FeatureFlags\\Flag' ) && Flag::is_enabled( '${flag}
 			<Snippet data={phpSnippet} language={'php'} />
 		</div>
 	);
-}
+};
+
+export default PhpSnippet;

src/components/snippets/Snippet.tsx

@@ -1,5 +1,5 @@
 import SyntaxHighlighter from 'react-syntax-highlighter';
-import { a11yDark } from 'react-syntax-highlighter/dist/esm/styles/hljs';
+import { a11yDark } from 'react-syntax-highlighter/dist/cjs/styles/hljs';
 
 const Snippet = ({
 	data,

src/components/snippets/__tests__/JsSnippet.test.js

@@ -0,0 +1,32 @@
+import JsSnippet from '../JsSnippet';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+describe('JsSnippet component', () => {
+	test('should render JsSnippet correctly with passed flag prop', async () => {
+		render(<JsSnippet flag="testFlag" />);
+		const result = screen.getByText(/JavaScript Snippet/i);
+		expect(result).toBeInTheDocument();
+	});
+
+	test('should render the correct JavaScript snippet with the passed flag', async () => {
+		render(<JsSnippet flag="testFlag" />);
+		const snip = screen.getByText(/.codebFeatureFlags.isEnabled/i);
+		expect(snip).toBeInTheDocument();
+	});
+
+	test('should update the JavaScript snippet when the flag prop changes', async () => {
+		const { rerender, asFragment } = render(<JsSnippet flag="testFlag1" />);
+		let snip = screen.getByText(/testFlag1'/i);
+		expect(snip).toBeInTheDocument();
+		expect(asFragment()).toMatchSnapshot();
+
+		rerender(<JsSnippet flag="testFlag2" />);
+		snip = screen.queryByText(/'testFlag1'/i);
+		expect(snip).toBeNull();
+
+		snip = screen.getByText(/'testFlag2'/i);
+		expect(snip).toBeInTheDocument();
+		expect(asFragment()).toMatchSnapshot();
+	});
+});

src/components/snippets/__tests__/PhpSnippet.test.js

@@ -0,0 +1,14 @@
+import PhpSnippet from '../PhpSnippet';
+import { render } from '@testing-library/react';
+
+describe('PhpSnippet component', () => {
+	it('it should render the correct PHP snippet', () => {
+		const { getByText } = render(<PhpSnippet flag={'testFlag'} />);
+		expect(getByText(/testFlag/i)).toBeInTheDocument();
+	});
+
+	it('matches snapshot', () => {
+		const { asFragment } = render(<PhpSnippet flag={'testFlag'} />);
+		expect(asFragment()).toMatchSnapshot();
+	});
+});

src/components/snippets/__tests__/TsSupport.test.js

@@ -0,0 +1,9 @@
+import { render } from '@testing-library/react';
+import TsSupport from '../TsSupport';
+
+describe('Typescript snippet component', () => {
+	test('renders without any error', async () => {
+		const { asFragment } = render(<TsSupport />);
+		expect(asFragment()).toMatchSnapshot();
+	});
+});