Remove hardcoded dropdown start year to fix new year Cypress bug (#629)

* Make start year code common and use in cypress instead of hardcoding 2015

* Turn getYearRange into constant and clarify comment

* Fix lint

cypress/integration/hidden-features.spec.ts

@@ -141,7 +141,7 @@ it('Test that only one semester button shows', () => {
   cy.get('[data-cyId=newSemester-seasonWrapper]').click();
   cy.get('[data-cyId=newSemester-seasonItem]').first().click();
 
-  // click 2015
+  // click oldest year
   cy.get('[data-cyId=newSemester-yearWrapper]').click();
   cy.get('[data-cyId=newSemester-yearItem]').first().click();
 

cypress/integration/test.spec.ts

@@ -3,6 +3,10 @@
  * Can and should be expanded on in more files to test more specific functionality and ensure future bugs are caught earlier
  */
 
+import { getCurrentYear, yearRange } from '../../src/utilities';
+
+const startYear = getCurrentYear() - yearRange;
+
 // Before running tests, starts on landing page, logs in to firebase, then visits the dashboard
 // Log in occurs with TEST_UID of the courseplan testing account using a function from the cypress-firebase package
 before('Visit site logged in', () => {
@@ -26,35 +30,35 @@ it('Delete all existing semesters, if any exist', () => {
 });
 
 // Confirm that a semester can be added to the plan
-it('Add a semester (Fall 2015)', () => {
+it('Add a semester (Fall of oldest year)', () => {
   // open the new semester modal
   cy.get('[data-cyId=semesterView-addSemesterButton]').click();
 
   // click Fall
   cy.get('[data-cyId=newSemester-seasonWrapper]').click();
   cy.get('[data-cyId=newSemester-seasonItem]').first().click();
 
-  // click 2015
+  // click oldest year
   cy.get('[data-cyId=newSemester-yearWrapper]').click();
   cy.get('[data-cyId=newSemester-yearItem]').first().click();
 
   // add semester
   cy.get('[data-cyId=modal-button]').click();
 
   // confirm the oldest semester is the newly added one
-  cy.get('[data-cyId=semesterName]').last().contains('Fall 2015');
+  cy.get('[data-cyId=semesterName]').last().contains(`Fall ${startYear}`);
 });
 
 // Confirm that duplicate semesters cannot be added
-it('Fail to add a duplicate semester (Fall 2015)', () => {
+it('Fail to add a duplicate semester', () => {
   // because a semester exists, get semester-addSemesterButton instead of semesterVIew-addSemesterButton
   cy.get('[data-cyId=semester-addSemesterButton]').click();
 
   // click fall
   cy.get('[data-cyId=newSemester-seasonWrapper]').first().click();
   cy.get('[data-cyId=newSemester-seasonItem]').first().click();
 
-  // click 2015
+  // click oldest year
   cy.get('[data-cyId=newSemester-yearWrapper]').first().click();
   cy.get('[data-cyId=newSemester-yearItem]').first().click();
 
@@ -66,7 +70,7 @@ it('Fail to add a duplicate semester (Fall 2015)', () => {
 });
 
 // Confirm that the newly added semester can be edited
-it('Edit a semester (Fall 2015 -> Spring 2016)', () => {
+it('Edit a semester (Fall of oldest year -> Spring of second oldest year)', () => {
   // open the edit semester menu
   cy.get('[data-cyId=semesterMenu]').first().click();
   cy.get('[data-cyId=semesterMenu-edit]').click();
@@ -75,13 +79,15 @@ it('Edit a semester (Fall 2015 -> Spring 2016)', () => {
   cy.get('[data-cyId=newSemester-seasonWrapper]').last().click();
   cy.get('[data-cyId=newSemester-seasonItem]').eq(1).click();
 
-  // click 2016
+  // click second oldest year
   cy.get('[data-cyId=newSemester-yearWrapper]').last().click();
   cy.get('[data-cyId=newSemester-yearItem]').eq(1).click();
 
   // finish editing and confirm it has been updated
   cy.get('[data-cyId=modal-button]').click();
-  cy.get('[data-cyId=semesterName]').last().contains('Spring 2016');
+  cy.get('[data-cyId=semesterName]')
+    .last()
+    .contains(`Spring ${startYear + 1}`);
 });
 
 // Test that you can change entrance year, grad year, colleges and majors. A later requirements test is dependent on these choices

src/components/Modals/Onboarding/OnboardingBasic.vue

@@ -143,7 +143,7 @@
 <script lang="ts">
 import { PropType, defineComponent } from 'vue';
 import reqsData from '@/requirements/typed-requirement-json';
-import { clickOutside, getCurrentYear } from '@/utilities';
+import { clickOutside, getCurrentYear, yearRange } from '@/utilities';
 import OnboardingBasicMultiDropdown from './OnboardingBasicMultiDropdown.vue';
 import OnboardingBasicSingleDropdown from './OnboardingBasicSingleDropdown.vue';
 
@@ -232,7 +232,6 @@ export default defineComponent({
     },
     semesters(): Readonly<Record<string, string>> {
       const semsDict: Record<string, string> = {};
-      const yearRange = 6;
       const curYear = getCurrentYear();
       for (let i = -yearRange; i <= yearRange; i += 1) {
         const yr = String(curYear + i);

src/components/Modals/SelectSemester.vue

@@ -97,7 +97,7 @@
 
 <script lang="ts">
 import { PropType, defineComponent } from 'vue';
-import { getCurrentSeason, getCurrentYear, clickOutside } from '@/utilities';
+import { getCurrentSeason, getCurrentYear, clickOutside, yearRange } from '@/utilities';
 import store from '@/store';
 
 import fall from '@/assets/images/fallEmoji.svg';
@@ -125,8 +125,6 @@ type Data = {
   };
 };
 
-const yearRange = 6;
-
 export default defineComponent({
   props: {
     currentSemesters: {

src/utilities.ts

@@ -44,6 +44,10 @@ export function getCurrentYear(): number {
   return new Date().getFullYear();
 }
 
+// the number of year options to include in dropdowns before and after the current year
+// ex. if the current year is 2022, and yearRange is 6, then we want to display years from 2016-2028
+export const yearRange = 6;
+
 export function getCollegeFullName(acronym: string | undefined): string {
   // Return empty string if college is not in requirementJSON
   const college = acronym ? requirementJSON.college[acronym] : null;