From 286b07b20afa835d93a215a99eac588d3ae92609 Mon Sep 17 00:00:00 2001
From: jdlrobson <jdlrobson@gmail.com>
Date: Tue, 21 Apr 2020 14:35:11 -0700
Subject: [PATCH] Refactor: Make VectorMenu template data conform with
 MenuDefinition

menu-id -> id
menu-label-id -> label-id
msg-label -> label
empty-portlet -> class

Bug: T249372
Change-Id: I50bf2424f9077ac987e03a1e552577bf7c48b3bb
---
 includes/VectorTemplate.php                   | 18 +++++++++-------
 includes/templates/VectorMenu.mustache        | 15 +++++--------
 stories/VectorMenu.stories.data.js            | 21 ++++++++++++-------
 .../integration/VectorTemplateTest.php        | 20 +++++++++++++++---
 4 files changed, 46 insertions(+), 28 deletions(-)

diff --git a/includes/VectorTemplate.php b/includes/VectorTemplate.php
index ccc8c8d..e13b0fc 100644
--- a/includes/VectorTemplate.php
+++ b/includes/VectorTemplate.php
@@ -435,10 +435,11 @@ class VectorTemplate extends BaseTemplate {
 	 */
 	private function buildVariantsProps() : array {
 		$props = [
-			'empty-portlet' => ( count( $this->get( 'variant_urls', [] ) ) == 0 ) ? 'emptyPortlet' : '',
-			'menu-id' => 'p-variants',
-			'menu-label-id' => 'p-variants-label',
-			'msg-label' => $this->getMsg( 'variants' )->text(),
+			'class' => ( count( $this->get( 'variant_urls', [] ) ) == 0 ) ?
+				'emptyPortlet vectorMenu' : 'vectorMenu',
+			'id' => 'p-variants',
+			'label-id' => 'p-variants-label',
+			'label' => $this->getMsg( 'variants' )->text(),
 			'html-items' => '',
 		];
 
@@ -485,10 +486,11 @@ class VectorTemplate extends BaseTemplate {
 	 */
 	private function buildActionsProps() : array {
 		$props = [
-			'empty-portlet' => ( count( $this->get( 'action_urls', [] ) ) == 0 ) ? 'emptyPortlet' : '',
-			'msg-label' => $this->getMsg( 'vector-more-actions' )->text(),
-			'menu-id' => 'p-cactions',
-			'menu-label-id' => 'p-cactions-label',
+			'class' => ( count( $this->get( 'action_urls', [] ) ) == 0 ) ?
+				'emptyPortlet vectorMenu' : 'vectorMenu',
+			'label' => $this->getMsg( 'vector-more-actions' )->text(),
+			'id' => 'p-cactions',
+			'label-id' => 'p-cactions-label',
 			'html-userlangattributes' => $this->get( 'userlangattributes', '' ),
 			'html-items' => '',
 		];
diff --git a/includes/templates/VectorMenu.mustache b/includes/templates/VectorMenu.mustache
index b741424..8b7a8b6 100644
--- a/includes/templates/VectorMenu.mustache
+++ b/includes/templates/VectorMenu.mustache
@@ -1,15 +1,10 @@
 {{!
-	string|null empty-portlet
-	string msg-label
-	string menu-id
-	string menu-label-id
-	string|null html-items
-	string|null html-userlangattributes
+	See @typedef MenuDefinition
 }}
-<div id="{{menu-id}}" role="navigation" class="vectorMenu {{empty-portlet}}" aria-labelledby="{{menu-label-id}}">
-	<input type="checkbox" class="vectorMenuCheckbox" aria-labelledby="{{menu-label-id}}" />
-	<h3 id="{{menu-label-id}}">
-		<span>{{msg-label}}</span>
+<div id="{{id}}" role="navigation" class="{{class}}" aria-labelledby="{{label-id}}">
+	<input type="checkbox" class="vectorMenuCheckbox" aria-labelledby="{{label-id}}" />
+	<h3 id="{{label-id}}">
+		<span>{{label}}</span>
 	</h3>
 	<ul class="menu" {{{html-userlangattributes}}}>
 		{{{html-items}}}
diff --git a/stories/VectorMenu.stories.data.js b/stories/VectorMenu.stories.data.js
index 1e41120..5ffcd97 100644
--- a/stories/VectorMenu.stories.data.js
+++ b/stories/VectorMenu.stories.data.js
@@ -3,11 +3,14 @@ import { htmluserlangattributes } from './utils';
 
 export { vectorMenuTemplate };
 
+/**
+ * @type {MenuDefinition}
+ */
 export const moreData = {
-	'empty-portlet': '',
-	'msg-label': 'More',
-	'menu-id': 'p-cactions',
-	'menu-label-id': 'p-cactions-label',
+	class: 'vectorMenu',
+	label: 'More',
+	id: 'p-cactions',
+	'label-id': 'p-cactions-label',
 	'html-userlangattributes': htmluserlangattributes,
 	'html-items': `<li id="ca-delete">
 	<a href="/w/index.php?title=Main_Page&amp;action=delete"
@@ -23,10 +26,14 @@ export const moreData = {
 </li>`
 };
 
+/**
+ * @type {MenuDefinition}
+ */
 export const variantsData = {
-	'msg-label': '新加坡简体',
-	'menu-id': 'p-variants',
-	'menu-label-id': 'p-variants-label',
+	class: 'vectorMenu',
+	label: '新加坡简体',
+	id: 'p-variants',
+	'label-id': 'p-variants-label',
 	'html-userlangattributes': htmluserlangattributes,
 	'html-items': `<li id="ca-varlang-0">
 	<a href="/zh/%E4%B8%AD%E5%8D%8E%E4%BA%BA%E6%B0%91%E5%85%B1%E5%92%8C%E5%9B%BD"
diff --git a/tests/phpunit/integration/VectorTemplateTest.php b/tests/phpunit/integration/VectorTemplateTest.php
index 19d6338..a0a4395 100644
--- a/tests/phpunit/integration/VectorTemplateTest.php
+++ b/tests/phpunit/integration/VectorTemplateTest.php
@@ -132,17 +132,22 @@ class VectorTemplateTest extends MediaWikiIntegrationTestCase {
 
 	/**
 	 * @covers ::buildViewsProps
+	 * @covers ::buildActionsProps
+	 * @covers ::buildVariantsProps
+	 * @covers ::getMenuProps
 	 */
-	public function testbuildViewsProps() {
+	public function testGetMenuProps() {
 		$langAttrs = 'LANG_ATTRIBUTES';
 		$vectorTemplate = $this->provideVectorTemplateObject();
 		$vectorTemplate->set( 'view_urls', [] );
+		$vectorTemplate->set( 'personal_urls', [] );
 		$vectorTemplate->set( 'skin', new \SkinVector() );
 		$vectorTemplate->set( 'userlangattributes', $langAttrs );
 		$openVectorTemplate = TestingAccessWrapper::newFromObject( $vectorTemplate );
 
-		$props = $openVectorTemplate->buildViewsProps();
-		$this->assertSame( $props, [
+		$props = $openVectorTemplate->getMenuProps();
+		$views = $openVectorTemplate->buildViewsProps();
+		$this->assertSame( $views, [
 			'tabs-id' => 'p-views',
 			'empty-portlet' => 'emptyPortlet',
 			'label-id' => 'p-views-label',
@@ -150,6 +155,15 @@ class VectorTemplateTest extends MediaWikiIntegrationTestCase {
 			'html-userlangattributes' => $langAttrs,
 			'html-items' => '',
 		] );
+
+		$variants = $openVectorTemplate->buildVariantsProps();
+		$actions = $openVectorTemplate->buildActionsProps();
+		$this->assertSame( $variants['class'],
+			'emptyPortlet vectorMenu' );
+		$this->assertSame( $actions['class'],
+			'emptyPortlet vectorMenu' );
+		$this->assertSame( $props['data-personal-menu']['class'],
+			'emptyPortlet' );
 	}
 
 }