Merge pull request #232 from WordPress/support-negation-operator-in-s…

…electors Support negation operator in selectors
WordPress · May 18, 2023 · 6f48257 · 6f48257
2 parents 3e3fd7a + e50ee72
commit 6f48257
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 10 deletions.
diff --git a/e2e/html/negation-operator.html b/e2e/html/negation-operator.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Negation Operator</title>
+		<meta itemprop="wp-client-side-navigation" content="active" />
+	</head>
+	<body>
+		<button
+			data-wp-on.click="actions.toggle"
+			data-testid="toggle active value"
+		>
+			Toggle Active Value
+		</button>
+
+		<div
+			data-wp-bind.hidden="!state.active"
+			data-testid="add hidden attribute if state is not active"
+		></div>
+
+		<div
+			data-wp-bind.hidden="!selectors.active"
+			data-testid="add hidden attribute if selector is not active"
+		></div>
+
+		<script defer src="../../build/e2e/negation-operator.js"></script>
+		<script defer src="../../build/runtime.js"></script>
+		<script defer src="../../build/vendors.js"></script>
+	</body>
+</html>
diff --git a/e2e/js/negation-operator.js b/e2e/js/negation-operator.js
@@ -0,0 +1,17 @@
+import { store } from '../../src/runtime/store';
+
+store({
+	selectors: {
+		active: ({ state }) => {
+			return state.active;
+		},
+	},
+	state: {
+		active: false,
+	},
+	actions: {
+		toggle: ({ state }) => {
+			state.active = !state.active;
+		},
+	},
+});
diff --git a/e2e/specs/negation-operator.spec.ts b/e2e/specs/negation-operator.spec.ts
@@ -0,0 +1,31 @@
+import { test, expect } from '../tests';
+
+test.describe('negation-operator', () => {
+	test.beforeEach(async ({ goToFile }) => {
+		await goToFile('negation-operator.html');
+	});
+
+	test('add hidden attribute when !state.active', async ({ page }) => {
+		const el = page.getByTestId(
+			'add hidden attribute if state is not active'
+		);
+
+		await expect(el).toHaveAttribute('hidden', '');
+		page.getByTestId('toggle active value').click();
+		await expect(el).not.toHaveAttribute('hidden', '');
+		page.getByTestId('toggle active value').click();
+		await expect(el).toHaveAttribute('hidden', '');
+	});
+
+	test('add hidden attribute when !selectors.active', async ({ page }) => {
+		const el = page.getByTestId(
+			'add hidden attribute if selector is not active'
+		);
+
+		await expect(el).toHaveAttribute('hidden', '');
+		page.getByTestId('toggle active value').click();
+		await expect(el).not.toHaveAttribute('hidden', '');
+		page.getByTestId('toggle active value').click();
+		await expect(el).toHaveAttribute('hidden', '');
+	});
+});
diff --git a/src/runtime/hooks.js b/src/runtime/hooks.js
@@ -13,25 +13,27 @@ export const directive = (name, cb) => {
 
 // Resolve the path to some property of the store object.
 const resolve = (path, ctx) => {
-	// If path starts with !, remove it and save a flag.
-	const hasNegationOperator = path[0] === '!' && !!(path = path.slice(1));
 	let current = { ...store, context: ctx };
 	path.split('.').forEach((p) => (current = current[p]));
-	return hasNegationOperator ? !current : current;
+	return current;
 };
 
 // Generate the evaluate function.
 const getEvaluate =
 	({ ref } = {}) =>
 	(path, extraArgs = {}) => {
+		// If path starts with !, remove it and save a flag.
+		const hasNegationOperator = path[0] === '!' && !!(path = path.slice(1));
 		const value = resolve(path, extraArgs.context);
-		return typeof value === 'function'
-			? value({
-					ref: ref.current,
-					...store,
-					...extraArgs,
-			  })
-			: value;
+		const returnValue =
+			typeof value === 'function'
+				? value({
+						ref: ref.current,
+						...store,
+						...extraArgs,
+				  })
+				: value;
+		return hasNegationOperator ? !returnValue : returnValue;
 	};
 
 // Directive wrapper.

diff --git a/webpack.config.js b/webpack.config.js
@@ -12,6 +12,7 @@ module.exports = [
 			'e2e/page-2': './e2e/page-2',
 			'e2e/directive-bind': './e2e/js/directive-bind',
 			'e2e/directive-effect': './e2e/js/directive-effect',
+			'e2e/negation-operator': './e2e/js/negation-operator',
 		},
 		output: {
 			filename: '[name].js',