Merge pull request #976 from takenet/developer

Developer

.storybook/main.js

@@ -16,6 +16,6 @@ module.exports = {
   },
   docs: {
     autodocs: true,
-    defaultName: 'Overview'
+    defaultName: 'Visão Geral'
   },
 };

.storybook/manager.js

@@ -3,14 +3,12 @@ import YourTheme from './YourTheme';
 
 addons.setConfig({
   theme: YourTheme,
-  isFullscreen: false,
-  showNav: false,
-  showPanel: true,
   panelPosition: 'bottom',
+  bottomPanelHeight: 600,
   enableShortcuts: true,
-  showToolbar: false,
-  selectedPanel: 'panel',
-  initialActive: 'canvas',
+  showToolbar: true,
+  selectedPanel: 'undefined',
+  initialActive: 'sidebar',
   sidebar: {
     showRoots: true,
     collapsedRoots: ['other'],

.storybook/preview.js

@@ -24,7 +24,7 @@ export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },
   options: {
     storySort: {
-      order: ["Welcome", "Getting Started", "Tokens", "Components", "Snippets"]
+      order: ["Welcome", "Vamos Começar", "Integrações", "Tokens", "Components", "Snippets", "Templates"]
     }
   },
   controls: {

cypress/component/card.cy.tsx

@@ -0,0 +1,76 @@
+import {
+  BdsAvatar,
+  BdsButtonIcon,
+  BdsCard,
+  BdsCardBody,
+  BdsCardFooter,
+  BdsCardHeader,
+  BdsCardSubtitle,
+  BdsCardTitle,
+  BdsGrid,
+  BdsIcon,
+  BdsTypo,
+} from '../dist/blip-ds-react';
+
+const Card = () => {
+  return (
+    <>
+      <button>Botão anterior</button>
+      <BdsCard clickable={true} height="200px" width="fit-content" onBdsClick={cy.stub().as('bdsClick')}>
+        <BdsCardHeader align="">
+          <BdsAvatar name="Blip" size="small" />
+          <BdsGrid direction="column">
+            <BdsCardTitle text="@TakeBlip" />
+            <BdsCardSubtitle text="10/10/21 11:20 | atualizado há 10 min" />
+          </BdsGrid>
+          <BdsButtonIcon icon="more-options-vertical" size="small" variant="secondary" />
+        </BdsCardHeader>
+        <BdsCardBody>
+          <BdsGrid align-items="center" direction="column" gap="1" justify-content="center" xxs="12">
+            <BdsIcon name="blip-chat" size="brand" type="logo" />
+          </BdsGrid>
+        </BdsCardBody>
+        <BdsCardFooter align="flex-start">
+          <BdsTypo bold="bold">Blip Chat</BdsTypo>
+        </BdsCardFooter>
+      </BdsCard>
+    </>
+  );
+};
+
+describe('Teste de Renderização Card', () => {
+  // Teste de Renderização
+  it('deve renderizar o button com o clickable correto', () => {
+    cy.mount(<Card />);
+    cy.get('bds-card').should('have.attr', 'clickable', 'true');
+  });
+  it('deve renderizar o button com o height correto', () => {
+    cy.mount(<Card />);
+    cy.get('bds-card').should('have.attr', 'height', '200px');
+  });
+  it('deve renderizar o button com o width correto', () => {
+    cy.mount(<Card />);
+    cy.get('bds-card').should('have.attr', 'width', 'fit-content');
+  });
+});
+
+describe('Teste de Eventos Card', () => {
+  // Teste de Evento bdsClick
+  it('deve chamar o evento onBdsClick ao clicar', () => {
+    cy.mount(<Card />);
+    cy.get('bds-card').click();
+    cy.get('@bdsClick').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(<Card />);
+    cy.get('button').first().focus();
+    cy.wait(50);
+    cy.realPress('Tab');
+    cy.wait(50);
+    cy.get('bds-card').should('have.focus');
+  });
+});

cypress/component/checkbox.cy.tsx

@@ -0,0 +1,57 @@
+import { BdsCheckbox } from '../dist/blip-ds-react';
+
+const Checkbox = () => {
+  const toggle = () => {
+    const buttonElement = document.querySelector('bds-checkbox');
+    buttonElement.toggle();
+  };
+  return (
+    <>
+      <button id="toggle" onClick={() => toggle()}>
+        Botão anterior
+      </button>
+      <BdsCheckbox label="Opção do checkbox" name="check" onBdsChange={cy.stub().as('bdsChange')}>
+        Checkbox
+      </BdsCheckbox>
+    </>
+  );
+};
+
+describe('Teste de Renderização Checkbox', () => {
+  // Teste de Renderização
+  it('deve renderizar o button com o label correto', () => {
+    cy.mount(<Checkbox />);
+    cy.get('bds-checkbox').should('have.attr', 'label', 'Opção do checkbox');
+  });
+  it('deve renderizar o button com o name correto', () => {
+    cy.mount(<Checkbox />);
+    cy.get('bds-checkbox').should('have.attr', 'name', 'check');
+  });
+});
+
+describe('Teste de Eventos Checkbox', () => {
+  // Teste de Evento bdsChange
+  it('deve chamar o evento onBdsChange ao clicar', () => {
+    cy.mount(<Checkbox />);
+    cy.get('bds-checkbox').shadow().find('label').click();
+    cy.get('@bdsChange').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(<Checkbox />);
+    cy.get('button[id=toggle]').first().focus();
+    cy.wait(50);
+    cy.realPress('Tab');
+    cy.wait(50);
+    cy.get('bds-checkbox').should('have.focus');
+  });
+  // Teste de Acessibilidade método toggle
+  it('Verificar se o método toggle esta sendo correspondido', () => {
+    cy.mount(<Checkbox />);
+    cy.get('button[id=toggle]').click();
+    cy.get('bds-checkbox').shadow().find('.checkbox').should('have.class', 'checkbox--selected');
+  });
+});

cypress/component/chipClickable.cy.tsx

@@ -0,0 +1,74 @@
+import { BdsChipClickable } from '../dist/blip-ds-react';
+
+const ChipClickable = () => {
+  return (
+    <>
+      <button>Botão anterior</button>
+      <BdsChipClickable
+        avatar="Michael Scott"
+        clickable
+        close
+        color="default"
+        icon="edit"
+        size="standard"
+        onChipClickableClick={cy.stub().as('chipClickableClick')}
+      >
+        ChipClickable
+      </BdsChipClickable>
+    </>
+  );
+};
+
+describe('Teste de Renderização ChipClickable', () => {
+  // Teste de Renderização
+  it('deve renderizar o button com o avatar correto', () => {
+    cy.mount(<ChipClickable />);
+    cy.get('bds-chip-clickable').should('have.attr', 'avatar', 'Michael Scott');
+  });
+  // Teste de Renderização
+  it('deve renderizar o button com o clickable correto', () => {
+    cy.mount(<ChipClickable />);
+    cy.get('bds-chip-clickable').should('have.attr', 'clickable', 'true');
+  });
+  // Teste de Renderização
+  it('deve renderizar o button com o close correto', () => {
+    cy.mount(<ChipClickable />);
+    cy.get('bds-chip-clickable').should('have.attr', 'close', 'true');
+  });
+  // Teste de Renderização
+  it('deve renderizar o button com o color correto', () => {
+    cy.mount(<ChipClickable />);
+    cy.get('bds-chip-clickable').should('have.attr', 'color', 'default');
+  });
+  // Teste de Renderização
+  it('deve renderizar o button com o icon correto', () => {
+    cy.mount(<ChipClickable />);
+    cy.get('bds-chip-clickable').should('have.attr', 'icon', 'edit');
+  });
+  // Teste de Renderização
+  it('deve renderizar o button com o size correto', () => {
+    cy.mount(<ChipClickable />);
+    cy.get('bds-chip-clickable').should('have.attr', 'size', 'standard');
+  });
+});
+
+describe('Teste de Eventos ChipClickable', () => {
+  // Teste de Evento bdsClick
+  it('deve chamar o evento onBdsClick ao clicar', () => {
+    cy.mount(<ChipClickable />);
+    cy.get('bds-chip-clickable').shadow().find('.chip_clickable').click();
+    cy.get('@chipClickableClick').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(<ChipClickable />);
+    cy.get('button').first().focus();
+    cy.wait(50);
+    cy.realPress('Tab');
+    cy.wait(50);
+    cy.get('bds-chip-clickable').should('have.focus');
+  });
+});

cypress/component/chipSelected.cy.tsx

@@ -0,0 +1,64 @@
+import { BdsChipSelected } from '../dist/blip-ds-react';
+
+export interface Props {
+  event?: boolean;
+}
+
+const ChipSelected = (props: Props) => {
+  const eventAvalible = props.event;
+  const eventClick = (event) => {
+    if (eventAvalible) {
+      const input = document.getElementById('event-test') as HTMLInputElement;
+      input.value = event.detail.selected.toString();
+    }
+  };
+  return (
+    <>
+      <button id="prev_button">Botão anterior</button>
+      <BdsChipSelected color="default" icon="edit" selected={true} size="tall" onChipClick={(ev) => eventClick(ev)}>
+        ChipSelected
+      </BdsChipSelected>
+      {eventAvalible && <input id="event-test" />}
+    </>
+  );
+};
+
+describe('Teste de Renderização ChipSelected', () => {
+  // Teste de Renderização
+  it('deve renderizar o ChipSelected com o color correto', () => {
+    cy.mount(<ChipSelected event={false} />);
+    cy.get('bds-chip-selected').should('have.attr', 'color', 'default');
+  });
+  // Teste de Renderização
+  it('deve renderizar o ChipSelected com o icon correto', () => {
+    cy.mount(<ChipSelected event={false} />);
+    cy.get('bds-chip-selected').should('have.attr', 'icon', 'edit');
+  });
+  // Teste de Renderização
+  it('deve renderizar o ChipSelected com o size correto', () => {
+    cy.mount(<ChipSelected event={false} />);
+    cy.get('bds-chip-selected').should('have.attr', 'size', 'tall');
+  });
+});
+
+describe('Teste de Eventos ChipSelected', () => {
+  // Teste de Evento bdsClick
+  it('deve chamar o evento onChipClick ao clicar', () => {
+    cy.mount(<ChipSelected event={true} />);
+    cy.get('bds-chip-selected').shadow().find('.chip').click({ force: true });
+    cy.get('input#event-test').should('have.value', 'false');
+  });
+});
+
+describe('Teste de Acessibilidade ChipSelected', () => {
+  // Teste de Acessibilidade com Tab
+  it('deve ser possível navegar para o ChipSelected usando a tecla Tab', () => {
+    cy.mount(<ChipSelected event={false} />);
+    cy.waitUntil(() => cy.get('bds-chip-selected').should('be.visible'));
+    cy.get('button#prev_button').click();
+    cy.wait(50);
+    cy.realPress('Tab');
+    cy.wait(50);
+    cy.get('bds-chip-selected').should('have.focus');
+  });
+});

cypress/component/chipTag.cy.tsx

@@ -0,0 +1,24 @@
+import { BdsChipTag } from '../dist/blip-ds-react';
+
+const ChipTag = () => {
+  return (
+    <>
+      <BdsChipTag color="info" icon="edit">
+        ChipTag
+      </BdsChipTag>
+    </>
+  );
+};
+
+describe('Teste de Renderização ChipTag', () => {
+  // Teste de Renderização
+  it('deve renderizar o button com o color correto', () => {
+    cy.mount(<ChipTag />);
+    cy.get('bds-chip-tag').should('have.attr', 'color', 'info');
+  });
+  // Teste de Renderização
+  it('deve renderizar o button com o icon correto', () => {
+    cy.mount(<ChipTag />);
+    cy.get('bds-chip-tag').should('have.attr', 'icon', 'edit');
+  });
+});