Adds E2E tests for components "displayName"

Author: kettanaito

examples/index.js

@@ -118,11 +118,13 @@ import IterativeAreas from './recipes/IterativeAreas'
 storiesOf('Recipes|All', module).add('Iterative areas', IterativeAreas)
 
 /**
- * Bugfixes
+ * Regression
  */
+import DisplayNames from './regression/DisplayNames'
 import StylesUndefined from './regression/StylesUndefined'
 import SingleResponsiveProp from './regression/SingleResponsiveProp'
 
 storiesOf('Regression|All', module)
+  .add('Display names', DisplayNames)
   .add('Styles undefined', StylesUndefined)
   .add('Single responsive prop', SingleResponsiveProp)

examples/regression/DisplayNames.jsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import { Box, Composition, Only, Visible, MediaQuery } from 'atomic-layout'
+
+const DisplayNames = () => (
+  <div>
+    <Box id="box">{Box.displayName}</Box>
+    <Composition
+      id="composition"
+      areas="one"
+      data-display-name={Composition.displayName}
+    >
+      {(Areas) => (
+        <Areas.One id="composition-area">{Areas.One.displayName}</Areas.One>
+      )}
+    </Composition>
+    <Only id="only" from="xs">
+      {Only.displayName}
+    </Only>
+    <Visible id="visible" from="xs">
+      {Visible.displayName}
+    </Visible>
+    <MediaQuery matches={true}>
+      {() => <p id="media-query">{MediaQuery.displayName}</p>}
+    </MediaQuery>
+  </div>
+)
+
+export default DisplayNames

examples/regression/DisplayNames.test.js

@@ -0,0 +1,33 @@
+describe('Display names', () => {
+  before(() => {
+    cy.loadStory(['regression', 'all'], ['display-names'])
+  })
+
+  it('Box should have a meaningful display name', () => {
+    cy.get('#box').should('have.text', 'Box')
+  })
+
+  it('Composition should have meaningful display name', () => {
+    cy.get('#composition').should(
+      'have.attr',
+      'data-display-name',
+      'Composition',
+    )
+  })
+
+  it('Composition areas should have meaningful display name', () => {
+    cy.get('#composition-area').should('have.text', 'Area(One)')
+  })
+
+  it('Only should have meaningful display name', () => {
+    cy.get('#only').should('have.text', 'Only')
+  })
+
+  it('Visible should have meaningful display name', () => {
+    cy.get('#visible').should('have.text', 'Visible')
+  })
+
+  it('MediaQuery should have meaningful display name', () => {
+    cy.get('#media-query').should('have.text', 'MediaQuery')
+  })
+})