@financial-times/n-myft-ui 24.0.0 → 25.0.0-beta.2

package/components/collections/collections.jsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import CsrfToken from '../csrf-token/input';
+import FollowButton from '../follow-button/follow-button';
+
+export default function Collections ({ title, liteStyle, flags, collectionName, trackable, concepts = [] }) {
+	const getLiteStyleModifier = () => liteStyle ? 'lite' : 'regular';
+	let formProps = {
+		method: 'POST',
+		action: '#',
+		'data-myft-ui': 'follow',
+		'data-concept-id': concepts.map(concept => concept.id).join(',')
+	};
+
+	if (collectionName) {
+		formProps['data-myft-tracking'] = collectionName;
+	}
+
+	return (
+		<section
+			className={`collection collection--${getLiteStyleModifier()}`}
+			data-trackable={trackable ? trackable : 'collection'}>
+			<header className={`collection__header collection__header--${getLiteStyleModifier()}`}>
+				<h2 className={`collection__title collection__title--${getLiteStyleModifier()}`}>
+					{title}
+				</h2>
+			</header>
+			<ul className="collection__concepts">
+				{concepts && concepts.map((concept, index) =>
+					<li className="collection__concept" key={index}>
+						<FollowButton variant={liteStyle ? 'primary' : 'inverse'} buttonText={concept.name} flags={flags} collectionName={collectionName} />
+					</li>)
+				}
+			</ul>
+
+			<div className="collection__meta">
+				<form
+					{...formProps}
+					className="n-myft-ui n-myft-ui--follow n-ui-hide-core collection-follow-all">
+					<input
+						type="hidden"
+						name="directType"
+						value={concepts.map(concept => concept.directType).join(',')}
+					/>
+					<CsrfToken />
+					<input
+						type="hidden"
+						name="name"
+						value={concepts.map(concept => concept.name).join(',')}
+					/>
+					<button
+						type="submit"
+						aria-pressed="false"
+						className={`collection-follow-all__button collection-follow-all__button--${getLiteStyleModifier()}`}
+						data-trackable="follow all"
+						data-concept-id={concepts.map(concept => concept.id).join(',')}
+						aria-label={`Add all topics in the ${title} collection to my F T`}
+						data-alternate-label={`Remove all topics in the ${title} collection from my F T`}
+						data-alternate-text="Added"
+						title={`Add all topics in the ${title} collection to my F T`}>
+						Add all to myFT
+					</button>
+				</form>
+			</div>
+		</section>
+
+	)
+
+}

package/components/collections/collections.test.js

