describe('未来全栈教学案例库 项目启动', () => {
  it('访问项目首页', () => {
    cy.visit('/')
    cy.contains('案例')
  })

  it('首页跳转编辑案例页，完成编辑测试', () => {
    cy.visit('/')

    // 查找包含特定文本的 ion-button 并点击 
    // 注意，contains参数2 可以用正则表达式匹配部分内容，如果用字符串，需要写全部内容，否则匹配不到
    cy.contains('ion-button', /输入编辑/, { timeout: 10000 }).click();
    cy.contains('星星打分')
    
    // 覆盖测试：测试所有选项点击效果
    for (let index = 1; index < 10; index++) {
      cy.get('app-edit-ratio-star .list ion-icon').eq(index).click({force:true});
      cy.wait(100)
      cy.get('app-edit-ratio-star .list ion-icon').eq(index).should('have.attr', 'name').and('equal', "star");

    }
    for (let index = 8; index > -1; index--) {
      cy.get('app-edit-ratio-star .list ion-icon').eq(index).click({force:true});
      cy.wait(100)
      cy.get('app-edit-ratio-star .list ion-icon').eq(index).should('have.attr', 'name').and('equal', "star");
    }
    // 置空测试，点击星星后，再次点击，数值设为0
    cy.get('app-edit-ratio-star .list ion-icon').eq(4).click({force:true});
    cy.get('app-edit-ratio-star .list ion-icon').eq(4).click({force:true});
    cy.get('ion-input[name=score]').should('exist');
    // 验证输入的值 应该为 0
    // 注意ion-input本身不具有value，而是需要找到内部shadow dom的真实input，进行校验
    cy.get('ion-input[name=score]').find('input').should('have.value', '0');
   
  })
})