diff --git a/cypress.config.js b/cypress.config.js
index 97f47c41..a1f6f4e3 100644
--- a/cypress.config.js
+++ b/cypress.config.js
@@ -6,4 +6,11 @@ module.exports = defineConfig({
// implement node event listeners here
},
},
+
+ 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.js b/cypress/support/component.js
new file mode 100644
index 00000000..22fb9741
--- /dev/null
+++ b/cypress/support/component.js
@@ -0,0 +1,24 @@
+// ***********************************************************
+// This example support/component.js 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/react18'
+
+Cypress.Commands.add('mount', mount)
+
+// Example use:
+// cy.mount()
\ No newline at end of file
diff --git a/src/components/Form/Settings/Checkbox/Checkbox.cy.jsx b/src/components/Form/Settings/Checkbox/Checkbox.cy.jsx
new file mode 100644
index 00000000..93aa6ec0
--- /dev/null
+++ b/src/components/Form/Settings/Checkbox/Checkbox.cy.jsx
@@ -0,0 +1,68 @@
+/* eslint-disable no-undef */
+import React from 'react'
+import { Checkbox } from './Checkbox'
+
+describe('', () => {
+ it('renders', () => {
+ // see: https://on.cypress.io/mounting-react
+ cy.mount()
+ })
+
+ // checked prop works
+ it('can init checked', () => {
+ cy.mount()
+ cy.get('span').should('have.attr', 'aria-checked', 'true')
+ })
+
+ it('can init unchecked', () => {
+ cy.mount()
+ cy.get('span').should('have.attr', 'aria-checked', 'false')
+ })
+
+ // can init with setting
+ it('can init with setting', () => {
+ localStorage.setItem('test', 'true')
+ cy.mount()
+ cy.get('span').should('have.attr', 'aria-checked', 'true')
+ })
+
+ // can be changed
+ it('can be changed', () => {
+ cy.mount()
+ cy.get('span').click().should('have.attr', 'aria-checked', 'false')
+ cy.get('span').click().should('have.attr', 'aria-checked', 'true')
+ })
+
+ // onChange callback works
+ it('calls onChange when clicked', () => {
+ const onChange = cy.stub()
+ cy.mount()
+ cy.get('span').click().then(() => {
+ expect(onChange).to.be.called()
+ })
+ })
+
+ // disabled prop works
+
+
+ // text prop works
+ it('displays text', () => {
+ cy.mount()
+ cy.contains('Hello, world!').should('be.visible')
+ })
+
+ // reminder works (needs stub)
+
+ // reminder works (needs stub)
+
+ // category prop works (needs stub)
+
+ // name prop works
+ it('saves to localStorage with name', () => {
+ cy.mount()
+ cy.get('span').click()
+ expect(localStorage.getItem('test')).to.eq('true')
+ })
+
+ // stats tracking works (needs stub)
+})
\ No newline at end of file
diff --git a/src/components/Form/Settings/Text/Text.cy.jsx b/src/components/Form/Settings/Text/Text.cy.jsx
new file mode 100644
index 00000000..d539a30c
--- /dev/null
+++ b/src/components/Form/Settings/Text/Text.cy.jsx
@@ -0,0 +1,50 @@
+/* eslint-disable no-undef */
+import React from 'react'
+import { Text } from './Text'
+
+describe('', () => {
+ it('renders', () => {
+ // see: https://on.cypress.io/mounting-react
+ cy.mount()
+ })
+
+ // can init with setting
+ it('can init with setting', () => {
+ localStorage.setItem('test', 'true')
+ cy.mount()
+ cy.get('input').should('have.value', 'true')
+ })
+
+ // can be changed
+ it('can be changed', () => {
+ cy.mount()
+ cy.get('input').type('hello, world!').should('have.value', 'hello, world!')
+ })
+
+ // onChange callback works
+ it('calls onChange when changed', () => {
+ const onChange = cy.stub()
+ cy.mount()
+ cy.get('input').type('hello, world!').then(() => {
+ expect(onChange).to.be.called()
+ })
+ })
+
+ // title prop works
+ it('displays title', () => {
+ cy.mount()
+ cy.contains('Hello, world!').should('be.visible')
+ })
+
+ // textarea prop works
+ it('displays textarea', () => {
+ cy.mount()
+ cy.get('textarea').should('be.visible')
+ })
+
+ // textarea can be changed
+ it('textarea can be changed', () => {
+ cy.mount()
+ cy.get('textarea').type('hello, world!').should('have.value', 'hello, world!')
+ })
+})
\ No newline at end of file