diff --git a/cypress/components/__image_snapshots__/Accordion renders with a theme provider #0.png b/cypress/components/__image_snapshots__/Accordion renders with a theme provider #0.png new file mode 100644 index 00000000..5d8f30f9 Binary files /dev/null and b/cypress/components/__image_snapshots__/Accordion renders with a theme provider #0.png differ diff --git a/cypress/components/__image_snapshots__/Button renders with a theme provider #0.actual.png b/cypress/components/__image_snapshots__/Button renders with a theme provider #0.actual.png new file mode 100644 index 00000000..7efddb49 Binary files /dev/null and b/cypress/components/__image_snapshots__/Button renders with a theme provider #0.actual.png differ diff --git a/cypress/components/__image_snapshots__/Button renders with a theme provider #0.diff.png b/cypress/components/__image_snapshots__/Button renders with a theme provider #0.diff.png new file mode 100644 index 00000000..8a7b71b2 Binary files /dev/null and b/cypress/components/__image_snapshots__/Button renders with a theme provider #0.diff.png differ diff --git a/cypress/components/__image_snapshots__/Checkbox shows checkbox when checked #0.png b/cypress/components/__image_snapshots__/Checkbox shows checkbox when checked #0.png new file mode 100644 index 00000000..f61c8df0 Binary files /dev/null and b/cypress/components/__image_snapshots__/Checkbox shows checkbox when checked #0.png differ diff --git a/cypress/components/__image_snapshots__/Combobox renders with a theme provider #0.png b/cypress/components/__image_snapshots__/Combobox renders with a theme provider #0.png new file mode 100644 index 00000000..f70e5f68 Binary files /dev/null and b/cypress/components/__image_snapshots__/Combobox renders with a theme provider #0.png differ diff --git a/cypress/components/accordion.spec.tsx b/cypress/components/accordion.spec.tsx new file mode 100644 index 00000000..42e8df93 --- /dev/null +++ b/cypress/components/accordion.spec.tsx @@ -0,0 +1,86 @@ +/// + +import React from 'react'; +import { mount } from 'cypress-react-unit-test'; +import { + ThemeProvider, + GlobalStyles, + defaultTheme, + Accordion, + AccordionButton, + AccordionItem, + AccordionPanel, +} from '../../dist/minerva-ui.esm'; +import { createGlobalStyle } from 'styled-components'; + +// by default, we are using the native font stack +// but this font is different on macOS, Linux and Windows +// to make sure our screenshots are consistent, we force them all to use the same font family +const StandardizeFont = createGlobalStyle` + html { + font-family: Helvetica; + } +`; + +const customTheme = { + ...defaultTheme, + fonts: { + ...defaultTheme.fonts, + body: 'Helvetica', + heading: 'Helvetica', + }, +}; + +export const MinervaProvider = ({ children, theme = customTheme }) => ( + + + + {children} + +); + +const ExampleAccordion = () => { + return ( + + + Section 1 title + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad + minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. + + + + Section 2 title + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad + minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. + + + + ); +}; + +describe('', () => { + it('renders with a theme provider', () => { + mount( + + + + ); + cy.get('[data-reach-accordion]').toMatchImageSnapshot(); + }); + + it('should display content', () => { + const text = 'Section 1 title'; + mount( + + + + ); + cy.contains(text).should('be.visible'); + }); +}); diff --git a/cypress/components/alert.spec.tsx b/cypress/components/alert.spec.tsx new file mode 100644 index 00000000..d8b92bbc --- /dev/null +++ b/cypress/components/alert.spec.tsx @@ -0,0 +1,151 @@ +import React, { useState } from 'react'; +import { mount } from 'cypress-react-unit-test'; +import { + Alert, + ThemeProvider, + GlobalStyles, + defaultTheme, + Button, +} from '../../dist/minerva-ui.esm'; +import { createGlobalStyle } from 'styled-components'; + +// by default, we are using the native font stack +// but this font is different on macOS, Linux and Windows +// to make sure our screenshots are consistent, we force them all to use the same font family +const StandardizeFont = createGlobalStyle` +html { + font-family: Helvetica; +} +`; + +const customTheme = { + ...defaultTheme, + fonts: { + ...defaultTheme.fonts, + body: 'Helvetica', + heading: 'Helvetica', + }, +}; + +const MinervaProvider = ({ children, theme = customTheme }) => ( + + + + {children} + +); + +const ExampleCloseableAlert = () => { + const [open, setOpen] = useState(false); + + const title = 'Hello'; + const description = 'World'; + const closeText = 'Dismiss'; + return ( + <> + + {open && ( + + {description} + + + )} + + ); +}; + +describe('', () => { + it('renders with a theme provider', () => { + const title = 'Test'; + mount( + + + + ); + + cy.contains(title).should('be.visible'); + }); + + it('should display content', () => { + const description = 'Hello World'; + mount( + + {description} + + ); + + cy.get('div[role="alert"]').should('contain', description); + }); + + it('should add title content when `title` prop is passed', () => { + const title = 'Hello'; + const description = 'World'; + cy.get('div[role="alert"]').as('alert'); + mount( + + {description} + + ); + + cy.get('@alert').should('contain', title); + cy.get('@alert').should('contain', description); + }); + + it('should add predefined styles when `status` prop is passed', () => { + const backgroundColor = 'rgb(248, 180, 180)'; + mount( + + error + + ); + + cy.get('div[role="alert"]').should( + 'have.css', + 'background-color', + backgroundColor + ); + }); + + it('should add styles when `bg` prop is passed', () => { + const backgroundColor = 'rgb(253, 246, 178)'; + mount( + + Custom color + + ); + cy.get('div[role="alert"]').should( + 'have.css', + 'background-color', + backgroundColor + ); + }); + + it('should add close button text and be closeable', () => { + const title = 'Hello'; + const description = 'World'; + const closeText = 'Dismiss'; + cy.get('div[role="alert"]').as('alert'); + mount( + + + + ); + + cy.get('button[data-testid="open-alert-button"]').click(); + cy.get('@alert').should('contain', title); + cy.get('@alert').should('contain', description); + cy.get('@alert').should('contain', closeText); + cy.get('button[data-testid="close-alert-button"]').click(); + cy.get('@alert').should('not.exist'); + }); +}); diff --git a/cypress/components/box.spec.tsx b/cypress/components/box.spec.tsx new file mode 100644 index 00000000..b2e9ffab --- /dev/null +++ b/cypress/components/box.spec.tsx @@ -0,0 +1,50 @@ +/// + +import React from 'react'; +import { mount } from 'cypress-react-unit-test'; +import { + Box, + ThemeProvider, + GlobalStyles, + defaultTheme, +} from '../../dist/minerva-ui.esm'; +import { createGlobalStyle } from 'styled-components'; + +// by default, we are using the native font stack +// but this font is different on macOS, Linux and Windows +// to make sure our screenshots are consistent, we force them all to use the same font family +const StandardizeFont = createGlobalStyle` + html { + font-family: Helvetica; + } +`; + +const customTheme = { + ...defaultTheme, + fonts: { + ...defaultTheme.fonts, + body: 'Helvetica', + heading: 'Helvetica', + }, +}; + +const MinervaProvider = ({ children, theme = customTheme }) => ( + + + + {children} + +); + +describe('', () => { + it('renders with a theme provider', () => { + const text = 'Text Box'; + mount( + + {text} + + ); + + cy.contains(text).should('be.visible'); + }); +}); diff --git a/cypress/components/checkbox.spec.tsx b/cypress/components/checkbox.spec.tsx new file mode 100644 index 00000000..5b4dce4e --- /dev/null +++ b/cypress/components/checkbox.spec.tsx @@ -0,0 +1,123 @@ +/// + +import React from 'react'; +import { mount } from 'cypress-react-unit-test'; +import { + ThemeProvider, + GlobalStyles, + defaultTheme, + Checkbox, +} from '../../dist/minerva-ui.esm'; +import { createGlobalStyle } from 'styled-components'; + +// by default, we are using the native font stack +// but this font is different on macOS, Linux and Windows +// to make sure our screenshots are consistent, we force them all to use the same font family +const StandardizeFont = createGlobalStyle` + html { + font-family: Helvetica; + } +`; + +const customTheme = { + ...defaultTheme, + fonts: { + ...defaultTheme.fonts, + body: 'Helvetica', + heading: 'Helvetica', + }, +}; + +const MinervaProvider = ({ children, theme = customTheme }) => ( + + + + {children} + +); + +describe('', () => { + it('renders with a theme provider', () => { + mount( + + + + ); + }); + + it('shows white background when not checked', () => { + const labelText = 'Checked Checkbox'; + mount( + + {labelText} + + ); + + cy.get('input[type="checkbox"]').should( + 'have.css', + 'background-color', + 'rgb(255, 255, 255)' + ); + }); + + it('shows checkbox when checked', () => { + const labelText = 'Checked Checkbox'; + cy.get('input[type="checkbox"]').as('checkbox'); + mount( + + {labelText} + + ); + // expect(checkbox).toMatchSnapshot('Unchecked Checkbox'); + + cy.get('input[type="checkbox"]').should( + 'have.css', + 'background-color', + 'rgb(255, 255, 255)' + ); + + cy.get('@checkbox').click(); + + // expect(checkbox).toMatchSnapshot('Checked Checkbox'); + + cy.get('@checkbox').should('have.attr', 'aria-checked', 'true'); + + cy.get('@checkbox').toMatchImageSnapshot(); + }); + + it('can have checked state changed by theme', () => { + const labelText = 'Checked Checkbox'; + cy.get('input[type="checkbox"]').as('checkbox'); + + const backgroundColor = 'rgb(51, 51, 51)'; + const checkedColor = 'rgb(195, 51, 51)'; + + const customTheme = { + ...defaultTheme, + Checkbox: { + backgroundColor: backgroundColor, + _checked: { + backgroundColor: checkedColor, + }, + }, + }; + + mount( + + {labelText} + + ); + + // expect(checkbox).toMatchSnapshot('Unchecked Checkbox'); + + cy.get('@checkbox').should('have.css', 'background-color', backgroundColor); + + cy.get('@checkbox').click(); + + // expect(checkbox).toMatchSnapshot('Checked Checkbox'); + + cy.get('@checkbox').should('have.css', 'background-color', checkedColor); + + cy.get('@checkbox').should('have.attr', 'aria-checked', 'true'); + }); +}); diff --git a/cypress/components/combobox.spec.tsx b/cypress/components/combobox.spec.tsx new file mode 100644 index 00000000..cab151d0 --- /dev/null +++ b/cypress/components/combobox.spec.tsx @@ -0,0 +1,123 @@ +/// + +import React, { useState } from 'react'; +import { mount } from 'cypress-react-unit-test'; +import { + ThemeProvider, + GlobalStyles, + defaultTheme, + Combobox, + ComboboxInput, + ComboboxPopover, + ComboboxList, + ComboboxOption, +} from '../../dist/minerva-ui.esm'; +import { createGlobalStyle } from 'styled-components'; + +// by default, we are using the native font stack +// but this font is different on macOS, Linux and Windows +// to make sure our screenshots are consistent, we force them all to use the same font family +const StandardizeFont = createGlobalStyle` + html { + font-family: Helvetica; + } +`; + +const customTheme = { + ...defaultTheme, + fonts: { + ...defaultTheme.fonts, + body: 'Helvetica', + heading: 'Helvetica', + }, +}; + +const MinervaProvider = ({ children, theme = customTheme }) => ( + + + + {children} + +); + +const inputLabel = 'Fruit'; + +const ExampleCombobox = ({ value }) => { + const [search, setSearch] = useState(value); + const items = ['apple', 'banana', 'kiwi', 'orange']; + return ( + + ); +}; + +describe('', () => { + it('renders with a theme provider', () => { + const content = 'Hello'; + mount( + + + + ); + const combobox = cy.get('label'); + combobox.toMatchImageSnapshot(); + }); + + it('should show value', () => { + cy.get('input[role="combobox"]').as('input'); + const content = 'Hello'; + mount( + + + + ); + cy.get('@input').should('have.value', 'Hello'); + }); + + it('should show updated value', () => { + cy.get('input[role="combobox"]').as('input'); + const updatedValue = 'Input updated!'; + mount( + + + + ); + cy.get('@input').type(updatedValue); + cy.get('@input').should('have.value', updatedValue); + }); + + it('should show option list when typing if openOnFocus is set to true', () => { + cy.get('input[role="combobox"]').as('input'); + cy.get('div[data-testid="combobox-popover"]').as('option'); + const option = 'apple'; + mount( + + + + ); + + cy.get('@input').click(); + cy.get('@option').should('be.visible'); + cy.get('@option').should('contain', option); + }); +}); diff --git a/cypress/components/input.spec.tsx b/cypress/components/input.spec.tsx new file mode 100644 index 00000000..e8476b09 --- /dev/null +++ b/cypress/components/input.spec.tsx @@ -0,0 +1,112 @@ +/// + +import React, { useState } from 'react'; +import { mount } from 'cypress-react-unit-test'; +import { + Input, + ThemeProvider, + GlobalStyles, + defaultTheme, +} from '../../dist/minerva-ui.esm'; +import { createGlobalStyle } from 'styled-components'; + +// by default, we are using the native font stack +// but this font is different on macOS, Linux and Windows +// to make sure our screenshots are consistent, we force them all to use the same font family +const StandardizeFont = createGlobalStyle` + html { + font-family: Helvetica; + } +`; + +const customTheme = { + ...defaultTheme, + fonts: { + ...defaultTheme.fonts, + body: 'Helvetica', + heading: 'Helvetica', + }, +}; + +export const MinervaProvider = ({ children, theme = customTheme }) => ( + + + + {children} + +); + +const inputLabel = 'Name'; + +const ExampleInput = props => { + const [state, setState] = useState(''); + return ( + + + + ); +}; + +describe('', () => { + const inputType = 'email'; + it('renders with a theme provider', () => { + mount( + + + + ); + + cy.get('input[placeholder="Placeholder Text"]').should('exist'); + }); + + it('should be correct type', () => { + mount( + + + + ); + cy.get(`input[type=${inputType}]`).should('exist'); + }); + + it('should show value', () => { + const content = 'Hello'; + mount( + + + + ); + + cy.get('input').should('have.value', content); + }); + + it('should show updated value', () => { + cy.get('input').as('input'); + mount( + + + + ); + cy.get('@input').should('have.value', ''); + + const updatedValue = 'Input updated!'; + cy.get('@input').type(updatedValue); + cy.get('@input').should('have.value', updatedValue); + }); + + it('should be disabled when disabled prop is passed to it', () => { + mount( + + + + ); + cy.get(`input[type=${inputType}]`).should('be.disabled'); + }); +});