Thiết kế website giá rẻ

Question

<template>
  <v-dialog
    v-model="dialog"
    persistent
    :fullscreen="isMobile"
    max-width="755"
    style="z-index: 9999"
  >
    <v-card :class="isMobile ? 'rounded-0' : 'rounded-lg'" elevation="0" class="bg-white" flat>
      <template #prepend>
        <div>
          <v-chip
            class="font-weight-600"
            :color="!submitFeedback ? 'yellow-lighten-2' : 'success'"
            :style="{ background: !submitFeedback ? 'yellow-lighten-1' : 'green-lighten-1' }"
            label
          >
            <label class="text-uppercase">
              {{ !submitFeedback ? BookingStatus.FeedbackDue : BookingStatus.Done }}
            </label>
          </v-chip>
        </div>
      </template>
      <template #append>
        <v-avatar size="23" class="rounded-0">
          <v-img :src="Cross" @click="close()"></v-img>
        </v-avatar>
      </template>
      <v-card-item class="py-7">
        <v-row>
          <v-col cols="12" md="6">
            <div class="font-weight-600 title-3">????️ {{ getDateFormat }}</div>
            <div class="mt-5 d-flex align-center">
              <v-icon icon="mdi-clock-time-four-outline mr-2" />
              <label class="mr-4 font-weight-600 text-subtitle-1">
                {{ getStartTime }}
                <v-icon size="small" icon="mdi-arrow-right-thin" />
                {{ getEndTime }}
              </label>
              <v-chip>
                {{ setDialogData?.location }}
              </v-chip>
            </div>
          </v-col>
          <v-col cols="12" md="6" class="d-flex align-center">
            <div class="d-flex align-center">
              <v-avatar size="60" class="mr-5">
                <v-img :src="setDialogData?.expert_photo || DefaultCompany" />
              </v-avatar>
              <div class="d-flex flex-column">
                <div>
                  <h6 class="title-3 font-weight-600">
                    {{ setDialogData?.expert_name }}
                  </h6>
                </div>
                <div>
                  <p class="">
                    with
                    <v-avatar size="20" class="ml-3">
                      <v-img :src="setDialogData?.incubee_photo || DefaultCompany" />
                    </v-avatar>
                    {{ setDialogData?.incubee_name }}
                  </p>
                </div>
              </div>
            </div>
          </v-col>
        </v-row>
      </v-card-item>

      <!-- progress bar -->
      <div class="d-flex justify-center flex-column pa-8 bg-background">
        <p
          v-if="!isMobileComputed"
          class="title-5 text-md-center text-primary font-weight-600 text-center"
        >
          {{ currentStep }}/{{ totalSteps }}
        </p>
        <v-progress-linear
          :model-value="progressBarValue"
          class="text-md-center w-50 mb-8"
          color="primary"
        >
        </v-progress-linear>

        <!-- <v-card-text> -->
        <!-- stepper render -->
        <div class="form-container">
          <div v-for="(stepinput, index) in feedbackSteps" :key="stepinput.step">
            <div v-show="stepinput.step == currentStep" :class="stepinput.class">
              <div class="d-flex flex-row justify-space-between ga-6 mb-2 position-relative">
                <p class="font-weight-500 w-75 question-class">{{ stepinput.question }}</p>
                <v-avatar size="20" class="mt-1 rounded-0 pointer">
                  <v-img :src="QuestionMarkIcon" />
                </v-avatar>
              </div>
              <v-row
                v-if="stepinput.step === 1 || stepinput.step === 2 || stepinput.step === 3"
                class="position-absolute mt-0"
              >
                <v-col>
                  <v-chip
                    :color="stepinput.chipColor"
                    :class="stepinput.chipclass"
                    class="font-weight-600"
                    size="small"
                    label
                  >
                    {{ stepinput.tag }}
                  </v-chip>
                </v-col>
              </v-row>
              <p class="custom-text" v-if="stepinput.step === 4 || stepinput.step === 5">
                {{ stepinput.tag }}
              </p>
              <vee-form
                :validation-schema="stepinput.validations"
                as="form"
                :id="`myForm-${stepinput.step}`"
                @submit="submitOrNext"
              >
                <vee-field :name="stepinput.name" v-slot="{ field, errors }">
                  <component
                    v-model="formData[stepinput.name]"
                    :is="stepinput.component"
                    :key="`${stepinput.name}-${index}`"
                    :error-messages="errors"
                    :errors="errors"
                    :tags="stepinput.tags"
                    v-bind="dynamicProps(stepinput, field)"
                  />
                </vee-field>
              </vee-form>
            </div>
          </div>
        </div>
      </div>

      <div
        class="d-flex justify-space-between pa-8"
        :class="isMobileComputed ? 'bottom-navigation-container' : 'bg-background'"
      >
        <div
          v-if="currentStep === 1"
          :class="isMobileComputed && 'initial-text'"
          class="align-self-center align-items-center d-flex ga-3"
        >
          <p class="text-subtitle-1 font-weight-400">
            {{ $t("GLOBAL_COMPONENTS.FEEDBACK.LBL") }}
          </p>
          <v-chip
            class="font-weight-600 cursor-pointer click-btn-class"
            color="primary"
            variant="outlined"
            size="large"
          >
            {{ $t("GLOBAL_COMPONENTS.FEEDBACK.BTN_TXT") }}
          </v-chip>
        </div>

        <span
          v-if="currentStep > 1 && isMobileComputed"
          class="previous-btn-responsive"
          @click="previous"
        >
          {{ $t("GLOBAL_COMPONENTS.FEEDBACK.PREVIOUS_TXT") }}</span
        >
        <v-btn
          v-if="currentStep > 1 && !isMobileComputed"
          class="text-primary rounded-lg"
          size="x-large"
          variant="outlined"
          color="primary"
          @click="previous"
        >
          {{ $t("GLOBAL_COMPONENTS.FEEDBACK.PREVIOUS_QUESTION_TXT") }}
        </v-btn>
        <v-btn
          class="bg-primary rounded-lg"
          size="x-large"
          type="submit"
          :form="`myForm-${currentStep}`"
        >
          {{
            currentStep < 5
              ? isMobileComputed
                ? $t("GLOBAL_COMPONENTS.FEEDBACK.NEXT_TXT")
                : $t("GLOBAL_COMPONENTS.FEEDBACK.NEXT_QUESTION_TXT")
              : $t("GLOBAL_COMPONENTS.FEEDBACK.BTN_TXT")
          }}
        </v-btn>
      </div>
      <!-- </v-card-text> -->
    </v-card>
  </v-dialog>
  <base-feedback-dialog :rateDialog="rateDialog" :setDialogData="setDialogData" />
