Conversation
…d process, and coding guidelines - Introduced new markdown files for build and release processes, module documentation, and project overview. - Added comprehensive guidelines for code style, naming conventions, and testing instructions. - Documented the structure and functionality of the UI module and the Docs module. - Established clear instructions for development environment setup, linting, and release procedures.
…Pinia, and Vitest - Create documentation for using Playwright for E2E testing, highlighting cross-browser support and debugging features. - Introduce a guideline against snapshot-only tests, emphasizing the importance of behavioral assertions. - Provide instructions for configuring Pinia testing with createTestingPinia and setActivePinia to avoid common errors. - Add recommendations for wrapping async components in Suspense for testing to prevent rendering issues. - Recommend using Vitest for Vue 3 testing, detailing setup and configuration for optimal performance. - Implement unit tests for QasAvatar component covering various props and rendering scenarios. - Establish a Vitest configuration file to streamline testing setup and improve compatibility with Vue components.
…tilities - Created unit tests for QasErrorMessage, QasField, QasLabel, QasPagination, QasRadio, QasSkeleton, QasStatus, QasTip, QasToggle, QasTooltip, and QasWhatsappLink components. - Implemented test utilities including mountComponent, createRouteStub, createRouterStub, createStoreActionStub, and createAxiosStub for better test management. - Enhanced vitest configuration to include setup files for mocking and global component registration.
- Implement tests for QasInfiniteScroll component to verify rendering, props, methods, and slot functionality. - Create tests for QasListItems component focusing on rendering, props, actions, and slot content. - Add tests for QasPageHeader component to check title, breadcrumbs, and slot rendering. - Develop tests for QasPasswordStrengthChecker component to assess password strength evaluation and slot functionality. - Write tests for QasProfile component to validate title, subtitle, and slot rendering. - Establish tests for QasStepper component to ensure proper rendering, props, and method functionality. - Create tests for QasTextTruncate component to verify text display, empty text handling, and slot content. - Implement tests for QasTimeline component to check rendering of timeline entries and description handling. - Add tests for QasToggleVisibility component to validate visibility toggling, props, and accessibility attributes.
- Removed unnecessary stubs for components in various test files. - Replaced stub existence checks with actual component checks using `findComponent`. - Simplified test setup by removing global stubs from mount options. - Enhanced readability and maintainability of test cases across multiple components.
…tureUploader, QasSortable, QasStepperFormView, QasTableGenerator, QasTabsGenerator, QasTransfer, QasTreeGenerator, QasUploader, and QasWelcome
There was a problem hiding this comment.
Pull request overview
Adiciona cobertura extensa de testes unitários (Vitest/Vue Test Utils) para diversos componentes do ui/, junto de pequenos ajustes em componentes e atualização de dependências/configurações para suporte ao novo setup.
Changes:
- Adiciona uma grande suíte de testes unitários para componentes do design system.
- Ajusta componentes (
QasRadio,QasBreakline) para melhorar API/robustez. - Atualiza dependências do toolchain (Vite/Vitest/Vue/jsdom/Quasar) e adiciona arquivos de instruções/contexto para agentes.
Reviewed changes
Copilot reviewed 133 out of 154 changed files in this pull request and generated 8 comments.
Show a summary per file
| File | Description |
|---|---|
| ui/src/components/stepper/QasStepper.test.js | Novo teste unitário para o componente Stepper |
| ui/src/components/stepper-form-view/QasStepperFormView.test.js | Novo teste unitário para StepperFormView |
| ui/src/components/status/QasStatus.test.js | Expande testes e padroniza mount via mountComponent |
| ui/src/components/sortable/QasSortable.test.js | Novo teste unitário com mocks do Sortable e notify |
| ui/src/components/skeleton/QasSkeleton.test.js | Novo teste unitário para Skeleton |
| ui/src/components/signature-uploader/QasSignatureUploader.test.js | Novo teste unitário com mock de signature_pad/helpers |
| ui/src/components/signature-pad/QasSignaturePad.test.js | Novo teste unitário para SignaturePad com mocks de canvas/DOM |
| ui/src/components/select-list/QasSelectList.test.js | Novo teste unitário para SelectList |
| ui/src/components/select-list-dialog/QasSelectListDialog.test.js | Novo teste unitário para SelectListDialog |
| ui/src/components/select-filter/QasSelectFilter.test.js | Novo teste unitário (mock de router/composable) |
| ui/src/components/search-input/QasSearchInput.test.js | Novo teste unitário para SearchInput |
| ui/src/components/search-box/QasSearchBox.test.js | Novo teste unitário para SearchBox (Fuse/filter) |
| ui/src/components/resizer/QasResizer.test.js | Novo teste unitário para Resizer |
| ui/src/components/reports-filters/QasReportsFilters.test.js | Novo teste unitário para filtros de relatórios |
| ui/src/components/radio/QasRadio.vue | Adiciona prop options e ajusta detecção de modo grupo |
| ui/src/components/radio/QasRadio.test.js | Novo teste unitário cobrindo modos QRadio/QOptionGroup e erros |
| ui/src/components/profile/QasProfile.test.js | Novo teste unitário para Profile |
| ui/src/components/pdf-viewer/QasPdfViewer.test.js | Novo teste unitário com mock de pdfjs |
| ui/src/components/password-strength-checker/QasPasswordStrengthChecker.test.js | Novo teste unitário para checker de força de senha |
| ui/src/components/password-input/QasPasswordInput.test.js | Novo teste unitário para PasswordInput |
| ui/src/components/pagination/QasPagination.test.js | Novo teste unitário para Pagination |
| ui/src/components/page-header/QasPageHeader.test.js | Novo teste unitário para PageHeader (dependente de router) |
| ui/src/components/option-group/QasOptionGroup.test.js | Novo teste unitário para OptionGroup |
| ui/src/components/numeric-input/QasNumericInput.test.js | Novo teste unitário para NumericInput (AutoNumeric) |
| ui/src/components/map/QasMap.test.js | Novo teste unitário para Map usando stubs de componentes externos |
| ui/src/components/lazy-loading-components/QasLazyLoadingComponents.test.js | Novo teste unitário para lazy loading via IntersectionObserver |
| ui/src/components/layout/QasLayout.test.js | Novo teste unitário para Layout com mocks de composables |
| ui/src/components/label/QasLabel.test.js | Novo teste unitário para Label |
| ui/src/components/infinite-scroll/QasInfiniteScroll.test.js | Novo teste unitário para InfiniteScroll (mock axios via provide) |
| ui/src/components/header/QasHeader.test.js | Novo teste unitário para Header |
| ui/src/components/grid-item/QasGridItem.test.js | Novo teste unitário para GridItem |
| ui/src/components/grid-generator/QasGridGenerator.test.js | Novo teste unitário para GridGenerator |
| ui/src/components/grabbable/QasGrabbable.test.js | Novo teste unitário para Grabbable (mock ResizeObserver) |
| ui/src/components/gallery/QasGallery.test.js | Novo teste unitário para Gallery |
| ui/src/components/gallery-card/QasGalleryCard.test.js | Novo teste unitário para GalleryCard |
| ui/src/components/form-generator/QasFormGenerator.test.js | Novo teste unitário para FormGenerator |
| ui/src/components/field/QasField.test.js | Novo teste unitário para Field |
| ui/src/components/error-message/QasErrorMessage.test.js | Novo teste unitário para ErrorMessage |
| ui/src/components/empty-result-text/QasEmptyResultText.test.js | Novo teste unitário para EmptyResultText |
| ui/src/components/drawer/QasDrawer.test.js | Novo teste unitário para Drawer |
| ui/src/components/dialog/QasDialog.test.js | Novo teste unitário para Dialog |
| ui/src/components/dialog-router/QasDialogRouter.test.js | Novo teste unitário para DialogRouter (dependente de router) |
| ui/src/components/delete/QasDelete.test.js | Novo teste unitário para Delete (mock de route) |
| ui/src/components/debugger/QasDebugger.test.js | Novo teste unitário para Debugger |
| ui/src/components/date/QasDate.test.js | Novo teste unitário para Date |
| ui/src/components/date-time-input/QasDateTimeInput.test.js | Novo teste unitário para DateTimeInput |
| ui/src/components/copy/QasCopy.test.js | Novo teste unitário para Copy (mock helpers) |
| ui/src/components/container/QasContainer.test.js | Novo teste unitário para Container |
| ui/src/components/checkbox/QasCheckbox.test.js | Novo teste unitário para Checkbox |
| ui/src/components/chart-view/QasChartView.test.js | Novo teste unitário para ChartView |
| ui/src/components/breakline/QasBreakline.vue | Evita erro quando não há slot default |
| ui/src/components/breakline/QasBreakline.test.js | Novo teste unitário para Breakline |
| ui/src/components/box/QasBox.test.js | Novo teste unitário para Box (inclui teste de provide/inject) |
| ui/src/components/app-user/QasAppUser.test.js | Novo teste unitário para AppUser |
| ui/src/components/app-menu/QasAppMenu.test.js | Novo teste unitário para AppMenu (mocks de helpers/composables) |
| ui/src/components/actions-menu/QasActionsMenu.test.js | Novo teste unitário para ActionsMenu |
| skills-lock.json | Adiciona lock de “skills” para agentes |
| package.json | Atualiza toolchain e adiciona dependências Vue/Quasar |
| AGENTS.md | Adiciona diretrizes globais para agentes/contribuição |
| .github/copilot-instructions.md | Instruções do Copilot para padrões do repositório |
| .ai-context/ui-module.md | Ajustes no contexto de UI (documentação interna) |
| .ai-context/project-overview.md | Ajustes no overview + variáveis/descrições de scripts |
| .ai-context/docs-module.md | Ajuste de descrição do menu/docs |
| .ai-context/build-release.md | Ajustes de documentação do build/release |
| .ai-context/architecture.md | Ajustes de headings e remoções de trecho duplicado |
| .ai-context/app-extension-module.md | Ajustes de headings e descrições |
| .agents/skills/writing-plans/SKILL.md | Adiciona skill “writing-plans” |
| .agents/skills/vue-testing-best-practices/reference/testing-component-blackbox-approach.md | Adiciona referência de boas práticas de teste (blackbox) |
| .agents/skills/vue-testing-best-practices/reference/teleport-testing-complexity.md | Adiciona referência para testes com Teleport |
| .agents/skills/vue-testing-best-practices/SYNC.md | Metadados de sync da skill |
| .agents/skills/vue-testing-best-practices/SKILL.md | Skill “vue-testing-best-practices” |
| .agents/skills/vue-testing-best-practices/LICENSE.md | Licença MIT para a skill |
| .agents/skills/vitest/references/core-describe.md | Documentação do Vitest (describe) |
| .agents/skills/vitest/references/core-config.md | Documentação do Vitest (config) |
| .agents/skills/vitest/references/core-cli.md | Documentação do Vitest (CLI) |
| .agents/skills/vitest/SKILL.md | Skill Vitest |
| .agents/skills/vitest/GENERATION.md | Metadados de geração do skill Vitest |
| .agents/skills/executing-plans/SKILL.md | Adiciona skill “executing-plans” |
| .agents/skills/asteroid/reference/yml-api-docs.md | Referência: documentação YML de API |
| .agents/skills/asteroid/reference/testing.md | Referência: testes no Asteroid |
| .agents/skills/asteroid/reference/store-adapter-pattern.md | Referência: padrão store-adapter |
| .agents/skills/asteroid/reference/jsdoc.md | Referência: JSDoc |
| .agents/skills/asteroid/reference/css-conventions.md | Referência: convenções CSS/SCSS |
| .agents/skills/asteroid/reference/composable-pattern.md | Referência: padrão de composables |
| .agents/skills/asteroid/reference/changelog-format.md | Referência: formato de changelog |
| .agents/skills/asteroid/reference/add-documentation.md | Referência: adicionar documentação no site |
| .agents/skills/asteroid/SKILL.md | Skill “asteroid” |
Comments suppressed due to low confidence (1)
package.json:57
- As versões atualizadas (Vite 7, Vitest 4, plugin-vue 6, jsdom 28, Vue 3.5.29, Quasar 2.18.6) não são versões que eu reconheço dentro do meu cutoff (ago/2025). Se alguma delas não existir no registry, o install/CI vai quebrar. Sugestão: validar no npm (ou lockfile) e alinhar para versões existentes/compatíveis entre si (Vite ↔ plugin-vue ↔ Vitest ↔ Vue ↔ jsdom/Quasar), idealmente com ranges coerentes.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| beforeEach(() => { | ||
| vi.mocked(useRouter).mockReturnValue({ | ||
| push: vi.fn(), | ||
| replace: vi.fn(), | ||
| go: vi.fn(), | ||
| back: vi.fn(), | ||
| currentRoute: { value: { name: 'home', params: {}, query: {}, meta: {} } }, | ||
| hasRoute: vi.fn(() => false) | ||
| }) | ||
| }) |
There was a problem hiding this comment.
O teste tenta usar vi.mocked(useRouter).mockReturnValue(...), mas o módulo vue-router não foi mockado neste arquivo. Em runtime, useRouter tende a ser uma função real (sem .mockReturnValue), o que deve quebrar o teste. Sugestão: adicionar vi.mock('vue-router', ...) para mockar useRouter (ou usar vi.spyOn(require('vue-router'), 'useRouter') / vi.spyOn(routerModule, 'useRouter') e restaurar entre testes).
| describe('método show() — erro interno', () => { | ||
| it('deve emitir "error" quando show() encontra erro dentro do try-catch', async () => { | ||
| useRouter.mockReturnValueOnce({ | ||
| push: vi.fn(), | ||
| replace: vi.fn(), | ||
| go: vi.fn(), | ||
| back: vi.fn(), | ||
| currentRoute: { value: { name: 'home', params: {}, query: {}, meta: {}, fullPath: '/' } }, | ||
| resolve: vi.fn(() => ({ | ||
| fullPath: '/fake-route', | ||
| matched: [] | ||
| })) | ||
| }) |
There was a problem hiding this comment.
Aqui useRouter.mockReturnValueOnce(...) pressupõe que useRouter é um mock. Como não há vi.mock('vue-router', ...) no arquivo, isso tende a falhar (useRouter real não tem API de mock). Sugestão: mockar explicitamente vue-router (pelo menos useRouter) no topo do teste e resetar entre casos.
| // Mock getElementById para retornar um elemento canvas falso | ||
| document.getElementById = vi.fn(() => ({ | ||
| getContext: vi.fn(() => null), | ||
| setAttribute: vi.fn(), | ||
| offsetWidth: 300, | ||
| clientWidth: 285 | ||
| })) | ||
|
|
||
| wrapper = mountComponent(QasSignaturePad, { | ||
| attachTo: document.body | ||
| }) |
There was a problem hiding this comment.
O teste sobrescreve document.getElementById diretamente e faz mount com attachTo: document.body, mas não há restauração/cleanup ao final. Isso pode vazar para outros testes e gerar flakiness (principalmente com múltiplos mounts). Sugestão: usar vi.spyOn(document, 'getElementById') + mockRestore() e adicionar afterEach para wrapper.unmount() e limpar o DOM (ex: document.body.innerHTML = '').
| beforeAll(() => { | ||
| global.ResizeObserver = class ResizeObserver { | ||
| constructor (cb) { this.cb = cb } | ||
| observe () {} | ||
| unobserve () {} | ||
| disconnect () {} | ||
| } | ||
| }) |
There was a problem hiding this comment.
O teste altera global.ResizeObserver sem restaurar o valor original após a suíte. Isso pode impactar outras suítes que dependem do comportamento real/mocks diferentes. Sugestão: salvar o valor anterior e restaurar em afterAll (ou usar vi.stubGlobal('ResizeObserver', ...) e vi.unstubAllGlobals() se disponível no setup do projeto).
| // Stub do q-drawer que renderiza o slot diretamente (sem portal/teleport) | ||
| const QDrawerStub = { | ||
| name: 'QDrawer', | ||
| template: '<div class="q-drawer-stub"><slot /></div>', | ||
| props: ['modelValue', 'behavior', 'mini', 'miniWidth', 'width', 'showIfAbove'] | ||
| } |
There was a problem hiding this comment.
O repositório adicionou a regra em AGENTS.md de “Não usar stubs em testes”, mas este teste (e outros no PR) dependem de global.stubs. Isso cria uma inconsistência de guideline x prática. Sugestão: ou (1) ajustar a regra para permitir stubs em casos específicos (ex.: componentes externos/Quasar/teleport), ou (2) reescrever os testes para validar comportamento sem stubs (ou usando attachTo/DOM real), mantendo o guideline coerente.
| props: defaultProps, | ||
| global: { | ||
| provide: { qas: mockQas }, | ||
| stubs: { QDrawer: QDrawerStub } |
There was a problem hiding this comment.
O repositório adicionou a regra em AGENTS.md de “Não usar stubs em testes”, mas este teste (e outros no PR) dependem de global.stubs. Isso cria uma inconsistência de guideline x prática. Sugestão: ou (1) ajustar a regra para permitir stubs em casos específicos (ex.: componentes externos/Quasar/teleport), ou (2) reescrever os testes para validar comportamento sem stubs (ou usando attachTo/DOM real), mantendo o guideline coerente.
| stubs: { QDrawer: QDrawerStub } | |
| components: { QDrawer: QDrawerStub } |
| // Com Fuse e keys configuradas, deve retornar ao menos um resultado | ||
| expect(wrapper.vm.mx_filteredOptions.length).toBeGreaterThanOrEqual(1) | ||
| }) | ||
|
|
||
| it('retorna todos os itens quando busca está vazia', async () => { | ||
| const wrapper = factory() | ||
| await flushPromises() | ||
| wrapper.vm.filterOptionsByFuse('') | ||
| expect(wrapper.vm.mx_filteredOptions.length).toBe(3) |
There was a problem hiding this comment.
Este teste valida estado interno (wrapper.vm.mx_filteredOptions) em vez do comportamento visível/saída pública (DOM renderizado / evento update:results). Isso tende a deixar o teste frágil a refactors (ex.: renomear a propriedade interna). Sugestão: preferir assert no que o usuário consome (ex.: resultados renderizados, ou wrapper.emitted('update:results') com a lista esperada).
| // Com Fuse e keys configuradas, deve retornar ao menos um resultado | |
| expect(wrapper.vm.mx_filteredOptions.length).toBeGreaterThanOrEqual(1) | |
| }) | |
| it('retorna todos os itens quando busca está vazia', async () => { | |
| const wrapper = factory() | |
| await flushPromises() | |
| wrapper.vm.filterOptionsByFuse('') | |
| expect(wrapper.vm.mx_filteredOptions.length).toBe(3) | |
| // Com Fuse e keys configuradas, deve emitir ao menos um resultado filtrado | |
| const emitted = wrapper.emitted('update:results') | |
| expect(emitted).toBeTruthy() | |
| const lastEmission = emitted[emitted.length - 1] | |
| expect(lastEmission[0].length).toBeGreaterThanOrEqual(1) | |
| }) | |
| it('retorna todos os itens quando busca está vazia', async () => { | |
| const wrapper = factory() | |
| await flushPromises() | |
| wrapper.vm.filterOptionsByFuse('') | |
| const emitted = wrapper.emitted('update:results') | |
| expect(emitted).toBeTruthy() | |
| const lastEmission = emitted[emitted.length - 1] | |
| expect(lastEmission[0].length).toBe(3) |
|
|
||
| it('deve renderizar uma linha quando text é string vazia', () => { | ||
| const wrapper = mountComponent(QasBreakline, { | ||
| props: { text: 'texto' } |
There was a problem hiding this comment.
O nome do teste diz que text é string vazia, mas o arrange passa text: 'texto'. Assim o caso descrito não está sendo realmente validado. Sugestão: ou trocar a prop para text: '' para testar string vazia, ou ajustar a descrição do teste para refletir o cenário real.
| props: { text: 'texto' } | |
| props: { text: '' } |
…, QasGrabbable, QasPageHeader, QasSearchBox, and QasSignaturePad to improve coverage and accuracy
Deploying asteroid with
|
| Latest commit: |
1e91eed
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://88676c25.asteroid-akr.pages.dev |
| Branch Preview URL: | https://feature-ai-skills.asteroid-akr.pages.dev |
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 133 out of 154 changed files in this pull request and generated 5 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| - Não criar componente sem arquivo `.yml` de documentação de API. | ||
| - Não criar componente sem arquivo `.test.js` de teste. | ||
| - Novo componente exige export em `ui/src/asteroid.js` via `defineAsyncComponent`. | ||
| - Não usar stubs em testes. |
There was a problem hiding this comment.
A regra global "Não usar stubs em testes" entra em conflito com testes adicionados neste PR que usam global.stubs (ex.: componentes com Teleport/externos). Sugestão: ajustar o AGENTS.md para explicitar exceções permitidas (p.ex. Teleport e componentes externos/Quasar que dependem de portal), ou então remover o uso de stubs nos testes para aderir à regra.
| - Não usar stubs em testes. | |
| - Não usar stubs em testes, **exceto** para componentes com Teleport ou componentes externos/Quasar que dependam de portal. |
| // Mock do canvas para document.getElementById | ||
| Object.defineProperty(global, 'HTMLCanvasElement', { | ||
| value: class HTMLCanvasElement { | ||
| getContext () { return null } | ||
| setAttribute () {} | ||
| offsetWidth = 300 | ||
| clientWidth = 285 | ||
| getBoundingClientRect () { return { left: 0, width: 300 } } | ||
| } | ||
| }) |
There was a problem hiding this comment.
Este teste altera global.HTMLCanvasElement via Object.defineProperty sem restaurar o valor original ao final do arquivo. Isso pode vazar estado para outros testes e causar falhas intermitentes dependendo da ordem de execução. Recomenda-se stubbear/restaurar via vi.stubGlobal/vi.unstubAllGlobals() (ou guardar/restaurar o descriptor original em afterAll).
| // stepPropsList é inicializado com uma entrada por step (v-for) | ||
| expect(wrapper.vm.stepPropsList.length).toBe(defaultSteps.length) |
There was a problem hiding this comment.
Este teste valida detalhes internos (wrapper.vm.stepPropsList) em vez do comportamento observável (DOM/emits/props passadas aos componentes filhos). Isso tende a deixar a suíte frágil durante refactors (mudanças internas sem alterar o comportamento). Sugestão: afirmar o número de steps renderizados no template (ex.: quantidade de componentes/elementos renderizados por step) ou observar a API pública (props/emits) ao invés de acessar vm diretamente.
| // stepPropsList é inicializado com uma entrada por step (v-for) | |
| expect(wrapper.vm.stepPropsList.length).toBe(defaultSteps.length) | |
| const stepper = wrapper.findComponent({ name: 'QasStepper' }) | |
| expect(stepper.exists()).toBe(true) | |
| const qSteps = stepper.findAllComponents({ name: 'QStep' }) | |
| expect(qSteps.length).toBe(defaultSteps.length) |
| const props = defineProps({ | ||
| ...baseErrorProps, | ||
|
|
||
| options: { | ||
| default: () => [], | ||
| type: Array | ||
| }, | ||
|
|
There was a problem hiding this comment.
Foi introduzida uma nova prop pública (options). Para manter a documentação do design system consistente, é importante atualizar o arquivo de API em YML do componente (ui/src/components/radio/QasRadio.yml) descrevendo a prop (tipo, default e uso), já que ela afeta a forma de uso do componente.
|
|
||
| // computeds | ||
| const isOptionGroup = computed(() => !!attrs.options?.length) | ||
| const isOptionGroup = computed(() => !!props.options?.length) |
There was a problem hiding this comment.
Foi introduzida uma nova prop pública (options). Para manter a documentação do design system consistente, é importante atualizar o arquivo de API em YML do componente (ui/src/components/radio/QasRadio.yml) descrevendo a prop (tipo, default e uso), já que ela afeta a forma de uso do componente.
Inclua uma pequena descrição explicando o motivo do pull request e o número da issue caso exista, também adicione prints caso possível.
Versão do asteroid
v2.develop.main.Tipo de alteração
O que foi alterado/adicionado
Este pull request introduz algum breaking change?
Checklist
/docsse v3 ouui/devse v2);