cypress login test pass

.gitignore

@@ -34,3 +34,4 @@ vscode
 # local env files
 .env.local
 .env.*.local
+.env.demo

cypress.config.js

@@ -4,6 +4,6 @@ const { defineConfig } = require("cypress");
 module.exports = defineConfig({
   e2e: {
     specPattern: "cypress/e2e/**/*.{cy,spec}.{js,jsx,ts,tsx}",
-    baseUrl: "http://localhost:4173",
+    baseUrl: '',
   },
 });

cypress/e2e/example.cy.js

@@ -1,8 +0,0 @@
-// https://docs.cypress.io/api/introduction/api.html
-
-describe("My First Test", () => {
-  it("visits the app root url", () => {
-    cy.visit("/");
-    cy.contains("h1", "You did it!");
-  });
-});

cypress/e2e/loginToLogout.cy.js

@@ -0,0 +1,39 @@
+// 之後要優化: 加入生命週期、每一個測試步驟要分開寫，不寫在同一個 it 裡面、將測試寫成 report 輸出成 html(嘗試)
+
+describe("Login to Logout", () => {
+  before(() => {
+    cy.visit("/"); // 測試可否進入網站
+    cy.contains("h2", "LOGIN"); // 是否轉址到 /login 並顯示畫面
+    cy.url().should('include', 'login') // url path 要有 'Login'，確定進入 login page
+  })
+
+  it("login error username and password", () => {
+    // 驗證帳密是否刪除前後空白、輸入錯誤是否彈跳驗證、Button display
+    cy.get('.btn-lg').should('be.disabled');
+    cy.get('#account').should('have.focus').type('  test  ');
+    cy.get('.btn-lg').should('be.disabled');
+    cy.get('#password').type('  test  ');
+    cy.get('.btn-lg').click();
+    cy.get('#account').should('have.value', 'test');
+    cy.get('#password').should('have.value', 'test');
+    cy.get('form').submit();
+    cy.contains("p", "Incorrect account or password.");
+    cy.url().should('include', 'login');
+
+    // 正確帳密登入
+    cy.get('#account').clear().type('');
+    cy.get('#password').clear().type('');
+    cy.get('.btn-lg').click();
+    cy.get('form').submit(); // 選取 form 表單並發送
+
+    // 轉址到 files 頁
+    cy.url().should('include', 'files');
+    cy.get('a #iconMember').scrollIntoView().click();
+
+    // 轉址到會員頁
+    cy.url().should('include', 'member-area');
+
+    // 登出
+    cy.get('.btn-sm').contains('log out').click();
+  });
+});

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "lucia-frontend",
+  "name": "frontend",
   "version": "0.2.0",
   "private": true,
   "scripts": {

src/components/icons/IconMember.vue

@@ -1,5 +1,5 @@
 <template>
-  <svg width="40" height="40" viewBox="0 0 40 40" fill="black" xmlns="http://www.w3.org/2000/svg">
+  <svg width="40" height="40" viewBox="0 0 40 40" fill="black" xmlns="http://www.w3.org/2000/svg" id="iconMember">
   <circle cx="20" cy="20" r="20" fill="white"/>
   <path d="M40 20.0018C40.0001 16.6744 39.1701 13.3995 37.5852 10.4739C36.0004 7.5482 33.7107 5.06419 30.9236 3.24683C28.1365 1.42948 24.9401 0.336201 21.6239 0.0660405C18.3076 -0.20412 14.9764 0.357371 11.9319 1.69965C8.88748 3.04193 6.22597 5.12259 4.1885 7.75315C2.15104 10.3837 0.802001 13.481 0.263595 16.7646C-0.274811 20.0481 0.0144265 23.4141 1.10511 26.5577C2.19579 29.7012 4.05344 32.523 6.50981 34.7673L6.7451 34.9634C10.3981 38.208 15.1142 40 20 40C24.8858 40 29.6019 38.208 33.2549 34.9634L33.4902 34.7673C35.5431 32.8948 37.1826 30.6143 38.3035 28.0717C39.4245 25.5291 40.0023 22.7805 40 20.0018ZM2.35294 20.0018C2.349 17.1207 3.05046 14.2824 4.39604 11.7349C5.74163 9.18731 7.69042 7.00795 10.0722 5.38712C12.454 3.76629 15.1964 2.75327 18.0599 2.43653C20.9234 2.11979 23.8209 2.50896 26.4993 3.57007C29.1778 4.63117 31.5557 6.33193 33.4255 8.52381C35.2952 10.7157 36.6 13.332 37.2257 16.1444C37.8515 18.9567 37.7792 21.8795 37.0153 24.6574C36.2513 27.4354 34.8189 29.9841 32.8431 32.0809C30.9901 29.2141 28.2281 27.0527 25 25.9433C26.6114 24.8699 27.8347 23.3065 28.489 21.4841C29.1433 19.6617 29.1938 17.6772 28.6331 15.8239C28.0725 13.9706 26.9303 12.3469 25.3756 11.1929C23.8209 10.0389 21.9362 9.41584 20 9.41584C18.0638 9.41584 16.1791 10.0389 14.6244 11.1929C13.0697 12.3469 11.9275 13.9706 11.3669 15.8239C10.8062 17.6772 10.8567 19.6617 11.511 21.4841C12.1653 23.3065 13.3886 24.8699 15 25.9433C11.7719 27.0527 9.00992 29.2141 7.15686 32.0809C4.06852 28.8179 2.34915 24.4947 2.35294 20.0018ZM13.3333 18.433C13.3333 17.1144 13.7243 15.8254 14.4569 14.729C15.1894 13.6326 16.2306 12.7781 17.4488 12.2735C18.667 11.7689 20.0074 11.6369 21.3006 11.8941C22.5938 12.1514 23.7817 12.7863 24.714 13.7187C25.6464 14.6511 26.2813 15.8391 26.5386 17.1324C26.7958 18.4256 26.6638 19.7662 26.1592 20.9844C25.6546 22.2027 24.8001 23.2439 23.7038 23.9765C22.6075 24.7091 21.3185 25.1001 20 25.1001C18.2335 25.0949 16.5408 24.3908 15.2917 23.1416C14.0425 21.8925 13.3385 20.1997 13.3333 18.433ZM8.90196 33.728C10.0553 31.8159 11.6831 30.2342 13.6275 29.1362C15.5719 28.0383 17.767 27.4613 20 27.4613C22.233 27.4613 24.428 28.0383 26.3725 29.1362C28.3169 30.2342 29.9447 31.8159 31.098 33.728C27.9556 36.2653 24.0388 37.6492 20 37.6492C15.9612 37.6492 12.0444 36.2653 8.90196 33.728Z"/>
   </svg>