Let's Coding

React 測試 - 以登入元件練習

Posted on 2022-11-02 Edited on 2022-11-04 In React 測試

想找專案練習來更認識測試的運用，至 youtube 找尋測試相關的教學。

login.js : 製作登入元件
login.test.js : 撰寫測試

確認輸入框有渲染至文件

使用 getByPlaceholderText 取得輸入框元素

<form>
       <input
         type="text"
         placeholder="username"
         value=''
       />
       <input
         type="password"
         placeholder="password"
         value=''
       />
 </form>

test("username input should be rendered", () => {
  render(<Login />);
  const usernameInputEl = screen.getByPlaceholderText(/username/i);
  expect(usernameInputEl).toBeInTheDocument();
});

test("password input should be rendered", () => {
  render(<Login />);
  const passwordInputEl = screen.getByPlaceholderText(/password/i);
  expect(passwordInputEl).toBeInTheDocument();
});

確認畫面上有按鈕

getByRole 取得按鈕

test("button should be rendered", () => {
  render(<Login />);
  const buttonEl = screen.getByRole("button");
  expect(buttonEl).toBeInTheDocument();
});

輸入框一開始為空

test("username input should be empty", () => {
  render(<Login />);
  const usernameInputEl = screen.getByPlaceholderText(/username/i);
  expect(usernameInputEl.value).toBe("");
});

test("password input should be empty", () => {
  render(<Login />);
  const passwordInputEl = screen.getByPlaceholderText(/password/i);
  expect(passwordInputEl.value).toBe("");
});

輸入框為空時，按鈕應為 disabled

只要取得按鈕元素並使用 toBeDisabled()

test("button should be disabled", () => {
  render(<Login />);
  const buttonEl = screen.getByRole("button");
  expect(buttonEl).toBeDisabled();
});

錯誤訊息的提示

確保一開始進入畫面，該訊息不應該出現
可以看見 toBeVisible() ，反之期望無法看見，就需加入not

test("error message should not be visible", () => {
  render(<Login />);
  const errorEl = screen.getByTestId("error");
  expect(errorEl).not.toBeVisible();
});

輸入框的輸入事件

fireEvent 用來針對事件進行測試

test("username input should change", () => {
  render(<Login />);
  const usernameInputEl = screen.getByPlaceholderText(/username/i);
  //模擬傳入的值
  const testValue = "test";

  fireEvent.change(usernameInputEl, { target: { value: testValue } });
  expect(usernameInputEl.value).toBe(testValue);
});

test("password input should change", () => {
  render(<Login />);
  const passwordInputEl = screen.getByPlaceholderText(/password/i);
  const testValue = "test";

  fireEvent.change(passwordInputEl, { target: { value: testValue } });
  expect(passwordInputEl.value).toBe(testValue);
});

當輸入框有值的時候，按鈕不應該 `disabled`

期望按鈕可以點擊
在 jsx 檔案內要設置在輸入框沒有值的時候才是 disabled


test("button should not be disabled when inputs exist", () => {
  render(<Login />);
  const buttonEl = screen.getByRole("button");
  const usernameInputEl = screen.getByPlaceholderText(/username/i);
  const passwordInputEl = screen.getByPlaceholderText(/password/i);

  const testValue = "test";

  fireEvent.change(usernameInputEl, { target: { value: testValue } });
  fireEvent.change(passwordInputEl, { target: { value: testValue } });

  expect(buttonEl).not.toBeDisabled();
});

css 補充

1	style={{ visibility: error ? "visible" : "hidden" }}

類似： display:none和visibility:hidden

而兩者差異：
visibility：的隱藏，是物件的位置仍舊保持著不會消失,
display: none, 會將 html 該物件拔除

小結

此練習範例，很請楚地知道在建立一個功能元件之後，如何再加入每一個區塊的測試，如標題文字、輸入框、按鈕的測試等等，也可以觀察到測試根據使用情境一步步的拆解並加入測試
下一篇會有串接資料搭配測試，敬請期待

參考資料
github-login
React Testing Tutorial with React Testing Library and Jest

React 測試

Posted on 2022-11-02 Edited on 2022-11-04 In React 測試

使用 JavaSript 要進行測試最常使用的就是使用 Jest ，另外依據使用的前端框架來搭配使用進行測試。
以下內文就先以一些範例來直接學習

testing-library

當使創建一個 react 檔案，會預設加入的測試範例檔

 test('renders learn react link', () => {
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});

