Let's Coding

<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()
})

import { shallowMount, mount } from "@vue/test-utils"

import App from '@/App.vue'

  

describe('App.vue test', () => {

	it('測試組件 1', () => {
	
		//渲染出 App 元件
		
		const wrapper = shallowMount(App);
		
		console.log(wrapper.text())
		
		expect(wrapper.text()).toMatch("Test demo")
	
	});

	it('測試組件2', () => {
	
	const wrapper = mount(App);
	
	console.log(wrapper.text())
	
	expect(wrapper.text()).toMatch("若你是寫過 Vue 但沒有寫過單元測試的工程師")
	
	})

})

describe('AddCount.vue', () => {

	it('test 1 ', () => {
	
		const wrapper = shallowMount(AddCount);
		
		console.log(wrapper.find('.add-btn'))
		
		expect(wrapper.find('.add-btn').exists()).toBe(true)

	})

  
})

import { shallowMount } from '@vue/test-utils'

import AddCount from '@/components/AddCount.vue'

  

describe('AddCount.vue', () => {

	it('test 1 ', () => {
	
		const wrapper = shallowMount(AddCount);
		
		console.log(wrapper.find('.add-btn'))
	// 找不到，並且回傳 false
		expect(wrapper.find('.add-btn-err').exists()).toBe(false)
	
	})

  

})

import { shallowMount } from '@vue/test-utils'

import UserList from '@/components/UserList.vue'
  

describe('test UserList', () => {

	it('test Dom', () => {
	
		const wrapper = shallowMount(UserList);
	
	// console.log(wrapper.findAll('.user_list').at(0).text())
	
	expect(wrapper.findAll('.user_list').at(0).text()).toMatch('員工編號: 399')
	
	})

})

import { shallowMount } from '@vue/test-utils'

import UserList from '@/components/UserList.vue'

  
describe('test UserList', () => {

	it('test Dom', () => {
	
	const wrapper = shallowMount(UserList);
	
	// console.log(wrapper.findAll('.user_list').at(0).text())
	
	expect(wrapper.findAll('.user_list').at(0).text()).toMatch('員工編號: 399')
	
	})

	it('test List length', () => {
	
	const wrapper = shallowMount(UserList);
	
	console.log(wrapper.findAll('.user_list').length)
	
	expect(wrapper.findAll('.user_list').length).toBe(6)
	
	})

})

module.exports = {

  preset: "@vue/cli-plugin-unit-jest",

  testMatch: ["**/src/**/*.spec.[jt]s?(x)"],

};

describe("Test to do list", () => {

  
  it("Test to do 1", () => {

  });

  
  test("Test to do 2", () => {

  });

});

it('這是test case',()=>{

})

import { shallowMount } from '@vue/test-utils'

import HelloWorld from '@/components/HelloWorld.vue'

describe('HelloWorld.vue', () => {

	it('renders props.msg when passed', () => {
		
		const msg = 'new message'
		
		const wrapper = shallowMount(HelloWorld, {
		
		props: { msg }
	
	})

		expect(wrapper.text()).toMatch(msg)
		//
	})

})

describe("Test to do list", () => {

  
  it("Test to do 1", () => {

    expect(1 + 1).toBe(2);

  });

  
  it("Test to do 2", () => {

    expect(4 - 1).toBe(3);

  });

});