chore: Reduce amount of live stylesheets loaded in tests

.github/workflows/update visual snapshots.yml

@@ -48,9 +48,7 @@ jobs:
           luarocks install --lua-version=5.1 busted
 
       - name: Update snapshots
-        run: npm run lua-test
-        env:
-          UPDATE_SNAPSHOTS: true
+        run: npm run update-snapshots
 
       - name: Commit and push if snapshots changed
         uses: stefanzweifel/git-auto-commit-action@v7

lua/.busted

@@ -9,4 +9,8 @@ return {
 	ci = {
 		ROOT = {"spec"},
 	},
+	snapshots = {
+		ROOT = {"spec"},
+		tags = "snapshot",
+	}
 }

lua/spec/date_range_display_spec.lua

@@ -1,6 +1,6 @@
 --- Triple Comment to Enable our LLS Plugin
 insulate('DateRange', function()
-	it('DateRange display test', function()
+	it('DateRange display test #snapshot', function()
 		local Array = require('Module:Array')
 		local DateRange = require('Module:Widget/Misc/DateRange')
 		local HtmlWidgets = require('Module:Widget/Html/All')

lua/spec/dota2_rankings_spec.lua

@@ -1,6 +1,6 @@
 --- Triple Comment to Enable our LLS Plugin
 insulate('Rankings', function()
-	it('dota2', function()
+	it('dota2 #snapshot', function()
 		local TeamTemplateMock = require('wikis.commons.Mock.TeamTemplate')
 		local TestAsset = require('test_assets/dota2_rankings_example')
 		TeamTemplateMock.setUp()

lua/spec/helpers/template.html

@@ -5,7 +5,7 @@
 	<meta charset="UTF-8">
 	<title>Liquipedia</title>
 	<!-- TODO: We might in the future make the cacheversion dynamic -->
-	<link rel="stylesheet" href="https://liquipedia.net/commons/load.php?cacheversion=cipipeline&lang=en&modules=fontawesome-pro|ext.TeamLiquidIntegration.liquipedia-custom-icon|skins.lakesideview.mw|skins.lakesideview.theme.commons&only=styles&skin=lakesideview">
+	<link rel="stylesheet" href="https://liquipedia.net/commons/load.php?cacheversion=cipipeline&lang=en&modules=fontawesome-pro&only=styles">
 	<link rel="stylesheet" href="./css/main.css">
 	<script src="../../node_modules/jquery/dist/jquery.min.js"></script>
 	<script src="../../javascript/Main.js"></script>

lua/spec/infobox_spec.lua

@@ -1,7 +1,7 @@
 --- Triple Comment to Enable our LLS Plugin
 insulate('Infobox', function()
 	insulate('League', function ()
-		allwikis('smoke', function (args, wikiName)
+		allwikis('smoke #snapshot', function (args, wikiName)
 			local LpdbSquadStub = stub(mw.ext.LiquipediaDB, 'lpdb_tournament')
 			local LpdbQueryStub = stub(mw.ext.LiquipediaDB, 'lpdb', {})
 			local InfoboxLeagueCustom = require('Module:Infobox/League/Custom')

lua/spec/league_icon_spec.lua

@@ -107,7 +107,7 @@ insulate('LeagueIcon.getTemplate', function()
 end)
 
 insulate('LeagueIcon.generate', function()
-	it('should generate code with valid arguments', function()
+	it('should generate code with valid arguments #snapshot', function()
 		local args = {icon = 'Icon.png', link = 'link', name = 'name', series = 'series'}
 		GoldenTest('LeagueIcon.generate_copy_paste_gen', LeagueIcon.generate(args))
 	end)

lua/spec/match2_spec.lua

@@ -55,7 +55,7 @@ describe('match2', function()
 			mw.ext.LiquipediaDB.lpdb_match2game:revert()
 			mw.ext.LiquipediaDB.lpdb_tournament:revert()
 		end)
-		allwikis('smoketest', function(args, wikiName)
+		allwikis('smoketest #snapshot', function(args, wikiName)
 			local Info = require('Module:Info')
 			if Info.config.match2.status == 0 then
 				return

lua/spec/prize_pool_spec.lua

@@ -95,7 +95,7 @@ describe('prize pool', function()
 	end)
 
 	describe('prize pool is correct', function()
-		it('display', function()
+		it('display #snapshot', function()
 			GoldenTest('prize_pool', tostring(PrizePool(prizePoolArgs):create():build()))
 		end)
 

lua/spec/slider_spec.lua

@@ -2,15 +2,17 @@
 local Slider = require('Module:Widget/Basic/Slider')
 
 insulate('Slider', function()
-	GoldenTest('Slider', tostring(Slider{
-		id = 'test-slider',
-		min = 0,
-		max = 10,
-		step = 2,
-		defaultValue = 4,
-		title = function(value) return 'Title ' .. value end,
-		childrenAtValue = function(value)
-			return 'Child ' .. value
-		end,
-	}))
+	it("Slider #snapshot", function ()
+		GoldenTest('Slider', tostring(Slider{
+			id = 'test-slider',
+			min = 0,
+			max = 10,
+			step = 2,
+			defaultValue = 4,
+			title = function(value) return 'Title ' .. value end,
+			childrenAtValue = function(value)
+				return 'Child ' .. value
+			end,
+		}))
+	end)
 end)

lua/spec/squad_spec.lua

@@ -1,6 +1,6 @@
 --- Triple Comment to Enable our LLS Plugin
 insulate('Squad', function()
-	allwikis('integration tests', function(args, wikiName)
+	allwikis('integration tests #snapshot', function(args, wikiName)
 		local Info = require('Module:Info')
 		if Info.config.squads.allowManual == false then
 			return

lua/spec/standings_legend_spec.lua

@@ -1,6 +1,6 @@
 --- Triple Comment to Enable our LLS Plugin
 insulate('Widget/Legend', function()
-	it('integration', function()
+	it('integration #snapshot', function()
 		local LegendComponent = require('Module:Widget/Legend')
 
 		GoldenTest('standings_legend', tostring(LegendComponent{

lua/spec/tabs_snapshot_spec.lua

@@ -2,7 +2,7 @@ local Tabs = require('Module:Tabs')
 local HtmlWidgets = require('Module:Widget/Html/All')
 
 insulate('Tabs snapshots', function()
-	it('dynamic variants', function()
+	it('dynamic variants #snapshot', function()
 		local arrayContent = HtmlWidgets.Ul{children = {
 			HtmlWidgets.Li{children = {'Item A1'}},
 			HtmlWidgets.Li{children = {'Item A2'}},

lua/spec/team_participant_spec.lua

@@ -1,7 +1,7 @@
 --- Triple Comment to Enable our LLS Plugin
 describe('Team Participant', function()
 	insulate('integration tests', function()
-		it('renders team participants template with multiple teams', function()
+		it('renders team participants template with multiple teams #snapshot', function()
 			local TeamTemplateMock = require('wikis.commons.Mock.TeamTemplate')
 			TeamTemplateMock.setUp()
 			local LpdbQuery = stub(mw.ext.LiquipediaDB, 'lpdb', function() return {} end)

lua/spec/teamcard_legacy_spec.lua

@@ -552,7 +552,7 @@ describe('TeamCard Legacy', function()
     end)
 
     describe('integration', function()
-        it('renders a representative legacy block via Module:Template stash', function()
+        it('renders a representative legacy block via Module:Template stash #snapshot', function()
             local TeamTemplateMock = require('wikis.commons.Mock.TeamTemplate')
             TeamTemplateMock.setUp()
             local LpdbQuery = stub(mw.ext.LiquipediaDB, 'lpdb', function() return {} end)

lua/spec/transfer_spec.lua

@@ -2,7 +2,7 @@
 local Json = require('Module:Json')
 local TeamTemplateMock = require('wikis.commons.Mock.TeamTemplate')
 insulate('Transfer', function()
-	allwikis('smoke', function (args, wikiName)
+	allwikis('smoke #snapshot', function (args, wikiName)
 		local LpdbTransferStub = stub(mw.ext.LiquipediaDB, 'lpdb_transfer')
 		local LpdbQueryStub = stub(mw.ext.LiquipediaDB, 'lpdb', {})
 

package.json

@@ -44,6 +44,6 @@
 		"build:js": "node build-js.js",
 		"build": "npm run build:css && npm run build:js",
 		"lua-test": "npm run build:css && busted -C lua",
-		"update-snapshots": "UPDATE_SNAPSHOTS=true npm run lua-test"
+		"update-snapshots": "npm run build:css && UPDATE_SNAPSHOTS=true busted --run=snapshots -C lua"
 	}
 }

stylesheets/Main.scss

@@ -75,10 +75,141 @@ body {
 	line-height: 1.5;
 	color: #212529;
 	text-align: left;
+
+	/* Wiki-like top padding */
+	padding: calc( 3.125rem + 2.25rem ) 0 0 0;
 }
 
 *,
 ::before,
 ::after {
 	box-sizing: border-box;
 }
+
+/* Styles that are not yet part of this repository, but used in snapshot tests */
+:root {
+	--clr-moon-40: #666666;
+
+	--clr-primary-44: #1f73c1;
+	--clr-primary-100: #ffffff;
+
+	--clr-secondary-25: #404040;
+	--clr-secondary-80: #b3b3b3;
+	--clr-secondary-100: #ffffff;
+
+	--clr-semantic-gold-20: #665400;
+	--clr-semantic-gold-40: #ccab00;
+	--clr-semantic-gold-90: #fff5cc;
+
+	--clr-semantic-silver-40: #557177;
+
+	--clr-semantic-positive-30: #1d7c1d;
+	--clr-semantic-negative-40: #b81414;
+
+	--clr-on-surface-light-primary-4: rgba( 0, 0, 0, 0.04 );
+	--clr-on-surface-light-primary-8: rgba( 0, 0, 0, 0.08 );
+	--clr-on-surface-light-primary-12: rgba( 0, 0, 0, 0.12 );
+
+	--clr-wiki-primary-container: #e2e2e6;
+	--clr-wiki-theme-primary: var( --clr-moon-40 );
+}
+
+.wiki-backgroundcolor-light {
+	background-color: var( --clr-wiki-primary-container );
+}
+
+.d-none {
+	display: none !important;
+}
+
+a {
+	text-decoration: none;
+	color: var( --clr-primary );
+	background-color: transparent;
+}
+
+.btn {
+	display: inline-flex;
+	justify-content: center;
+	align-items: center;
+	gap: 0.25rem;
+	border-radius: 0.5rem;
+	font-weight: bold;
+	text-align: center;
+	border: 0;
+	outline-offset: -0.0625rem;
+	outline-width: 0.0625rem;
+	outline-style: solid;
+	text-wrap: nowrap;
+	padding: 0.75rem 1rem;
+	line-height: 1.25rem;
+	font-size: 0.875rem;
+	height: 2.75rem;
+	min-width: 2.75rem;
+}
+
+.btn.btn-extrasmall {
+	padding: 0.25rem 0.5rem;
+	font-size: 0.688rem;
+	line-height: 1rem;
+	border-radius: 0.25rem;
+	height: 1.5rem;
+	min-width: 1.5rem;
+}
+
+.btn.btn-small {
+	padding: 0.375rem 0.75rem;
+	height: 2rem;
+	min-width: 2rem;
+}
+
+.btn.btn-large {
+	padding: 0.75rem 1.25rem;
+	line-height: 1.5rem;
+	font-size: 1rem;
+	height: 3rem;
+	min-width: 2.5rem;
+}
+
+.btn.btn-primary {
+	color: var( --clr-primary-100 );
+	background-color: var( --clr-primary-44 );
+}
+
+.btn.btn-secondary {
+	outline-color: var( --clr-secondary-80 );
+	color: var( --clr-secondary-25 );
+}
+
+img {
+	vertical-align: middle;
+	border-style: unset;
+}
+
+.main-container .main-content-column {
+	position: relative;
+	overflow-x: hidden;
+}
+
+.nav {
+	display: flex;
+	flex-wrap: wrap;
+	padding-left: 0;
+	margin-bottom: 0;
+	list-style: none;
+}
+
+pre {
+	border: 1px solid #adb5bd;
+	page-break-inside: avoid;
+	font-family: "Source Code Pro", monospace;
+	font-size: 1em;
+	margin-top: 0;
+	margin-bottom: 1rem;
+	overflow: auto;
+	-ms-overflow-style: scrollbar;
+	background-color: #f8f9fa;
+	white-space: pre-wrap;
+	overflow-x: hidden;
+	word-wrap: break-word;
+}