@@ -0,0 +1,83 @@
+import React from 'react';
+import Collections from './collections';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+const fixtures = {
+	'title': 'European Union',
+	'concepts': [
+		{
+			'id': '00000000-0000-0000-0000-000000000000',
+			'prefLabel': 'EU immigration',
+			'directType': 'http://www.ft.com/ontology/Topic',
+			'url': 'https://www.ft.com/stream/00000000-0000-0000-0000-000000000000',
+			'name': 'EU immigration'
+		},
+		{
+			'id': '00000000-0000-0000-0000-000000000001',
+			'prefLabel': 'Europe Quantitative Easing',
+			'directType': 'http://www.ft.com/ontology/Topic',
+			'url': 'https://www.ft.com/stream/00000000-0000-0000-0000-000000000000',
+			'name': 'Europe Quantitative Easing'
+		},
+		{
+			'id': '00000000-0000-0000-0000-000000000002',
+			'prefLabel': 'EU financial regulation',
+			'directType': 'http://www.ft.com/ontology/Topic',
+			'url': 'https://www.ft.com/stream/00000000-0000-0000-0000-000000000000',
+			'name': 'EU financial regulation'
+		},
+		{
+			'id': '00000000-0000-0000-0000-000000000003',
+			'prefLabel': 'EU nothing',
+			'directType': 'http://www.ft.com/ontology/Topic',
+			'url': 'https://www.ft.com/stream/00000000-0000-0000-0000-000000000000',
+			'name': 'EU nothing'
+		},
+		{
+			'id': '00000000-0000-0000-0000-000000000004',
+			'prefLabel': 'EU trade',
+			'directType': 'http://www.ft.com/ontology/Topic',
+			'url': 'https://www.ft.com/stream/00000000-0000-0000-0000-000000000000',
+			'name': 'EU trade'
+		}
+	]
+};
+const joinedDirectTypes = 'http://www.ft.com/ontology/Topic,http://www.ft.com/ontology/Topic,http://www.ft.com/ontology/Topic,http://www.ft.com/ontology/Topic,http://www.ft.com/ontology/Topic';
+
+const flags = {
+	myFtApi: true,
+	myFtApiWrite: true
+};
+
+describe('Concept List', () => {
+
+	test('It renders the title of the collection', async () => {
+		render(<Collections {...fixtures} flags={flags} />);
+		expect(await screen.findByText('European Union')).toBeTruthy();
+	});
+
+	test('It renders label for the concept button', async () => {
+		render(<Collections {...fixtures} flags={flags} />);
+		expect(await screen.findByText('EU immigration')).toBeTruthy();
+		expect(await screen.findByText('Europe Quantitative Easing')).toBeTruthy();
+		expect(await screen.findByText('EU financial regulation')).toBeTruthy();
+		expect(await screen.findByText('EU nothing')).toBeTruthy();
+		expect(await screen.findByText('EU trade')).toBeTruthy();
+	});
+
+	test('It renders form "Add all to my FT" from', () => {
+		const { container} = render(<Collections {...fixtures} flags={flags} />);
+		const formElement = container.querySelector('form[action="#"]');
+		expect(formElement).toBeTruthy();
+		expect(formElement.method).toEqual('post');
+	});
+
+	test('It renders directType input with value of types joined', () => {
+		const { container} = render(<Collections {...fixtures} flags={flags} />);
+		const directTypeElement = container.querySelector('input[name="directType"]');
+		expect(directTypeElement).toBeTruthy();
+		expect(directTypeElement.value).toEqual(joinedDirectTypes);
+	});
+
+});

package/components/concept-list/concept-list.jsx

@@ -0,0 +1,55 @@
+import React, { Fragment } from 'react';
+import FollowButton from '../follow-button/follow-button';
+
+export default function ConceptList ({ flags, concepts, contentType, conceptListTitle, trackable }) {
+
+	const {
+		myFtApi,
+		myFtApiWrite
+	} = flags;
+
+	const generateTrackableProps = (primary, seconday) => {
+		return {
+			'data-trackable': primary ? primary : seconday
+		}
+	}
+
+
+	return (
+
+		<Fragment>
+			{(myFtApi && myFtApiWrite && concepts && concepts.length) &&
+				<div
+					className='concept-list'
+					{...generateTrackableProps(trackable, 'concept-list')}>
+					{
+						(contentType || conceptListTitle) &&
+						<h2 className='concept-list__title'>
+							{conceptListTitle ? conceptListTitle : `Follow the topics in this ${contentType}`}
+						</h2>
+					}
+					<ul className='concept-list__list'>
+						{concepts.map((concept, index) => {
+							const {
+								relativeUrl,
+								url,
+								conceptTrackable,
+								prefLabel,
+								id
+							} = concept;
+							return (
+								<li key={index} className='concept-list__list-item'>
+									<a
+										href={relativeUrl || url}
+										{...generateTrackableProps(conceptTrackable, 'concept')}
+										className='concept-list__concept'>
+										{prefLabel}
+									</a>
+									<FollowButton conceptId={id} name={prefLabel} flags={flags} />
+								</li>
+							)
+						})}
+					</ul>
+				</div>}
+		</Fragment>)
+}

package/components/concept-list/concept-list.test.js

