From 49e6d3cdf8eb4d1e791af4b71f08f7e058e70f31 Mon Sep 17 00:00:00 2001
From: ajuvonen <ajuvonen@hotmail.com>
Date: Fri, 9 Feb 2024 11:24:55 +0200
Subject: [PATCH] Test training rating functionality

---
 cypress/e2e/schedule.cy.ts                    | 27 ++++++++++++
 src/components/TrainingRating.vue             |  2 +-
 src/components/__tests__/TrainingCard.spec.ts |  2 +
 .../__tests__/TrainingRating.spec.ts          | 42 +++++++++++++++++++
 .../__snapshots__/TrainingRating.spec.ts.snap | 25 +++++++++++
 5 files changed, 97 insertions(+), 1 deletion(-)
 create mode 100644 src/components/__tests__/TrainingRating.spec.ts
 create mode 100644 src/components/__tests__/__snapshots__/TrainingRating.spec.ts.snap

diff --git a/cypress/e2e/schedule.cy.ts b/cypress/e2e/schedule.cy.ts
index c97be9e..83c250b 100644
--- a/cypress/e2e/schedule.cy.ts
+++ b/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');
+  });
 });
diff --git a/src/components/TrainingRating.vue b/src/components/TrainingRating.vue
index f8dce97..e1e61a7 100644
--- a/src/components/TrainingRating.vue
+++ b/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)"
diff --git a/src/components/__tests__/TrainingCard.spec.ts b/src/components/__tests__/TrainingCard.spec.ts
index 12c49aa..e93ca2b 100644
--- a/src/components/__tests__/TrainingCard.spec.ts
+++ b/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();
   });
 });
diff --git a/src/components/__tests__/TrainingRating.spec.ts b/src/components/__tests__/TrainingRating.spec.ts
new file mode 100644
index 0000000..79193db
--- /dev/null
+++ b/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);
+  });
+});
diff --git a/src/components/__tests__/__snapshots__/TrainingRating.spec.ts.snap b/src/components/__tests__/__snapshots__/TrainingRating.spec.ts.snap
new file mode 100644
index 0000000..2c91336
--- /dev/null
+++ b/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>"
+`;