Adds Experiment flag to School Association, UI tests

apps/src/lib/util/AnalyticsConstants.js

@@ -36,7 +36,6 @@ const EVENTS = {
   COUNTRY_SELECTED: 'User Selects Country',
   ZIP_CODE_ENTERED: 'Valid Zip Code Entered',
   SCHOOL_SEARCH_INPUT_ENTERED: 'School Search Input Entered',
-  SCHOOL_LIST_OPENED: 'School List Opened',
   SCHOOL_SELECTED_FROM_LIST: 'School Selected from Dropdown',
   ADD_MANUALLY_CLICKED: 'User Elects to Add School Name Manually',
   DO_NOT_TEACH_AT_SCHOOL_CLICKED:

apps/src/sites/studio/pages/devise/registrations/_finish_sign_up.js

@@ -2,6 +2,7 @@ import $ from 'jquery';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import SchoolInfoInputs from '@cdo/apps/templates/SchoolInfoInputs';
+import SchoolDataInputs from '@cdo/apps/templates/SchoolDataInputs';
 import getScriptData from '@cdo/apps/util/getScriptData';
 import firehoseClient from '@cdo/apps/lib/util/firehose';
 import experiments from '@cdo/apps/util/experiments';
@@ -236,28 +237,37 @@ $(document).ready(() => {
 
   function renderSchoolInfo() {
     if (schoolInfoMountPoint) {
-      ReactDOM.render(
-        <div style={{padding: 10}}>
-          <SchoolInfoInputs
-            schoolType={schoolData.schoolType}
-            country={schoolData.country}
-            ncesSchoolId={schoolData.ncesSchoolId}
-            schoolName={schoolData.schoolName}
-            schoolCity={schoolData.schoolCity}
-            schoolState={schoolData.schoolState}
-            schoolZip={schoolData.schoolZip}
-            schoolLocation={schoolData.schoolLocation}
-            useLocationSearch={schoolData.useLocationSearch}
-            onCountryChange={onCountryChange}
-            onSchoolTypeChange={onSchoolTypeChange}
-            onSchoolChange={onSchoolChange}
-            onSchoolNotFoundChange={onSchoolNotFoundChange}
-            showRequiredIndicator={false}
-            styles={{width: 580}}
-          />
-        </div>,
-        schoolInfoMountPoint
-      );
+      if (experiments.isEnabled(experiments.SCHOOL_ASSOCIATION_V2)) {
+        ReactDOM.render(
+          <div style={{padding: 10}}>
+            <SchoolDataInputs />
+          </div>,
+          schoolInfoMountPoint
+        );
+      } else {
+        ReactDOM.render(
+          <div style={{padding: 10}}>
+            <SchoolInfoInputs
+              schoolType={schoolData.schoolType}
+              country={schoolData.country}
+              ncesSchoolId={schoolData.ncesSchoolId}
+              schoolName={schoolData.schoolName}
+              schoolCity={schoolData.schoolCity}
+              schoolState={schoolData.schoolState}
+              schoolZip={schoolData.schoolZip}
+              schoolLocation={schoolData.schoolLocation}
+              useLocationSearch={schoolData.useLocationSearch}
+              onCountryChange={onCountryChange}
+              onSchoolTypeChange={onSchoolTypeChange}
+              onSchoolChange={onSchoolChange}
+              onSchoolNotFoundChange={onSchoolNotFoundChange}
+              showRequiredIndicator={false}
+              styles={{width: 580}}
+            />
+          </div>,
+          schoolInfoMountPoint
+        );
+      }
     }
   }
 

apps/src/templates/SchoolDataInputs.jsx

@@ -82,6 +82,7 @@ export default function SchoolDataInputs({
           {i18n.whatCountry()}
         </BodyTwoText>
         <SimpleDropdown
+          id="uitest-country-dropdown"
           className={style.dropdown}
           name={fieldNames.country}
           items={COUNTRY_ITEMS}
@@ -98,6 +99,7 @@ export default function SchoolDataInputs({
               {i18n.enterYourSchoolZip()}
             </BodyTwoText>
             <input
+              id="uitest-school-zip"
               type="text"
               name={fieldNames.schoolZip}
               onChange={e => {

apps/src/templates/SchoolZipSearch.jsx

@@ -51,7 +51,6 @@ export default function SchoolZipSearch({fieldNames, zip}) {
       sendAnalyticsEvent(EVENTS.DO_NOT_TEACH_AT_SCHOOL_CLICKED, {});
     } else if (schoolId === SELECT_A_SCHOOL) {
       ncesId = '';
-      // sendAnalyticsEvent(EVENTS.SCHOOL_LIST_OPENED, {});
     } else if (schoolId === CLICK_TO_ADD) {
       ncesId = '';
       setInputManually(true);
@@ -89,6 +88,7 @@ export default function SchoolZipSearch({fieldNames, zip}) {
             {i18n.selectYourSchool()}
           </BodyTwoText>
           <SimpleDropdown
+            id="uitest-school-dropdown"
             className={style.dropdown}
             name={fieldNames.ncesSchoolId}
             items={SEARCH_DEFAULTS.concat(sortSchoolsByName(dropdownSchools))}

apps/src/util/experiments.js

@@ -58,6 +58,8 @@ experiments.SPRITE_LAB_DOCS = 'sl_docs';
 experiments.KEYBOARD_NAVIGATION = 'blockly_keyboard';
 // Adds the ability to toggle between v1 and v2 of the section progress page of the teacher dashboard
 experiments.SECTION_PROGRESS_V2 = 'section_progress_v2';
+// Enables a user to utilize the new school association flow
+experiments.SCHOOL_ASSOCIATION_V2 = 'school_association_v2';
 
 /**
  * This was a gamified version of the finish dialog, built in 2018,

dashboard/app/views/devise/registrations/_finish_sign_up.html.haml

@@ -214,7 +214,7 @@
         = f.hidden_field :terms_of_service_version, value: User::TERMS_OF_SERVICE_VERSIONS.last
         = t('terms_interstitial.accept_tos', tos_url: CDO.code_org_url('/tos'), privacy_url: CDO.code_org_url('/privacy'), markdown: true).html_safe
 
-    %button.submit= t('signup_form.go_to_account')
+    %button.submit{:id => 'signup_finish_submit'}= t('signup_form.go_to_account')
 
 :javascript
   // Selects 'Teacher' as the user type

dashboard/test/ui/features/acquisition_products/sign_up.feature

@@ -0,0 +1,22 @@
+@eyes
+Feature: Teacher can create a new account
+
+Scenario: Teacher can create an account with the new school association flow
+
+  Given I am on "http://studio.code.org/users/sign_up"
+  And I press keys "my@validemail.com" for element "#user_email"
+  And I press keys "password" for element "#user_password"
+  And I press keys "password" for element "#user_password_confirmation"
+  And I press "#signup_form_submit" using jQuery
+  # Add the experiment flag
+  And I am on "http://studio.code.org/users/sign_up?enableExperiments=school_association_v2"
+  And I press "select-user-type-teacher"
+  And I press keys "myDisplayName" for element "#user_name"
+  And I select the "United States" option in dropdown "uitest-country-dropdown"
+  And I press keys "98112" for element "#uitest-school-zip"
+  And I select the "Holy Names Academy" option in dropdown "uitest-school-dropdown"
+  And I open my eyes to test "School Association"
+  And I see no difference for "School Association: all fields"
+  When I press "user_email_preference_opt_in_no"
+  And I press "#signup_finish_submit" using jQuery
+  And I wait until I see selector "#uitest-accept-section-creation"