@@ -0,0 +1,116 @@
+import React from 'react';
+import ConceptList from './concept-list';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+const fixtures = [
+	{
+		'conceptListTitle': 'Follow european union things',
+		'concepts': [
+			{
+				'id': '00000000-0000-0000-0000-000000000161',
+				'prefLabel': 'EU immigration',
+				'directType': 'http://www.ft.com/ontology/Topic',
+				'url': 'https://www.ft.com/stream/00000000-0000-0000-0000-000000000161',
+				'name': 'EU immigration'
+			},
+			{
+				'id': '00000000-0000-0000-0000-000000000162',
+				'prefLabel': 'Europe Quantitative Easing',
+				'directType': 'http://www.ft.com/ontology/Topic',
+				'url': 'https://www.ft.com/stream/00000000-0000-0000-0000-000000000162',
+				'name': 'Europe Quantitative Easing'
+			},
+			{
+				'id': '00000000-0000-0000-0000-000000000163',
+				'prefLabel': 'EU financial regulation',
+				'directType': 'http://www.ft.com/ontology/Topic',
+				'url': 'https://www.ft.com/stream/00000000-0000-0000-0000-000000000163',
+				'name': 'EU financial regulation'
+			},
+			{
+				'id': '00000000-0000-0000-0000-000000000164',
+				'prefLabel': 'EU nothing',
+				'directType': 'http://www.ft.com/ontology/Topic',
+				'url': 'https://www.ft.com/stream/00000000-0000-0000-0000-000000000164',
+				'name': 'EU nothing'
+			},
+			{
+				'id': '00000000-0000-0000-0000-000000000165',
+				'prefLabel': 'EU trade',
+				'directType': 'http://www.ft.com/ontology/Topic',
+				'url': 'https://www.ft.com/stream/00000000-0000-0000-0000-000000000165',
+				'name': 'EU trade'
+			}
+		]
+	},
+	{
+		'contentType': 'search',
+		'concepts': [
+			{
+				'id': '00000000-0000-0000-0000-000000000166',
+				'prefLabel': 'Noodle',
+				'directType': 'http://www.ft.com/ontology/Topic',
+				'url': 'https://www.ft.com/stream/00000000-0000-0000-0000-000000000166',
+				'name': 'Noodle'
+			},
+			{
+				'id': '00000000-0000-0000-0000-000000000167',
+				'prefLabel': 'Green apples',
+				'directType': 'http://www.ft.com/ontology/Topic',
+				'url': 'https://www.ft.com/stream/00000000-0000-0000-0000-000000000167',
+				'name': 'Green apples'
+			},
+			{
+				'id': '00000000-0000-0000-0000-000000000168',
+				'prefLabel': 'Fox blood',
+				'directType': 'http://www.ft.com/ontology/Topic',
+				'url': 'https://www.ft.com/stream/00000000-0000-0000-0000-000000000168',
+				'name': 'Fox blood'
+			},
+			{
+				'id': '00000000-0000-0000-0000-000000000169',
+				'prefLabel': 'Dog party',
+				'directType': 'http://www.ft.com/ontology/Topic',
+				'url': 'https://www.ft.com/stream/00000000-0000-0000-0000-000000000169',
+				'name': 'Dog party'
+			},
+			{
+				'id': '00000000-0000-0000-0000-000000000170',
+				'prefLabel': 'Fifth thing',
+				'directType': 'http://www.ft.com/ontology/Topic',
+				'url': 'https://www.ft.com/stream/00000000-0000-0000-0000-000000000170',
+				'name': 'Fifth thing'
+			}
+		]
+	},
+];
+
+
+const flags = {
+	myFtApi: true,
+	myFtApiWrite: true
+};
+
+describe('Concept List', () => {
+
+	test('It renders conceptListTitle value as title when conceptListTitle is provided', async () => {
+		render(<ConceptList {...fixtures[0]} flags={flags} />);
+		expect(await screen.findByText('Follow european union things')).toBeTruthy();
+	});
+
+	test('It renders "Follow the topics in this {conceptType}" value as title when conceptType is provided', async () => {
+		render(<ConceptList {...fixtures[1]} flags={flags} />);
+		expect(await screen.findByText('Follow the topics in this search')).toBeTruthy();
+	});
+
+	test('It renders label for the concept button', async () => {
+		render(<ConceptList {...fixtures[0]} flags={flags} />);
+		expect(await screen.findByText('EU immigration')).toBeTruthy();
+		expect(await screen.findByText('Europe Quantitative Easing')).toBeTruthy();
+		expect(await screen.findByText('EU financial regulation')).toBeTruthy();
+		expect(await screen.findByText('EU nothing')).toBeTruthy();
+		expect(await screen.findByText('EU trade')).toBeTruthy();
+	});
+
+});

package/components/follow-button/__tests__/follow-button.test.js