</template>



<script setup lang="ts">
import { useUiStore } from "@/store/UiStore";
import { toRef } from "vue";
import { watchEffect } from "vue";
import { ref } from "vue";
import { BookingStatus, IncubeeBookedOfficeHours } from "@/models/office-hours.model";
import Cross from "@assets/icons/cross.svg";
import { Ref } from "vue";
import { computed } from "vue";
import { Clock } from "@/utils/clock";
import { inject } from "vue";
import { clockKey } from "@/plugins/clock";
import DefaultCompany from "@assets/default_profile.jpg";
import QuestionMarkIcon from "../../assets/icons/circled-question.svg";
import { useOfficeHoursStore } from "@/store/OfficeHoursStore";
import { watch } from "vue";
import BaseRating from "@components/base/BaseRating.vue";
import BaseAmmenities from "@components/base/BaseAmmenities.vue";
import BaseFeedbackTag from "@components/base/BaseFeedbackTag.vue";
import i18n from "@/plugins/i18n";
import * as yup from "yup";

const emits = defineEmits();
const props = defineProps({
  openDialog: {
    type: Boolean,
    default: false,
  },
  setDialogData: {
    type: Object,
    default: {} as IncubeeBookedOfficeHours,
  },
});

const dialog = ref(false);
const rateDialog = ref(false);
const openDialog = toRef(props, "openDialog");
const setDialogData = toRef(props, "setDialogData") as Ref<IncubeeBookedOfficeHours>;
const uiStore = useUiStore();
const ohStore = useOfficeHoursStore();
const isMobile = uiStore.isMobileViewEnabled;
const submitFeedback = ref(ohStore.getSubmitFeedback);
const clock = inject(clockKey) as Clock;

