Let's Coding

cypress 學習筆記 - Assertion

Posted on 2023-06-03 Edited on 2023-06-14 In E2E

implicit assertion（隱含斷言）

常用的 should 關鍵字：

be.visible：確保元素在畫面上可見。
be.hidden：確保元素在畫面上隱藏。
be.checked：確保複選框或單選框元素被選中。
be.disabled：確保元素被禁用。
have.text：檢查元素的文字內容是否符合預期。
have.value：檢查輸入元素的值是否符合預期。
have.attr：檢查元素的特定屬性值是否符合預期。
have.class：檢查元素是否具有特定的類名。
contain：檢查元素是否包含指定的文字內容。

可根據具體需求進行選擇和使用
keywords

這裡的練習範例，驗證當前網址（URL）的斷言方法。

include：確保當前網址包含特定的子字串。

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

eq：確保當前網址與預期值完全相等。

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

contain：檢查當前網址是否包含特定的字串。

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

這些斷言方法可用於驗證當前網址是否符合預期，從而確保導航或操作正確導致了預期的網址變化。

describe("Assertion practice",()=>{

	it("explicit", ()=>{
	
		cy.visit('https://opensource-demo.orangehrmlive.com/web/index.php/auth/login')
		
		//should + keyword end
		
		cy.url().should('include', 'orangehrmlive.com')
		
		cy.url().should('eq', 'https://opensource-demo.orangehrmlive.com/web/index.php/auth/login')
		
		cy.url().should('contain', 'orangehrmlive')
		
	
	})

})

可以看到上述，有連續使用到 url()

cy.url().should('include', 'orangehrmlive.com')

.should('eq', 'https://opensource-demo.orangehrmlive.com/web/index.php/auth/login')

.should('contain', 'orangehrmlive')

cy.url().should('include', 'orangehrmlive.com')

.and('eq', 'https://opensource-demo.orangehrmlive.com/web/index.php/auth/login')

.and('contain', 'orangehrmlive')

另外可以檢查進到頁面 logo 圖示的顯示


describe("Assertion practice",()=>{
  it("explicit", ()=>{
    cy.visit('https://opensource-demo.orangehrmlive.com/web/index.php/auth/login')
      //check logo 呈現與否
    cy.get('.orangehrm-login-branding > img').should('be.visible')
    .and('exist')
  })
})

使用者輸入框


describe("Assertion practice",()=>{
  it("explicit", ()=>{
    cy.visit('https://opensource-demo.orangehrmlive.com/web/index.php/auth/login')
   
    //檢查 username 得輸入
    //取得 username 的輸入框,並且確保輸入的值
    cy.get("input[placeholder='Username']").type("Admin")
    cy.get("input[placeholder='Username']").should("have.value", "Admin")

    
  })
})

explicit assertion

（顯式斷言）」是指明確使用斷言方法來檢查特定的條件或預期結果。
與隱含斷言不同，顯式斷言需要您明確指定斷言方法來進行驗證。

cypress 學習筆記 - css Locator

Posted on 2023-06-03 In E2E

有空就找找實作影片來練習一下～

而今天的實作練習，訪問 momoshop 取得搜尋框元素 -> 輸入搜尋的關鍵字(“雨傘”) -> 點擊搜尋 ->
查看搜尋後的項目是否包含關鍵字。

describe('CSSLocators',() => {
  it("csslocators", ()=>{
    cy.visit("https://www.momoshop.com.tw/main/Main.jsp?momo=1&gclid=CjwKCAjwpuajBhBpEiwA_ZtfhU9MqvxnVs7Kh8LTNDbmKzFsmDxY16QIaP7lci98eVgfRoNz8ychuRoCao0QAvD_BwE")
    
    //尋找某些關鍵字
    cy.get('[name="keyword"]').type("雨傘")
    //點擊搜尋按鈕
    cy.get("[title = '搜尋']").click()  //attribute
    cy.get('.prdName').contains('傘')
    cy.get('.prdName').contains('羽絨') //Assertion
  })
})

