avatar.spec.js 1.8 KB

123456789101112131415161718192021222324252627282930313233
  1. describe('avatar', () => {
  2. it('keyboard test', () => {
  3. cy.visit('http://127.0.0.1:6006/iframe.html?id=avatar--focus-test&args=&viewMode=story', {
  4. onBeforeLoad(win) {
  5. cy.stub(win.console, 'log').as('consoleLog'); // 测试时用到控制台的前置步骤
  6. },
  7. });
  8. // focus + esc + enter
  9. cy.get('#initial_focus_point').click();
  10. cy.wait(100);
  11. cy.get('#initial_focus_point').realPress('Tab'); // 按下tab键
  12. cy.wait(100);
  13. cy.get('.semi-avatar').eq(0).should('have.class', 'semi-avatar-focus'); // 第一个avatar应该有focus样式
  14. cy.get('.semi-avatar').eq(0).type('{enter}'); // 在第一个tag上按enter
  15. cy.wait(100);
  16. cy.get('@consoleLog').should('be.calledWith', 'click avatar 1'); // 控制台应该打印“click avatar 1”
  17. cy.get('.semi-avatar').eq(0).type('{esc}'); // 在第一个tag上按ESC
  18. cy.wait(100);
  19. cy.get('.semi-avatar').eq(0).should('not.have.class', 'semi-avatar-focus'); // 第一个avatar应该无focus样式
  20. cy.get('.semi-avatar').eq(0).type('{backspace}'); // 模拟聚焦状态按其他按键的兜底
  21. });
  22. it('src Change', () => {
  23. cy.visit('http://127.0.0.1:6006/iframe.html?id=avatar--src-change&args=&viewMode=story');
  24. cy.get('.semi-radio').eq(1).click(); // 点击第二个按钮,切换src为successSrc2
  25. cy.wait(500);
  26. cy.get('.semi-avatar').eq(0).should('have.class', 'semi-avatar-img'); // 图片成功加载,avatar应该具备class: semi-avatar-img
  27. cy.get('.semi-radio').eq(2).click(); // 点击第三个按钮,切换src为errorSrc
  28. cy.wait(1000);
  29. cy.get('.semi-avatar').eq(0).should('have.class', 'semi-avatar-grey'); // 图片加载失败,avatar应该具备class: semi-avatar-grey
  30. });
  31. });