const formData = ref<any>({});

const tags = [
  {
    value: 0,
    icon: "thumbup",
    iconType: "basesvg",
    text: i18n.global.t("GLOBAL_COMPONENTS.FEEDBACK.THUMB_UP_TXT"),
  },
  {
    value: 1,
    icon: "thumbdown",
    iconType: "basesvg",
    text: i18n.global.t("GLOBAL_COMPONENTS.FEEDBACK.THUMB_DOWN_TXT"),
  },
];

const isMobileComputed = computed(() => {
  return uiStore.isMobileViewEnabled;
});

const feedbackSteps = ref([
  {
    step: 1,
    component: BaseRating,
    name: "feedback_rating",
    label: "Share your rating",
    class: "",
    chipclass: "",
    chipColor: "#929BAE",
    validations: yup.object({
      feedback_rating: yup
        .string()
        .trim()
        .required(i18n.global.t("GLOBAL_COMPONENTS.FEEDBACK.STEPS.STEP_ONE.VALIDATION")),
    }),
    question: i18n.global.t("GLOBAL_COMPONENTS.FEEDBACK.STEPS.STEP_ONE.QUESTION"),
    tag: i18n.global.t("GLOBAL_COMPONENTS.FEEDBACK.STEPS.STEP_ONE.TAG"),
  },
  {
    step: 2,
    component: "v-textarea",
    name: "feedback_message_incubee",
    validations: yup.object({
      feedback_message_incubee: yup
        .string()
        .trim()
        .required(i18n.global.t("GLOBAL_COMPONENTS.FEEDBACK.STEPS.STEP_TWO.VALIDATION")),
    }),
    class: "custom-textarea-container",
    chipclass: "custom-chip",
    chipColor: "red",
    props: {
      variant: "outlined",
      "auto-grow": true,
      placeholder: "Please type here",
      color: "background",
    },
    question: i18n.global.t("GLOBAL_COMPONENTS.FEEDBACK.STEPS.STEP_TWO.QUESTION"),
    tag: i18n.global.t("GLOBAL_COMPONENTS.FEEDBACK.STEPS.STEP_TWO.TAG"),
  },
  {
    step: 3,
    component: "v-textarea",
    name: "feedback_message_staff",
    validations: yup.object({
      feedback_message_staff: yup
        .string()
        .trim()
        .required(i18n.global.t("GLOBAL_COMPONENTS.FEEDBACK.STEPS.STEP_THIRD.VALIDATION")),
    }),
    class: "custom-textarea-container",
    chipclass: "custom-chip",
    chipColor: "#2F86DF",
    props: {
      variant: "outlined",
      "auto-grow": true,
      placeholder: i18n.global.t("GLOBAL_COMPONENTS.FEEDBACK.STEPS.STEP_THIRD.PLACEHOLDER"),
      color: "background",
    },
    question: i18n.global.t("GLOBAL_COMPONENTS.FEEDBACK.STEPS.STEP_THIRD.QUESTION"),
    tag: i18n.global.t("GLOBAL_COMPONENTS.FEEDBACK.STEPS.STEP_THIRD.TAG"),
  },
  {
    step: 4,
    component: BaseAmmenities,
    name: "ammenities",
    question: i18n.global.t("GLOBAL_COMPONENTS.FEEDBACK.STEPS.STEP_FOUR.QUESTION"),
    tag: i18n.global.t("GLOBAL_COMPONENTS.FEEDBACK.STEPS.STEP_FOUR.TAG"),
    validations: yup.object({
      ammenities: yup
        .array()
        .min(1, i18n.global.t("GLOBAL_COMPONENTS.FEEDBACK.STEPS.STEP_FOUR.VALIDATION"))
        .required(i18n.global.t("GLOBAL_COMPONENTS.FEEDBACK.STEPS.STEP_FOUR.VALIDATION_TWO")),
    }),
    props: {
      options: [
        { text: "Preparedness", value: "Preparedness" },
        { text: "Punctuality", value: "Punctuality" },
        { text: "Responsiveness", value: "Responsiveness" },
        { text: "Relevance", value: "Relevance" },
        { text: "Politeness/Courtesy", value: "Politeness/Courtesy" },
      ],
    },
  },
  {
    step: 5,
    component: BaseFeedbackTag,
    name: "feedback_message_answer",
    validations: yup.object({
      feedback_message_answer: yup
        .number()
        .required(i18n.global.t("GLOBAL_COMPONENTS.FEEDBACK.EXPERT_MOBILE_VALIDATE.REQUIRED")),
    }),
    question: i18n.global.t("GLOBAL_COMPONENTS.FEEDBACK.STEPS.STEP_FIVE.QUESTION"),
    tags: tags,
    props: {
      textAlign: "center",
    },
  },
]);

