Test: Add more Cypress tests for isolated mode toggling (styleguidist#1304)

Author: dougmacknz

examples/styled-components/babel.config.js

@@ -5,11 +5,11 @@ module.exports = {
 			{
 				modules: false,
 				useBuiltIns: 'usage',
-				corejs: 3
+				corejs: 3,
 			},
 		],
 		['@babel/preset-react'],
-		['@babel/preset-typescript']
+		['@babel/preset-typescript'],
 	],
 	plugins: ['@babel/plugin-proposal-class-properties', 'babel-plugin-styled-components'],
 };

src/client/rsg-components/Examples/Examples.js

@@ -6,7 +6,7 @@ import ExamplesRenderer from 'rsg-components/Examples/ExamplesRenderer';
 
 export default function Examples({ examples, name, exampleMode }, { codeRevision }) {
 	return (
-		<ExamplesRenderer>
+		<ExamplesRenderer name={name}>
 			{examples.map((example, index) => {
 				switch (example.type) {
 					case 'code':

src/client/rsg-components/Examples/ExamplesRenderer.js

@@ -7,12 +7,17 @@ const styles = () => ({
 	root: {},
 });
 
-export function ExamplesRenderer({ classes, children }) {
-	return <article className={classes.root}>{children}</article>;
+export function ExamplesRenderer({ classes, name, children }) {
+	return (
+		<article className={classes.root} data-testid={`${name}-examples`}>
+			{children}
+		</article>
+	);
 }
 
 ExamplesRenderer.propTypes = {
 	classes: PropTypes.object.isRequired,
+	name: PropTypes.string.isRequired,
 	children: PropTypes.node,
 };
 

src/client/rsg-components/Examples/__snapshots__/Examples.spec.js.snap

@@ -1,7 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render examples 1`] = `
-<Styled(Examples)>
+<Styled(Examples)
+  name="button"
+>
   <Playground
     code=
 <button>

src/client/rsg-components/Playground/Playground.js

@@ -82,6 +82,7 @@ class Playground extends Component {
 		) : (
 			<PlaygroundRenderer
 				name={name}
+				exampleIndex={index}
 				preview={preview}
 				previewProps={settings.props || {}}
 				tabButtons={

src/client/rsg-components/Playground/Playground.spec.js

@@ -127,6 +127,7 @@ it('renderer should render preview', () => {
 	const actual = shallow(
 		<PlaygroundRenderer
 			classes={classes(styles)}
+			exampleIndex={0}
 			name="name"
 			preview={<div>preview</div>}
 			previewProps={{ className: 'pizza', title: 'salami' }}

src/client/rsg-components/Playground/PlaygroundRenderer.js

@@ -28,6 +28,7 @@ export const styles = ({ space, color, borderRadius }) => ({
 
 export function PlaygroundRenderer({
 	classes,
+	exampleIndex,
 	name,
 	preview,
 	previewProps,
@@ -37,7 +38,7 @@ export function PlaygroundRenderer({
 }) {
 	const { className, ...props } = previewProps;
 	return (
-		<div className={classes.root}>
+		<div className={classes.root} data-testid={`${name}-example-${exampleIndex}`}>
 			<div className={cx(classes.preview, className)} {...props} data-preview={name}>
 				{preview}
 			</div>
@@ -52,6 +53,7 @@ export function PlaygroundRenderer({
 
 PlaygroundRenderer.propTypes = {
 	classes: PropTypes.object.isRequired,
+	exampleIndex: PropTypes.number.isRequired,
 	name: PropTypes.string.isRequired,
 	preview: PropTypes.node.isRequired,
 	previewProps: PropTypes.object.isRequired,

src/client/rsg-components/Playground/__snapshots__/Playground.spec.js.snap

@@ -3,6 +3,7 @@
 exports[`renderer should render preview 1`] = `
 <div
   className="root"
+  data-testid="name-example-0"
 >
   <div
     className="preview pizza"
@@ -41,6 +42,7 @@ exports[`renderer should render preview 1`] = `
 
 exports[`should render component renderer 1`] = `
 <Styled(Playground)
+  exampleIndex={0}
   name="name"
   preview={
     <Preview

src/client/rsg-components/ReactComponent/ReactComponentRenderer.js

@@ -39,7 +39,7 @@ export function ReactComponentRenderer({
 	tabBody,
 }) {
 	return (
-		<div className={classes.root} id={name + '-container'}>
+		<div className={classes.root} data-testid={`${name}-container`}>
 			<header className={classes.header}>
 				{heading}
 				{pathLine && <Pathline>{pathLine}</Pathline>}

src/client/rsg-components/ReactComponent/__snapshots__/ReactComponent.spec.js.snap

@@ -207,7 +207,7 @@ exports[`ReactComponent should pass rendered description, usage, examples, etc.
 
 exports[`ReactComponentRenderer should render component 1`] = `
 <div
-  id="Test-container"
+  data-testid="Test-container"
 >
   <header>
     <div>
@@ -222,7 +222,7 @@ exports[`ReactComponentRenderer should render component 1`] = `
 
 exports[`ReactComponentRenderer should render component without a pathline 1`] = `
 <div
-  id="Test-container"
+  data-testid="Test-container"
 >
   <header>
     <div>
@@ -234,7 +234,7 @@ exports[`ReactComponentRenderer should render component without a pathline 1`] =
 
 exports[`ReactComponentRenderer should render description 1`] = `
 <div
-  id="Test-container"
+  data-testid="Test-container"
 >
   <header>
     <div>
@@ -254,7 +254,7 @@ exports[`ReactComponentRenderer should render description 1`] = `
 
 exports[`ReactComponentRenderer should render docs 1`] = `
 <div
-  id="Test-container"
+  data-testid="Test-container"
 >
   <header>
     <div>
@@ -274,7 +274,7 @@ exports[`ReactComponentRenderer should render docs 1`] = `
 
 exports[`ReactComponentRenderer should render examples 1`] = `
 <div
-  id="Test-container"
+  data-testid="Test-container"
 >
   <header>
     <div>
@@ -299,7 +299,7 @@ exports[`ReactComponentRenderer should render examples 1`] = `
 
 exports[`ReactComponentRenderer should render usage section 1`] = `
 <div
-  id="Test-container"
+  data-testid="Test-container"
 >
   <header>
     <div>

src/client/rsg-components/StyleGuide/StyleGuideRenderer.js

@@ -75,7 +75,7 @@ export function StyleGuideRenderer({
 				</footer>
 			</main>
 			{hasSidebar && (
-				<div className={classes.sidebar}>
+				<div className={classes.sidebar} data-testid="sidebar">
 					<header className={classes.logo}>
 						<Logo>{title}</Logo>
 						{version && <Version>{version}</Version>}

src/client/rsg-components/StyleGuide/__snapshots__/StyleGuide.spec.js.snap

@@ -14,7 +14,9 @@ exports[`renderer should render logo, version, table of contents, ribbon and pas
       />
     </footer>
   </main>
-  <div>
+  <div
+    data-testid="sidebar"
+  >
     <header>
       <Styled(Logo)>
         Hello

src/client/rsg-components/ToolbarButton/ToolbarButtonRenderer.js

@@ -46,6 +46,7 @@ export function ToolbarButtonRenderer({
 	href,
 	title,
 	small,
+	testId,
 	children,
 }) {
 	const classNames = cx(classes.button, className, {
@@ -54,7 +55,7 @@ export function ToolbarButtonRenderer({
 
 	if (href !== undefined) {
 		return (
-			<a href={href} title={title} className={classNames} aria-label={title}>
+			<a href={href} title={title} className={classNames} aria-label={title} data-testid={testId}>
 				{children}
 			</a>
 		);
@@ -74,6 +75,7 @@ ToolbarButtonRenderer.propTypes = {
 	onClick: PropTypes.func,
 	title: PropTypes.string,
 	small: PropTypes.bool,
+	testId: PropTypes.string,
 	children: PropTypes.node,
 };
 

src/client/rsg-components/slots/IsolateButton.js

@@ -5,19 +5,27 @@ import MdFullscreenExit from 'react-icons/lib/md/fullscreen-exit';
 import ToolbarButton from 'rsg-components/ToolbarButton';
 import getUrl from '../../utils/getUrl';
 
-const IsolateButton = ({ name, example, isolated }) =>
-	isolated ? (
+const IsolateButton = ({ name, example, isolated }) => {
+	const testID = example ? `${name}-${example}-isolate-button` : `${name}-isolate-button`;
+
+	return isolated ? (
 		<ToolbarButton
 			href={getUrl({ anchor: true, slug: name.toLowerCase() })}
 			title="Show all components"
+			testId={testID}
 		>
 			<MdFullscreenExit />
 		</ToolbarButton>
 	) : (
-		<ToolbarButton href={getUrl({ name, example, isolated: true })} title="Open isolated">
+		<ToolbarButton
+			href={getUrl({ name, example, isolated: true })}
+			title="Open isolated"
+			testId={testID}
+		>
 			<MdFullscreen />
 		</ToolbarButton>
 	);
+};
 
 IsolateButton.propTypes = {
 	name: PropTypes.string.isRequired,

src/client/rsg-components/slots/__snapshots__/IsolateButton.spec.js.snap

@@ -3,6 +3,7 @@
 exports[`should renderer a link home in isolated mode 1`] = `
 <Styled(ToolbarButton)
   href="/#pizza"
+  testId="Pizza-isolate-button"
   title="Show all components"
 >
   <MdFullscreenExit />
@@ -12,6 +13,7 @@ exports[`should renderer a link home in isolated mode 1`] = `
 exports[`should renderer a link to example isolated mode 1`] = `
 <Styled(ToolbarButton)
   href="/#!/Pizza/3"
+  testId="Pizza-3-isolate-button"
   title="Open isolated"
 >
   <MdFullscreen />
@@ -21,6 +23,7 @@ exports[`should renderer a link to example isolated mode 1`] = `
 exports[`should renderer a link to isolated mode 1`] = `
 <Styled(ToolbarButton)
   href="/#!/Pizza"
+  testId="Pizza-isolate-button"
   title="Open isolated"
 >
   <MdFullscreen />

test/cypress/integration/component_spec.js

@@ -1,7 +1,7 @@
 describe('Single component', () => {
 	before(() => {
 		// Open simple button component in isolation
-		cy.visit('/#!/Button/1');
+		cy.visit('/#!/Button');
 	});
 
 	describe('props and methods section', () => {
@@ -35,10 +35,12 @@ describe('Single component', () => {
 
 	describe('preview section', () => {
 		beforeEach(() => {
-			cy.get('[class^=rsg--preview]')
-				.as('preview')
-				.closest('[class^=rsg--root]')
+			cy.get('[data-testid*="-example-"]')
 				.as('container')
+				.find('[class^=rsg--preview]')
+				.as('preview');
+
+			cy.get('@container')
 				.find('button')
 				.contains('View Code')
 				.as('viewCodeBtn');
@@ -79,5 +81,34 @@ describe('Single component', () => {
 				.contains('Push Me Harder')
 				.should('exist');
 		});
+
+		it('toggles isolated example mode correctly', () => {
+			cy.get('[data-testid$="-examples"]').as('componentExamples');
+
+			// Toggle into isolated example mode
+			cy.get('@componentExamples')
+				.find('[data-testid$="-isolate-button"]')
+				.first()
+				.click();
+
+			// Assert that there is only one example showing
+			cy.get('@componentExamples')
+				.find('[data-testid*="-example-"]')
+				.should('have.length', 1);
+
+			// Toggle out of isolated example mode
+			cy.get('@componentExamples')
+				.find('[data-testid$="-isolate-button"]')
+				.click();
+
+			// Assert the other examples are showing again
+			cy.get('@componentExamples')
+				.find('[data-testid*="-example-"]')
+				.should('have.length.above', 1);
+
+			// Check that we've returned to isolated component mode instead of normal mode
+			// TODO: this is currently bugged (returns to normal mode rather than isolated component mode)
+			//cy.get('[id$=container]').should('have.length', 1);
+		});
 	});
 });

test/cypress/integration/core_spec.js

@@ -1,18 +1,37 @@
 describe('Styleguidist core', () => {
-	beforeEach(() => cy.visit('/'));
+	before(() => cy.visit('/'));
 
 	it('loads the page', () => {
 		cy.title().should('include', 'React Styleguidist');
 	});
 
 	it('shows multiple components in normal mode', () => {
-		cy.get('[id$=container]').should('have.length.above', 1);
+		cy.get('[data-testid$=-container]').should('have.length.above', 1);
 	});
 
-	it('shows single component in isolated mode', () => {
-		cy.get('a[aria-label="Open isolated"]')
+	it('toggles isolated component mode correctly', () => {
+		cy.get('[data-testid=sidebar]').as('sidebar');
+
+		// Toggle into isolated mode
+		cy.get('[data-testid$="-isolate-button"]')
+			.first()
+			.click();
+
+		// Assert there's only one component showing
+		cy.get('[data-testid$=-container]').should('have.length', 1);
+
+		// Assert the sidebar is no longer showing
+		cy.get('@sidebar').should('not.exist');
+
+		// Toogle out of isolated mode
+		cy.get('[data-testid$="-isolate-button"]')
 			.first()
 			.click();
-		cy.get('[id$=container]').should('have.length', 1);
+
+		// Assert that more than one component is now showing
+		cy.get('[data-testid$=-container]').should('have.length.above', 1);
+
+		// Asser that the sidebar is now showing again
+		cy.get('@sidebar').should('exist');
 	});
 });