Test situation where the design config info is missing stylesheet

Automattic · Jan 13, 2022 · ddb1a97 · ddb1a97
1 parent df4dbb8
commit ddb1a97
Showing 1 changed file with 41 additions and 11 deletions.
diff --git a/packages/design-picker/src/utils/__tests__/available-designs.test.ts b/packages/design-picker/src/utils/__tests__/available-designs.test.ts
@@ -23,6 +23,7 @@ jest.mock( '../available-designs-config', () => {
 		slug: 'mock-design-slug',
 		template: 'mock-design-template',
 		theme: 'mock-design-theme',
+		stylesheet: 'pub/mock-design-theme',
 		fonts: {
 			headings: 'Arvo',
 			base: 'Cabin',
@@ -34,9 +35,10 @@ jest.mock( '../available-designs-config', () => {
 
 	const mockDesignWithoutFonts: Design = {
 		title: 'Mock',
-		slug: 'mock-premium-design-slug',
-		template: 'mock-premium-design-template',
-		theme: 'mock-premium-design-theme',
+		slug: 'mock-design-slug',
+		template: 'mock-design-template',
+		theme: 'mock-design-theme',
+		stylesheet: 'pub/mock-design-theme',
 		categories: [ { slug: 'featured', name: 'Featured' } ],
 		is_premium: false,
 		features: [],
@@ -47,6 +49,7 @@ jest.mock( '../available-designs-config', () => {
 		slug: 'mock-premium-design-slug',
 		template: 'mock-premium-design-template',
 		theme: 'mock-premium-design-theme',
+		stylesheet: 'premium/mock-premium-design-theme',
 		fonts: {
 			headings: 'Arvo',
 			base: 'Cabin',
@@ -58,9 +61,10 @@ jest.mock( '../available-designs-config', () => {
 
 	const mockDesignFse: Design = {
 		title: 'Mock',
-		slug: 'mock-premium-design-slug',
-		template: 'mock-premium-design-template',
-		theme: 'mock-premium-design-theme',
+		slug: 'mock-design-slug',
+		template: 'mock-design-template',
+		theme: 'mock-design-theme',
+		stylesheet: 'pub/mock-design-theme',
 		fonts: {
 			headings: 'Arvo',
 			base: 'Cabin',
@@ -73,9 +77,10 @@ jest.mock( '../available-designs-config', () => {
 
 	const mockDesignAlpha: Design = {
 		title: 'Mock',
-		slug: 'mock-premium-design-alpha-slug',
-		template: 'mock-premium-design-alpha-template',
-		theme: 'mock-premium-design-alpha-theme',
+		slug: 'mock-design-alpha-slug',
+		template: 'mock-design-alpha-template',
+		theme: 'mock-design-alpha-theme',
+		stylesheet: 'pub/mock-design-alpha-theme',
 		fonts: {
 			headings: 'Arvo',
 			base: 'Cabin',
@@ -91,12 +96,23 @@ jest.mock( '../available-designs-config', () => {
 		slug: 'mock-blank-canvas-design-slug',
 		template: 'mock-blank-canvas-design-template',
 		theme: 'mock-blank-canvas-design-theme',
+		stylesheet: 'pub/mock-blank-canvas-design-theme',
 		categories: [ { slug: 'featured', name: 'Featured' } ],
 		is_premium: false,
 		is_featured_picks: true,
 		features: [],
 	};
 
+	const mockDesignMissingStylesheet: Design = {
+		title: 'Mock',
+		slug: 'mock-design-slug',
+		template: 'mock-design-template',
+		theme: 'mock-design-theme',
+		categories: [ { slug: 'featured', name: 'Featured' } ],
+		is_premium: false,
+		features: [],
+	};
+
 	return {
 		availableDesignsConfig: {
 			featured: [
@@ -106,6 +122,7 @@ jest.mock( '../available-designs-config', () => {
 				mockDesignFse,
 				mockDesignAlpha,
 				mockDesignBlankCanvas,
+				mockDesignMissingStylesheet,
 			],
 		},
 	};
@@ -119,15 +136,24 @@ describe( 'Design Picker design utils', () => {
 			const mockDesign = availableDesignsConfig.featured[ 0 ];
 
 			expect( getDesignUrl( mockDesign, mockLocale ) ).toEqual(
-				`https://public-api.wordpress.com/rest/v1.1/template/demo/${ mockDesign.theme }/${ mockDesign.template }?font_headings=${ mockDesign.fonts.headings }&font_base=${ mockDesign.fonts.base }&site_title=${ mockDesign.title }&viewport_height=700&language=${ mockLocale }&use_screenshot_overrides=true`
+				`https://public-api.wordpress.com/rest/v1.1/template/demo/${ mockDesign.stylesheet }/${ mockDesign.template }?font_headings=${ mockDesign.fonts.headings }&font_base=${ mockDesign.fonts.base }&site_title=${ mockDesign.title }&viewport_height=700&language=${ mockLocale }&use_screenshot_overrides=true`
 			);
 		} );
 
 		it( 'should compose the correct design API URL when a design has no fonts specified', () => {
 			const mockDesignWithoutFonts = availableDesignsConfig.featured[ 1 ];
 
 			expect( getDesignUrl( mockDesignWithoutFonts, mockLocale ) ).toEqual(
-				`https://public-api.wordpress.com/rest/v1.1/template/demo/${ mockDesignWithoutFonts.theme }/${ mockDesignWithoutFonts.template }?site_title=${ mockDesignWithoutFonts.title }&viewport_height=700&language=${ mockLocale }&use_screenshot_overrides=true`
+				`https://public-api.wordpress.com/rest/v1.1/template/demo/${ mockDesignWithoutFonts.stylesheet }/${ mockDesignWithoutFonts.template }?site_title=${ mockDesignWithoutFonts.title }&viewport_height=700&language=${ mockLocale }&use_screenshot_overrides=true`
+			);
+		} );
+
+		// This test is for legacy code. The theme repo wasn't part of the endpoint URL in v1 of the API.
+		it( 'assumes the theme is in the public repo when the design config is missing the stylesheet property', () => {
+			const mockDesignMissingStylesheet = availableDesignsConfig.featured[ 6 ];
+
+			expect( getDesignUrl( mockDesignMissingStylesheet, mockLocale ) ).toEqual(
+				`https://public-api.wordpress.com/rest/v1.1/template/demo/pub/${ mockDesignMissingStylesheet.theme }/${ mockDesignMissingStylesheet.template }?site_title=${ mockDesignMissingStylesheet.title }&viewport_height=700&language=${ mockLocale }&use_screenshot_overrides=true`
 			);
 		} );
 	} );
@@ -146,6 +172,7 @@ describe( 'Design Picker design utils', () => {
 			const mockDesignPremium = availableDesignsConfig.featured[ 2 ];
 			const mockDesignAlpha = availableDesignsConfig.featured[ 4 ];
 			const mockDesignBlankCanvas = availableDesignsConfig.featured[ 5 ];
+			const mockDesignMissingStylesheet = availableDesignsConfig.featured[ 6 ];
 			expect( getAvailableDesigns( { includeAlphaDesigns: true, useFseDesigns: false } ) ).toEqual(
 				{
 					featured: [
@@ -155,6 +182,7 @@ describe( 'Design Picker design utils', () => {
 						mockDesignWithoutFonts,
 						mockDesignPremium,
 						mockDesignAlpha,
+						mockDesignMissingStylesheet,
 					],
 				}
 			);
@@ -174,6 +202,7 @@ describe( 'Design Picker design utils', () => {
 			const mockDesignWithoutFonts = availableDesignsConfig.featured[ 1 ];
 			const mockDesignPremium = availableDesignsConfig.featured[ 2 ];
 			const mockDesignBlankCanvas = availableDesignsConfig.featured[ 5 ];
+			const mockDesignMissingStylesheet = availableDesignsConfig.featured[ 6 ];
 			expect( getAvailableDesigns( { includeAlphaDesigns: false, useFseDesigns: false } ) ).toEqual(
 				{
 					featured: [
@@ -182,6 +211,7 @@ describe( 'Design Picker design utils', () => {
 						mockDesign,
 						mockDesignWithoutFonts,
 						mockDesignPremium,
+						mockDesignMissingStylesheet,
 					],
 				}
 			);