From 4c15ecacd8c0e0355702831239e8fb0bfe255e8d Mon Sep 17 00:00:00 2001 From: Rishabh Date: Fri, 18 Feb 2022 22:51:29 +0530 Subject: [PATCH] Added functional tests for member sign-in flow closes https://github.com/TryGhost/Team/issues/1347 --- ghost/portal/src/tests/SigninFlow.test.js | 290 ++++++++++++++++++++++ 1 file changed, 290 insertions(+) create mode 100644 ghost/portal/src/tests/SigninFlow.test.js diff --git a/ghost/portal/src/tests/SigninFlow.test.js b/ghost/portal/src/tests/SigninFlow.test.js new file mode 100644 index 0000000000..8c0faf37b2 --- /dev/null +++ b/ghost/portal/src/tests/SigninFlow.test.js @@ -0,0 +1,290 @@ +import React from 'react'; +import App from '../App.js'; +import {fireEvent, appRender, within, waitFor, prettyDOM} from '../utils/test-utils'; +import {offer as FixtureOffer, site as FixtureSite} from '../utils/test-fixtures'; +import setupGhostApi from '../utils/api.js'; + +const setup = async ({site, member = null}) => { + const ghostApi = setupGhostApi({siteUrl: 'https://example.com'}); + ghostApi.init = jest.fn(() => { + return Promise.resolve({ + site, + member + }); + }); + + ghostApi.member.sendMagicLink = jest.fn(() => { + return Promise.resolve('success'); + }); + + ghostApi.member.checkoutPlan = jest.fn(() => { + return Promise.resolve(); + }); + + const utils = appRender( + + ); + + const triggerButtonFrame = await utils.findByTitle(/portal-trigger/i); + const popupFrame = utils.queryByTitle(/portal-popup/i); + const popupIframeDocument = popupFrame.contentDocument; + const emailInput = within(popupIframeDocument).queryByLabelText(/email/i); + const nameInput = within(popupIframeDocument).queryByLabelText(/name/i); + const submitButton = within(popupIframeDocument).queryByRole('button', {name: 'Continue'}); + const signinButton = within(popupIframeDocument).queryByRole('button', {name: 'Sign in'}); + const siteTitle = within(popupIframeDocument).queryByText(site.title); + const freePlanTitle = within(popupIframeDocument).queryByText('Free'); + const monthlyPlanTitle = within(popupIframeDocument).queryByText('Monthly'); + const yearlyPlanTitle = within(popupIframeDocument).queryByText('Yearly'); + const fullAccessTitle = within(popupIframeDocument).queryByText('Full access'); + return { + ghostApi, + popupIframeDocument, + popupFrame, + triggerButtonFrame, + siteTitle, + emailInput, + nameInput, + signinButton, + submitButton, + freePlanTitle, + monthlyPlanTitle, + yearlyPlanTitle, + fullAccessTitle, + ...utils + }; +}; + +const multiTierSetup = async ({site, member = null}) => { + const ghostApi = setupGhostApi({siteUrl: 'https://example.com'}); + ghostApi.init = jest.fn(() => { + return Promise.resolve({ + site, + member + }); + }); + + ghostApi.member.sendMagicLink = jest.fn(() => { + return Promise.resolve('success'); + }); + + ghostApi.member.checkoutPlan = jest.fn(() => { + return Promise.resolve(); + }); + + const utils = appRender( + + ); + const freeTierDescription = site.products?.find(p => p.type === 'free')?.description; + const triggerButtonFrame = await utils.findByTitle(/portal-trigger/i); + const popupFrame = utils.queryByTitle(/portal-popup/i); + const popupIframeDocument = popupFrame.contentDocument; + const emailInput = within(popupIframeDocument).queryByLabelText(/email/i); + const nameInput = within(popupIframeDocument).queryByLabelText(/name/i); + const submitButton = within(popupIframeDocument).queryByRole('button', {name: 'Continue'}); + const signinButton = within(popupIframeDocument).queryByRole('button', {name: 'Sign in'}); + const siteTitle = within(popupIframeDocument).queryByText(site.title); + const freePlanTitle = within(popupIframeDocument).queryAllByText(/free$/i); + const freePlanDescription = within(popupIframeDocument).queryAllByText(freeTierDescription); + const monthlyPlanTitle = within(popupIframeDocument).queryByText('Monthly'); + const yearlyPlanTitle = within(popupIframeDocument).queryByText('Yearly'); + const fullAccessTitle = within(popupIframeDocument).queryByText('Full access'); + return { + ghostApi, + popupIframeDocument, + popupFrame, + triggerButtonFrame, + siteTitle, + emailInput, + nameInput, + signinButton, + submitButton, + freePlanTitle, + monthlyPlanTitle, + yearlyPlanTitle, + fullAccessTitle, + freePlanDescription, + ...utils + }; +}; + +const realLocation = window.location; + +describe('Signin', () => { + describe('on single tier site', () => { + beforeEach(() => { + // Mock window.location + Object.defineProperty(window, 'location', { + value: new URL('https://portal.localhost/#/portal/signin'), + writable: true + }); + }); + afterEach(() => { + window.location = realLocation; + }); + test.only('with default settings', async () => { + const { + ghostApi, popupFrame, triggerButtonFrame, emailInput, nameInput, submitButton,popupIframeDocument + } = await setup({ + site: FixtureSite.singleTier.basic + }); + + expect(popupFrame).toBeInTheDocument(); + expect(triggerButtonFrame).toBeInTheDocument(); + expect(emailInput).toBeInTheDocument(); + expect(nameInput).not.toBeInTheDocument(); + expect(submitButton).toBeInTheDocument(); + + fireEvent.change(emailInput, {target: {value: 'jamie@example.com'}}); + + expect(emailInput).toHaveValue('jamie@example.com'); + + fireEvent.click(submitButton); + expect(ghostApi.member.sendMagicLink).toHaveBeenLastCalledWith({ + email: 'jamie@example.com' + }); + + const magicLink = await within(popupIframeDocument).findByText(/sent you a login link/i); + expect(magicLink).toBeInTheDocument(); + }); + + test.only('without name field', async () => { + const {ghostApi, popupFrame, triggerButtonFrame, emailInput, nameInput, submitButton, + popupIframeDocument} = await setup({ + site: FixtureSite.singleTier.withoutName + }); + + expect(popupFrame).toBeInTheDocument(); + expect(triggerButtonFrame).toBeInTheDocument(); + expect(emailInput).toBeInTheDocument(); + expect(nameInput).not.toBeInTheDocument(); + expect(submitButton).toBeInTheDocument(); + + fireEvent.change(emailInput, {target: {value: 'jamie@example.com'}}); + + expect(emailInput).toHaveValue('jamie@example.com'); + + fireEvent.click(submitButton); + expect(ghostApi.member.sendMagicLink).toHaveBeenLastCalledWith({ + email: 'jamie@example.com' + }); + + const magicLink = await within(popupIframeDocument).findByText(/sent you a login link/i); + expect(magicLink).toBeInTheDocument(); + }); + + test.only('with only free plan', async () => { + let {ghostApi, popupFrame, triggerButtonFrame, emailInput, nameInput, submitButton, + popupIframeDocument} = await setup({ + site: FixtureSite.singleTier.onlyFreePlan + }); + + expect(popupFrame).toBeInTheDocument(); + expect(triggerButtonFrame).toBeInTheDocument(); + expect(emailInput).toBeInTheDocument(); + expect(nameInput).not.toBeInTheDocument(); + expect(submitButton).toBeInTheDocument(); + + fireEvent.change(emailInput, {target: {value: 'jamie@example.com'}}); + + expect(emailInput).toHaveValue('jamie@example.com'); + + fireEvent.click(submitButton); + expect(ghostApi.member.sendMagicLink).toHaveBeenLastCalledWith({ + email: 'jamie@example.com' + }); + + const magicLink = await within(popupIframeDocument).findByText(/sent you a login link/i); + expect(magicLink).toBeInTheDocument(); + }); + }); +}); + +describe('Signin', () => { + describe('on multi tier site', () => { + beforeEach(() => { + // Mock window.location + Object.defineProperty(window, 'location', { + value: new URL('https://portal.localhost/#/portal/signin'), + writable: true + }); + }); + afterEach(() => { + window.location = realLocation; + }); + test.only('with default settings', async () => { + const {ghostApi, popupFrame, triggerButtonFrame, emailInput, nameInput, submitButton, + popupIframeDocument} = await multiTierSetup({ + site: FixtureSite.multipleTiers.basic + }); + + expect(popupFrame).toBeInTheDocument(); + expect(triggerButtonFrame).toBeInTheDocument(); + expect(emailInput).toBeInTheDocument(); + expect(nameInput).not.toBeInTheDocument(); + expect(submitButton).toBeInTheDocument(); + + fireEvent.change(emailInput, {target: {value: 'jamie@example.com'}}); + + expect(emailInput).toHaveValue('jamie@example.com'); + + fireEvent.click(submitButton); + expect(ghostApi.member.sendMagicLink).toHaveBeenLastCalledWith({ + email: 'jamie@example.com' + }); + + const magicLink = await within(popupIframeDocument).findByText(/sent you a login link/i); + expect(magicLink).toBeInTheDocument(); + }); + + test.only('without name field', async () => { + const {ghostApi, popupFrame, triggerButtonFrame, emailInput, nameInput, submitButton, + popupIframeDocument} = await multiTierSetup({ + site: FixtureSite.multipleTiers.withoutName + }); + + expect(popupFrame).toBeInTheDocument(); + expect(triggerButtonFrame).toBeInTheDocument(); + expect(emailInput).toBeInTheDocument(); + expect(nameInput).not.toBeInTheDocument(); + expect(submitButton).toBeInTheDocument(); + + fireEvent.change(emailInput, {target: {value: 'jamie@example.com'}}); + + expect(emailInput).toHaveValue('jamie@example.com'); + + fireEvent.click(submitButton); + expect(ghostApi.member.sendMagicLink).toHaveBeenLastCalledWith({ + email: 'jamie@example.com' + }); + + const magicLink = await within(popupIframeDocument).findByText(/sent you a login link/i); + expect(magicLink).toBeInTheDocument(); + }); + + test.only('with only free plan available', async () => { + let {ghostApi, popupFrame, triggerButtonFrame, emailInput, nameInput, submitButton, + popupIframeDocument} = await multiTierSetup({ + site: FixtureSite.multipleTiers.onlyFreePlan + }); + + expect(popupFrame).toBeInTheDocument(); + expect(triggerButtonFrame).toBeInTheDocument(); + expect(emailInput).toBeInTheDocument(); + expect(nameInput).not.toBeInTheDocument(); + expect(submitButton).toBeInTheDocument(); + + fireEvent.change(emailInput, {target: {value: 'jamie@example.com'}}); + + expect(emailInput).toHaveValue('jamie@example.com'); + + fireEvent.click(submitButton); + expect(ghostApi.member.sendMagicLink).toHaveBeenLastCalledWith({ + email: 'jamie@example.com' + }); + + const magicLink = await within(popupIframeDocument).findByText(/sent you a login link/i); + expect(magicLink).toBeInTheDocument(); + }); + }); +});