diff --git a/src/components/Toast/Toast.test.js b/src/components/Toast/Toast.test.js index 8876ba46..b2550fd6 100644 --- a/src/components/Toast/Toast.test.js +++ b/src/components/Toast/Toast.test.js @@ -1,7 +1,94 @@ -import Toast from './index'; +import React from 'react'; +import PropTypes from 'prop-types'; +import toast from './index'; + +/* eslint-disable react/destructuring-assignment */ +function Component(props) { + // eslint-disable-next-line react/jsx-no-useless-fragment + return props.children || ; +} + +Component.propTypes = { + onClick: PropTypes.func, + children: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.node), + PropTypes.node, + PropTypes.element, + PropTypes.string, + ]), +}; describe('Toast', () => { - it('TODO', () => { - expect(true).to.equal(true); + const classNames = { + toast: 'tyk-toast', + toastContainer: 'tyk-toast__container', + message: 'tyk-toast__message', + messageContent: 'tyk-message__content', + theme: { + success: 'tyk-message--success', + danger: 'tyk-message--danger', + info: 'tyk-message--info', + warning: 'tyk-message--warning', + }, + icons: { + icon: 'tyk-icon', + success: 'tykon-check', + warning: 'tykon-warning', + }, + }; + + const selectors = { + toast: `.${classNames.toast}`, + toastContainer: `.${classNames.toastContainer}`, + message: `.${classNames.message}`, + messageContent: `.${classNames.messageContent}`, + theme: { + success: `.${classNames.theme.success}`, + danger: `.${classNames.theme.danger}`, + info: `.${classNames.theme.info}`, + warning: `.${classNames.theme.warning}`, + }, + icons: { + icon: `.${classNames.icons.icon}`, + success: `.${classNames.icons.success}`, + warning: `.${classNames.icons.warning}`, + }, + }; + + it('should render toast components and remove it after the given delay', () => { + cy.mount( toast.notify('demo', { delay: 150 })} />) + .get('button') + .click() + .click() + .get(selectors.toastContainer) + .should('exist') + .find(selectors.message) + .should('exist') + .and('have.length', 2) + .and('have.class', classNames.theme.success) + .get(selectors.toastContainer) + .should('exist') + .find(selectors.message, { timeout: 350 }) + .should('not.exist'); + }); + + it('should display given message with correct icon for each theme', {}, () => { + cy.wrap(Object.entries(classNames.theme)).each(([theme, className]) => { + const onClick = () => toast[theme].bind(toast)(`demo ${theme}`, { timeout: 200 }); + cy.mount() + .get('button') + .click() + .get(selectors.toastContainer) + .should('exist') + .find(`.${classNames.message}.${className}`) + .should('exist') + .find(selectors.icons.icon) + .should('exist') + .and('have.class', theme === 'success' ? classNames.icons.success : classNames.icons.warning) + .closest(selectors.message) + .find(selectors.messageContent) + .should('exist') + .and('have.text', `demo ${theme}`); + }); }); });