Let's Coding

<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);

  });

});

var rotate = function (matrix) {
  //斜對角
  for (let i = 0; i < matrix.length; i++) {
    for (let j = 0; j < matrix.length; j++) {
      let temp = matrix[i][j];
      matrix[i][j] = matrix[j][i];
      matrix[j][i] = temp;
    }
  }
  //reverse
  // Secondly Make Reflected Image Of Matrix
  for (let i = 0; i < matrix.length; i++) {
      //最左和最右調換，為兩兩調換，所以j的長度為matrix長度除以2
    for (let j = 0; j < matrix.length / 2; j++) {
      var Temp = matrix[i][j]
      //右側最後的值為長度-1
      matrix[i][j] = matrix[i][matrix.length - 1 - j]
      matrix[i][matrix.length - 1 - j] = Temp
    }
  }
  return matrix;
};