semi-design/cypress/e2e/typography.spec.js

describe('typography', () => {
    it('ellipsis', () => {
        cy.visit('http://127.0.0.1:6006/iframe.html?id=typography--ellipsis-collapsible&args=&viewMode=story');
        cy.viewport(500, 500);
        cy.get('.semi-typography span').eq(0).contains('...');
        cy.get('.semi-typography-ellipsis-expand').eq(0).contains('展开').click();
        cy.get('.semi-typography').eq(0).contains('四大优势');

        cy.get('.semi-typography-ellipsis-expand').eq(0).contains('收起').click();
        cy.get('.semi-typography span').eq(0).contains('...');

    });

    it('showTooltip', () => {
        cy.visit('http://127.0.0.1:6006/iframe.html?id=typography--show-tooltip&args=&viewMode=story');
        cy.get('.semi-typography-ellipsis').eq(0).trigger('mouseover');
        cy.wait(2000);
        cy.get('.semi-tooltip-wrapper').contains('css 截断，本内容超出长度限制');
        cy.get('.semi-typography-ellipsis').eq(0).trigger('mouseout');
        cy.wait(2000);
        cy.get('.semi-typography-ellipsis').eq(1).trigger('mouseover');
        cy.wait(2000);
        cy.get('.semi-tooltip-wrapper').contains('pos 为 middle，无 expanded');
    });

    // todo:  The test currently work only in Electron
    // because the clipboard permission is granted when Cypress starts it.
    it('copyable', () => {
        cy.visit('http://127.0.0.1:6006/iframe.html?id=typography--copyable&args=&viewMode=story', {
            onBeforeLoad(win) {
                cy.stub(win.console, 'log').as('consoleLog'); // 测试时用到控制台的前置步骤
            },
        });

        cy.viewport(800, 1000);
        cy.get('.semi-typography-action-copy').eq(1).click();
        // 测试 copyable 中 onCopy 回调，控制台应该打印“点击右边的图标复制文本。”
        cy.get('@consoleLog').should('be.calledWith', '点击右边的图标复制文本。'); 
        cy.get('span').contains('复制成功');
        
        // cy.window()
        //     .its('navigator.clipboard')
        //     .invoke('点击右边的图标复制文本。');

        // 测试自定义复制图标是否正确
        cy.get('.semi-icon-setting').eq(0).click();
        cy.get('.semi-typography-action-copied').eq(1).children('span').contains('复制成功');
    });

    it('resize', () => {
        cy.visit('http://127.0.0.1:6006/iframe.html?id=typography--container-resize&args=&viewMode=story');
        cy.viewport(800, 1000);
        // 第一个，第二个容器宽度与页面一致，此时页面宽为 800，
        // 第一个 test，内容长度超出 2 行， css 截断为 2 行
        cy.get('.semi-typography-ellipsis').eq(0).should('have.css', 'height').and('eq', '40px');
        // 第二个 test, js 截断，有展开按钮
        cy.get('.semi-typography-ellipsis-expand').eq(0).contains('展开');

        cy.viewport(1860, 1000);
        // 屏幕尺寸变化， 内容长度符合尺寸要求，不发生截断
        // 第一个 test 需要完整显示， 以下测试仅明确尺寸变化
        // Todo： 更直接确定尺寸变化
        // 第二个 test 无展开按钮
        cy.get('.semi-typography-ellipsis-expand').should('not.exist');

        // 重新调整为宽度 800 原尺寸
        cy.viewport(800, 1000);
        cy.get('.semi-typography-ellipsis-expand').should('not.exist');
        cy.get('.semi-typography-ellipsis').eq(0).should('have.css', 'height').and('eq', '40px');
        cy.get('.semi-typography-ellipsis-expand').eq(0).contains('展开');

    });

    it('edge case', () => {
        cy.visit('http://127.0.0.1:6006/iframe.html?id=typography--edge-cases&args=&viewMode=story');
        cy.viewport(800, 1000);

        // 第二个 test 为固定尺寸，容器宽度符合预期，不应该显示展开按钮
        cy.get('.semi-typography-ellipsis').eq(1).children('.semi-typography-ellipsis-expand').should('not.exist');
    });

});