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');
+ });
+});