feat(other): initial e2e test setup

cypress.config.ts

@@ -1,5 +1,24 @@
+import { addCucumberPreprocessorPlugin } from '@badeball/cypress-cucumber-preprocessor'
+import { createEsbuildPlugin } from '@badeball/cypress-cucumber-preprocessor/esbuild'
+import createBundler from '@bahmutov/cypress-esbuild-preprocessor'
 import { defineConfig } from 'cypress'
 
+async function setupNodeEvents(
+  on: Cypress.PluginEvents,
+  config: Cypress.PluginConfigOptions,
+): Promise<Cypress.PluginConfigOptions> {
+  await addCucumberPreprocessorPlugin(on, config)
+
+  on(
+    'file:preprocessor',
+    createBundler({
+      plugins: [createEsbuildPlugin(config)],
+    }),
+  )
+
+  return config
+}
+
 export default defineConfig({
   component: {
     devServer: {
@@ -8,4 +27,15 @@ export default defineConfig({
     },
     specPattern: ['**/**/*.cy.{ts,tsx}'],
   },
+  e2e: {
+    baseUrl: 'http://localhost:5173',
+    chromeWebSecurity: false,
+    retries: 0,
+    specPattern: 'features/**/*.feature',
+    supportFile: false,
+    video: false,
+    viewportHeight: 1080,
+    viewportWidth: 1920,
+    setupNodeEvents,
+  },
 })

cypress/support/step_definitions/map.ts

@@ -0,0 +1,25 @@
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('I am on the map page', () => {
+  cy.visit('/')
+})
+
+Then('the map component should be present', () => {
+  cy.get('.leaflet-tile-container')
+    .should('exist')
+    .children('.leaflet-tile-loaded')
+    .should('have.length.greaterThan', 0)
+    .and('be.visible')
+})
+
+Then('the search input control should be present', () => {
+  cy.get('.tw-input').should('be.visible')
+})
+
+Then('the geo location control should be present', () => {
+  cy.get('div.tw-card:nth-child(2) > div:nth-child(1)').should('be.visible')
+})
+
+Then('the layers control should be present', () => {
+  cy.get('div.tw-bg-base-100:nth-child(1)').should('be.visible')
+})

cypress/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["es5", "dom"],
+    "types": ["cypress", "node"]
+  },
+  "include": ["**/*.ts"]
+}

examples/3-tags/src/App.tsx

@@ -3,7 +3,7 @@ import { events, places, tags } from "./sample-data"
 
 function App() {
   return (
-    <UtopiaMap center={[50.6, 15.5]} zoom={5} height='100dvh' width="100dvw">
+    <UtopiaMap center={[51.0664, 9.9344]} zoom={9} height='100dvh' width="100dvw">
     <Layer
       name='events'
       markerIcon='calendar'

features/Map.feature

@@ -0,0 +1,11 @@
+Feature: Map
+  As a user
+  I want to have the leaflet map and its control elements available
+  To be able to interact with the map
+
+  Scenario: The map and its control elements are available
+    Given I am on the map page
+    Then the map component should be present
+    And the search input control should be present
+    And the geo location control should be present
+    And the layers control should be present