Merge pull request #963 from takenet/developer

Developer

blip-ds-react/src/components.ts

@@ -21,6 +21,7 @@ export const BdsAvatarGroup = /*@__PURE__*/createReactComponent<JSX.BdsAvatarGro
 export const BdsBadge = /*@__PURE__*/createReactComponent<JSX.BdsBadge, HTMLBdsBadgeElement>('bds-badge');
 export const BdsBanner = /*@__PURE__*/createReactComponent<JSX.BdsBanner, HTMLBdsBannerElement>('bds-banner');
 export const BdsBannerLink = /*@__PURE__*/createReactComponent<JSX.BdsBannerLink, HTMLBdsBannerLinkElement>('bds-banner-link');
+export const BdsBreadcrumb = /*@__PURE__*/createReactComponent<JSX.BdsBreadcrumb, HTMLBdsBreadcrumbElement>('bds-breadcrumb');
 export const BdsButton = /*@__PURE__*/createReactComponent<JSX.BdsButton, HTMLBdsButtonElement>('bds-button');
 export const BdsButtonGroup = /*@__PURE__*/createReactComponent<JSX.BdsButtonGroup, HTMLBdsButtonGroupElement>('bds-button-group');
 export const BdsButtonIcon = /*@__PURE__*/createReactComponent<JSX.BdsButtonIcon, HTMLBdsButtonIconElement>('bds-button-icon');

cypress/component/accordion.cy.tsx

@@ -0,0 +1,106 @@
+import { BdsAccordion, BdsAccordionBody, BdsAccordionHeader, BdsButton, BdsTypo } from '../dist/blip-ds-react';
+
+const Accordion = () => {
+  const paragraph =
+    'Um accordion é uma lista de cabeçalhos empilhados verticalmente que revelam ou ocultam seções de conteúdo associados.';
+  const toggle = () => {
+    const buttonElement = document.querySelector('bds-accordion');
+    buttonElement.toggle();
+  };
+  const open = () => {
+    const buttonElement = document.querySelector('bds-accordion');
+    buttonElement.open();
+  };
+  const close = () => {
+    const buttonElement = document.querySelector('bds-accordion');
+    buttonElement.close();
+  };
+  return (
+    <>
+      <button id="toggle" onClick={() => toggle()}>
+        toggle
+      </button>
+      <button id="open" onClick={() => open()}>
+        open
+      </button>
+      <button id="close" onClick={() => close()}>
+        close
+      </button>
+      <BdsAccordion
+        onBdsToggle={cy.stub().as('bdsToggle')}
+        onBdsAccordionOpen={cy.stub().as('bdsAccordionOpen')}
+        onBdsAccordionClose={cy.stub().as('bdsAccordionClose')}
+      >
+        <BdsAccordionHeader accordionTitle="Título do accordion"></BdsAccordionHeader>
+        <BdsAccordionBody>
+          <BdsTypo variant="fs-16">{paragraph}</BdsTypo>
+        </BdsAccordionBody>
+      </BdsAccordion>
+    </>
+  );
+};
+
+describe('Teste de Eventos Button', () => {
+  // Teste de Evento onBdsToggle
+  it('deve chamar o evento onBdsToggle ao clicar', () => {
+    cy.mount(<Accordion />);
+    cy.get('button[id=toggle]').click();
+    cy.get('@bdsToggle').should('have.been.called');
+  });
+  // Teste de Evento onBdsAccordionOpen
+  it('deve chamar o evento onBdsAccordionOpen ao clicar', () => {
+    cy.mount(<Accordion />);
+    cy.get('button[id=open]').click();
+    cy.get('@bdsAccordionOpen').should('have.been.called');
+  });
+  // Teste de Evento onBdsAccordionClose
+  it('deve chamar o evento onBdsAccordionClose ao clicar', () => {
+    cy.mount(<Accordion />);
+    cy.get('button[id=open]').click();
+    cy.get('button[id=close]').click();
+    cy.get('@bdsAccordionClose').should('have.been.called');
+  });
+});
+
+describe('Teste de Acessibilidade button', () => {
+  // Teste de Acessibilidade com Tab
+  it('deve ser possível navegar para o button usando a tecla Tab', () => {
+    cy.mount(<Accordion />);
+    cy.get('button[id=close]').first().focus();
+    cy.wait(50);
+    cy.realPress('Tab');
+    cy.wait(50);
+    cy.get('bds-accordion').find('bds-accordion-header').shadow().find('bds-icon.accButton').should('have.focus');
+  });
+  // Teste de Acessibilidade método toggle
+  it('Verificar se o método toggle esta sendo correspondido', () => {
+    cy.mount(<Accordion />);
+    cy.get('button[id=toggle]').click();
+    cy.get('bds-accordion')
+      .find('bds-accordion-body')
+      .shadow()
+      .find('.accordion_body')
+      .should('have.class', 'accordion_body_isOpen');
+  });
+  // Teste de Acessibilidade método open
+  it('Verificar se o método open esta sendo correspondido', () => {
+    cy.mount(<Accordion />);
+    cy.get('button[id=open]').click();
+    cy.get('bds-accordion')
+      .find('bds-accordion-body')
+      .shadow()
+      .find('.accordion_body')
+      .should('have.class', 'accordion_body_isOpen');
+  });
+  // Teste de Acessibilidade método close
+  it('Verificar se o método close esta sendo correspondido', () => {
+    cy.mount(<Accordion />);
+    cy.get('button[id=open]').click();
+    cy.get('button[id=close]').click();
+    cy.get('bds-accordion')
+      .find('bds-accordion-body')
+      .shadow()
+      .find('.accordion_body')
+      .should('not.have.class', 'accordion_body_isOpen');
+  });
+});