screen : it represent the whole document which we have rendered
getByText: 取得 text
- getByText(/learn react/i)
- expect(linkElement).toBeInTheDocument();
- 期待變數得值，toBeInTheDocument()
- 檢測此項目是否存在於文件之中
- - toBeInTheDocument：判斷一個 Element 是否存在於 DOM 中

撰寫測試的參考文件

ByRole
role attribute

加入列表（list）測試

import logo from './logo.svg';

import './App.css';

import Login from './components/Login/Login';

  

function App() {


	
	return (
	
	<div className="App">
	
		<header className="App-header">
			
			<img src={logo} className="App-logo" alt="logo" />
			
			<p>
			
			Edit <code>src/App.js</code> and save to reload.
			
			</p>
		
			<a
			
			className="App-link"
			
			href="https://reactjs.org"
			
			target="_blank"
			
			rel="noopener noreferrer"
	 .     >					
			
				Learn React
			
			</a>
	
			<ul>
				
				<li>Apple</li>
				
				<li>Banana</li>
				
				<li>Kiwi</li>
			
			</ul>
		
	
		</header>

	</div>

);

}
  
export default App;

test('renders 3 list items', () => {
  render(<App />);
  const listItems = screen.getAllByRole("listitem");
  expect(listItems.length).toEqual(3);
});

jest expect
需要時到官網看相關使用的API
expect(listItems.length).toBe(3);
expect(listItems.length).toEqual(3);

測試 title

getByTestId：運用此方法可以直接取得在元素上設置的 data-testid
getByTitle : 取得在標籤設置 title 的元素

<!-- const a = 2
const b = 1 -->

   <h1 data-testid="mytestid">Hello</h1>
    <span title="sum">{a + b}</span>

test('renders title', () => {

	render(<App />);
	const title = screen.getByTestId("mytestid");
	expect(title).toBeInTheDocument();

});

test('sum should be 3', () => {
  render(<App />);
  const titleSum = screen.getByTitle("sum");
  expect(titleSum.textContent).toBe("3");
});

運行測試

npm run test

透過測試所提供的錯誤提示，可以得知預期的結果以及實際運行後得到的值之間的差異

參考資料：
[Day29] React Testing Library 的一些實用的小技巧
 Next.js | 初探單元測試，使用 Jest + React Testing Library

React - 從官方文件學習 Context 的使用

Posted on 2022-10-18 Edited on 2022-11-04 In React

Passing Data Deeply with Context

當裡面的子狀態，會想要往父層去找尋時，就可以使用Context
學習文件：React Docs
資料會和其他元件要共用
- prop drilling
  1. 最基本使用
- 範例：Section.js \ Heading.js
- children 帶入元件的內容

將 app.js 改寫

import Heading from './Heading.js';
import Section from './Section.js';

export default function Page() {
  return (
    <Section>
      <Heading level={1}>Title</Heading>
      <Section>
        <Heading level={2}>Heading</Heading>
        <Heading level={2}>Heading</Heading>
        <Heading level={2}>Heading</Heading>
        <Section>
          <Heading level={3}>Sub-heading</Heading>
          <Heading level={3}>Sub-heading</Heading>
          <Heading level={3}>Sub-heading</Heading>
          <Section>
            <Heading level={4}>Sub-sub-heading</Heading>
            <Heading level={4}>Sub-sub-heading</Heading>
            <Heading level={4}>Sub-sub-heading</Heading>
          </Section>
        </Section>
      </Section>
    </Section>
  );
}

以上方式，看到在 Heading 元件傳入參數
改寫為，在 section 元件就來控制裡面的 Heading 是什麼 level

<Section level={3}>  

	<Heading>About</Heading>  
	
	<Heading>Photos</Heading>  
	
	<Heading>Videos</Heading>  

</Section>

實作
1. Create a context.
2. Use that context，在子層import { useContext } from 'react';
3. 提供 context 的值

Create a context.

import { createContext } from 'react';

export const LevelContext = createContext(1);

Use that context

是 Heading 要往外層找資料，所以要在這裡使用 useContext
要往外層的地方
注意 level

import { useContext } from 'react';
import { LevelContext } from './LevelContext.js';

export default function Heading({ children }) {
  const level = useContext(LevelContext);
  switch (level) {
    case 1:
      return <h1>{children}</h1>;
    case 2:
      return <h2>{children}</h2>;
    case 3:
      return <h3>{children}</h3>;
    case 4:
      return <h4>{children}</h4>;
    case 5:
      return <h5>{children}</h5>;
    case 6:
      return <h6>{children}</h6>;
    default:
      throw Error('Unknown level: ' + level);
  }
}