在此文章主要針對取得 css Locator 進行系列操作。
可以使用 #idName, .cssName, [title = '搜尋'], [name = 'search'] 等方式
其實 cypress 官方網站也滿容易讀，可以根據我們想要在網頁上進行何種操作，搜尋相應的功能。
例如: Assertion cypress-assertions

小補充另一個取得定位的方式：
XPath：
XPath是一種用於導航XML文件的語言，同樣也適用於HTML文件。它提供了一種根據元素在文檔層次結構中的路徑選擇元素的方法。XPath表達式非常強大且靈活，可以根據元素的屬性、文本內容等條件進行選擇。

在Cypress中，您可以使用XPath選擇器，只需將選擇器字符串以 xpath 為前綴添加到命令中。例如：

1	cy.xpath('//button[@id="submit-btn"]').click();

自動化測試 E2E - cypress

Posted on 2023-05-07 In E2E

每次在交付完成的任務給 PM 之前，總是會先自行反覆點擊測驗過才提能安心提供。但除了自己點擊之外，是否有其他更為簡易的方式可以進行測試呢？Cypress 是一個用於編寫端對端測試的 JavaScript 測試框架。他可以幫助我們做到基礎的自動化測試，今天就先來認識看看吧～

建立專案

在本地建立一個 cypress-project 資料夾，進入該檔案夾
npm init -y
npm install cypress

安裝完後

{
  "name": "cypress-project-1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "cypress": "^12.11.0"
  }
}

實作測試功能

訪問 google 頁面
進行關鍵字搜尋

測試語法

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

測試操作

npx cypress open 進入測試介面，選擇 E2E

選擇要測試的檔案：

透過選取器可以找到相對應的元素，並針對該元素下指令
- 這邊我們就是拿到搜尋框，並進行關鍵字的輸入

測試結果呈現

會進到 google 頁面
在輸入框輸入 what is cypress.io ,點擊 Enter 搜尋

小結：

cy.visit(url)：訪問指定網址。
cy.get()：使用 cy.get() 方法選擇元素。我們可以使用不同的選擇器（如：CSS 選擇器）來指向特定元素。
type()：使用 type() 方法在輸入框中輸入內容。
click()：使用 cy.get() 定位到這些元素，然後使用 click() 方法模擬點擊操作。

vueTest - Vue test util (1)

Posted on 2023-01-31 Edited on 2023-08-05 In test

測試 App.vue
- 引入 @vue/test-utils 使用 shallowMount 方法
- shallowMount 可以渲染出組件
  shallowMount , mount
  shallowMount : 只會渲染該元件當層的資料內容
  mount : 深度渲染，會將元件內所包含的其他元件一起都渲染出
例如以下範例: 在 App.vue 中有包含數個元件

 //App.vue
<template>

	<img class="logo" alt="Vue logo" src="./assets/logo.png" />
	
	<h1>Test demo</h1>
	
	<AddCount />
	
	<HelloWorld />
	
	<div class="itemFlex">
	
	<CardBox v-for="i in 4" :key="i" />
	
	</div>
	
	<UserList />

	<PhotoItem />

</template>

測試元件

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 但沒有寫過單元測試的工程師")
	
	})

})

get 與 find 差異

抓取某個元件中 DOM 元素
兩者差異在於
- 使用 get ，如果找不到元素會報錯，並且直接中斷測試的運行
- 使用 find 會依據 exists() 回傳布林值

<button id="add" class="add-btn" @click="add">add 按鈕</button>

測試按鈕存不存在
- exists : 驗證某元素是否存在
- exists

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

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

	})

  
})

在情境應用

在 AddCount 加入 isOpen=ref(false) 來判斷 button 是否在一開始要呈現
而再測試文件中就是要測試該按鈕在一開始並不會出現

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

  

})

find 與 findAll

