From 18519d932c750ad17e0b45bfb243ce86d11e3ef6 Mon Sep 17 00:00:00 2001 From: David Ralph Date: Fri, 27 Dec 2024 21:09:24 +0000 Subject: [PATCH] feat(tests): start work on component testing (wip) --- cypress.config.js | 7 ++ cypress/support/component-index.html | 12 ++++ cypress/support/component.js | 24 +++++++ .../Form/Settings/Checkbox/Checkbox.cy.jsx | 68 +++++++++++++++++++ src/components/Form/Settings/Text/Text.cy.jsx | 50 ++++++++++++++ 5 files changed, 161 insertions(+) create mode 100644 cypress/support/component-index.html create mode 100644 cypress/support/component.js create mode 100644 src/components/Form/Settings/Checkbox/Checkbox.cy.jsx create mode 100644 src/components/Form/Settings/Text/Text.cy.jsx 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