Provide the context

建立 context 的 provider
提供此資料的提供者、元件
這個 provider 是放在最外層，所以在此範例應該放在 section 去改寫

原本的 section.js

export default function Section({ children }) {
  return (
    <section className="section">
      {children}
    </section>
  );
}

改寫section.js

level 從這邊拿

import { LevelContext } from './LevelContext.js';  

  
export default function Section({ level, children }) {  

return (  

<section className="section">  

	<LevelContext.Provider value={level}>  

		{children}  

	</LevelContext.Provider>  

</section>  

);  

}

刷題練習 - Merge Two Sorted Lists

Posted on 2022-09-24 Edited on 2025-09-07 In LeetCode

首先要先了解 linked lists 和陣列是不一樣的！！
linked lists是一種常見的資料結構，其使用node(節點)來記錄、表示、儲存資料(data)，並利用每個node中的pointer指向下一個node

題目：

You are given the heads of two sorted linked lists list1 and list2.

Merge the two lists in a one sorted list. The list should be made by splicing together the nodes of the first two lists.

Return the head of the merged linked list.

注意類似題目要設立一個 dummy 節點

如何訪問list 中某個節點的值，要從第一個節點開始，透過 next 依序訪問下一個節點重複操作直到抵達目標節點並讀取 value
訪問第一個節點為 list.val ; 訪問第二個節點 list.next.val ; 訪問第三個節點list.next.next.val
要將兩個 list 合併的方法，每次比較兩個而最小的數挑出，放入新的 list

/**
 * Definition for singly-linked list.
 * function ListNode(val, next) {
 *     this.val = (val===undefined ? 0 : val)
 *     this.next = (next===undefined ? null : next)
 * }
 */
/**
 * @param {ListNode} list1
 * @param {ListNode} list2
 * @return {ListNode}
 */

  var mergeTwoLists = function (l1, l2) {
    //current
    const dummy = new ListNode(-Infinity)
    //point dummy node
    let prev = dummy;
    while (l1 && l2) {
      if (l1.val <= l2.val) {
        prev.next = l1;
        //移動 prev list
        prev = l1
        //鏈錶指針 l1 就往後移動
        l1 = l1.next
      } else {
        prev.next = l2;
        prev = l2
        l2 = l2.next
      }
    }
    //如果 l1 是 null ,就是 l2
    if (!l1) prev.next = l2;
    if (!l2) prev.next = l1;
    return dummy.next
  };

  mergeTwoLists([1, 100], [3, 4, 6, 8])

刷題練習 - Valid Parentheses

Posted on 2022-09-24 Edited on 2025-09-07 In LeetCode

對於刷題總時敬而遠之，記得剛開始學習 JavaScript 時，有挑幾題來練習，看到題目後完全不知道該如何著手，甚至有些題目還要反覆看幾次才比較理解。畢竟也踏入前端工程師近一年的時間，使用 JavaScript 也有兩年了，該是好好鑽研練習 LeetCode。

題目：
Given a string s containing just the characters ‘(‘, ‘)’, ‘{‘, ‘}’, ‘[‘ and ‘]’, determine if the input string is valid.

An input string is valid if:

Open brackets must be closed by the same type of brackets.
Open brackets must be closed in the correct order.
Every close bracket has a corresponding open bracket of the same type.

以字串帶入，並要確認傳入的字串中的大括號, 中括號等是否有兩倆配對

Example 1:

1 2	Input: s = "()" Output: true

1 2	Input: s = "()[]{}" Output: true

1 2	Input: s = "(]" Output: false

製作一個物件，為括號的配對
存放括號的空物件
將字串進行迭代判斷

i 會loop 此字串
"([]){}"

第一圈：遇到 "("
stack = [ ")"]

第二圈：遇到 "["
stack = [ ")","]"]

第三圈：遇到 "]" , 此時，stack = [ ")","]"]
進入第二個判斷：stack[stack.length - 1] === ch
陣列的最後一個是否與 i=2 ,ch = "]" 互相配對，若配對成功則從陣列中刪除

第四圈：遇到 ")" , 此時，stack = [ ")"]
進入第二個判斷：stack[stack.length - 1] === ch
陣列的最後一個是否與 i=3 ,ch = ")" 互相配對，若配對成功則從陣列中刪除

第五圈：遇到 "{" , 此時，stack = []
stack = [ "}"]

第六圈：遇到 "}" , 此時，stack = [ "}"]
進入第二個判斷：stack[stack.length - 1] === ch
陣列的最後一個是否與 i=5 ,ch = "}" 互相配對，若配對成功則從陣列中刪除

  最後跳出陣列確認 stack.length === 0 => 為 0 表示皆配對成功

