fix(widget): abbr widget's title

components/widget/html/widget_html_all.lua

@@ -16,20 +16,25 @@ local String = require('Module:StringUtils')
 local Widget = Lua.import('Module:Widget')
 
 ---@param tag? string
+---@param specialMapping? fun(self: WidgetHtml)
 ---@return WidgetHtml
-local function createHtmlTag(tag)
+local function createHtmlTag(tag, specialMapping)
 	---@class WidgetHtml: Widget
 	---@operator call(table): WidgetHtml
 	local Html = Class.new(Widget)
 	Html.defaultProps = {
 		classes = {},
 		css = {},
 		attributes = {},
+		tag = tag,
 	}
 
 	---@return Html
 	function Html:render()
-		local htmlNode = mw.html.create(tag)
+		if specialMapping then
+			specialMapping(self)
+		end
+		local htmlNode = mw.html.create(self.props.tag)
 
 		htmlNode:addClass(String.nilIfEmpty(table.concat(self.props.classes, ' ')))
 		htmlNode:css(self.props.css)
@@ -58,10 +63,12 @@ local function createHtmlTag(tag)
 	return Html
 end
 
-Widgets.Abbr = createHtmlTag('abbr')
+Widgets.Abbr = createHtmlTag('abbr', function (self)
+	self.props.attributes.title = self.props.attributes.title or self.props.title
+end)
 Widgets.Center = createHtmlTag('center')
 Widgets.Div = createHtmlTag('div')
-Widgets.Fragment = createHtmlTag()
+Widgets.Fragment = createHtmlTag(nil)
 Widgets.Li = createHtmlTag('li')
 Widgets.Span = createHtmlTag('span')
 Widgets.Table = createHtmlTag('table')

spec/widgets/html_spec.lua

@@ -0,0 +1,45 @@
+--- components/widget/html/widget_html_all.lua
+
+describe('HTML Widget', function()
+	local Widgets = require('components/widget/html/widget_html_all')
+
+	describe('Abbr', function()
+		it('should create an abbr tag', function()
+			local abbr = Widgets.Abbr{ children = { "Test" }, title = "Title" }
+			local rendered = abbr:render():allDone()
+			assert.are.same('<abbr title="Title">Test</abbr>', tostring(rendered))
+		end)
+	end)
+
+	describe('Div', function()
+		it('should create a div tag', function()
+			local div = Widgets.Div{ children = { "Content" } }
+			local rendered = div:render():allDone()
+			assert.are.same('<div>Content</div>', tostring(rendered))
+		end)
+	end)
+
+	describe('Span', function()
+		it('should create a span tag', function()
+			local span = Widgets.Span{ children = { "Inline" } }
+			local rendered = span:render():allDone()
+			assert.are.same('<span>Inline</span>', tostring(rendered))
+		end)
+	end)
+
+	describe('Table', function()
+		it('should create a table tag', function()
+			local table = Widgets.Table{ children = { Widgets.Tr{ children = { Widgets.Td{ children = { "Cell" } } } } } }
+			local rendered = table:render():allDone()
+			assert.are.same('<table><tr><td>Cell</td></tr></table>', tostring(rendered))
+		end)
+	end)
+
+	describe('Ul & Li', function()
+		it('should create a list', function()
+			local ul = Widgets.Ul{ children = { Widgets.Li{ children = { "Item" }}, Widgets.Li{ children = { "Item2" }}}}
+			local rendered = ul:render():allDone()
+			assert.are.same('<ul><li>Item</li><li>Item2</li></ul>', tostring(rendered))
+		end)
+	end)
+end)