import { defineConfig } from 'cypress';

export default defineConfig({
    component: {
        devServer: {
            framework: 'react',
            bundler: 'vite',
        },
        viewportHeight: 1080,
        viewportWidth: 1920,
        video: false,
        screenshotOnRunFailure: false,
    },
    env: {
        VITE_DISABLE_LOGIN: 'true',
    },
});

// ***********************************************************
// 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:
// Alternatively you can use CommonJS syntax:
// require('./commands')
import { mount } from 'cypress/react18';

import './commands';

// Augment the Cypress namespace to include type definitions for
// your custom command.
// Alternatively, can be defined in cypress/support/component.d.ts
// with a <reference path="./component" /> at the top of your spec.
declare global {
    namespace Cypress {
        interface Chainable {
            mount: typeof mount;
        }
    }
}

Cypress.on('uncaught:exception', (err, runnable) => {
    console.error({ err, runnable });

    // returning false here prevents Cypress from
    // failing the test
    return false;
});

Cypress.Commands.add('mount', mount);

// Example use:
// cy.mount(<MyComponent />)

import { CypressWrapper } from '../../src/Wrapper';

/// <reference types="cypress" />
// ***********************************************
// This example commands.ts shows you how to
// create various custom commands and overwrite
// existing commands.
//
// For more comprehensive examples of custom
// commands please read more here:
// https://on.cypress.io/custom-commands
// ***********************************************
//
//
// -- This is a parent command --
// Cypress.Commands.add('login', (email, password) => { ... })
//
//
// -- This is a child command --
// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
//
//
// -- This is a dual command --
// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
//
//
// -- This will overwrite an existing command --
// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
//

declare global {
    namespace Cypress {
        interface Chainable {
            getByTestId(selector: string | RegExp, ...args: any): Chainable<JQuery<HTMLElement>>;
            getByTestIds(selectors: string[], ...args: any): Chainable<JQuery<HTMLElement>>;
            wrappedMount: typeof cy.mount;
        }
    }
}

Cypress.Commands.add('getByTestId', (selector: string | RegExp, ...args: any) => {
    return cy.get(`[data-testid=${selector}]`, ...args);
});
Cypress.Commands.add('getByTestIds', (selectors: string[], ...args: any) => {
    const selector = selectors.map((id) => `[data-testid=${id}]`).join(' ');
    return cy.get(selector, ...args);
});

Cypress.Commands.add('wrappedMount', (component: any) => {
    // Wrap any parent components needed
    // ie: return mount(<MyProvider>{component}</MyProvider>, options)
    return cy.mount(<CypressWrapper>{component}</CypressWrapper>);
});