@@ -16,7 +16,7 @@ describe('Follow button', () => {
 
 	test('It renders default button', async () => {
 		render(<FollowButton {...props} />);
-		expect(screen.findByText('Add to myFT')).toBeTruthy();
+		expect(await screen.findByText('Add to myFT')).toBeTruthy();
 	});
 
 	test('It renders a variant', async () => {
@@ -29,12 +29,12 @@ describe('Follow button', () => {
 		expect(container.querySelector(`form[action='/myft/add/${props.conceptId}']`)).toBeTruthy();
 	});
 
-	test('Button state changes when attributes change', () => {
+	test('Button state changes when attributes change', async () => {
 		render(<FollowButton {...props}
 			variant={'standard'}
 			setFollowButtonStateToSelected={true}
 			cacheablePersonalisedUrl={true} />);
-		expect(screen.findByText('Added')).toBeTruthy();
+		expect(await screen.findByText('Added')).toBeTruthy();
 	});
 
 });

package/components/follow-button/follow-button.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {Fragment} from 'react';
 import CsrfToken from '../csrf-token/input';
 
 function generateFormProps (props) {
@@ -148,7 +148,7 @@ export default function FollowButton (props) {
 	const getVariantClass = (variant) => variant ? `n-myft-follow-button--${variant}` : '';
 
 	return (
-		<>
+		<Fragment>
 			{flags.myFtApiWrite && <form
 				className={`n-myft-ui n-myft-ui--follow ${extraClasses || ''}`}
 				method="GET"
@@ -168,7 +168,7 @@ export default function FollowButton (props) {
 					{getButtonText(props)}
 				</button>
 			</form>}
-		</>
+		</Fragment>
 	);
 
 }

package/components/index.js

@@ -0,0 +1,15 @@
+import CsrfToken from './csrf-token/input';
+import FollowButton from './follow-button/follow-button';
+import ConceptList from './concept-list/concept-list';
+import Collections from './collections/collections';
+import SaveForLater from './save-for-later/save-for-later';
+import PinButton from './pin-button/pin-button';
+
+export {
+	CsrfToken,
+	FollowButton,
+	ConceptList,
+	Collections,
+	SaveForLater,
+	PinButton
+};

package/components/pin-button/pin-button.jsx

@@ -0,0 +1,40 @@
+import React, { Fragment } from 'react';
+import CsrfToken from '../csrf-token/input';
+export default function PinButton ({ showPrioritiseButton, id, name, directType, prioritised }) {
+
+	const getAction = () => `/__myft/api/core/prioritised/concept/${id}?method=${prioritised ? 'delete' : 'put'}`
+
+	return (
+		<Fragment>
+			{showPrioritiseButton &&
+				<Fragment>
+					<span className="myft-pin-divider"></span>
+					<div className="myft-pin-button-wrapper">
+						<form method="post" action={getAction()} data-myft-prioritise>
+							<CsrfToken />
+							<input type="hidden" value={name} name="name" />
+							<input type="hidden" value={directType || 'http://www.ft.com/ontology/concept/Concept'} name="directType" />
+							<div
+								className="n-myft-ui__announcement o-normalise-visually-hidden"
+								aria-live="assertive"
+								data-pressed-text={`${name} pinned in myFT.`}
+								data-unpressed-text={`Unpinned ${name} from myFT.`}
+							></div>
+							<button id={`myft-pin-button__${id}`}
+								className="myft-pin-button"
+								data-prioritise-button
+								data-trackable="prioritised"
+								data-concept-id={id}
+								data-prioritised={prioritised ? true : false}
+								aria-label={`${prioritised ? 'Unpin' : 'Pin'} ${name} ${prioritised ? 'from' : 'in'} myFT`}
+								aria-pressed={prioritised ? true : false}
+								title={`${prioritised ? 'Unpin' : 'Pin'} ${name}`}>
+							</button>
+						</form>
+					</div>
+				</Fragment>
+			}
+		</Fragment>
+	)
+
+}

package/components/pin-button/pin-button.test.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import PinButton from './pin-button';
+
+const flags = {
+	myFtApi: true,
+	myFtApiWrite: true
+};
+
+const fixtures = [
+	{
+		id: '00000000-0000-0000-0000-000000000022',
+		name: 'myFT Enterprises',
+		directType: 'http://www.ft.com/ontology/Topic',
+		showPrioritiseButton: true
+	},
+	{
+		id: '00000000-0000-0000-0000-000000000023',
+		name: 'myFT Enterprises',
+		directType: 'http://www.ft.com/ontology/Topic',
+		showPrioritiseButton: false
+	}
+];
+
+
+describe('Pin Button', () => {
+
+	test('It renders', () => {
+		const { container } = render(<PinButton flags={flags} {...fixtures[0]} />);
+		expect(container.querySelector(`button[id="myft-pin-button__${fixtures[0].id}"]`)).toBeTruthy();
+		expect(container.querySelector('button[data-trackable="prioritised"]')).toBeTruthy();
+	});
+
+	test('It renders unprioritised', () => {
+		const { container } = render(<PinButton flags={flags} {...fixtures[0]} />);
+		expect(container.querySelector('button[aria-label="Pin myFT Enterprises in myFT"]')).toBeTruthy();
+		expect(container.querySelector('button[title="Pin myFT Enterprises"]')).toBeTruthy();
+		expect(container.querySelector('button[data-prioritised=false]')).toBeTruthy();
+		expect(container.querySelector(`button[data-concept-id="${fixtures[0].id}"]`)).toBeTruthy();
+	});
+
+	test('It renders with prioritised', () => {
+		const { container } = render(<PinButton flags={flags} prioritised={true} {...fixtures[0]} />);
+		expect(container.querySelector('button[aria-label="Unpin myFT Enterprises from myFT"]')).toBeTruthy();
+		expect(container.querySelector('button[title="Unpin myFT Enterprises"]')).toBeTruthy();
+		expect(container.querySelector('button[data-prioritised=true]')).toBeTruthy();
+		expect(container.querySelector(`button[data-concept-id="${fixtures[0].id}"]`)).toBeTruthy();
+	});
+
+	test('It renders the form element', () => {
+		const { container } = render(<PinButton flags={flags} {...fixtures[0]} />);
+		expect(container.querySelector('form[method="post"]')).toBeTruthy();
+		expect(container.querySelector(`form[action="/__myft/api/core/prioritised/concept/${fixtures[0].id}?method=put"]`)).toBeTruthy();
+	});
+
+});

package/components/save-for-later/save-for-later.jsx

@@ -0,0 +1,103 @@
+import React, { Fragment } from 'react';
+import CsrfToken from '../csrf-token/input';
+
+const ButtonContent = ({ saveButtonWithIcon, buttonText, isSaved, appIsStreamPage }) => {
+
+	return (<Fragment>
+		{
+			saveButtonWithIcon &&
+			<span className="save-button-with-icon-copy" data-variant-label>
+				{buttonText && buttonText}
+				{!buttonText && (isSaved ? 'Saved' : 'Save')}
+			</span>
+		}
+
+		{
+			!saveButtonWithIcon &&
+			<Fragment>
+				{buttonText && buttonText}
+				{!buttonText &&
+					<Fragment>
+						{
+							appIsStreamPage !== true &&
+							<Fragment>
+								<span className="save-button-longer-copy" data-variant-label>
+									{isSaved ? 'Saved ' : 'Save '}
+								</span>
+								<span className="n-myft-ui__button--viewport-large" aria-hidden="true">to myFT</span>
+							</Fragment>
+						}
+
+						{
+							appIsStreamPage === true && <span>{isSaved ? 'Saved' : 'Save'}</span>
+						}
+					</Fragment>
+				}
+			</Fragment>
+		}
+	</Fragment>);
+}
+export default function SaveForLater ({ flags, contentId, title, variant, trackableId, isSaved, appIsStreamPage, alternateText, saveButtonWithIcon, buttonText }) {
+
+	const { myFtApiWrite } = flags;
+
+	const generateSubmitButtonProps = () => {
+		let props = {
+			type: 'submit',
+			'data-trackable': trackableId ? trackableId : 'save-for-later',
+			'data-text-variant': appIsStreamPage !== true ? 'save-button-with-icon-copy' : 'save-button-longer-copy',
+			'data-content-id': contentId,
+			className: saveButtonWithIcon ? 'n-myft-ui__save-button-with-icon' : `n-myft-ui__button ${variant ? `n-myft-ui__button--${variant}` : ''}`
+		};
+
+		if (isSaved) {
+			let titleText = `${title ? `${title} is` : ''} Saved to myFT`;
+			props['title'] = title;
+			props['aria-label'] = titleText;
+			props['data-alternate-label'] = title ? `Save ${title} to myFT for later` : 'Save this article to myFT for later';
+			props['aria-pressed'] = true;
+		} else {
+			let titleText = title ? `Save ${title} to myFT for later` : 'Save this article to myFT for later';
+			props['title'] = titleText;
+			props['aria-label'] = titleText;
+			props['data-alternate-label'] = `${title ? `${title} is` : ''} Saved to myFT`;
+			props['aria-pressed'] = false;
+		}
+
+		if (alternateText) {
+			props['data-alternate-text'] = alternateText;
+		} else if (isSaved) {
+			props['data-alternate-text'] = 'Save ';
+		} else {
+			props['data-alternate-text'] = 'Saved ';
+		}
+
+		return props;
+	}
+
+
+	return (
+		<Fragment>
+			{myFtApiWrite &&
+				<form className="n-myft-ui n-myft-ui--save" method="GET"
+					data-content-id={contentId}
+					data-myft-ui="saved"
+					action={`/myft/save/${contentId}`}
+					data-js-action={`/__myft/api/core/saved/content/${contentId}?method=put`}>
+					<CsrfToken />
+
+					<div
+						className="n-myft-ui__announcement o-normalise-visually-hidden"
+						aria-live="assertive"
+						data-pressed-text="Article saved in My FT."
+						data-unpressed-text="Removed article from My FT."
+					></div>
+					<button {...generateSubmitButtonProps()}>
+						<ButtonContent buttonText={buttonText} saveButtonWithIcon={saveButtonWithIcon} isSaved={isSaved} appIsStreamPage={appIsStreamPage}/>
+					</button>
+				</form>
+			}
+		</Fragment>
+
+	)
+}

package/components/save-for-later/save-for-later.test.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import SaveForLater from './save-for-later';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+const flags = {
+	myFtApi: true,
+	myFtApiWrite: true
+};
+
+const fixture = {
+	contentId: '00000000-0000-0000-0000-000000000033',
+	title: 'myFT Enterprises'
+};
+
+describe('SaveForLater component', () => {
+
+	test('It renders', async () => {
+		render(<SaveForLater flags={flags} {...fixture}/>);
+		expect(await screen.findByText('Save')).toBeTruthy();
+	});
+
+	test('It renders button text wen provided', async () => {
+		render(<SaveForLater flags={flags} {...fixture} buttonText={'Globetrotter'}/>);
+		expect(await screen.findByText('Globetrotter')).toBeTruthy();
+	});
+
+	test('It renders the correct form action attribute', () => {
+		const { container } = render(<SaveForLater flags={flags} {...fixture} buttonText={'Globetrotter'}/>);
+		const formElement = container.querySelector(`form[action="/myft/save/${fixture.contentId}"]`);
+		expect(formElement).toBeTruthy();
+	});
+
+	test('It renders the correct form data-js-action attribute', () => {
+		const { container } = render(<SaveForLater flags={flags} {...fixture} buttonText={'Globetrotter'}/>);
+		const formElement = container.querySelector(`form[data-js-action="/__myft/api/core/saved/content/${fixture.contentId}?method=put"]`);
+		expect(formElement).toBeTruthy();
+	});
+
+	test('It renders the correct form method attribute', () => {
+		const { container } = render(<SaveForLater flags={flags} {...fixture} buttonText={'Globetrotter'}/>);
+		const formElement = container.querySelector('form[method="GET"]');
+		expect(formElement).toBeTruthy();
+	});
+
+	test('It renders the correct button data-text-variant attribute when appIsStreamPage=true', () => {
+		const { container } = render(<SaveForLater appIsStreamPage={true} flags={flags} {...fixture} buttonText={'Globetrotter'}/>);
+		const buttonElement = container.querySelector('button[data-text-variant="save-button-longer-copy"]');
+		expect(buttonElement).toBeTruthy();
+	});
+
+	describe('Saved', () => {
+		test('It renders saved item', async () => {
+			render(<SaveForLater isSaved={true} flags={flags} {...fixture}/>);
+			expect(await screen.findByText('Saved')).toBeTruthy();
+		});
+	});
+
+});