// 之後要優化: 每一個測試步驟要分開寫，不寫在同一個 it 裡面、將測試寫成 report 輸出成 html(嘗試)、功能模組化
const baseUrl = Cypress.env('baseUrl');

describe("Login to Logout", () => {
  before(() => {
    cy.visit(baseUrl); // 測試可否進入網站
    cy.contains("h2", "LOGIN"); // 是否轉址到 /login 並顯示畫面
    cy.url().should('include', 'login') // url path 要有 'Login'，確定進入 login page
  })

  it("test login success and error", () => {
    // 驗證帳密是否刪除前後空白、錯誤帳密是否顯示驗證、Button display
    cy.fixture('users/id-not-exists').then(({username, password}) => {
      cy.get('.btn-lg').should('be.disabled');
      cy.get('#account').should('have.focus').type(username);
      cy.get('.btn-lg').should('be.disabled');
      cy.get('#password').type(password);
      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(`   ${Cypress.env('user').username}   `);
    cy.get('#password').clear().type(`   ${Cypress.env('user').password}   `);
    cy.get('.btn-lg').click();
    cy.get('#account').should('have.value', Cypress.env('user').username);
    cy.get('#password').should('have.value', Cypress.env('user').password);
    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();
  });
});