Let's Coding

<template>
  <editor-content :editor="editor" />
</template>

<script setup>
  import { useEditor, EditorContent } from '@tiptap/vue-3'
  import StarterKit from '@tiptap/starter-kit'

  const editor = useEditor({
    content: '<p>I’m running Tiptap with Vue.js. 🎉</p>',
    extensions: [StarterKit],
  })
</script>

     <button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
      Toggle bold
    </button>
<button @click="editor.chain().focus().toggleItalic().run()" :class="{ 'is-active': editor.isActive('italic') }">
      Toggle italic
    </button>

<template>
  <div
    class="signature-pad"
    :style="{ width: props.width, height: props.height }"
  >
    <canvas ref="canvas"></canvas>
    <slot>
      <button @click="clearSignature">清除簽名</button>
      <button @click="saveSignature">儲存簽名</button>
    </slot>
  </div>
</template>

<script setup>
import { onMounted, ref, watch, onUnmounted } from "vue";
import SignaturePad from "signature_pad";

const props = defineProps({
  width: { type: String, default: "100%" },
  height: { type: String, default: "300px" },
  penColor: { type: String, default: "black" },
  backgroundColor: { type: String, default: "white" },
  options: { type: Object, default: () => ({}) },
});

const canvas = ref(null);
let signaturePad = null;

const initializeSignaturePad = () => {
  if (canvas.value) {
    signaturePad = new SignaturePad(canvas.value, {
      ...props.options,
      penColor: props.penColor,
      backgroundColor: props.backgroundColor,
    });
  }
};

const resizeCanvas = () => {
  //window.devicePixelRatio 來獲取設備的像素密度，如果無法獲取到，則將ratio設為1。
  const ratio = Math.max(window.devicePixelRatio || 1, 1);
  //根據畫布元素的寬度和高度，乘以ratio，來設定畫布的寬度和高度。為了確保畫布在高像素密度的設備上顯示正確。
  canvas.value.width = canvas.value.offsetWidth * ratio;
  canvas.value.height = canvas.value.offsetHeight * ratio;
  //獲取畫布的2D繪圖上下文，並使用scale方法將繪圖上下文的縮放比例設為ratio。
  canvas.value.getContext("2d").scale(ratio, ratio);
  signaturePad.clear(); // Clears any existing drawing
};

const emit = defineEmits(["clear", "save"]);

const saveSignature = () => {
  if (signaturePad) {
    const signatureImage = signaturePad.toDataURL();
    emit("save", signatureImage);
  }
  return null;
};

const clearSignature = () => {
  if (signaturePad) {
    signaturePad.clear();
    emit("clear"); // 發射清除事件
  }
};

// Initialize and resize canvas
onMounted(() => {
  initializeSignaturePad();
  window.addEventListener("resize", resizeCanvas);
  resizeCanvas();
});

onUnmounted(() => {
  window.removeEventListener("resize", resizeCanvas);
});

// Watch for prop changes
watch(
  () => [props.penColor, props.backgroundColor, props.options],
  () => {
    initializeSignaturePad();
  },
  { deep: true }
);
</script>

<template>
  <div class="hello">
    <p>
      For a guide and recipes on how to configure / customize this project,<br />
      check out the
      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">
        vue-cli documentation
      </a>
    </p>
  </div>
</template>

import { shallowMount } from "@vue/test-utils";
import HelloWorld from "./HelloWorld.vue";

describe("HelloWorld.vue", () => {
  it("html & text", () => {
    const wrapper = shallowMount(HelloWorld);
    // console.log("html=>", wrapper.html());
    // console.log("text=>", wrapper.text());
    expect(wrapper.html()).toMatch(
      `<a href="https://cli.vuejs.org" target="_blank" rel="noopener"> vue-cli documentation </a>`);
    console.log("aLink_>", wrapper.find('a').html())
    expect(wrapper.find('a').html()).toMatch(
      `<a href="https://cli.vuejs.org" target="_blank" rel="noopener"> vue-cli documentation </a>`);
  });
});

<template>
  <div id="CardBox">
    <ImageBox />
    <Content v-if="isOpenContent" />
  </div>
</template>

import { mount } from "@vue/test-utils";
import CardBox from "./index.vue";
import ImageBox from "./ImageBox.vue";
import Content from "./Content.vue";

describe("CardBox.vue", () => {
  it("findComponent function test", () => {
    const wrapper = mount(CardBox);

    expect(wrapper.findComponent(ImageBox).exists()).toBe(true);
    expect(wrapper.findComponent(Content).exists()).toBe(true);
  });
});

expect(wrapper.findAllComponents(ImageBox).at(0).exists()).toBe(true);

<script>
import { ref } from "@vue/reactivity";

export default {
  props: {
    styleColor: {
      type: String,
      default: "red",
    },
  },
  setup(props) {
    return {
      props,
    };
  },
};
</script>

<template>
  <div class="content">
    <h1 :class="['card_title', props.styleColor]">
      Vue  vue-test-utils
    </h1>
    <a href="javascript:;">click</a>
    <p class="card_text">
      Vue Test Utils (VTU) is a set of utility functions aimed to simplify testing Vue.js components. It provides some methods to mount and interact with Vue components in an isolated manner!
    </p>
  </div>
</template>

import { shallowMount } from "@vue/test-utils";
import Content from "./Content.vue";

describe("Content.vue", () => {
  it("find component",()=>{
    const wrapper = shallowMount(Content);

    expect(wrapper.find('.card_title').exists()).toBe(true)
  })
  it("check h1 tag have red class", ()=>{
    const wrapper = shallowMount(Content);

    expect(wrapper.find('h1').classes('red')).toBe(true);
  })
  it("button is disabled attr", () => {
    const wrapper = shallowMount(Content);
    console.log('red', wrapper.find('a').attributes("href"))
    expect(wrapper.find('a').attributes("href")).toBe("javascript:;");
  })
});

import { shallowMount } from "@vue/test-utils";
import PhotoItem from "./index.vue";

describe("PhotoItem.vue", () => {
  it("DOM is v-if or v-show hide", () => {
    const wrapper = shallowMount(PhotoItem);

    // exists 用來查看是否存在
    expect(wrapper.find("#box1").exists()).toBe(false);
    // isVisible 用來判斷DOM是否給 v-show 隱藏起來
    expect(wrapper.find("#box2").isVisible()).toBe(false);
  });

});

cy.url().should('include', '/login');

cy.url().should('eq', 'https://example.com/dashboard');

cy.url().should('contain', 'example.com');

it('google search', () => {
  //visit 進入不同網站
  cy.visit('https://www.google.com.tw/?hl=zh_TW')

  cy.get('#APjFqb').type('what is cypress.io{Enter}')
  //除了點擊搜尋按鈕之外，一般也會按下 enter鍵觸發
  // cy.contains('Google 搜尋').click()
})