cypress/component/accordionGroup.cy.tsx

@@ -0,0 +1,90 @@
+import {
+  BdsAccordion,
+  BdsAccordionBody,
+  BdsAccordionGroup,
+  BdsAccordionHeader,
+  BdsButton,
+  BdsTypo,
+} from '../dist/blip-ds-react';
+
+const AccordionGroup = () => {
+  const paragraph =
+    'Um accordion é uma lista de cabeçalhos empilhados verticalmente que revelam ou ocultam seções de conteúdo associados.';
+
+  const openAll = () => {
+    const buttonElement = document.querySelector('bds-accordion-group');
+    buttonElement.openAll();
+  };
+  const closeAll = () => {
+    const buttonElement = document.querySelector('bds-accordion-group');
+    buttonElement.closeAll();
+  };
+  return (
+    <>
+      <button id="openAll" onClick={() => openAll()}>
+        openAll
+      </button>
+      <button id="closeAll" onClick={() => closeAll()}>
+        closeAll
+      </button>
+      <BdsAccordionGroup
+        onBdsAccordionOpenAll={cy.stub().as('bdsAccordionOpenAll')}
+        onBdsAccordionCloseAll={cy.stub().as('bdsAccordionCloseAll')}
+        collapse="multiple"
+      >
+        <BdsAccordion>
+          <BdsAccordionHeader accordion-title="Título do accordion"></BdsAccordionHeader>
+          <BdsAccordionBody>
+            <BdsTypo variant="fs-16">{paragraph}</BdsTypo>
+          </BdsAccordionBody>
+        </BdsAccordion>
+        <BdsAccordion>
+          <BdsAccordionHeader accordion-title="Título do accordion"></BdsAccordionHeader>
+          <BdsAccordionBody>
+            <BdsTypo variant="fs-16">{paragraph}</BdsTypo>
+          </BdsAccordionBody>
+        </BdsAccordion>
+      </BdsAccordionGroup>
+    </>
+  );
+};
+
+describe('Teste de Eventos Button', () => {
+  // Teste de Evento onBdsAccordionOpen
+  it('deve chamar o evento onBdsAccordionOpen ao clicar', () => {
+    cy.mount(<AccordionGroup />);
+    cy.get('button[id=openAll]').click();
+    cy.get('@bdsAccordionOpenAll').should('have.been.called');
+  });
+  // Teste de Evento onBdsAccordionClose
+  it('deve chamar o evento onBdsAccordionClose ao clicar', () => {
+    cy.mount(<AccordionGroup />);
+    cy.get('button[id=openAll]').click();
+    cy.get('button[id=closeAll]').click();
+    cy.get('@bdsAccordionCloseAll').should('have.been.called');
+  });
+});
+
+describe('Teste de Acessibilidade button', () => {
+  // Teste de Acessibilidade método openAll
+  it('Verificar se o método openAll esta sendo correspondido', () => {
+    cy.mount(<AccordionGroup />);
+    cy.get('button[id=openAll]').click();
+    cy.get('bds-accordion')
+      .find('bds-accordion-body')
+      .shadow()
+      .find('.accordion_body')
+      .should('have.class', 'accordion_body_isOpen');
+  });
+  // Teste de Acessibilidade método closeAll
+  it('Verificar se o método closeAll esta sendo correspondido', () => {
+    cy.mount(<AccordionGroup />);
+    cy.get('button[id=openAll]').click();
+    cy.get('button[id=closeAll]').click();
+    cy.get('bds-accordion')
+      .find('bds-accordion-body')
+      .shadow()
+      .find('.accordion_body')
+      .should('not.have.class', 'accordion_body_isOpen');
+  });
+});

