@financial-times/n-myft-ui 26.0.0 → 27.2.0

package/myft/ui/lists.js

@@ -6,6 +6,7 @@ import nNotification from 'n-notification';
 import { uuid } from 'n-ui-foundations';
 import getToken from './lib/get-csrf-token';
 import oForms from 'o-forms';
+import openSaveArticleToListVariant from './save-article-to-list-variant';
 
 const delegate = new Delegate(document.body);
 const csrfToken = getToken();
@@ -161,6 +162,10 @@ function showArticleSavedOverlay (contentId) {
 	showListsOverlay('Article saved', `/myft/list?fragment=true&fromArticleSaved=true&contentId=${contentId}`, contentId);
 }
 
+function showCreateListAndAddArticleOverlay (contentId, name = 'myft-ui-create-list-variant') {
+	return openSaveArticleToListVariant(name, contentId);
+}
+
 function handleArticleSaved (contentId) {
 	return myFtClient.getAll('created', 'list')
 		.then(createdLists => createdLists.filter(list => !list.isRedirect))
@@ -171,10 +176,27 @@ function handleArticleSaved (contentId) {
 		});
 }
 
+function openCreateListAndAddArticleOverlay (contentId) {
+	return myFtClient.getAll('created', 'list')
+		.then(createdLists => createdLists.filter(list => !list.isRedirect))
+		.then(createdLists => {
+			return !createdLists.length ? showCreateListAndAddArticleOverlay(contentId) : showArticleSavedOverlay(contentId);
+		});
+}
+
 function initialEventListeners () {
 
 	document.body.addEventListener('myft.user.saved.content.add', event => {
 		const contentId = event.detail.subject;
+
+		// Checks if the createListAndSaveArticle variant is active
+		// and will show the variant overlay if the user has no lists,
+		// otherwise it will show the classic overlay
+		const createListVariant = event.currentTarget.querySelector('[data-myft-ui-variant="createListAndSaveArticleVariant"]');
+		if (createListVariant) {
+			return openCreateListAndAddArticleOverlay(contentId);
+		}
+
 		handleArticleSaved(contentId);
 	});
 

package/myft/ui/save-article-to-list-variant.js

@@ -0,0 +1,376 @@
+import Overlay from 'o-overlay';
+import myFtClient from 'next-myft-client';
+import { uuid } from 'n-ui-foundations';
+import getToken from './lib/get-csrf-token';
+import oTooltip from 'o-tooltip';
+
+const csrfToken = getToken();
+
+let lists;
+
+export default async function showSaveArticleToListVariant (name, contentId) {
+	try {
+		await openSaveArticleToListVariant (name, contentId);
+	} catch(error) {
+		handleError(error);
+	}
+}
+
+async function openSaveArticleToListVariant (name, contentId) {
+	function createList (list) {
+		if(!list) {
+			return;
+		}
+
+		myFtClient.add('user', null, 'created', 'list', uuid(), { name: list,	token: csrfToken })
+			.then(detail => {
+				myFtClient.add('list', detail.subject, 'contained', 'content', contentId, { token: csrfToken }).then((createdList) => {
+					lists.push({ name: list, uuid: createdList.actorId, checked: true });
+					const listElement = ListsElement(lists, addToList, removeFromList);
+					const overlayContent = document.querySelector('.o-overlay__content');
+					overlayContent.insertAdjacentElement('afterbegin', listElement);
+					const announceListContainer = document.querySelector('.myft-ui-create-list-variant-announcement');
+					announceListContainer.textContent = `${list} created`;
+					triggerCreateListEvent(contentId);
+				});
+			});
+	}
+
+	function addToList (list) {
+		if(!list) {
+			return;
+		}
+
+		myFtClient.add('list', list.uuid, 'contained', 'content', contentId, { token: csrfToken }).then(() => {
+			const indexToUpdate = lists.indexOf(list);
+			lists[indexToUpdate] = { ...lists[indexToUpdate], checked: true };
+			const listElement = ListsElement(lists, addToList, removeFromList);
+			const overlayContent = document.querySelector('.o-overlay__content');
+			overlayContent.insertAdjacentElement('afterbegin', listElement);
+			triggerAddToListEvent(contentId);
+		});
+	}
+
+	function removeFromList (list) {
+		if(!list) {
+			return;
+		}
+
+		myFtClient.remove('list', list.uuid, 'contained', 'content', contentId, { token: csrfToken }).then(() => {
+			const indexToUpdate = lists.indexOf(list);
+			lists[indexToUpdate] = { ...lists[indexToUpdate], checked: false };
+			const listElement = ListsElement(lists, addToList, removeFromList);
+			const overlayContent = document.querySelector('.o-overlay__content');
+			overlayContent.insertAdjacentElement('afterbegin', listElement);
+			triggerRemoveFromListEvent(contentId);
+		});
+	}
+
+	if (!lists) {
+		lists = await getLists(contentId);
+	}
+
+	const overlays = Overlay.getOverlays();
+	const existingOverlay = overlays[name];
+	if (existingOverlay) {
+		existingOverlay.destroy();
+	}
+
+	const contentElement = ContentElement();
+	const headingElement = HeadingElement();
+
+	const createListOverlay = new Overlay(name, {
+		html: contentElement,
+		heading: { title: headingElement.outerHTML },
+		modal: false,
+		parentnode: isMobile() ? '.o-share--horizontal' : '.o-share--vertical',
+		class: 'myft-ui-create-list-variant',
+	});
+
+	const realignListener = realignOverlay(window.scrollY);
+
+	function outsideClickHandler (e) {
+		try {
+			const overlayContent = document.querySelector('.o-overlay__content');
+			if(!overlayContent || !overlayContent.contains(e.target)) {
+				createListOverlay.close();
+			}
+		} catch(error) {
+			handleError(error);
+		}
+	}
+
+	function openFormHandler () {
+		try {
+			const formElement = FormElement(createList);
+			const overlayContent = document.querySelector('.o-overlay__content');
+			overlayContent.insertAdjacentElement('beforeend', formElement);
+			formElement.elements[0].focus();
+		} catch(error) {
+			handleError(error);
+		}
+	}
+
+	createListOverlay.open();
+	createListOverlay.wrapper.addEventListener('oOverlay.ready', (data) => {
+		realignListener(data.currentTarget);
+
+		if (lists && lists.length) {
+			const listElement = ListsElement(lists, addToList, removeFromList);
+			const overlayContent = document.querySelector('.o-overlay__content');
+			overlayContent.insertAdjacentElement('afterbegin', listElement);
+		}
+
+		contentElement.addEventListener('click', openFormHandler);
+
+		document.querySelector('.article-content').addEventListener('click', outsideClickHandler);
+	});
+
+	createListOverlay.wrapper.addEventListener('oOverlay.destroy', () => {
+		const tooltipTemplate = document.createElement('div');
+		const opts = {
+			target: 'o-header-top-link-myft',
+			content: 'Go to saved articles in myFT to find your lists',
+			showOnConstruction: true,
+			closeAfter: 5,
+			position: 'below'
+		};
+
+		new oTooltip(tooltipTemplate, opts);
+
+		contentElement.removeEventListener('click', openFormHandler);
+
+		document.querySelector('.article-content').removeEventListener('click', outsideClickHandler);
+	});
+
+	window.addEventListener('scroll', function () {
+		realignListener(createListOverlay.wrapper, window.scrollY);
+	});
+
+	window.addEventListener('oViewport.resize', () => {
+		realignListener(createListOverlay.wrapper);
+	});
+}
+
+function stringToHTMLElement (string) {
+	const template = document.createElement('template');
+	template.innerHTML = string.trim();
+	return template.content.firstChild;
+}
+
+function FormElement (createList) {
+	const formString = `
+	<form class="myft-ui-create-list-variant-form">
+		<label class="o-forms-field">
+			<span class="o-forms-input o-forms-input--text">
+				<input type="text" name="list-name" aria-label="List name">
+			</span>
+		</label>
+		<button class="o-buttons o-buttons--secondary" type="submit">
+			Save
+		</button>
+	</form>
+	`;
+
+	const formElement = stringToHTMLElement(formString);
+
+	function handleSubmit (event) {
+		try {
+			event.preventDefault();
+			event.stopPropagation();
+			const inputListName = formElement.querySelector('input[name="list-name"]');
+			createList(inputListName.value);
+			inputListName.value = '';
+			formElement.remove();
+		} catch(error) {
+			handleError(error);
+		}
+	}
+
+	formElement.querySelector('button[type="submit"]').addEventListener('click', handleSubmit);
+
+	return formElement;
+}
+
+function ContentElement () {
+	let content = `
+		<div class="myft-ui-create-list-variant-footer">
+			<button class="myft-ui-create-list-variant-add">Add to a new list</button>
+			${!lists.length ? '<p class="myft-ui-create-list-variant-add-description">Lists are a simple way to curate your content</p>' : ''}
+		</div>
+	`;
+
+	return stringToHTMLElement(content);
+}
+
+function HeadingElement () {
+	const heading = `
+		<span class="myft-ui-create-list-variant-heading">Added to <a href="https://www.ft.com/myft/saved-articles">saved articles</a> in <span class="myft-ui-create-list-variant-icon"><span class="myft-ui-create-list-variant-icon-visually-hidden">my FT</span></span></span>
+		`;
+
+	return stringToHTMLElement(heading);
+}
+
+function ListsElement (lists, addToList, removeFromList) {
+	const currentList = document.querySelector('.myft-ui-create-list-variant-lists');
+	if (currentList) {
+		currentList.remove();
+	}
+
+	const listCheckboxElement = ListCheckboxElement(addToList, removeFromList);
+
+	const listsTemplate = `
+	<div class="myft-ui-create-list-variant-lists o-forms-field o-forms-field--optional" role="group">
+		<span class="myft-ui-create-list-variant-lists-text">Add to a list</span>
+		<span class="myft-ui-create-list-variant-lists-container o-forms-input o-forms-input--checkbox">
+		</span>
+	</div>
+	`;
+	const listsElement = stringToHTMLElement(listsTemplate);
+
+	const listsElementContainer = listsElement.querySelector('.myft-ui-create-list-variant-lists-container');
+
+	lists.map(list => listsElementContainer.insertAdjacentElement('beforeend', listCheckboxElement(list)));
+
+	return listsElement;
+}
+
+function ListCheckboxElement (addToList, removeFromList) {
+	return function (list) {
+		const listCheckbox = `<label>
+		<input type="checkbox" name="default" value="${list.name}" ${list.checked ? 'checked' : ''}>
+		<span class="o-forms-input__label">
+			<span class="o-normalise-visually-hidden">
+			${list.checked ? 'Remove article from ' : 'Add article to ' }
+			</span>
+			${list.name}
+		</span>
+	</label>
+	`;
+
+		const listCheckboxElement = stringToHTMLElement(listCheckbox);
+
+		const [ input ] = listCheckboxElement.children;
+
+		function handleCheck (event) {
+			event.preventDefault();
+			return event.target.checked ? addToList(list) : removeFromList(list);
+		}
+
+		input.addEventListener('click', handleCheck);
+
+		return listCheckboxElement;
+	};
+}
+
+function realignOverlay (originalScrollPosition) {
+	return function (target, currentScrollPosition) {
+		try {
+			if(currentScrollPosition && Math.abs(currentScrollPosition - originalScrollPosition) < 120) {
+				return;
+			}
+
+			originalScrollPosition = currentScrollPosition;
+
+			target.style['min-width'] = '340px';
+			target.style['width'] = '100%';
+			target.style['margin-top'] = '-50px';
+			target.style['left'] = 0;
+
+			if (isMobile()) {
+				target.style['position'] = 'absolute';
+				target.style['margin-left'] = 0;
+				target.style['margin-top'] = 0;
+				target.style['top'] = calculateLargerScreenHalf(target) === 'ABOVE' ? '-120px' : '50px';
+			} else {
+				target.style['position'] = 'absolute';
+				target.style['margin-left'] = '45px';
+				target.style['top'] = '220px';
+			}
+		} catch (error) {
+			handleError(error);
+		}
+	};
+}
+
+function isMobile () {
+	const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
+
+	return vw <= 980;
+}
+
+function calculateLargerScreenHalf (target) {
+	const vh = Math.min(document.documentElement.clientHeight || 0, window.innerHeight || 0);
+
+	const targetBox = target.getBoundingClientRect();
+	const spaceAbove = targetBox.top;
+	const spaceBelow = vh - targetBox.bottom;
+
+	return spaceBelow < spaceAbove ? 'ABOVE' : 'BELOW';
+}
+
+async function getLists () {
+	return myFtClient.getAll('created', 'list')
+		.then(lists => lists.filter(list => !list.isRedirect))
+		.then(lists => {
+			return lists.map(list => ({ name: list.name, uuid: list.uuid, checked: false }));
+		});
+}
+
+function triggerAddToListEvent (contentId) {
+	return document.body.dispatchEvent(new CustomEvent('oTracking.event', {
+		detail: {
+			category: 'professorLists',
+			action: 'add-to-list',
+			article_id: contentId,
+			teamName: 'customer-products-us-growth',
+			amplitudeExploratory: true
+		},
+		bubbles: true
+	}));
+}
+
+function triggerRemoveFromListEvent (contentId) {
+	return document.body.dispatchEvent(new CustomEvent('oTracking.event', {
+		detail: {
+			category: 'professorLists',
+			action: 'remove-from-list',
+			article_id: contentId,
+			teamName: 'customer-products-us-growth',
+			amplitudeExploratory: true
+		},
+		bubbles: true
+	}));
+}
+
+function triggerCreateListEvent (contentId) {
+	document.body.dispatchEvent(new CustomEvent('oTracking.event', {
+		detail: {
+			category: 'professorLists',
+			action: 'create-list',
+			article_id: contentId,
+			teamName: 'customer-products-us-growth',
+			amplitudeExploratory: true
+		},
+		bubbles: true
+	}));
+
+	return document.body.dispatchEvent(new CustomEvent('oTracking.event', {
+		detail: {
+			category: 'myFT',
+			action: 'create-list-success',
+			article_id: contentId
+		},
+		bubbles: true
+	}));
+}
+
+function handleError (error) {
+	document.body.dispatchEvent(new CustomEvent('oErrors.log', {
+		bubbles: true,
+		detail: {
+			error,
+			info: { component: 'professorLists' },
+		}
+	}));
+}

package/package.json

@@ -1,15 +1,13 @@
 {
   "name": "@financial-times/n-myft-ui",
-  "version": "26.0.0",
+  "version": "27.2.0",
   "description": "Client side component for interaction with myft",
-  "main": "dist/bundles/bundle.js",
-  "module": "dist/bundles/bundle.js",
+  "main": "server.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "commit": "commit-wizard",
     "prepare": "npx snyk protect || npx snyk protect -d || true",
-    "preinstall": "[ \"$INIT_CWD\" != \"$PWD\" ] || npm_config_yes=true npx check-engine",
-    "build-package": "webpack"
+    "preinstall": "npm_config_yes=true npx check-engine"
   },
   "repository": {
     "type": "git",
@@ -22,18 +20,14 @@
   },
   "homepage": "https://github.com/Financial-Times/n-myft-ui#readme",
   "devDependencies": {
-    "@financial-times/dotcom-build-bower-resolve": "0.4.1",
-    "@financial-times/dotcom-build-code-splitting": "0.4.1",
-    "@financial-times/dotcom-build-js": "0.4.1",
-    "@financial-times/dotcom-build-sass": "0.4.1",
-    "@financial-times/dotcom-page-kit-cli": "0.4.1",
-    "@financial-times/dotcom-server-handlebars": "^3.0.0",
-    "@financial-times/dotcom-server-react-jsx": "^2.6.2",
-    "@financial-times/n-express": "^22.4.1",
+    "@financial-times/dotcom-build-bower-resolve": "^2.6.2",
+    "@financial-times/dotcom-build-code-splitting": "^5.0.0",
+    "@financial-times/dotcom-build-js": "^5.0.0",
+    "@financial-times/dotcom-build-sass": "^5.0.0",
+    "@financial-times/dotcom-page-kit-cli": "^0.6.5",
+    "@financial-times/dotcom-server-handlebars": "^5.0.0",
+    "@financial-times/n-express": "^23.0.1",
     "@financial-times/n-gage": "^8.3.2",
-    "@sucrase/jest-plugin": "^2.2.0",
-    "@testing-library/jest-dom": "^5.16.1",
-    "@testing-library/react": "^12.1.2",
     "ascii-table": "0.0.9",
     "autoprefixer": "9.7.0",
     "aws-sdk-mock": "4.5.0",
@@ -46,8 +40,6 @@
     "babel-plugin-transform-runtime": "^6.9.0",
     "babel-preset-env": "^1.7.0",
     "babel-preset-es2015": "^6.6.0",
-    "babel-preset-react": "^6.24.1",
-    "babel-preset-stage-2": "^6.24.1",
     "babel-runtime": "^6.9.2",
     "bower": "^1.8.8",
     "bower-resolve-webpack-plugin": "^1.0.5",
@@ -59,18 +51,14 @@
     "css-loader": "^0.23.1",
     "denodeify": "^1.2.1",
     "eslint": "6.5.1",
-    "eslint-plugin-react": "^7.27.1",
     "extract-css-block-webpack-plugin": "^1.3.0",
-    "extract-text-webpack-plugin": "3.0.2",
     "fetch-mock": "^5.0.3",
     "handlebars": "^4.0.6",
     "handlebars-loader": "^1.4.0",
     "http-server": "^0.11.1",
     "hyperons": "^0.4.1",
     "imports-loader": "0.8.0",
-    "inject-loader": "^3.0.0",
-    "jest": "^27.4.5",
-    "jsdom": "^19.0.0",
+    "inject-loader": "^4.0.1",
     "karma": "4.4.1",
     "karma-browserstack-launcher": "1.5.1",
     "karma-chai": "^0.1.0",
@@ -81,31 +69,29 @@
     "karma-sinon": "^1.0.5",
     "karma-sinon-chai": "2.0.2",
     "karma-sourcemap-loader": "^0.3.7",
-    "karma-webpack": "^3.0.0",
+    "karma-webpack": "^4.0.2",
     "lintspaces-cli": "^0.7.0",
     "lolex": "5.1.1",
     "mocha": "6.2.2",
     "mockery": "2.1.0",
     "node-fetch": "2.6.0",
-    "node-sass": "^4.14.1",
+    "node-sass": "^6.0.1",
     "nodemon": "^1.9.2",
     "npm-prepublish": "^1.2.1",
     "pa11y-ci": "^2.1.1",
     "postcss-loader": "^0.9.1",
-    "react": "^17.0.2",
     "regenerator-runtime": "^0.13.3",
     "semver": "6.3.0",
     "sinon": "^7.1.0",
     "sinon-chai": "^3.2.0",
-    "snyk": "^1.216.5",
-    "sucrase": "^3.10.1"
+    "snyk": "^1.216.5"
   },
   "volta": {
-    "node": "12.22.5",
+    "node": "16.14.2",
     "npm": "7.20.2"
   },
   "engines": {
-    "node": "12.x",
+    "node": "14.x || 16.x",
     "npm": "7.x || 8.x"
   },
   "x-dash": {

package/components/collections/collections.jsx

@@ -1,68 +0,0 @@
-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 = [], csrfToken, cacheablePersonalisedUrl }) {
-	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 cacheablePersonalisedUrl={cacheablePersonalisedUrl} csrfToken={csrfToken} 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 csrfToken={csrfToken} cacheablePersonalisedUrl={cacheablePersonalisedUrl} />
-					<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

@@ -1,83 +0,0 @@
-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);
-	});
-
-});