const currentStep = ref(1);
const totalSteps = feedbackSteps.value.length;

const progressBarValue = computed(() => {
  return (currentStep.value / totalSteps) * 100;
});

const previous = () => {
  if (currentStep.value > 1) {
    currentStep.value--;
  }
};
const submitOrNext = () => {
  if (currentStep.value === totalSteps) {
    submitForm();
  } else {
    next();
  }
};

const next = () => {
  if (currentStep.value < totalSteps) {
    currentStep.value++;
  }
};

const clearAll = () => {
  formData.value = {};
  currentStep.value = 1;
};

const submitForm = () => {
  clearAll();
  close();
  uiStore.showSnackbar(i18n.global.t("GLOBAL_COMPONENTS.FEEDBACK.FEEDBACK_SNACKBAR_SUCCESS_MSG"));
};

watchEffect(() => {
  dialog.value = openDialog.value;
});

watch(
  () => ohStore.getSubmitFeedback,
  (newSubmitFeedback) => {
    submitFeedback.value = newSubmitFeedback;
  },
);

const getDateFormat = computed(
  () => !!clock && clock.parse(setDialogData.value.start_hour).toDateComplete(),
);
const getStartTime = computed(
  () => !!clock && clock.parse(setDialogData.value.start_hour).toTime(),
);
const getEndTime = computed(() => !!clock && clock.parse(setDialogData.value.end_hour).toTime());

const close = () => {
  dialog.value = !openDialog.value;
  emits("closeFeedbackDialolg");
};

const dynamicProps = (stepinput: any, field: any) => {
  const commonProps = {
    ...field,
    class: "mt-8",
  };

  if (stepinput.props) {
    return { ...commonProps, ...stepinput.props };
  }

  return commonProps;
};
</script>

<style scoped>
.form-container {
  padding: 30px;
  background: #ffffff;
  border-radius: 8px;
}

.question-class {
  font-size: 19px;
}

.bottom-navigation-container {
  background: #ffffff;
  position: sticky;
  bottom: 0;
}

.initial-text {
  flex-direction: column;
  max-width: 50%;
}

.click-btn-class {
  width: 105px;
}

.custom-textarea-container {
  position: relative;
}

.custom-chip {
  left: 16px;
  background-color: #ffffff;
  font-size: 14px;
  border: none;
  box-shadow: none;
  z-index: 2;
}

