Adding tests to Filter by Rating - WIP

assets/js/blocks/rating-filter/test/block.tsx

@@ -0,0 +1,136 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+import * as hooks from '@woocommerce/base-context/hooks';
+// import userEvent from '@testing-library/user-event';
+
+/**
+ * Internal dependencies
+ */
+import RatingFilterBlock from '../block';
+import { Attributes } from '../types';
+
+jest.mock( '@woocommerce/base-context/hooks', () => ( {
+	__esModule: true,
+	...jest.requireActual( '@woocommerce/base-context/hooks' ),
+} ) );
+
+const setWindowUrl = ( { url }: SetWindowUrlParams ) => {
+	global.window = Object.create( window );
+	Object.defineProperty( window, 'location', {
+		value: {
+			href: url,
+		},
+		writable: true,
+	} );
+};
+
+const stubCollectionData = () => ( {
+	price_range: null,
+	attribute_counts: null,
+	rating_counts: [
+		{ rating: 2, count: 5 },
+		{ rating: 4, count: 24 },
+		{ rating: 5, count: 1 },
+	],
+	stock_status_counts: null,
+} );
+
+type DisplayStyle = 'list' | 'dropdown';
+type SelectType = 'single' | 'multiple';
+interface SetupParams {
+	filterRating: string;
+	displayStyle: DisplayStyle;
+	selectType: SelectType;
+}
+
+const setup = ( params: SetupParams ) => {
+	const url = `http://woo.local/?rating_filter=${ params.filterRating }`;
+	setWindowUrl( { url } );
+
+	const attributes: Attributes = {
+		displayStyle: params.displayStyle || 'list',
+		selectType: params.selectType || 'single',
+		showCounts: true,
+		showFilterButton: false,
+		isPreview: false,
+	};
+
+	jest.spyOn( hooks, 'useCollectionData' ).mockReturnValue( {
+		results: stubCollectionData(),
+		isLoading: false,
+	} );
+	const utils = render( <RatingFilterBlock attributes={ attributes } /> );
+	const rating2 = screen.queryByLabelText( 'Rated 2 out of 5' );
+	const rating4 = screen.queryByLabelText( 'Rated 4 out of 5' );
+	const rating5 = screen.queryByLabelText( 'Rated 5 out of 5' );
+	return {
+		...utils,
+		rating2,
+		rating4,
+		rating5,
+	};
+};
+
+interface SetupParams {
+	filterRating: string;
+	displayStyle: DisplayStyle;
+	selectType: SelectType;
+}
+
+// const setupSingleChoiceList = ( filterRating = '5' ) =>
+// 	setup( {
+// 		filterRating,
+// 		displayStyle: 'list',
+// 		selectType: 'single',
+// 	} );
+// const setupMultipleChoiceList = ( filterRating = '5' ) =>
+// 	setup( {
+// 		filterRating,
+// 		displayStyle: 'list',
+// 		selectType: 'multiple',
+// 	} );
+
+const setupSingleChoiceDropdown = ( filterRating = '5' ) =>
+	setup( {
+		filterRating,
+		displayStyle: 'dropdown',
+		selectType: 'single',
+	} );
+
+// const setupMultipleChoiceDropdown = ( filterRating = '5' ) =>
+// 	setup( {
+// 		filterRating,
+// 		displayStyle: 'dropdown',
+// 		selectType: 'single',
+// 	} );
+
+const selectors = {
+	list: 'wc-block-rating-filter style-list',
+	dropdown: 'wc-block-rating-filter style-dropdown',
+};
+
+describe.only( 'RatingFilterBlock', () => {
+	describe( 'Single choice Dropdown', () => {
+		test( 'renders dropdown', () => {
+			const { container } = setupSingleChoiceDropdown();
+
+			const dropdown = container.getElementsByClassName(
+				selectors.dropdown
+			);
+
+			expect( dropdown ).toHaveLength( 1 );
+		} );
+
+		test( 'renders chips based on URL params', () => {
+			const ratingParam = '2';
+			const { rating2, rating4, rating5 } =
+				setupSingleChoiceDropdown( ratingParam );
+
+			expect( rating2 ).toHaveLength( 0 );
+			expect( rating4 ).toHaveLength( 1 );
+			expect( rating5 ).toHaveLength( 1 );
+		} );
+	} );
+} );

tests/e2e/specs/backend/rating-filter.test.js

@@ -64,5 +64,26 @@ describe( `${ block.name } Block`, () => {
 				text: "Show 'Apply filters' button",
 			} );
 		} );
+
+		it( 'allows changing the Display Style', async () => {
+			// Turn the display style to Dropdown
+			await expect( page ).toClick( 'button', { text: 'Dropdown' } );
+
+			await page.waitForSelector(
+				'.wc-block-rating-filter.style-dropdown'
+			);
+			await expect( page ).toMatchElement(
+				'.wc-block-rating-filter.style-dropdown'
+			);
+			// Turn the display style to List
+			await expect( page ).toClick( 'button', {
+				text: 'List',
+			} );
+
+			await page.waitForSelector( '.wc-block-rating-filter.style-list' );
+			await expect( page ).toMatchElement(
+				'.wc-block-rating-filter.style-list'
+			);
+		} );
 	} );
 } );