var isValid = function (s) {
  const hashMap = { "(": ")", "{": "}", "[": "]" };
  const stack = [];
  for (let ch of s) {
    if (hashMap[ch]) {
      // ch is an opening bracket
      stack.push(hashMap[ch]);
    } else if (stack.length > 0 && stack[stack.length - 1] === ch) {
      //當空陣列裡面有值且陣列的最後一個值和 key 是一樣的就從陣列中刪除
      // ch is a closing bracket and top of stack matches
      stack.pop();
    } else {
      // ch is a closing bracket and top of the stack doesn't match
      return false;
    }
  }
  return stack.length === 0;
};

Hello World

Posted on 2022-09-17

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1	$ hexo new "My New Post"

More info: Writing

Run server

1	$ hexo server

More info: Server

Generate static files

1	$ hexo generate

More info: Generating

Deploy to remote sites

1	$ hexo deploy

More info: Deployment

React- 元件 / props

Posted on 2022-09-04 Edited on 2022-11-04 In React

之前曾快速的學習了React 資料的建立與傳遞方式，並寫了篇文章，最近因為六角讀書會活動也再次更深入一些的學習 React ，並將一些 React Hook 反覆使用練習。
因為目前工作主要還是以 Vue 進行開發，所以有時候會提一下兩者框架使用的相同或不同之處。

component 元件化

在 Vue 的撰寫中，也是會嘗試將頁面中的不同區塊做拆分。與 Vue 一樣，元件的的命名會以大寫為開頭。
透過減少重複為用意來建立元件化。

codepen-Component

多個資料，傳遞給單一元件

建立兩個元件 component1 , component2
建立共通元件 Board ，此元件可以各別放入兩個元件要傳入的資料(props)

codepen-共用元件

共同資料，傳遞給不同元件

codepen-共用資料

條件 render

這部分在官方文件就有清楚介紹，可以依據使用條件來顯示元件資料
使用條件判斷時，若不複雜，可以使用三元運算方式
- isLoggedIn ? <UserGreeting /> : <GuestGreeting />
conditional-rendering

元件資料傳遞

子傳父

範例將以 input 為範例
此方式的資料傳遞，有點類似於 Vue 中的 v-model 資料雙向綁定
使用 v-model 實現父子元件傳遞資料
在 React 可以將 useState 中設訂的值綁在元件上作為傳遞
在下方的圖示
在父層有 value , setValue

-> 其中 setValue 方法提供給子元件，同時就會讓子元件也產生改變 value 的能力（也就是可以使用父元件的方法）

要實現子傳父，就在父層掛一個 hook

快速認識 webpack

Posted on 2022-08-19 Edited on 2022-09-17

經常使用 vue 或Ｒeact 等前端框架來進行專案開發，但沒有機會好好來認識下他背後的打包工具：webpack
趁著這次六角釋出的基礎 webpack 教學，順道來記錄一下。

前端壓縮打包工具

從官網的圖，很明顯地就可以看到將左側複雜的檔案進行壓縮，並做項目管理
在 Vue , React 的背後都有使用 webpack
使用 webpack

安裝
建立 webpack 需要使用到 npm 初始化
npm init -y
安裝之後，會產生 package.jason 檔案
安裝 webpack 以及 webpack-cli ，並存在開發環境
npm install webpack webpack-cli --save-dev
- 會產生 package-lock.json => 紀錄版本詳細資訊
- node_modules 資料夾

進入點(entry)、輸出點(output)

/src/index.js
/dist/main.js
指令："build": "webpack" => 設定 webpack 將 src 中的 index.js 檔案輸出，放到 dist 資料夾
- 使用該指令 npm run build
  - build 之後產生 dist/main.js

entry, output 名稱修改

* 建立 `webpack.config.js` 檔案

const path = require('path');

