Add e2e tests for PR 7963 (https://github.com/woocommerce/woocommerce-admin/pull/7996)

* Add e2e tests for PR 7963

* Fix lint

* Verify the next screen is shown

* Simplifying product types step

* Add className to SelectControl

* Fix e2e test

* Removed not used dependency

* Add method `expandRecommendedBusinessFeatures`

* Fixed style selectors

* Add default value to `name`.

Co-authored-by: Fernando Marichal <contacto@fernandomarichal.com>

plugins/woocommerce-admin/client/profile-wizard/steps/business-details/flows/selective-bundle/index.js

@@ -22,6 +22,7 @@ import {
 	SETTINGS_STORE_NAME,
 } from '@woocommerce/data';
 import { recordEvent } from '@woocommerce/tracks';
+import classnames from 'classnames';
 
 /**
  * Internal dependencies
@@ -297,6 +298,17 @@ class BusinessDetails extends Component {
 		} );
 	}
 
+	getSelectControlProps( getInputProps, name = '' ) {
+		const { className, ...props } = getInputProps( name );
+		return {
+			...props,
+			className: classnames(
+				`woocommerce-profile-wizard__${ name.replace( /\_/g, '-' ) }`,
+				className
+			),
+		};
+	}
+
 	renderBusinessDetailsStep() {
 		const {
 			goToNextStep,
@@ -360,7 +372,10 @@ class BusinessDetails extends Component {
 										) }
 										options={ productCountOptions }
 										required
-										{ ...getInputProps( 'product_count' ) }
+										{ ...this.getSelectControlProps(
+											getInputProps,
+											'product_count'
+										) }
 									/>
 
 									<SelectControl
@@ -371,7 +386,10 @@ class BusinessDetails extends Component {
 										) }
 										options={ sellingVenueOptions }
 										required
-										{ ...getInputProps( 'selling_venues' ) }
+										{ ...this.getSelectControlProps(
+											getInputProps,
+											'selling_venues'
+										) }
 									/>
 
 									{ [
@@ -388,7 +406,8 @@ class BusinessDetails extends Component {
 											) }
 											options={ employeeOptions }
 											required
-											{ ...getInputProps(
+											{ ...this.getSelectControlProps(
+												getInputProps,
 												'number_employees'
 											) }
 										/>
@@ -413,7 +432,10 @@ class BusinessDetails extends Component {
 												formatAmount
 											) }
 											required
-											{ ...getInputProps( 'revenue' ) }
+											{ ...this.getSelectControlProps(
+												getInputProps,
+												'revenue'
+											) }
 										/>
 									) }
 
@@ -433,7 +455,8 @@ class BusinessDetails extends Component {
 													) }
 													options={ platformOptions }
 													required
-													{ ...getInputProps(
+													{ ...this.getSelectControlProps(
+														getInputProps,
 														'other_platform'
 													) }
 												/>
@@ -445,7 +468,8 @@ class BusinessDetails extends Component {
 															'woocommerce-admin'
 														) }
 														required
-														{ ...getInputProps(
+														{ ...this.getSelectControlProps(
+															getInputProps,
 															'other_platform_name'
 														) }
 													/>

plugins/woocommerce-admin/packages/admin-e2e-tests/src/sections/onboarding/BusinessSection.ts

@@ -24,7 +24,7 @@ export class BusinessSection extends BasePage {
 
 	async selectProductNumber( productLabel: string ) {
 		const howManyProductsDropdown = this.getDropdownField(
-			'.components-card__body > div:nth-child(1)'
+			'.woocommerce-profile-wizard__product-count'
 		);
 
 		await howManyProductsDropdown.select( productLabel );
@@ -32,11 +32,32 @@ export class BusinessSection extends BasePage {
 
 	async selectCurrentlySelling( currentlySelling: string ) {
 		const sellingElsewhereDropdown = this.getDropdownField(
-			'.components-card__body > div:nth-child(2)'
+			'.woocommerce-profile-wizard__selling-venues'
 		);
 
 		await sellingElsewhereDropdown.select( currentlySelling );
 	}
+	async selectEmployeesNumber( employeesNumber: string ) {
+		const employeesNumberDropdown = this.getDropdownField(
+			'.woocommerce-profile-wizard__number-employees'
+		);
+
+		await employeesNumberDropdown.select( employeesNumber );
+	}
+	async selectRevenue( revenue: string ) {
+		const revenueDropdown = this.getDropdownField(
+			'.woocommerce-profile-wizard__revenue'
+		);
+
+		await revenueDropdown.select( revenue );
+	}
+	async selectOtherPlatformName( otherPlatformName: string ) {
+		const otherPlatformNameDropdown = this.getDropdownField(
+			'.woocommerce-profile-wizard__other-platform'
+		);
+
+		await otherPlatformNameDropdown.select( otherPlatformName );
+	}
 
 	async selectInstallFreeBusinessFeatures( select: boolean ) {
 		if ( select ) {

plugins/woocommerce-admin/packages/admin-e2e-tests/src/specs/activate-and-setup/complete-onboarding-wizard.ts

@@ -517,9 +517,79 @@ const testSubscriptionsInclusion = () => {
 	} );
 };
 
+const testBusinessDetailsForm = () => {
+	describe( 'A store that is selling elsewhere will see the "Number of employees” dropdown menu', () => {
+		const profileWizard = new OnboardingWizard( page );
+		const login = new Login( page );
+
+		beforeAll( async () => {
+			await login.login();
+		} );
+
+		afterAll( async () => {
+			await deactivateAndDeleteExtension( 'woocommerce-payments' );
+			await login.logout();
+		} );
+
+		it( 'can complete the store details and product types sections', async () => {
+			await profileWizard.navigate();
+
+			// Wait for "Continue" button to become active
+			await profileWizard.continue();
+
+			// Wait for usage tracking pop-up window to appear
+			await profileWizard.optionallySelectUsageTracking();
+
+			// Query for the industries checkboxes
+			await profileWizard.industry.isDisplayed();
+			await profileWizard.continue();
+			await profileWizard.productTypes.isDisplayed( 7 );
+			await profileWizard.productTypes.uncheckProducts();
+			// Select Physical
+			await profileWizard.productTypes.selectProduct(
+				'Physical products'
+			);
+
+			await profileWizard.continue();
+			await page.waitForNavigation( { waitUntil: 'networkidle0' } );
+		} );
+
+		it( 'can complete the business details tab', async () => {
+			await profileWizard.business.isDisplayed();
+
+			expect( page ).toMatchElement( 'label', {
+				text: 'How many employees do you have?',
+			} );
+
+			await profileWizard.business.selectProductNumber(
+				config.get( 'onboardingwizard.numberofproducts' )
+			);
+			await profileWizard.business.selectCurrentlySelling(
+				config.get( 'onboardingwizard.sellingOnAnotherPlatform' )
+			);
+			await profileWizard.business.selectEmployeesNumber(
+				config.get( 'onboardingwizard.number_employees' )
+			);
+			await profileWizard.business.selectRevenue(
+				config.get( 'onboardingwizard.revenue' )
+			);
+			await profileWizard.business.selectOtherPlatformName(
+				config.get( 'onboardingwizard.other_platform_name' )
+			);
+
+			await profileWizard.continue();
+			await profileWizard.business.expandRecommendedBusinessFeatures();
+			await profileWizard.business.uncheckAllRecommendedBusinessFeatures();
+			await profileWizard.continue();
+			await profileWizard.themes.isDisplayed();
+		} );
+	} );
+};
+
 module.exports = {
 	testAdminOnboardingWizard,
 	testSelectiveBundleWCPay,
 	testDifferentStoreCurrenciesWCPay,
 	testSubscriptionsInclusion,
+	testBusinessDetailsForm,
 };

plugins/woocommerce-admin/tests/e2e/config/default.json

@@ -65,7 +65,11 @@
   "onboardingwizard": {
     "industry": "Test industry",
     "numberofproducts": "1 - 10",
-    "sellingelsewhere": "No"
+    "sellingelsewhere": "No",
+    "sellingOnAnotherPlatform": "Yes, on another platform",
+    "number_employees": "< 10",
+    "revenue": "Up to $2,500.00",
+    "other_platform_name": "Etsy"
   },
   "settings": {
     "shipping": {

plugins/woocommerce-admin/tests/e2e/specs/activate-and-setup/complete-onboarding-wizard.test.tsx

@@ -3,9 +3,11 @@ const {
 	testSelectiveBundleWCPay,
 	testDifferentStoreCurrenciesWCPay,
 	testSubscriptionsInclusion,
+	testBusinessDetailsForm,
 } = require( '@woocommerce/admin-e2e-tests' );
 
 testAdminOnboardingWizard();
 testSelectiveBundleWCPay();
 testDifferentStoreCurrenciesWCPay();
 testSubscriptionsInclusion();
+testBusinessDetailsForm();