Add support for dark mode dimension

- Add dark mode as a valid dimension
- Read screenshot file name from meta data. Dark mode screenshots file name no longer matches the dimension values.

Ticket: https://phabricator.wikimedia.org/T409534

Author: Sperling-0

src/model/Dimensions.ts

@@ -3,6 +3,7 @@ export const DEVICE = 'device';
 export const ORIENTATION = 'orientation';
 export const PLATFORM = 'platform';
 export const RESOLUTION = 'resolution';
+export const DARKMODE = 'darkmode';
 
 // TODO maybe add union type consisting of the string constants and use that tye in DimensionMap
 export type DimensionMap = Map<string,string[]>

src/model/TestCase.ts

@@ -12,8 +12,8 @@ export class TestCase {
     readonly isValid: boolean;
     readonly screenshotFilename: string;
 
-    constructor( readonly dimensions: Map<string,string>, readonly bannerUrl: string, readonly invalidReason: string = '' ) {
-        this.screenshotFilename = [ ...dimensions.values() ].join( '__' ) + '.png';
+    constructor( readonly dimensions: Map<string,string>, readonly screenshotFilename: string, readonly bannerUrl: string, readonly invalidReason: string = '' ) {
+        this.screenshotFilename = screenshotFilename;
         this.isValid = invalidReason === '';
     }
 
@@ -32,7 +32,7 @@ export class TestCase {
 
     static fromObject( obj: RawTestCase ): TestCase {
         const dimensions = new Map<string, string>(obj.dimensions);
-        return new TestCase( dimensions, obj.bannerUrl, getInvalidReasonFromState( obj.state ) );
+        return new TestCase( dimensions, obj.screenshotFilename, obj.bannerUrl, getInvalidReasonFromState( obj.state ) );
     }
 
 }

src/model/parseMetadata.ts

@@ -6,6 +6,7 @@ const DimensionRunType = Union(
     Literal('orientation'),
     Literal('platform'),
     Literal('resolution'),
+    Literal('darkmode'),
 );
 
 const DimensionValueRunType = Tuple(DimensionRunType, String);
@@ -17,6 +18,7 @@ const TestCaseStateRunType = Record( {
 
 const TestCaseRunType = Record( {
     dimensions: Array(DimensionValueRunType),
+	screenshotFilename: String,
     bannerUrl: String,
 	state: TestCaseStateRunType,
 } );

src/views/Slides.vue

@@ -44,7 +44,7 @@
     import Slideshow from "@/components/Slideshow.vue";
 
     import {ScreenshotMetaData} from "@/model/ScreenshotMetaData";
-    import {BANNER, DEVICE, PLATFORM, ORIENTATION, RESOLUTION} from "@/model/Dimensions";
+    import {BANNER, DEVICE, PLATFORM, ORIENTATION, RESOLUTION, DARKMODE} from "@/model/Dimensions";
     import {createGrid} from "@/model/createGrid";
     import SlideshowPosition from "@/model/slideshowPosition";
     import {createDimensionCombinations} from "@/model/createDimensionCombinations";
@@ -72,7 +72,7 @@
 
             // TODO Talk to others to come up with the best order
             // TODO switch BROWSER and BANNER when we have A/B test cases in the example/live data
-            const preferredOrderOfDimensions = [ BANNER, DEVICE, RESOLUTION, PLATFORM, ORIENTATION ];
+            const preferredOrderOfDimensions = [ BANNER, DEVICE, RESOLUTION, PLATFORM, ORIENTATION, DARKMODE ];
             const metaDataInit: MetadataState = {
                 isLoading: true,
                 metaData: null,

tests/unit/TestCase.spec.ts

@@ -25,6 +25,7 @@ describe('TestCase', () => {
                     ]
                 ],
                 "bannerUrl": "https://de.wikipedia.org/wiki/Wikipedia:Hauptseite?banner=B20_WMDE_Test_Desktop",
+                "screenshotFilename": 'edge__1024x768__ctrl.png',
             } );
 
             expect( testCase.screenshotFilename ).toBe( 'edge__1024x768__ctrl.png' );