以 v-for list 的範例

<script>

import { ref } from "vue";

import data from "./data.json";

export default {
	
	setup() {
	
		const employeeItem = ref(data);
		
		return {
		
			employeeItem,
		
		};
		
	},

};

</script>

  

<template>

	<ul class="item">
	
		<li class="user_list" v-for="item in employeeItem" :key="item.id">
		
			<div>
			
				<p>員工編號: {{ item.userId }}</p>
				
				<p>姓名: {{ item.username }}</p>
			
			</div>
		
		</li>
	
	</ul>

</template>

如果是要抓元件中 list 有幾筆
wrapper.findAll('.user_list') : 他會是一個陣列資料，其中包含好幾個 DOM wrapper

注意：
TypeError: wrapper.findAll(...).text is not a function

搭配使用 at() 用於找尋其中某一個物件

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

})

另也可以測試所拿到的資料長度

測試 DOM 資料長度

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

})

Vue 單元測試 - 基礎入門

Posted on 2023-01-28 In test

為了不斷建立以及加深自己的技能，即便目前工作上未能使用，還是可以提前做些準備，之前看到 Mike 老師推出的 vue 單元測試，就先入手～
趁近期有空先來奠定下測試的基礎，未來可以在專案內練習撰寫！

專案創建

若一開始專案沒有選擇 jest 或加入測試要如何在現有專案加入？

可以進入該專案進行安裝
vue add unit-jest

這裡創建的專案是使用 vue-cli 創建，並且在自選項目加入 unit test

1	vue create my-project

執行 test

npm run test:unit

更改預設的測試檔案位置

component 與測試的檔案，可以放在同一個資料夾中，以方便找尋

建立 jest.config.js 來設定 jest

testMatch: 指定從 src 資料夾開始找尋與 spec 相關的檔案


module.exports = {

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

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

};