cypress/component/badge.cy.tsx

@@ -0,0 +1,29 @@
+import { BdsBadge } from '../dist/blip-ds-react';
+
+const Badge = () => {
+  return (
+    <>
+      <BdsBadge animation={true} shape="circle" color="system" icon="info"></BdsBadge>
+    </>
+  );
+};
+
+describe('Teste de Renderização Badge', () => {
+  // Teste de Renderização
+  it('deve renderizar o Badge com o shape correto', () => {
+    cy.mount(<Badge />);
+    cy.get('bds-badge').should('have.attr', 'shape', 'circle');
+  });
+  it('deve renderizar o Badge com o color correto', () => {
+    cy.mount(<Badge />);
+    cy.get('bds-badge').should('have.attr', 'color', 'system');
+  });
+  it('deve renderizar o Badge com o icon correto', () => {
+    cy.mount(<Badge />);
+    cy.get('bds-badge').should('have.attr', 'icon', 'info');
+  });
+  it('deve renderizar o Badge com o animation correto', () => {
+    cy.mount(<Badge />);
+    cy.get('bds-badge').should('have.attr', 'animation', 'true');
+  });
+});

cypress/component/banner.cy.tsx

@@ -0,0 +1,74 @@
+import { BdsBanner, BdsBannerLink, BdsButton } from '../dist/blip-ds-react';
+
+const Banner = () => {
+  const toogle = () => {
+    const bannerElement = document.querySelector('bds-banner');
+    bannerElement.toggle();
+  };
+  return (
+    <>
+      <button onClick={() => toogle()}>Botão anterior</button>
+      <BdsBanner
+        variant="system"
+        buttonClose="true"
+        context="outside"
+        onBdsBannerClose={cy.stub().as('bdsBannerClose')}
+        dtButtonClose="should-button-close"
+      >
+        Instabilidade na plataforma? Não se preocupe, já estamos resolvendo!
+        <BdsBannerLink onBdsBannerLink={cy.stub().as('bdsBannerLink')}>Acompanhe aqui</BdsBannerLink>
+      </BdsBanner>
+    </>
+  );
+};
+
+describe('Teste de Renderização Banner', () => {
+  // Teste de Renderização
+  it('deve renderizar o banner com o variant correto', () => {
+    cy.mount(<Banner />);
+    cy.get('bds-banner').should('have.attr', 'variant', 'system');
+  });
+  it('deve renderizar o banner com o button-close correto', () => {
+    cy.mount(<Banner />);
+    cy.get('bds-banner').should('have.attr', 'button-close', 'true');
+  });
+  it('deve renderizar o banner com o context correto', () => {
+    cy.mount(<Banner />);
+    cy.get('bds-banner').should('have.attr', 'context', 'outside');
+  });
+});
+
+describe('Teste de Eventos Banner', () => {
+  // Teste de Evento onBdsBannerClose
+  it('deve chamar o evento onBdsBannerClose ao digitar', () => {
+    cy.mount(<Banner />);
+    cy.get('bds-banner')
+      .shadow()
+      .find('bds-button-icon[icon="close"]')
+      .shadow()
+      .find('[data-test="should-button-close"]')
+      .click();
+    cy.get('@bdsBannerClose').should('have.been.called');
+  });
+  // Teste de Evento bdsBannerLink
+  it('deve chamar o evento onBdsBannerLink ao digitar', () => {
+    cy.mount(<Banner />);
+    cy.get('bds-banner').find('bds-banner-link').click();
+    cy.get('@bdsBannerLink').should('have.been.called');
+  });
+});
+
+describe('Teste de Acessibilidade banner', () => {
+  // Teste de Acessibilidade método Toogle
+  it('Verificar se o método toggle esta sendo correspondido', () => {
+    cy.mount(<Banner />);
+    cy.get('bds-banner')
+      .shadow()
+      .find('bds-button-icon[icon="close"]')
+      .shadow()
+      .find('[data-test="should-button-close"]')
+      .click();
+    cy.get('button').click();
+    cy.get('bds-banner').should('not.have.class', 'banner--hide');
+  });
+});