From 9828a2afc0d6f678aff51923ca369ccec946a311 Mon Sep 17 00:00:00 2001 From: Bart Louwers Date: Sat, 5 Jul 2025 12:13:29 +0200 Subject: [PATCH] set up component testing --- cypress.config.ts | 8 ++++++ cypress/support/component-index.html | 12 +++++++++ cypress/support/component.ts | 36 +++++++++++++++++++++++++ src/components/InputAutocomplete.cy.tsx | 19 +++++++++++++ 4 files changed, 75 insertions(+) create mode 100644 cypress/support/component-index.html create mode 100644 cypress/support/component.ts create mode 100644 src/components/InputAutocomplete.cy.tsx diff --git a/cypress.config.ts b/cypress.config.ts index 939d4606..0eeb88bf 100644 --- a/cypress.config.ts +++ b/cypress.config.ts @@ -8,6 +8,7 @@ export default defineConfig({ exclude: "cypress/**/*.*", }, }, + e2e: { setupNodeEvents(on, config) { // implement node event listeners here @@ -20,4 +21,11 @@ export default defineConfig({ openMode: 0, }, }, + + component: { + devServer: { + framework: "react", + bundler: "vite", + }, + }, }); diff --git a/cypress/support/component-index.html b/cypress/support/component-index.html new file mode 100644 index 00000000..ac6e79fd --- /dev/null +++ b/cypress/support/component-index.html @@ -0,0 +1,12 @@ + + + + + + + Components App + + +
+ + \ No newline at end of file diff --git a/cypress/support/component.ts b/cypress/support/component.ts new file mode 100644 index 00000000..e1621ac9 --- /dev/null +++ b/cypress/support/component.ts @@ -0,0 +1,36 @@ +// *********************************************************** +// 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' + +import { mount } from 'cypress/react' + +// Augment the Cypress namespace to include type definitions for +// your custom command. +// Alternatively, can be defined in cypress/support/component.d.ts +// with a at the top of your spec. +declare global { + namespace Cypress { + interface Chainable { + mount: typeof mount + } + } +} + +Cypress.Commands.add('mount', mount) + +// Example use: +// cy.mount() diff --git a/src/components/InputAutocomplete.cy.tsx b/src/components/InputAutocomplete.cy.tsx new file mode 100644 index 00000000..c68f4435 --- /dev/null +++ b/src/components/InputAutocomplete.cy.tsx @@ -0,0 +1,19 @@ +import React from 'react' +import InputAutocomplete from './InputAutocomplete' +import { mount } from 'cypress/react' + +const fruits = ['apple', 'banana', 'cherry']; + +describe('', () => { + it('filters options when typing', () => { + mount( + [f, f])} /> + ); + cy.get('input').focus(); + cy.get('.maputnik-autocomplete-menu-item').should('have.length', 3); + cy.get('input').type('ch'); + cy.get('.maputnik-autocomplete-menu-item').should('have.length', 1).and('contain', 'cherry'); + cy.get('.maputnik-autocomplete-menu-item').click(); + cy.get('input').should('have.value', 'cherry'); + }); +});