antontranelis/utopia-ui
1
0
Fork 0
mirror of https://github.com/utopia-os/utopia-ui.git synced 2025-12-13 07:46:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #117 from utopia-os/setup-component-testing

Browse Source 
feat(other): set up component testing
This commit is contained in:
mahula 2025-02-17 17:52:01 +01:00 committed by GitHub
commit c9a66461e1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 1926 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
cypress.config.ts Normal file
View File

@ -0,0 +1,11 @@
import { defineConfig } from 'cypress'
export default defineConfig({
component: {
devServer: {
framework: 'react',
bundler: 'vite',
},
specPattern: ['**/**/*.cy.{ts,tsx}'],
},
})

37
cypress/support/commands.ts Normal file
View File

@ -0,0 +1,37 @@
/// <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 {
// login(email: string, password: string): Chainable<void>
// drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
// dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
// visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
// }
// }
// }

12
cypress/support/component-index.html Normal file
View File

@ -0,0 +1,12 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Components App</title>
</head>
<body>
<div data-cy-root></div>
</body>
</html>

38
cypress/support/component.ts Normal file
View File

@ -0,0 +1,38 @@
// ***********************************************************
// 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:
// eslint-disable-next-line import/no-unassigned-import
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 <reference path="./component" /> at the top of your spec.
declare global {
// eslint-disable-next-line @typescript-eslint/no-namespace
namespace Cypress {
interface Chainable {
mount: typeof mount
}
}
}
Cypress.Commands.add('mount', mount)
// Example use:
// cy.mount(<MyComponent />)

1777
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

6
package.json
View File

@ -9,9 +9,9 @@
"types": "./dist/index.d.ts",
"exports": {
".": {
"types": "./dist/index.d.ts",
"import": "./dist/index.esm.js",
"require": "./dist/index.cjs",
"types": "./dist/index.d.ts"
"require": "./dist/index.cjs"
}
},
"type": "module",
@ -21,6 +21,7 @@
"test:lint:eslint": "eslint --ext .ts,.tsx,.js,.jsx,.cjs,.mjs,.json,.yml,.yaml --max-warnings 0 .",
"lint": "npm run test:lint:eslint",
"lintfix": "npm run test:lint:eslint -- --fix",
"test:component": "cypress run --component --browser electron",
"test:unit": "npm run test:unit:dev -- run --coverage",
"test:unit:dev": "vitest",
"docs:generate": "typedoc --plugin typedoc-plugin-coverage src/index.tsx",
@ -49,6 +50,7 @@
"@vitejs/plugin-react": "^4.3.4",
"@vitest/coverage-v8": "^3.0.5",
"autoprefixer": "^10.4.14",
"cypress": "^14.0.3",
"daisyui": "^4.6.1",
"eslint": "^8.24.0",
"eslint-config-prettier": "^9.1.0",

66
src/Components/Input/TextInput.cy.tsx Normal file
View File

@ -0,0 +1,66 @@
/// <reference types="cypress" />
import { mount } from 'cypress/react'
import { TextInput } from './TextInput'
describe('<TextInput />', () => {
it('renders with default props', () => {
mount(<TextInput />)
cy.get('input').should('have.attr', 'type', 'text')
cy.get('input').should('have.attr', 'placeholder', '')
cy.get('input').should('have.attr', 'required')
cy.get('input').should('have.class', 'tw-input')
cy.get('input').should('have.class', 'tw-input-bordered')
cy.get('input').should('have.class', 'tw-w-full')
})
it('renders with given labelTitle', () => {
mount(<TextInput labelTitle='Test Title' />)
cy.get('label').should('contain.text', 'Test Title')
})
it('renders with given type', () => {
mount(<TextInput type='email' />)
cy.get('input').should('have.attr', 'type', 'email')
})
it('accepts user input', () => {
mount(<TextInput dataField='test-input' />)
cy.get('input[name="test-input"]').type('Hello Test')
cy.get('input[name="test-input"]').should('have.value', 'Hello Test')
})
it('renders a label, if labelTitle is set', () => {
mount(<TextInput dataField='test-input' labelTitle='Test Label' />)
cy.contains('Test Label').should('exist')
})
it('handles default value correctly', () => {
mount(<TextInput dataField='test-input' defaultValue='Default Value' />)
cy.get('input[name="test-input"]').should('have.value', 'Default Value')
})
it('calls updateFormValue on change', () => {
const onChangeSpy = cy.spy().as('updateFormValueSpy')
mount(<TextInput dataField='test-input' updateFormValue={onChangeSpy} />)
cy.get('input[name="test-input"]').type('Test')
cy.get('@updateFormValueSpy').should('have.been.calledWith', 'Test')
})
it('accepts a specific input type', () => {
mount(<TextInput dataField='test-input' type='email' />)
cy.get('input[name="test-input"]').should('have.attr', 'type', 'email')
})
it('respects the autocomplete attribute', () => {
mount(<TextInput dataField='test-input' autocomplete='off' />)
cy.get('input[name="test-input"]').should('have.attr', 'autocomplete', 'off')
})
it('updates form value on change', () => {
const updateFormValue = cy.stub()
mount(<TextInput updateFormValue={updateFormValue} />)
cy.get('input').type('Hello')
cy.wrap(updateFormValue).should('have.been.calledWith', 'Hello')
})
})

2
tsconfig.json
View File

@ -27,7 +27,7 @@
"#root/*": ["./*"]
}
},
"include": ["src", "vite.config.ts", "setupTest.ts"],
"include": ["src", "vite.config.ts", "setupTest.ts", "cypress.config.ts", "cypress/support/commands.ts", "cypress/support/component.ts"],
"exclude": ["node_modules", "dist", "example", "rollup.config.mjss"],
"typeRoots": [
"./types",