**`

測試的基本架構

describe : 類似群組概念，可以包一個或多個相關的測試。
it 與 test 一樣：其內容為測試的單位，裏面撰寫測試內容
第一個參數，用來表示該測試的敘述（”Test to do list”, “Test to do 1”, “Test to do 2” ）


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

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

  });

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

  });

});

it 也可以單獨另外撰寫

1
2
3

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

})

wrapper 是指 HelloWorld 這個 component
wrapper.text() : 會顯示此元件中所包含的文字
expect(wrapper.text()).toMatch(msg):
- toMatch 有合乎

expext 與斷言



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

  });

});

expect: 預期需要匹配的項目，如放入變數、component、function
toBe(百分之百準確): 斷言，用什麼方式來匹配，這裡使用 toBe 函式

其他備註

而官方網站已建議若要創建新專案可以使用 vite 為基礎的專案。所以新開的專案都是使用 Vitest (之後有機會再使用新專案來開看看)。
這邊因先根據教學來進行，故先使用 vue-test-utils + jest

TS - Generics 泛型

Posted on 2023-01-25 Edited on 2023-01-27 In TypeScript

資料整理

例如有兩個 interface 屬性一樣，差異在於型別內容

interface DataA {
  key:string
  key2:number
}

interface DataB {
  key:string
  key2:boolean
}

使用泛型整理

將 T 部分，設為傳入的變數，可以依據宣告得變數所符合的型別進行設定


type GenericsObj<T> = {
  key:string
  key2:T
}
type DataA = GenericsObj<number>;
type DataB = GenericsObj<boolean>;
//以上的 DataA、DataB 的型別會與剛剛 interface 的設定一樣

範例2：

interface KeyPair<T, U> {
  key: T;
  value: U;
}

let kp1: KeyPair<number, string> = { key: 1, value: "str"}
let kp2: KeyPair<string, number> = { key: "str", value: 123}

let arr:number[] = [1,2,3];
let arrTwo:Array<number> = [1,2,3]

payload 應用

這邊以 redux 中整理的 action 為範例

type userDataPayload = {
  userId: string,
  data:any
}
//負責生成 action 的函式
const setUserDataAction = (payload:userDataPayload )=>({
  type: 'SET_USER_DATA',
  payload
})
const resetUserDataAction =()=>({
  type: 'RESET_USER_DATA',
})

type CartDataPayload = {
  product: string
}
const setCartDataAction =(payload:CartDataPayload)=>({
  type: 'SET_CART_DATA',
  payload
})

type SetUserDataAction = {
  type: 'SET_USER_DATA',
  payload:userDataPayload
}
type ResetUserDataAction = {
  type: 'RESET_USER_DATA'
}
type SetCartDataAction = {
  type: 'SET_CART_DATA',
  payload:CartDataPayload
}

由上可以觀察到 SetUserDataAction、ResetUserDataAction、SetCartDataAction 整理為一個
將 action 的型別整理，其key為type 與 payload

type Action<T,P> = {
  type: T,
  payload:P
}
type ActionWithoutPayload<T> = {
  type: T
}

type SetUserDataAction = Action<'SET_USER_DATA',userDataPayload>
type SetCartDataAction = Action<'SET_CART_DATA',CartDataPayload>
type ResetUserDataAction = ActionWithoutPayload<'RESET_USER_DATA'>

//可以將action 中的 type 進行聚合
type Actions = SET_USER_DATA | SET_CART_DATA | RESET_USER_DATA;

以下，進一步再將 Action 和 ActionWithoutPayload 進行整合，他們差異在與 payload

1	type Action<T, P = null> = p extends {} ? {type: T, payload: P} : {type: T};

型別參數動態生成不同型別

函式的泛型

1
2
3

const fn = (param: string | number):(string|number)[]=>[param];
fn(1);//number 陣列 number[];
fn('hello') //string[]

1
2
3

const fn = <T>(param: T):(T)[]=>[param];
fn(1);//number 陣列 number[];
fn('hello') //string[]

function 改寫方式

1
2
3

function fn<T>(param:T):T[]{
  return [param]
}

type 的泛型

//共用模板
type GenericList<T> = T[];

type StrList = GenericList<string>;
type BoolList = GenericList<boolean>;

type GenericValObj<T> = {[key:string]:T} 
type NumValObj = GenericValObj<number>

const numValObj:NumValObj = {
  img_res_200:200
}

嘗試聚合資料

type GenericUnion<T,U> = T | U | T[] | U[];
type strNumUnion = GenericUnion<string,number>

const val:strNumUnion = "123"
const val2:strNumUnion = ["123"]

將函式改寫為共用的泛型型別

將type 拉出來獨立撰寫，可以重複使用

const fn = <T>(param: T):(T)[]=>{
  return [param]
};

//上面的函式也可以用於
interface Props {
  onFn: typeof fn
}

//rewrite
type GenericFn = <T>(param: T) => T[]
const fn:GenericFn = (param) => {
  return [param]
}

//共用，如下有個 interface 其中有個屬性的型別與 GenericFn 一樣，則可以共用
interface Props {
  onFn:GenericFn
}

function fn<T>(param:T):T[]{
  return [param]
}

//產生型別泛型
type FnType = typeof fn ;

比較`<T>`位置差異

type FnTypeA = <T>(param: T) => T[]
type FnTypeB<T> = (param: T) => T[]

const fn1:FnTypeA = (param) => {
  return [param]
}

//必須指定好型別的 argument
const fn2:FnTypeB<string> = (param) => {
  return [param]
}

//兩個函式在使用上會有差異：
fn1();

fn2('Hi')

fn1 可以填入任何內容、可以動態填入型別
fn2 只能填入 string 內容

export type ClickFn = <Event>(e:Event) => any

//使用 function 會無法重複使用寫好的型別
// 引用
const handleClick:ClickFn = (e)=>{

}

interface 的泛型

export interface GenericI<T>{
  [key:string]: T
} 
type NumValObj =  GenericI<number>;
const numberValObj:NumValObj = {
  res:123
}

//type寫法也可以一樣
export type GenericT<T> = {
  [key:string]: T
}

//API 的應用！！！
//注意：in 寫法只用於 type 中
export type GenericKeyValObj<T extends  keyof any,P> = {
  [key in T ]: P
}

//可以應用於 API 

type ApiKey = 'user' | 'id' | 'password'; //將欄位值設定好
type UserApiData = GenericKeyValObj<ApiKey, string>

可以很快的生成 API 的資料型別
其他範例

//類似呼叫API的函式
//Params : 參數
//Res result : 回傳值
type GenericApiFn<Params, Res> = (params:Params)=> Res

//組合其他泛型使用，也可以將原本泛型參數自己使用
interface ApiContainerProps<Params, Res> {
  initData: Res;
  onAsyncCb: GenericApiFn<Params, Res>
}

interface 與 type 的泛型寫法

//interface 寫函式
interface FnI {
  <T>(param: T): T[]
}
//同等於
type FnT = <T>(param:T)=>T[]

const fn:FnT = (param)=>[param]

<T>位置的調動

//<T> 會影響整個 interface
interface GenericFnI<T> {
  (param: T): T[]
}

const fn2: GenericFnI<string>= (param)=>[param]

過去都未曾注意到泛型可以抽成共用還有 <T> 的位置所放的位置，會影響宣告，透過此次的教學，讓我對泛型可以應用於實際情況的案例，同樣未來在訂定 type 或 interface 時可以加以注意，思考是否可以改寫為泛型加以使用。

參考資料
成為進階TS開發者的第一哩路 — 泛型簡介與基礎(1)
成為進階TS開發者的第一哩路 — 泛型的函式, type和interface寫法一次說清楚！

TypeScript - interface 使用

Posted on 2023-01-25 Edited on 2023-01-26 In TypeScript

最近在複習使用 TypeScript 發現還有些部分可以做紀錄並且重新回憶的區塊，藉此再紀錄於部落格。

TS interface的基礎宣告

將複雜系統簡化的結果叫做介面
介面一般首字母大寫

interface Person {
  name: string;
  age: number;
}

let Eva: Person = {
    name: 'Eva',
    age: 25
};

函式與介面

以下範例宣告 AddFunction 的介面
並將此型別應用於 add 這個變數的方法中

interface AddFunction {
  (a: number, b: number): number;
}

let add: AddFunction = function(a, b) { return a + b; };

class與介面

interface CatInterface {
	//普通成員變數的規格
	name: string;
	breed: string;
	noise: string;
	
	//普通成員方法的規格，使用函式型別格式
	makeNoise(): void;
	feed(something: string): void
}

若類別想要實踐此介面，必須用 implements 這個關鍵字
如果類別實踐介面的規格中，任何一個成員不見或沒有實踐時，會出現提醒訊息。

class Cat implements CatInterface{
	public name: string;
	public breed: string;
	public noise: string = 'Meow meow!';

  constructor(name:string, breed:string){
		this.name = name;
		this.breed = breed;
	}

  public makeNoise(){
		console.log(this.noise);
	}

   public feed(something: string){
		 console.log(`${this.name} is eating ${something}...`)
	 }

}

搭配 interface 常用的方法

extends

以 PersonalInfo 為例

interface PersonalInfo{
	name: string;
	age: number;
	interesting: string[];
}

假設今天想宣告一個新的使用者帳戶的介面為 UserAccount
- 除了有一些和客戶相關的規格屬性外，還要包含介面 PersonalInfo 裡的規格

interface UserAccount extends PersonalInfo{
	email: string;
	password: string;
	subscribed: boolean;
	
}

上面的撰寫方式，等同於
透過使用 extends 延展可以將功用的屬性、型別整理一起

interface UserAccount{
	email: string;
	password: string;
	subscribed: boolean;
	
	//從PersonalInfo延展而來
	name: string;
	age: number;
	interesting: string[];
	
}

另外若需要再合併新的型別，也可以透過逗號方式加以延伸

此外還能再多新增 SocialLinks

interface SocialLinks {
	facebook?: string;
	twitter?: string;
	linkedin?: string;
	website?: ({name:string; url:string})[]
	
}

同時延展:透過逗號再加入新的

1
2
3

interface UserAccount extends PersonalInfo, SocialLinks{
	//...
}

pick

Picking Items with Pick<Type, Keys>

挑選想要的屬性(key)做使用
注意 pick 只能在 type 宣告使用

interface Todo {
  title: string;
  description: string;
  completed: boolean;
}
 
type TodoPreview = Pick<Todo, "title" | "completed">;
 
const todo: TodoPreview = {
  title: "Clean room",
  completed: false,
};

console.log(todo.title); // "Clean room"
console.log(todo.description); // undefined

注意 pick 只能在 type 宣告使用

1 2	interface todo = Pick<Todo, "title" \| "completed">; // 'Pick' only refers to a type, but is being used as a value here.

omit

Omit<Type, Keys>

interface Todo {
  title: string;
  description: string;
  completed: boolean;
  createdAt: number;
}
 
type TodoPreview = Omit<Todo, "description">;
 
const todo: TodoPreview = {
  title: "Clean room",
  completed: false,
  createdAt: 1615544252770,
};

參考資料
A Detailed Guide on TypeScript Pick Type

Leetcode rotate-image

Posted on 2022-12-21 In Leetcode

一開始看到題目，看到2維陣列就會有些緊張，想著是否要拆開，或是要如何從圖示去轉陣列，寫得很亂又雜還是解不出來。
看完其他教學才知道可以從斜對角開始調換，最後再將左右做調換。

You are given an n x n 2D matrix representing an image, rotate the image by 90 degrees (clockwise).

You have to rotate the image in-place, which means you have to modify the input 2D matrix directly. DO NOT allocate another 2D matrix and do the rotation.

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

參考資料：
Rotate Image - LeetCode 48 - JavaScript

Redux Toolkit - RTK Query中間層非同步Fetch API的處理

Posted on 2022-12-01 In React

當發起 dispatch 到 UI 更新之間做什麼事情

希望 dispath 有能力可以再去做其他事情（所以會在過程中去做一些邏輯）
希望過程中可以再做些事情（UI 從 dispatch 到真正渲染之間）

Middleware
實際上是一個 function
next 是 dispatch 的意思，next 所代表的是傳入 action ，會調用下一個 dispatch 來執行所傳入的這個 action

以官網範例：

他是 3 個函式包在一起

const logger = store => nextDispatch => action => {  
	console.log('dispatching', action)  
	let result = nextDispatch(action)  
	console.log('next state', store.getState())  
	return result  
}

在專案建立
位置：src / middleware

簡易說明

在 return 最後的 function 之前，第二個 function 就是將原有的 dispatch 丟到最後的 function 中，再 return 出去。
在取的 dispatch 之前，會再拿到 store 也是使用 api 時候會回傳進來的東西。
當 middleware 建立好之後，要到 store 當案進行宣告

combineReducers

建立的 slice夾中可能會有多個 reducer，例如 todoReducer, friendReducer, phoneReduce…

Middleware 與 store 的建立

在 middleware 去寫功能的時後，主要分為兩個部分

在 dispach 之前要做什麼事情
在 dispach 之後要做什麼事情

RTK Query

使用 middileware 去定義我們的 reducers 會分成多個階段

pedding
success
error
針對每一次 API 取資料，加入到 reducers 中，此方式會使得 reducer 變得龐大、複雜。
RTK Query 協助將所有關於 call API 或是獲取資料過程的功能，將他包裝成一個攻能，並且完全獨立於 reducer 或 redux 的邏輯
可以使用 RTK Query 中的 hook 去獲取當前 data , error 狀態等
官方文件

建立 api

educerPath => 最後會產生 reducer ，所包含內容會有 pedding, success,error 等狀態
baseQuery => 就是放入 baseUrl
endpoint => 放入 query 資訊
any : 表示會回傳一個 any 結果
string : 需要傳入 string 的 input

json placeholder

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'

export const todoApiService = createApi({

		reducerPath: 'todoApi',
		
		baseQuery: fetchBaseQuery({ baseUrl: 'https://jsonplaceholder.typicode.com/' }),
		
		endpoints: (builder) => ({
		
		// getPokemonByName: builder.query<Pokemon, string>({
		
		// query: (name) => `pokemon/${name}`,
		
		// }),
		
		getTodoApi: builder.query<any, string>({
		
		query: (id) => `todos/${id}`,

	})

	}),

})
// Export hooks for usage in functional components, which are  
// auto-generated based on the defined endpoints 
// 以下會自動對應產生
export const { useGetTodoApiQuery } = todoApiService

至 store 新增 todoAPI

引用 API hook

import { useGetTodoApiQuery } from './services/todoApi';

import './App.css';
import styled from 'styled-components'
import { useAppSelector, useAppDispatch } from './hooks';
import { addTodo, addTimestamp } from './slice/todo'
import React, { useState } from 'react';
import { useGetTodoApiQuery } from './services/todoApi';

const Wrapper = styled.div`
  padding: 1.5rem;
