adds tests

Author: sandragjacinto

src/views/TutorPage.vue

@@ -27,13 +27,13 @@ const stepToAction = {
 </script>
 <template>
   <div class="content-centered-wrapper">
-    <StepsIndicator :step="step" :setStep="setStep" stepsLength="3" />
+    <StepsIndicator :step="step" :setStep="setStep" :stepsLength="3" />
     <div class="layout-flex">
       <div class="flex-wrap" :class="{ shrink: step === 3 }">
-        <FirstStep :disabled="step > 1" v-if="step >= 1" />
-        <SecondStep :disabled="step > 2" :visible="step >= 2" />
+        <FirstStep data-test="fist-step" :disabled="step > 1" v-if="step >= 1" />
+        <SecondStep data-test="second-step" :disabled="step > 2" :visible="step >= 2" />
       </div>
-      <ThirdStep :visible="step >= 3" />
+      <ThirdStep data-test="third-step" :visible="step >= 3" />
     </div>
     <div class="actions">
       <button class="button" v-if="step > 1" @click="step = step - 1">previous</button>

src/views/__tests__/TutorPage.test.ts

@@ -0,0 +1,10 @@
+import { describe, it, expect } from 'vitest';
+import { shallowMount } from '@vue/test-utils';
+import TutorPage from '../TutorPage.vue';
+
+describe('TutorPage', () => {
+  it('renders properly', () => {
+    const wrapper = shallowMount(TutorPage);
+    expect(wrapper.element).toMatchSnapshot();
+  });
+});

src/views/__tests__/__snapshots__/TutorPage.test.ts.snap

@@ -0,0 +1,53 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`TutorPage > renders properly 1`] = `
+<div
+  class="content-centered-wrapper"
+  data-v-8a8621cb=""
+>
+  <steps-indicator-stub
+    data-v-8a8621cb=""
+    setstep="[Function]"
+    step="1"
+    stepslength="3"
+  />
+  <div
+    class="layout-flex"
+    data-v-8a8621cb=""
+  >
+    <div
+      class="flex-wrap"
+      data-v-8a8621cb=""
+    >
+      <first-step-stub
+        data-test="fist-step"
+        data-v-8a8621cb=""
+        disabled="false"
+      />
+      <second-step-stub
+        data-test="second-step"
+        data-v-8a8621cb=""
+        disabled="false"
+        visible="false"
+      />
+    </div>
+    <third-step-stub
+      data-test="third-step"
+      data-v-8a8621cb=""
+      visible="false"
+    />
+  </div>
+  <div
+    class="actions"
+    data-v-8a8621cb=""
+  >
+    <!--v-if-->
+    <button
+      class="button"
+      data-v-8a8621cb=""
+    >
+      next
+    </button>
+  </div>
+</div>
+`;