module.exports = {
  //預設路徑位置
  entry: './src/index.js',
  output: {
    //輸出位置名稱(filename),檔案位置
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
};

//path.resolve(__dirname, 'dist')
// dirname當前資料夾路徑
//path.resolve 將相對路徑改為絕對路徑

讓每次產生的 bundle 名稱不一樣

搭配 plugin 來使用 HtmlWebpackPlugin

NPM script , 自訂指令

用 node 執行一段 JS ，位置為同層下的 hello.js
npm run hello
網站上線\部署或開發，可能都需要下不同指令來進行管理

mode 切換

不同模式下，會因程式內容而輸出不同內容
production 上線版模式, 輸出的 bundle 檔案會較為精簡
- 會壓縮優化，將程式碼壓成一行
- 不容易除錯與理解

CSS loader

幫助 webpack 載入 css
npm install --save-dev css-loader
CSS loader
webpack.config.js
別忘了在載入點加入 ·import css from './all.css'

const path = require('path');

module.exports = {
  //預設路徑位置
  entry: './src/index.js',
  output: {
    //輸出位置名稱(filename),檔案位置
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.css$/i, //只要副檔名為 .css 就會使用以下
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};

裝入 sass-loader

sass-loader

載入 webpack 測試伺服器

建立即時更新的方式
webpack-dev-server
npm install webpack-dev-server --save-dev
在 webpack.config.js 檔案設定
dev-server

devServer: {
  static: {
    directory: path.join(__dirname, 'dist'),
		//contentBase: path.join(__dirname, 'dist'),
  },
  compress: true,
  port: 9000,
open: true //可以即時更新
},

最後，指令調整，如此就可以開始進行編譯
webpack 也可以載入 node_module 下的東西
用 dist 下的檔案來部署

webpack.config.js 檔案
注意
mode: 設定development 或是 production
entry 進入點在哪
output 輸出去哪
module -> rule 下會放 scss-loader , babel-loader 等規則
plugins: webpack 主要是讀檔案，但透過 plugins ，如建立新的 html檔案, MiniCssExtractPlugin:將 css 從 js 抽離出來
devtool: ‘source-map’ => 協助檔案 debug

關於 Webpack，它是什麼？能夠做什麼？為什麼？怎麼做？— freeCodeCamp 的筆記
 Webpack 是什麼？模組打包工具的用途及基本 Webpack 教學

React- props / state 練習

Posted on 2022-05-08 Edited on 2022-11-04 In React

props, state 的應用

props 傳入參數的部分
state 讓組建本身有狀態

製作計數器

props
製作，讓計數器的數字變化，可以同步變化到 button 上的數字
- 在父層 App.vue 做一個內容的傳送
- 在子元件，要自訂一個變數，作為接收父層從來的資料

import "./styles.css";

type BtnProps = {
  btnNum: number;
};

const Btn: React.FC<BtnProps> = ({ btnNum }) => {
  return (
    <button>
      add 1<span>目前總數：{btnNum}</span>
    </button>
  );
};

export default function App() {
  const num = 0;
  return (
    <div className="App">
      <h1>Counter: {num}</h1>

      <Btn btnNum={num} />
    </div>
  );
}

進階，希望透過點擊 button 同步更改數值

讓 render (react 渲染機制)，可以在變數被變動的時候順便觸發渲染機制
- 改變變數 -> 觸發渲染
  使用 state 達成上述目的
對組建本身引入 state 機制
用 state 來做變數宣告，只要 state 變數有做變動都會觸發渲染機制
- 當變數有涉及於頁面上的更新，就會需要使用 state
Hook 本身多是 use 開頭
useState() 是一個 function

用陣列解構來取的 return 的值

1. 當前的值
1. 再回傳一個 function : 用來設定/變動第一個數值
  const [num2, setNum2] = useState(999)

example-1

實現父層數值變化，子組件隨之變化

應該將主要的更新動作都放置父組件
將放在父組件的事件，透過 props 方式傳給子組件，並將該變數放到按鈕的點擊事件上

example-2

Vue.js 3 - Slot

Posted on 2022-05-07 Edited on 2022-11-04 In Vue

剛學習 vue 的時候，對 slot 完全一竅不通，不了解要如何挖空多元件，來放入資料，更是不知道他能使用的時機是什麼時候，種種因素，讓我從官方文件找些範例釐清，也找了些文章閱讀加深記憶，順手也紀錄在部落格上～

使用時機：

使用同一個元件 , 但只有內文不同。
有時候資料是靜態，不常變動，甚至需要大量重複。這情況不必要使用 props。

共用樣式
從官網的範例可以看到，讓按鈕的文字可以彈性的變化。
named slot(具名插槽)

建立一個元件，其中含有多個slot區塊
範例連結

Scoped slots（作用域插槽）

把子元件的資料取出來，給父層使用
不同於前面 slot 的使用，是由父層輸入資料呈現於頁面
範例

資料來源:
vuejs
不只懂 Vue 語法：什麼是 slot？請示範 slot 的用法？
用範例理解 Vue.js #18：Slot

建立 login 檔案

確認 輸入框 有渲染至文件