`

const Title = styled.h2`
  font-weight: 900;
  margin-top: 2rem;
`

const NoteInput = styled.input`
  width: 100%;
  height: 40px;
  border-radius: 10px;
  padding-left: .5rem;
  box-sizing: border-box;
`

const SubmitBtn = styled.button`
  width: 100%;
  box-sizing: border-box;
  height: 40px;
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  border-radius: 10px;
  border: 0;
  font-weight: 900;
  margin-top: 1rem;

  :active {
    background: #000000be;
  }
`

const Item = styled.div`
  margin-top: 1rem;

  > b {
    margin-right: .5rem;
  }
`


function App() {
  const todoReducer = useAppSelector(state => state.todoReducer)
  const todoList = todoReducer.todoList
  const dispatch = useAppDispatch()
  const [text, setText] = useState("")
  const { data, error, isLoading } = useGetTodoApiQuery('1')
  //api 獲取資料
  console.log('data:', data)
  console.log('error:', error)
  console.log('isLoading:', isLoading)

  //處裡 data 可能 undefined 的問題
  const { userId = 'N/A', title = 'N/A' } = data || {}

  return (
    <Wrapper>
      <Title>TODO LIST</Title>
      <NoteInput type="text" value={text} onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
        setText(e.target.value)
      }} />
      <SubmitBtn onClick={() => {
        if (text === '') {
          alert('請輸入TODO內容')
          return
        }
        dispatch(addTodo(text))
        setText('')
      }}>
        Submit
      </SubmitBtn>
      <SubmitBtn onClick={() => {
        dispatch(addTimestamp())
      }}>
        Record Timestamp
      </SubmitBtn>
      <Title>List</Title>
      {
        todoList.map((todo, index) => {
          return <Item key={todo}>
            <b>{index + 1}</b>
            {todo}
          </Item>
        })
      }
      <Title>List2</Title>
      {
        isLoading && <p> 正在載入資料...</p>
      }
      {
        !isLoading &&
        (
          <div>
            {/* <p>User ID:{data?.userId}</p>
            <p>Usr Title:{data?.title}</p> */}
            <p>User ID:{userId}</p>
            <p>Usr Title:{title}</p>

          </div>
        )


      }
    </Wrapper>
  );
}

export default App;

若是使用 react thunk

這裡的 middleware 的 reducer 中的 status 要自己去定義
優點：可以完全掌控自己 reducer 的內容
但相對也會較為繁瑣

Redux Toolkit