.custom-textarea {
  border-radius: 4px;
  border: 1px solid #e0e0e0;
  background-color: white !important;
}

.custom-textarea .v-textarea__slot {
  padding-top: 24px;
  border: none;
}

.custom-textarea label {
  display: none;
}
.custom-text {
  color: var(--Primary-Gris-fonc, #929bae);
  font-family: "General Sans", sans-serif;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%; /* Approximately 25.6px */
}
.previous-btn-responsive {
  color: #6c4fe0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  text-decoration: underline;
}
</style>
v

the above template open a dialog which render steper using dynamic components and props
each steper has validation field on click next it checks for validation

import { mount  } from "@vue/test-utils";
import OHFeedbackDialog from "@/components/office_hour/OHFeedbackDialog.vue";
import { createPinia } from "pinia";
import i18n from "@/plugins/i18n";



jest.mock("@/components/base/BaseFeedbackDialog.vue", () => ({
  props: ["setDialogData"],
}));

// Mock the Pinia store
jest.mock("@/store/UiStore", () => {
  return {
    useUiStore: jest.fn(() => ({
      isMobileViewEnabled: false,
    })),
  };
});

jest.mock("@/store/OfficeHoursStore", () => {
  return {
    useOfficeHoursStore: jest.fn(() => ({
      getSubmitFeedback: false,
    })),
  };
});

// Mock the inject function
jest.mock("vue", () => ({
  ...jest.requireActual("vue"),
  inject: jest.fn((key) => {
    if (key === "clockKey") {
      return {
        parse: jest.fn(() => ({
          toDateComplete: jest.fn(() => "mocked date"),
          toTime: jest.fn(() => "mocked time"),
        })),
      };
    }
  }),
}));

jest.mock("@/assets/default_profile.jpg", () => "mocked-image-path");

describe("OHFeedbackDialog.vue", () => {
  let store: any;

  beforeEach(() => {
    // Create a Pinia store instance for each test
    store = createPinia();
  });

  const mockSetDialogData = {
    id: "7bb6a2c7-ae60-47ea-a7cc-affb8b187c7c",
    program: "Mock Program",
    start_hour: "2023-05-02T02:00:00.000000+0000",
    end_hour: "2023-05-02T03:00:00.000000+0000",
    location: "Mock Location",
    status: "Mock Status",
    expert_id: "aec74887-f43c-4951-a099-8c0a7b526fb2",
    expert_photo: "mock-link",
    expert_job: "Mock job",
    expert_name: "Mock name",
    incubee_id: "Mock id",
    incubee_photo: "mock photo",
    incubee_name: "Mock name",
    program_name: "Mock program",
    purpose: "Mock purpose",
  };
  it("renders correctly when submitFeedback is false", async () => {
    const wrapper = mount(OHFeedbackDialog, {
      props: {
        openDialog: true,
        setDialogData: mockSetDialogData,
      },
      global: {
        plugins: [store,i18n],
      },
    });

    // Wait for Vue to update the DOM
    await wrapper.vm.$nextTick();
  });

  it("renders 'Give Feedback' button when submitFeedback is false", async () => {
    const wrapper = mount(OHFeedbackDialog, {
      props: {
        openDialog: true,
        setDialogData: mockSetDialogData,
      },
      global: {
        plugins: [store,i18n],
        mocks: {
          $t: (msg:any) => msg
        }
      },
    });

    await wrapper.vm.$nextTick();
    // Assert that the 'Give Feedback' button is rendered
    expect(wrapper.find(".bg-primary").text()).toBe("Give Feedback");
  });
});

in above test case i have mocked the data for dialog and setup pinia store but getting issue realted to i18n

above is the file of component and testcase ,getting the following error
enter image description here
enter image description here

I tried multiple online solution already available to mock i18n none of it worked.

Thiết kế website giá rẻ

Danh mục

Resolving i18n and field error in test case vue