Feature: Testes de componentes

.github/workflows/build-and-test.js.yml

@@ -29,5 +29,5 @@ jobs:
         run: npm run build
 
       - name: Tests
-        working-directory: apps/web
+        working-directory: packages/visu
         run: npm run test

.github/workflows/publish-github-packages.yml

@@ -28,14 +28,14 @@ jobs:
 
     - name: Install Dependencies
       run: npm ci
-      
+
     - name: Build Project
       run: npm run build
 
     - name: Tests
-      working-directory: apps/web
+      working-directory: packages/visu
       run: npm run test
-      
+
     - name: Publish
       working-directory: packages/visu
       run: npm publish

README.md

@@ -18,13 +18,13 @@ O projeto é um monorepo, que foi criado utilizando o [Turborepo](https://turbo.
 
 - `docs`: Um projeto para a documentação dos componentes criados na biblioteca Visu realizados no [Storybook](https://storybook.js.org/) que foi configurado nesse projeto.
 
-- `web`: Projeto para validação e testes dos componentes criados na biblioteca Visu utilizando [Jest](https://jestjs.io) e [React Testing Library](https://testing-library.com/docs/react-testing-library/intro). Esse projeto possui a biblioteca instalada e utiliza ela para validar o comportamento da biblioteca e dos componentes em um projeto externo.
+- `web`: Projeto para validação manual dos componentes criados na biblioteca Visu. Esse projeto possui a biblioteca instalada e utiliza ela para validar o comportamento da biblioteca e dos componentes em um projeto externo.
 
 ### Packages
 
 - `tsconfig`: `tsconfig.json`s used throughout the monorepo.
 
-- `visu`: Projeto onde são desenvolvidos os componentes da bilbioteca Visu. O projeto utiliza [Vite](https://vitejs.dev), [Stitches](https://stitches.dev/docs/introduction) e realiza o build em [Modo Lib](https://storybook.js.org) da pasta `src/library` para a publicação da biblioteca.
+- `visu`: Projeto onde são desenvolvidos os componentes da bilbioteca Visu. O projeto utiliza [Vite](https://vitejs.dev), [Stitches](https://stitches.dev/docs/introduction) e realiza o build em [Modo Lib](https://storybook.js.org) da pasta `src/library` para a publicação da biblioteca. O projeto testa os componentes utilizando [Jest](https://jestjs.io) e [React Testing Library](https://testing-library.com/docs/react-testing-library/intro).
 
 ### Build
 
@@ -44,13 +44,13 @@ npm run dev
 
 ### Teste
 
-Para executar o teste no projeto `apps/web` utilize o comando abaixo na raiz do projeto:
+Para executar os testes da biblioteca, acesse o diretório `packages/visu` e utilize o comando abaixo:
 
 ```
 npm run test
 ```
 
-Para executar o teste em apenas um arquivo do projeto `apps/web` utilize o comando abaixo na raiz do projeto:
+Para executar os testes em apenas um arquivo da biblioteca, acesse o diretório `packages/visu` e utilize o comando abaixo:
 
 ```
 npm run test -- [nome].test.tsx

apps/web/README.md

@@ -1,5 +1,5 @@
 <p align="center">
-  <h1 align="center">Visu - Tests</h1>
+  <h1 align="center">Visu - Manual Tests</h1>
 </p>
 
 <p align="center">
@@ -8,31 +8,43 @@
   </a>
 </p>
 
-Este projeto foi criado para os Testes da Biblioteca de Componentes Visu
+Este projeto foi criado para testar a Biblioteca de Componentes Visu de forma manual. O objetivo é conseguir testar o comportamento e estilização dos componentes quando instalados em um projeto.
 
-## Visu Tests
+## Visu Manual Tests
 
-O projeto utiliza o [Jest](https://jestjs.io/pt-BR/) junto com o [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/) para realizar os testes dos componentes da Biblioteca.
+O projeto utiliza o [Vite](https://vitejs.dev/) junto com o [React](https://pt-br.reactjs.org/) para criar o ambiente em que os testes manuais possam ser executados.
 
-A Biblioteca Visu é uma dependência desse projeto, e esse projeto utiliza o Jest com React Testing Library para testar os componentes da componentes da Visu. Os testes se encontram em `__tests__` e cada arquivo representa um componente da Biblioteca.
+A Biblioteca Visu é uma dependência desse projeto, e para testar um componente basta importar o componente no `src/App.tsx` e utilizar ele para verificar se está tudo ok.
+## Testar um componente
 
-## Desenvolvimento
-
-Para desenvolver um teste certifique-se de que realizou a instalação de todas as dependências, executando `npm install` na raiz do projeto.
-O script `test` está configurado nesse projeto para executar os testes. Para executar o comando certifique-se de que está no diretório do projeto `web` e execute:
+Para testar um componente certifique-se de que realizou a instalação de todas as dependências, executando `npm install` na raiz do projeto.
+Execute o projeto com o script `dev`, utilizando o comando:
 
 ```bash
-npm run test
+npm run dev
 ```
 
-### Test watch
+Entre no arquivo `src/App.tsx` e insira o componente na área de testes
 
-O script `test:watch` está configurado nesse projeto para executar os testes em modo watch. Para executar o comando certifique-se de que está no diretório do projeto `web` e execute:
 
-```bash
-npm run test:watch
+```typescript
+function App() {
+  return (
+    <C.Main>
+      <C.Container>
+        {/* ==================== TEST AREA ==================== */}
+
+
+
+        {/* ==================== TEST AREA ==================== */}
+      </C.Container>
+    </C.Main>
+  )
+}
 ```
 
+
+
 ## License
 
 [Copyright](./LICENSE)

apps/web/package.json

@@ -6,33 +6,22 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
-    "preview": "vite preview",
-    "test": "jest --detectOpenHandles",
-    "test:watch": "jest --watch --detectOpenHandles",
-    "ci": "jest --ci"
+    "preview": "vite preview"
   },
   "dependencies": {
     "@coaktion/visu": "*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "tsconfig": "*",
     "@stitches/react": "^1.2.8",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^14.4.3",
-    "@types/jest": "^29.4.0",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",
-    "@types/testing-library__jest-dom": "^5.14.5",
     "@vitejs/plugin-react": "^3.0.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^29.4.0",
-    "jest-environment-jsdom": "^29.4.0",
-    "ts-jest": "^29.0.5",
     "ts-node": "^10.9.1",
+    "tsconfig": "*",
     "typescript": "^4.9.4",
     "vite": "^4.0.0"
   }
-}
+}

apps/web/src/App.tsx

@@ -1,4 +1,5 @@
-// import { Button } from '@coaktion/visu'
+import { Button, Input, Text } from '@coaktion/visu'
+import { Envelope } from 'phosphor-react'
 import * as C from './styles/index'
 
 function App() {
@@ -7,6 +8,39 @@ function App() {
       <C.Container>
         {/* ========================= TEST AREA ========================= */}
 
+        <Button.Root onClick={() => {console.log('click')}}>Botão</Button.Root>
+
+        <Button.Root onClick={() => {console.log('click')}}>
+          Botão com Ícone
+          <Button.Icon>
+            <Envelope />
+          </Button.Icon>
+        </Button.Root>
+
+        <Input.Root>
+          <Input.Input placeholder='Input' />
+        </Input.Root>
+
+        <Input.Root>
+          <Input.Input placeholder='Input com ícone' />
+          <Input.Icon>
+            <Envelope/>
+          </Input.Icon>
+        </Input.Root>
+
+        <Input.Root>
+          <Input.Input placeholder='Input com ação no ícone' />
+          <Input.Icon onClick={() => {console.log('click')}}>
+            <Envelope/>
+          </Input.Icon>
+        </Input.Root>
+
+        <Text>Text</Text>
+
+        <Text color='primary' size="lg" underline link="primary" as='a'>
+          Text como link
+        </Text>
+
         {/* ========================= TEST AREA ========================= */}
       </C.Container>
     </C.Main>