Test training rating functionality

cypress/e2e/schedule.cy.ts

@@ -63,4 +63,31 @@ describe('Schedule tests', () => {
     cy.toRoute('schedule');
     cy.getByTestId('week-0').should('not.exist');
   });
+
+  it('completes and rates trainings', () => {
+    cy.addTraining();
+    cy.get('.training-card__action-button').click();
+    cy.get('.training-card__complete-button').click();
+    cy.get('.training-card__rating button:nth-child(1) i').should('have.class', 'mdi-star-outline');
+    cy.get('.training-card__rating button:nth-child(2) i').should('have.class', 'mdi-star-outline');
+    cy.get('.training-card__rating button:nth-child(3) i').should('have.class', 'mdi-star-outline');
+    cy.get('.training-card__rating button:nth-child(4) i').should('have.class', 'mdi-star-outline');
+    cy.get('.training-card__rating button:nth-child(5) i').should('have.class', 'mdi-star-outline');
+    cy.get('.training-card__rating button').eq(0).click();
+    cy.get('.training-card__rating button:nth-child(1) i').should('have.class', 'mdi-star');
+    cy.get('.training-card__rating button').eq(1).click();
+    cy.get('.training-card__rating button:nth-child(2) i').should('have.class', 'mdi-star');
+    cy.get('.training-card__rating button').eq(2).click();
+    cy.get('.training-card__rating button:nth-child(3) i').should('have.class', 'mdi-star');
+    cy.get('.training-card__rating button').eq(3).click();
+    cy.get('.training-card__rating button:nth-child(4) i').should('have.class', 'mdi-star');
+    cy.get('.training-card__rating button').eq(4).click();
+    cy.get('.training-card__rating button:nth-child(5) i').should('have.class', 'mdi-star');
+    cy.get('.training-card__rating button').eq(4).click();
+    cy.get('.training-card__rating button:nth-child(1) i').should('have.class', 'mdi-star-outline');
+    cy.get('.training-card__rating button:nth-child(2) i').should('have.class', 'mdi-star-outline');
+    cy.get('.training-card__rating button:nth-child(3) i').should('have.class', 'mdi-star-outline');
+    cy.get('.training-card__rating button:nth-child(4) i').should('have.class', 'mdi-star-outline');
+    cy.get('.training-card__rating button:nth-child(5) i').should('have.class', 'mdi-star-outline');
+  });
 });

src/components/TrainingRating.vue

@@ -20,7 +20,7 @@ const baseAttributes = computed(() => (rating: Rating) => ({
 }));
 </script>
 <template>
-  <div class="d-flex justify-space-evenly">
+  <div class="d-flex justify-space-evenly training-card__rating">
     <v-btn
       v-bind="baseAttributes(1)"
       @click="updateRating(training, 1)"

src/components/__tests__/TrainingCard.spec.ts

@@ -75,7 +75,9 @@ describe('TrainingCard', () => {
     const actions = wrapper.findComponent(VList);
     await actions.find('.training-card__delete-button').trigger('click');
     await actions.find('.training-card__edit-button').trigger('click');
+    await actions.find('.training-card__complete-button').trigger('click');
     expect(scheduleStore.deleteTraining).toHaveBeenCalledOnce();
     expect(appStateStore.openEditTrainingDialog).toHaveBeenCalledOnce();
+    expect(scheduleStore.toggleCompletion).toHaveBeenCalledOnce();
   });
 });

src/components/__tests__/TrainingRating.spec.ts

@@ -0,0 +1,42 @@
+import {mount} from '@vue/test-utils';
+import {describe, it, expect, beforeEach} from 'vitest';
+import {useScheduleStore} from '@/stores/schedule';
+import TrainingRating from '@/components/TrainingRating.vue';
+import {getEmptyTraining} from '@/utils';
+
+describe('TrainingCard', () => {
+  let scheduleStore: ReturnType<typeof useScheduleStore>;
+
+  beforeEach(() => {
+    scheduleStore = useScheduleStore();
+  });
+
+  it('mounts', () => {
+    const wrapper = mount(TrainingRating, {
+      props: {
+        training: getEmptyTraining(),
+      },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it('calls store on rating change', async () => {
+    const training = getEmptyTraining();
+    const wrapper = mount(TrainingRating, {
+      props: {
+        training: training,
+      },
+    });
+
+    await wrapper.find('button:nth-child(1)').trigger('click');
+    expect(scheduleStore.updateRating).toHaveBeenLastCalledWith(training, 1);
+    await wrapper.find('button:nth-child(2)').trigger('click');
+    expect(scheduleStore.updateRating).toHaveBeenLastCalledWith(training, 2);
+    await wrapper.find('button:nth-child(3)').trigger('click');
+    expect(scheduleStore.updateRating).toHaveBeenLastCalledWith(training, 3);
+    await wrapper.find('button:nth-child(4)').trigger('click');
+    expect(scheduleStore.updateRating).toHaveBeenLastCalledWith(training, 4);
+    await wrapper.find('button:nth-child(5)').trigger('click');
+    expect(scheduleStore.updateRating).toHaveBeenLastCalledWith(training, 5);
+  });
+});

src/components/__tests__/__snapshots__/TrainingRating.spec.ts.snap

@@ -0,0 +1,25 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`TrainingCard > mounts 1`] = `
+"<div class="d-flex justify-space-evenly training-card__rating"><button type="button" class="v-btn v-btn--elevated v-btn--icon v-theme--light bg-transparent v-btn--density-default elevation-0 v-btn--size-small v-btn--variant-elevated"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+    <!----><span class="v-btn__content" data-no-activator=""><i class="mdi-star-outline mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i></span>
+    <!---->
+    <!---->
+  </button><button type="button" class="v-btn v-btn--elevated v-btn--icon v-theme--light bg-transparent v-btn--density-default elevation-0 v-btn--size-small v-btn--variant-elevated"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+    <!----><span class="v-btn__content" data-no-activator=""><i class="mdi-star-outline mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i></span>
+    <!---->
+    <!---->
+  </button><button type="button" class="v-btn v-btn--elevated v-btn--icon v-theme--light bg-transparent v-btn--density-default elevation-0 v-btn--size-small v-btn--variant-elevated"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+    <!----><span class="v-btn__content" data-no-activator=""><i class="mdi-star-outline mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i></span>
+    <!---->
+    <!---->
+  </button><button type="button" class="v-btn v-btn--elevated v-btn--icon v-theme--light bg-transparent v-btn--density-default elevation-0 v-btn--size-small v-btn--variant-elevated"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+    <!----><span class="v-btn__content" data-no-activator=""><i class="mdi-star-outline mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i></span>
+    <!---->
+    <!---->
+  </button><button type="button" class="v-btn v-btn--elevated v-btn--icon v-theme--light bg-transparent v-btn--density-default elevation-0 v-btn--size-small v-btn--variant-elevated"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+    <!----><span class="v-btn__content" data-no-activator=""><i class="mdi-star-outline mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i></span>
+    <!---->
+    <!---->
+  </button></div>"
+`;