From cf73db54b1a0eaf7a4e97c2f127f041cb55e4cc6 Mon Sep 17 00:00:00 2001 From: Yasin Tarim Date: Fri, 17 Nov 2023 16:06:58 +0300 Subject: [PATCH 1/4] improve test coverage for tyk toast component --- src/components/Toast/Toast.test.js | 98 +++++++++++++++++++++++++++++- 1 file changed, 95 insertions(+), 3 deletions(-) diff --git a/src/components/Toast/Toast.test.js b/src/components/Toast/Toast.test.js index 8876ba46..a56da5b4 100644 --- a/src/components/Toast/Toast.test.js +++ b/src/components/Toast/Toast.test.js @@ -1,7 +1,99 @@ -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() + .then(() => { + cy.get(selectors.toastContainer) + .should('exist') + .find(selectors.message) + .should('exist') + .and('have.length', 2) + .and('have.class', classNames.theme.success); + }) + .then(() => { + cy.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() + .then(() => { + cy.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}`); + }); + }); }); }); From 89b0d6c5e2278548829dacdb6b06941656fcbae4 Mon Sep 17 00:00:00 2001 From: Yasin Tarim Date: Fri, 17 Nov 2023 16:27:00 +0300 Subject: [PATCH 2/4] Update Toast.test.js --- src/components/Toast/Toast.test.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/Toast/Toast.test.js b/src/components/Toast/Toast.test.js index a56da5b4..c47eaa19 100644 --- a/src/components/Toast/Toast.test.js +++ b/src/components/Toast/Toast.test.js @@ -5,7 +5,7 @@ import toast from './index'; /* eslint-disable react/destructuring-assignment */ function Component(props) { // eslint-disable-next-line react/jsx-no-useless-fragment - return (<>{props.children || ()}); + return props.children || ; } Component.propTypes = { @@ -54,6 +54,7 @@ describe('Toast', () => { 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') From 8f648cfd645a908f95bf40e79598a24300929f30 Mon Sep 17 00:00:00 2001 From: Yasin Tarim Date: Fri, 17 Nov 2023 16:31:25 +0300 Subject: [PATCH 3/4] Update src/components/Toast/Toast.test.js Co-authored-by: Vlad Ifrim --- src/components/Toast/Toast.test.js | 24 ++++++++++-------------- 1 file changed, 10 insertions(+), 14 deletions(-) diff --git a/src/components/Toast/Toast.test.js b/src/components/Toast/Toast.test.js index c47eaa19..b13ac1a7 100644 --- a/src/components/Toast/Toast.test.js +++ b/src/components/Toast/Toast.test.js @@ -60,20 +60,16 @@ describe('Toast', () => { .get('button') .click() .click() - .then(() => { - cy.get(selectors.toastContainer) - .should('exist') - .find(selectors.message) - .should('exist') - .and('have.length', 2) - .and('have.class', classNames.theme.success); - }) - .then(() => { - cy.get(selectors.toastContainer) - .should('exist') - .find(selectors.message, { timeout: 350 }) - .should('not.exist'); - }); + .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', {}, () => { From 9e1d5233c640e75c9dffd1bd014dad5c22a673c7 Mon Sep 17 00:00:00 2001 From: Yasin Tarim Date: Fri, 17 Nov 2023 16:31:33 +0300 Subject: [PATCH 4/4] Update src/components/Toast/Toast.test.js Co-authored-by: Vlad Ifrim --- src/components/Toast/Toast.test.js | 24 +++++++++++------------- 1 file changed, 11 insertions(+), 13 deletions(-) diff --git a/src/components/Toast/Toast.test.js b/src/components/Toast/Toast.test.js index b13ac1a7..b2550fd6 100644 --- a/src/components/Toast/Toast.test.js +++ b/src/components/Toast/Toast.test.js @@ -78,19 +78,17 @@ describe('Toast', () => { cy.mount() .get('button') .click() - .then(() => { - cy.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}`); - }); + .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}`); }); }); });