Refactor description to instructions

ajuvonen · Mar 19, 2024 · 8da088c · 8da088c
1 parent c5a61d5
commit 8da088c
Show file tree

Hide file tree

Showing 23 changed files with 68 additions and 68 deletions.
diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts
@@ -31,7 +31,7 @@ Cypress.Commands.add('addTraining', (addWeek = true) => {
     .getByTestId('edit-training-duration')
     .find('input')
     .type('.5')
-    .getByTestId('edit-training-description')
+    .getByTestId('edit-training-instructions')
     .type('Take it easy')
     .getByTestId('edit-training-intensity')
     .type('{leftarrow}{rightarrow}')

diff --git a/src/components/EditTrainingDialog.vue b/src/components/EditTrainingDialog.vue
@@ -39,7 +39,7 @@ const handleSave = async () => {
 const rules = computed(() => ({
   title: {maxLength: maxLength(30)},
   location: {maxLength: maxLength(40)},
-  description: {maxLength: maxLength(2000)},
+  instructions: {maxLength: maxLength(2000)},
   duration: {
     required,
     between: between(0, settings.value.unitOfTime === 'm' ? 360 : 6),
@@ -112,14 +112,14 @@ const resetAndClose = () => {
           data-test-id="edit-training-duration"
         />
         <v-textarea
-          v-model="v$.description.$model"
-          :label="t('editTraining.description')"
-          :error-messages="getValidationErrors(v$.description.$errors)"
+          v-model="v$.instructions.$model"
+          :label="t('editTraining.instructions')"
+          :error-messages="getValidationErrors(v$.instructions.$errors)"
           clearable
           maxlength="2000"
           no-resize
           counter
-          data-test-id="edit-training-description"
+          data-test-id="edit-training-instructions"
         />
         <v-label for="edit-training-intensity">{{ $t('editTraining.intensity') }}</v-label>
         <v-slider

diff --git a/src/components/TrainingCard.vue b/src/components/TrainingCard.vue
@@ -18,9 +18,9 @@ const props = defineProps<{
 const {settings} = storeToRefs(useScheduleStore());
 
 const appStateStore = useAppStateStore();
-const {openDescriptions} = storeToRefs(appStateStore);
+const {visibleInstructions} = storeToRefs(appStateStore);
 
-const isDescriptionOpen = computed(() => openDescriptions.value.includes(props.training.id));
+const isDescriptionOpen = computed(() => visibleInstructions.value.includes(props.training.id));
 
 const {isSmallScreen} = useScreen();
 </script>

diff --git a/src/components/TrainingCardActions.vue b/src/components/TrainingCardActions.vue
@@ -16,7 +16,7 @@ const menuOpen = ref(false);
 const {deleteTraining, toggleCompletion} = useScheduleStore();
 
 const appStateStore = useAppStateStore();
-const {openEditTrainingDialog, toggleShowDescription} = appStateStore;
+const {openEditTrainingDialog, toggleShowInstructions} = appStateStore;
 
 const openButton = ref<VBtn | null>(null);
 
@@ -33,14 +33,14 @@ watch(
 <template>
   <v-card-actions class="justify-end">
     <v-btn
-      v-if="training.description"
+      v-if="training.instructions"
       ref="openButton"
       :disabled="disabled"
       class="training-card__more-button"
       variant="flat"
       color="transparent"
       prepend-icon="mdi-information"
-      @click="toggleShowDescription(training.id)"
+      @click="toggleShowInstructions(training.id)"
       >{{ $t('general.more') }}</v-btn
     >
     <v-menu v-model="menuOpen" location="top center" :close-on-content-click="false">

diff --git a/src/components/TrainingCardInstructions.vue b/src/components/TrainingCardInstructions.vue
@@ -12,7 +12,7 @@ const props = defineProps<{
 }>();
 
 const appStateStore = useAppStateStore();
-const {toggleShowDescription} = appStateStore;
+const {toggleShowInstructions} = appStateStore;
 
 const closeButton = ref<VBtn | null>(null);
 
@@ -36,7 +36,7 @@ watch(() => props.show, async (value) => {
     >
       <v-card-text>
         <div class="training-card__instructions">
-          {{ training.description }}
+          {{ training.instructions }}
         </div>
       </v-card-text>
       <v-card-actions class="justify-end">
@@ -46,7 +46,7 @@ watch(() => props.show, async (value) => {
           variant="flat"
           color="transparent"
           prepend-icon="mdi-close"
-          @click="toggleShowDescription(training.id)"
+          @click="toggleShowInstructions(training.id)"
           >{{ $t('general.close') }}</v-btn
         >
       </v-card-actions>

diff --git a/src/components/WeekSupplement.vue b/src/components/WeekSupplement.vue
@@ -31,7 +31,7 @@ const {weekdays} = useWeekDays();
           />
           {{ training.title || t(`activities.${training.activity}`) }}:&nbsp;</span
         >
-        <span v-if="training.description">{{ training.description }}</span>
+        <span v-if="training.instructions">{{ training.instructions }}</span>
         <i v-else>{{ t('weekSupplement.noInstruction') }}</i>
       </li>
     </ul>

diff --git a/src/components/__tests__/EditTrainingDialog.spec.ts b/src/components/__tests__/EditTrainingDialog.spec.ts
@@ -26,7 +26,7 @@ describe('EditTrainingDialog', () => {
   it('displays correct data', () => {
     appStateStore.trainingData = getEmptyTraining({
       activity: 'boxing',
-      description: 'Light training at the gym',
+      instructions: 'Light training at the gym',
       title: 'Sparring',
       location: 'Unisport Gym',
     });
@@ -38,7 +38,7 @@ describe('EditTrainingDialog', () => {
       card.findByTestId('edit-training-duration').find<HTMLInputElement>('input').element.value,
     ).toBe('1');
     expect(
-      card.findByTestId('edit-training-description').find<HTMLTextAreaElement>('textarea').element
+      card.findByTestId('edit-training-instructions').find<HTMLTextAreaElement>('textarea').element
         .value,
     ).toBe('Light training at the gym');
     expect(

diff --git a/src/components/__tests__/SimpleTrainingCard.spec.ts b/src/components/__tests__/SimpleTrainingCard.spec.ts
@@ -7,7 +7,7 @@ import SimpleTrainingCard from '@/components/SimpleTrainingCard.vue';
 
 const basicTraining: Training = getEmptyTraining({
   activity: 'boxing',
-  description: 'Sparring at the gym',
+  instructions: 'Sparring at the gym',
   location: 'Total wreck gym',
 });
 

diff --git a/src/components/__tests__/TrainingCard.spec.ts b/src/components/__tests__/TrainingCard.spec.ts
@@ -7,7 +7,7 @@ import {getEmptyTraining} from '@/utils';
 
 const basicTraining: Training = getEmptyTraining({
   activity: 'boxing',
-  description: 'Sparring at the gym',
+  instructions: 'Sparring at the gym',
   location: 'Total wreck gym',
 });
 

diff --git a/src/components/__tests__/TrainingCardActions.spec.ts b/src/components/__tests__/TrainingCardActions.spec.ts
@@ -29,7 +29,7 @@ describe('TrainingCardActions', () => {
   it('actions work', async () => {
     const wrapper = mount(TrainingCardActions, {
       props: {
-        training: getEmptyTraining({description: 'Test Description'}),
+        training: getEmptyTraining({instructions: 'Test Instructions'}),
         disabled: false,
       },
     });
@@ -47,19 +47,19 @@ describe('TrainingCardActions', () => {
     const trainingId = uuid();
     const wrapper = mount(TrainingCardActions, {
       props: {
-        training: getEmptyTraining({id: trainingId, description: 'Test Description'}),
+        training: getEmptyTraining({id: trainingId, instructions: 'Test Instructions'}),
         disabled: false,
       },
     });
     expect(wrapper.find('.training-card__instructions').exists()).toBe(false);
     await wrapper.find('.training-card__more-button').trigger('click');
-    expect(appStateStore.toggleShowDescription).toHaveBeenCalledWith(trainingId);
+    expect(appStateStore.toggleShowInstructions).toHaveBeenCalledWith(trainingId);
   });
 
   it('disabled prop works', async () => {
     const wrapper = mount(TrainingCardActions, {
       props: {
-        training: getEmptyTraining({description: 'Test Description'}),
+        training: getEmptyTraining({instructions: 'Test Instructions'}),
         disabled: true,
       },
     });

diff --git a/src/components/__tests__/TrainingCardInstructions.spec.ts b/src/components/__tests__/TrainingCardInstructions.spec.ts
@@ -13,10 +13,10 @@ describe('TrainingCardInstructions', () => {
   });
 
   it('mounts', () => {
-    const description = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit';
+    const instructions = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit';
     const wrapper = mount(TrainingCardInstructions, {
       props: {
-        training: getEmptyTraining({description}),
+        training: getEmptyTraining({instructions}),
         show: true,
       },
     });
@@ -44,6 +44,6 @@ describe('TrainingCardInstructions', () => {
     });
     expect(wrapper.find('.training-card__instructions').exists()).toBe(true);
     await wrapper.find('.training-card__instructions__close-button').trigger('click');
-    expect(appStateStore.toggleShowDescription).toHaveBeenCalledWith(trainingId);
+    expect(appStateStore.toggleShowInstructions).toHaveBeenCalledWith(trainingId);
   })
 });
diff --git a/src/components/__tests__/WeekSupplement.spec.ts b/src/components/__tests__/WeekSupplement.spec.ts
@@ -9,7 +9,7 @@ describe('WeekSupplement', () => {
       props: {
         trainings: [
           getEmptyTraining({activity: 'running'}),
-          getEmptyTraining({activity: 'swimming', description: 'swim slow'}),
+          getEmptyTraining({activity: 'swimming', instructions: 'swim slow'}),
         ],
         dayIndex: 0,
       },

diff --git a/src/components/__tests__/__snapshots__/EditTrainingDialog.spec.ts.snap b/src/components/__tests__/__snapshots__/EditTrainingDialog.spec.ts.snap
@@ -209,7 +209,7 @@ exports[`EditTrainingDialog > mounts 1`] = `
           <!---->
         </div>
       </div>
-      <div data-v-6b8ac3b4="" class="v-input v-input--horizontal v-input--density-default v-locale--is-ltr v-textarea v-text-field v-textarea--no-resize" data-test-id="edit-training-description">
+      <div data-v-6b8ac3b4="" class="v-input v-input--horizontal v-input--density-default v-locale--is-ltr v-textarea v-text-field v-textarea--no-resize" data-test-id="edit-training-instructions">
         <!---->
         <div class="v-input__control">
           <div class="v-field v-field--appended v-field--variant-filled v-theme--light v-locale--is-ltr">

diff --git a/src/components/__tests__/appStateStore.spec.ts b/src/components/__tests__/appStateStore.spec.ts
@@ -46,7 +46,7 @@ describe('appStateStore', () => {
       dayIndex: 0,
       activity: 'running',
       title: 'test',
-      description: 'test',
+      instructions: 'test',
       duration: 1,
       intensity: 1,
       location: 'test',
@@ -58,11 +58,11 @@ describe('appStateStore', () => {
     expect(store.trainingData).toEqual(training);
   });
 
-  it('toggles show description', () => {
+  it('toggles show instructions', () => {
     const trainingId = uuid();
-    store.toggleShowDescription(trainingId);
-    expect(store.openDescriptions).toEqual([trainingId]);
-    store.toggleShowDescription(trainingId);
-    expect(store.openDescriptions).toEqual([]);
+    store.toggleShowInstructions(trainingId);
+    expect(store.visibleInstructions).toEqual([trainingId]);
+    store.toggleShowInstructions(trainingId);
+    expect(store.visibleInstructions).toEqual([]);
   });
 });
diff --git a/src/components/__tests__/calendarExport.spec.ts b/src/components/__tests__/calendarExport.spec.ts
@@ -43,15 +43,15 @@ describe('useCalendarExport', () => {
             weekId: weekId1,
             activity: 'running',
             title: 'Test Training',
-            description: 'Test Description',
+            instructions: 'Test Instructions',
             location: 'Test Location',
           }),
           getEmptyTraining({
             weekId: weekId1,
             activity: 'swimming',
             dayIndex: 1,
             title: 'Test Training 2',
-            description: 'Test Description 2',
+            instructions: 'Test Instructions 2',
             duration: 0.5,
             intensity: Intensity.DEMANDING,
             location: 'Test Location 2',
@@ -61,7 +61,7 @@ describe('useCalendarExport', () => {
             activity: 'sprint',
             dayIndex: 1,
             title: 'Test Training 3',
-            description: 'Test Description 3',
+            instructions: 'Test Instructions 3',
             intensity: Intensity.HEAVY,
             location: 'Test Location 3',
           }),
@@ -75,15 +75,15 @@ describe('useCalendarExport', () => {
             activity: 'running',
             dayIndex: 6,
             title: 'Test Training 4',
-            description: 'Test Description 4',
+            instructions: 'Test Instructions 4',
             location: 'Test Location 4',
           }),
           getEmptyTraining({
             weekId: weekId2,
             activity: 'swimming',
             dayIndex: 6,
             title: 'Test Training 5',
-            description: 'Test Description 5',
+            instructions: 'Test Instructions 5',
             intensity: Intensity.LIGHT,
             location: 'Test Location 5',
           }),
@@ -102,7 +102,7 @@ describe('useCalendarExport', () => {
 
     // Assertions for the first activity
     expect(events[0].title).toBe('Test Training');
-    expect(events[0].description).toBe('Test Description');
+    expect(events[0].description).toBe('Test Instructions');
     expect(events[0].duration.minutes).toBe(60);
     expect(events[0].location).toBe('Test Location');
     expect(events[0].categories).toEqual(['Running', 'Normal']);
@@ -116,7 +116,7 @@ describe('useCalendarExport', () => {
 
     // Assertions for the second activity
     expect(events[1].title).toBe('Test Training 2');
-    expect(events[1].description).toBe('Test Description 2');
+    expect(events[1].description).toBe('Test Instructions 2');
     expect(events[1].duration.minutes).toBe(30);
     expect(events[1].location).toBe('Test Location 2');
     expect(events[1].categories).toEqual(['Swimming', 'Demanding']);
@@ -130,7 +130,7 @@ describe('useCalendarExport', () => {
 
     // Assertions for the third activity
     expect(events[2].title).toBe('Test Training 3');
-    expect(events[2].description).toBe('Test Description 3');
+    expect(events[2].description).toBe('Test Instructions 3');
     expect(events[2].duration.minutes).toBe(60);
     expect(events[2].location).toBe('Test Location 3');
     expect(events[2].categories).toEqual(['Sprint', 'Heavy']);
@@ -144,7 +144,7 @@ describe('useCalendarExport', () => {
 
     // Assertions for the fourth activity
     expect(events[3].title).toBe('Test Training 4');
-    expect(events[3].description).toBe('Test Description 4');
+    expect(events[3].description).toBe('Test Instructions 4');
     expect(events[3].duration.minutes).toBe(60);
     expect(events[3].location).toBe('Test Location 4');
     expect(events[3].categories).toEqual(['Running', 'Normal']);
@@ -158,7 +158,7 @@ describe('useCalendarExport', () => {
 
     // Assertions for the fifth activity
     expect(events[4].title).toBe('Test Training 5');
-    expect(events[4].description).toBe('Test Description 5');
+    expect(events[4].description).toBe('Test Instructions 5');
     expect(events[4].duration.minutes).toBe(60);
     expect(events[4].location).toBe('Test Location 5');
     expect(events[4].categories).toEqual(['Swimming', 'Light']);
@@ -181,15 +181,15 @@ describe('useCalendarExport', () => {
             weekId: weekId1,
             activity: 'running',
             title: 'Test Training',
-            description: 'Test Description',
+            instructions: 'Test Instructions',
             location: 'Test Location',
           }),
           getEmptyTraining({
             weekId: weekId1,
             activity: 'swimming',
             intensity: Intensity.DEMANDING,
             title: 'Test Training 2',
-            description: 'Test Description 2',
+            instructions: 'Test Instructions 2',
             duration: 0.5,
             location: 'Test Location 2',
           }),
@@ -209,7 +209,7 @@ describe('useCalendarExport', () => {
 
     // Assertions for the first activity
     expect(events[0].title).toBe('Test Training');
-    expect(events[0].description).toBe('Test Description');
+    expect(events[0].description).toBe('Test Instructions');
     expect(events[0].duration.minutes).toBe(60);
     expect(events[0].location).toBe('Test Location');
     expect(events[0].categories).toEqual(['Running', 'Normal']);
@@ -223,7 +223,7 @@ describe('useCalendarExport', () => {
 
     // Assertions for the second activity
     expect(events[1].title).toBe('Test Training 2');
-    expect(events[1].description).toBe('Test Description 2');
+    expect(events[1].description).toBe('Test Instructions 2');
     expect(events[1].duration.minutes).toBe(30);
     expect(events[1].location).toBe('Test Location 2');
     expect(events[1].categories).toEqual(['Swimming', 'Demanding']);