Skip to content

Commit

Permalink
Merge pull request #919 from takenet/developer
Browse files Browse the repository at this point in the history
Developer
  • Loading branch information
WillianLomeu authored Oct 15, 2024
2 parents 2bbe9bd + e9b4394 commit 35b6dda
Show file tree
Hide file tree
Showing 32 changed files with 1,091 additions and 248 deletions.
1 change: 1 addition & 0 deletions .eslintignore
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ node_modules
dist
www
loader
cypress
# don't lint nyc coverage output
coverage

Expand Down
6 changes: 6 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -35,3 +35,9 @@ icons/
scripts/*.js

/screenshot

cypress/assets/
cypress/build/
cypress/dist/
cypress/host.config.json
cypress/index.html
10 changes: 10 additions & 0 deletions cypress.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import { defineConfig } from 'cypress';

export default defineConfig({
component: {
devServer: {
framework: 'create-react-app',
bundler: 'webpack',
},
},
});
95 changes: 95 additions & 0 deletions cypress/component/Input.cy.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
import { BdsInput } from '../dist/blip-ds-react';

describe('Teste de Renderização Input', () => {
// Teste de Renderização
it('deve renderizar o input com o label correto', () => {
cy.mount(<BdsInput label="Label" />);
cy.get('bds-input').should('have.attr', 'label', 'Label');
});
it('deve renderizar o input com o icon correto', () => {
cy.mount(<BdsInput icon="edit" />);
cy.get('bds-input').should('have.attr', 'icon', 'edit');
});
it('deve renderizar o input com o placeholder correto', () => {
cy.mount(<BdsInput placeholder="Digite aqui..." />);
cy.get('bds-input').should('have.attr', 'placeholder', 'Digite aqui...');
});
it('deve renderizar o input com o helperMessage correto', () => {
cy.mount(<BdsInput helperMessage="Mensagem de ajuda" />);
cy.get('bds-input').should('have.attr', 'helper-message', 'Mensagem de ajuda');
});
});

describe('Teste de Interação Input', () => {
// Teste de Interação de Focus
it('deve permitir que o usuário focalize o input', () => {
cy.mount(<BdsInput value="" dataTest="bds-input" />);
cy.get('bds-input').click();
cy.get('bds-input').should('have.focus');
});

// Teste de Interação de Digitação
it('deve permitir que o usuário digite no input', () => {
cy.mount(<BdsInput value="" dataTest="bds-input" />);

cy.get('bds-input').shadow().find('[data-test="bds-input"]').type('Hello, Cypress!');
cy.get('bds-input').shadow().find('[data-test="bds-input"]').should('have.value', 'Hello, Cypress!');
});
});

describe('Teste de Eventos Input', () => {
// Teste de Evento onChange
it('deve chamar o evento onChange ao digitar', () => {
cy.mount(<BdsInput value="" onBdsChange={cy.stub().as('bdsChange')} dataTest="bds-input" />);
cy.get('bds-input').shadow().find('[data-test="bds-input"]').type('Cypress');
cy.get('@bdsChange').should('have.been.called');
});
// Teste de Evento onInput
it('deve chamar o evento onInput ao digitar', () => {
cy.mount(<BdsInput value="" onBdsInput={cy.stub().as('bdsInput')} dataTest="bds-input" />);
cy.get('bds-input').shadow().find('[data-test="bds-input"]').type('Cypress');
cy.get('@bdsInput').should('have.been.called');
});
// Teste de Evento onBlur
it('deve chamar o evento onBlur', () => {
cy.mount(<BdsInput value="" onBdsOnBlur={cy.stub().as('bdsBlur')} dataTest="bds-input" />);
cy.get('bds-input').shadow().find('[data-test="bds-input"]').type('Cypress');
cy.realPress('Tab');
cy.get('@bdsBlur').should('have.been.called');
});
// Teste de Evento onFocus
it('deve chamar o evento onFocus', () => {
cy.mount(<BdsInput value="" onBdsFocus={cy.stub().as('bdsFocus')} dataTest="bds-input" />);
cy.get('bds-input').click();
cy.get('@bdsFocus').should('have.been.called');
});
// Teste de Evento onSubmit
it('deve chamar o evento onSubmit', () => {
cy.mount(<BdsInput value="" onBdsSubmit={cy.stub().as('bdsSubmit')} dataTest="bds-input" />);
cy.get('bds-input').shadow().find('[data-test="bds-input"]').type('Cypress{enter}');
cy.get('@bdsSubmit').should('have.been.called');
});
// Teste de Evento onBdsKeyDownBackspace
it('deve chamar o evento onBdsKeyDownBackspace', () => {
cy.mount(<BdsInput value="" onBdsKeyDownBackspace={cy.stub().as('bdsKeyDownBackspace')} dataTest="bds-input" />);
cy.get('bds-input').shadow().find('[data-test="bds-input"]').type('Cypress{backspace}');
cy.get('@bdsKeyDownBackspace').should('have.been.called');
});
});

describe('Teste de Acessibilidade Input', () => {
// Teste de Acessibilidade com Tab
it('deve ser possível navegar para o input usando a tecla Tab', () => {
cy.mount(
<>
<button>Botão anterior</button>
<BdsInput />
</>,
);
cy.get('button').first().focus();
cy.wait(50);
cy.realPress('Tab');
cy.wait(50);
cy.get('bds-input').should('have.focus');
});
});
5 changes: 5 additions & 0 deletions cypress/fixtures/example.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"name": "Using fixtures to represent data",
"email": "[email protected]",
"body": "Fixtures are a great way to mock data for responses to routes"
}
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
37 changes: 37 additions & 0 deletions cypress/support/commands.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
/// <reference types="cypress" />
// ***********************************************
// This example commands.ts shows you how to
// create various custom commands and overwrite
// existing commands.
//
// For more comprehensive examples of custom
// commands please read more here:
// https://on.cypress.io/custom-commands
// ***********************************************
//
//
// -- This is a parent command --
// Cypress.Commands.add('login', (email, password) => { ... })
//
//
// -- This is a child command --
// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
//
//
// -- This is a dual command --
// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
//
//
// -- This will overwrite an existing command --
// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
//
// declare global {
// namespace Cypress {
// interface Chainable {
// login(email: string, password: string): Chainable<void>
// drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
// dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
// visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
// }
// }
// }
12 changes: 12 additions & 0 deletions cypress/support/component-index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Components App</title>
</head>
<body>
<div data-cy-root></div>
</body>
</html>
45 changes: 45 additions & 0 deletions cypress/support/component.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
// ***********************************************************
// This example support/component.ts is processed and
// loaded automatically before your test files.
//
// This is a great place to put global configuration and
// behavior that modifies Cypress.
//
// You can change the location of this file or turn off
// automatically serving support files with the
// 'supportFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/configuration
// ***********************************************************

// Import commands.js using ES2015 syntax:
import './commands';

// Alternatively you can use CommonJS syntax:
// require('./commands')

import { mount } from 'cypress/react18';

import { defineCustomElements } from '../dist/esm/loader';

import 'cypress-real-events';

// Augment the Cypress namespace to include type definitions for
// your custom command.
// Alternatively, can be defined in cypress/support/component.d.ts
// with a <reference path="./component" /> at the top of your spec.
declare global {
namespace Cypress {
interface Chainable {
mount: typeof mount;
}
}
}

Cypress.Commands.add('mount', mount);

// Example use:
// cy.mount(<MyComponent />)

defineCustomElements(window);
9 changes: 9 additions & 0 deletions cypress/tsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
{
"compilerOptions": {
"target": "es5",
"lib": ["es5", "dom"],
"types": ["cypress", "node", "cypress-real-events"],
"jsx": "react-jsx"
},
"include": ["**/*.ts", "**/*.tsx"]
}
25 changes: 21 additions & 4 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,8 @@
"test:snapshot": "stencil test --e2e --screenshot",
"test:watch": "stencil test --spec --watch",
"test:coverage": "stencil test --spec --e2e --coverage",
"cypress:open": "cypress open",
"cypress:test": "cypress run --component",
"storybook": "storybook dev -p 6006",
"storybook:build": "storybook build -s www",
"storybook:deploy": "storybook-to-ghpages",
Expand All @@ -52,17 +54,19 @@
"@storybook/storybook-deployer": "^2.8.16",
"@storybook/testing-library": "^0.2.0",
"@storybook/theming": "^7.4.1",
"@typescript-eslint/eslint-plugin": "^5.26.0",
"@typescript-eslint/parser": "^5.23.0",
"@types/color": "^3.0.3",
"@types/jest": "27.5.1",
"@types/puppeteer": "5.4.6",
"@types/webpack": "^5.28.0",
"@typescript-eslint/eslint-plugin": "^5.26.0",
"@typescript-eslint/parser": "^5.23.0",
"babel-loader": "^8.2.5",
"babel-preset-react-app": "^10.0.1",
"color": "^4.2.3",
"commitizen": "^4.2.4",
"copy-webpack-plugin": "^11.0.0",
"cypress": "^13.15.0",
"cypress-real-events": "^1.13.0",
"cz-conventional-changelog": "^3.3.0",
"cz-customizable": "^6.3.0",
"cz-customizable-ghooks": "^2.0.0",
Expand All @@ -79,6 +83,7 @@
"npm-run-all": "^4.1.5",
"prettier": "^3.2.5",
"puppeteer": "^14.0.0",
"react-scripts": "^5.0.1",
"semantic-release": "^23.0.8",
"storybook": "^7.0.22",
"ts-node": "^10.7.0",
Expand Down Expand Up @@ -109,11 +114,23 @@
"config": "./.cz-config.js"
},
"ghooks": {
"pre-commit": "npm run eslint",
"pre-push": "npm run eslint && npm run test:coverage",
"pre-commit": "npm run eslint && npm run cypress:test",
"pre-push": "npm run eslint",
"commit-msg": "cz-customizable-ghooks $2"
}
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"license": "MIT",
"optionalDependencies": {
"fsevents": "^2.3.1"
Expand Down
17 changes: 17 additions & 0 deletions src/components.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import { avatarSize as avatarSize1 } from "./components/avatar-group/avatar-grou
import { AvatarDataList } from "./components/avatar-group/avatar-group-interface";
import { Shape } from "./components/badge/badge";
import { BannerAlign, BannerVariant, ButtonClose, Context } from "./components/banner/banner";
import { targets } from "./components/banner/banner-link/banner-link";
import { ButtonSize, ButtonType, ButtonVariant, IconTheme, IconType } from "./components/button/button";
import { colorsVariants, LoadingSpinnerVariant } from "./components/loading-spinner/loading-spinner";
import { ButtonSize as ButtonSize1 } from "./components/button/button";
Expand Down Expand Up @@ -332,6 +333,10 @@ export namespace Components {
* Set the link pass.
*/
"link": string;
/**
* Set the link pass.
*/
"target": targets;
}
interface BdsButton {
/**
Expand Down Expand Up @@ -785,6 +790,10 @@ export namespace Components {
* EndDateLimit. Insert a limiter to select the date period.
*/
"endDateLimit"?: string;
/**
* label in input, with he the input size increases.
*/
"label"?: string;
/**
* Language, Entered as one of the languages. Can be one of: 'pt_BR', 'es_ES', 'en_US'.
*/
Expand Down Expand Up @@ -3901,6 +3910,10 @@ declare namespace LocalJSX {
* Emitted when the link is clicked.
*/
"onBdsBannerLink"?: (event: BdsBannerLinkCustomEvent<any>) => void;
/**
* Set the link pass.
*/
"target"?: targets;
}
interface BdsButton {
/**
Expand Down Expand Up @@ -4375,6 +4388,10 @@ declare namespace LocalJSX {
* EndDateLimit. Insert a limiter to select the date period.
*/
"endDateLimit"?: string;
/**
* label in input, with he the input size increases.
*/
"label"?: string;
/**
* Language, Entered as one of the languages. Can be one of: 'pt_BR', 'es_ES', 'en_US'.
*/
Expand Down
11 changes: 9 additions & 2 deletions src/components/banner/banner-link/banner-link.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import { Component, h, Element, Event, EventEmitter, Prop } from '@stencil/core';

export type targets = 'blank' | 'self' | 'parent' | 'top' | 'framename';

@Component({
tag: 'bds-banner-link',
styleUrl: 'banner-link.scss',
Expand All @@ -12,6 +14,11 @@ export class BannerLink {
*/
@Prop() link: string;

/**
* Set the link pass.
*/
@Prop() target: targets = 'blank';

/**
* Data test is the prop to specifically test the component action object.
*/
Expand All @@ -23,13 +30,13 @@ export class BannerLink {

private _buttonClickHandler = () => {
this.bdsBannerLink.emit(this.el);
window.open(this.link);
window.open(this.link, `_${this.target}`);
};

private handleKeyDown(event) {
if (event.key == 'Enter') {
this.bdsBannerLink.emit(this.el);
window.open(this.link);
window.open(this.link, `_${this.target}`);
}
}

Expand Down
Loading

0 comments on commit 35b6dda

Please sign in to comment.