Add failing tests for styled-components#13

- Failing test case for valid interpolations
- Real world failing test case (BidiButton)

test/fixtures/interpolations/valid.js

@@ -50,7 +50,7 @@ const Button4 = styled.button`
   background: blue;
 `
 
-// Conditional 
+// Conditional
 const cond = true
 const Button5 = styled.button`
   display: block;
@@ -60,12 +60,20 @@ const Button5 = styled.button`
   background: blue;
 `
 
-// Conditional 
-const cond2 = false 
+// Conditional
+const cond2 = false
 const Button6 = styled.button`
   display: block;
   ${cond2 && `
     color: ${cond2};
   `}
   background: blue;
 `
+
+// Complex
+const dir = 'left';
+const Button7 = styled.button`
+  display: block;
+  background: blue;
+  margin-${dir}: 12.5px;
+`

test/fixtures/real-world/BidiButton.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import styled, { ThemeProvider } from 'styled-components'
+
+const BidiButton = () => {
+  const bidi = styled.button`
+    background: green;
+    margin-${props => ((props.theme.dir === 'rtl') ? 'left':'right')}: 12.5px;
+  `;
+};
+
+export default (props) => {
+  return (
+    <ThemeProvider theme={{ dir: 'rtl' }}>
+      <BidiButton />
+    </ThemeProvider>
+  );
+};

test/interpolations.test.js

@@ -3,6 +3,7 @@ const path = require('path')
 
 const processor = path.join(__dirname, '../src/index.js')
 const rules = {
+  'property-no-unknown': true,
   'block-no-empty': true,
   indentation: 2,
 }

test/real-world.test.js

@@ -7,6 +7,7 @@ const path = require('path')
 
 const processor = path.join(__dirname, '../src/index.js')
 const rules = {
+  'property-no-unknown': true,
   'block-no-empty': true,
   indentation: 2,
 }
@@ -55,4 +56,26 @@ describe('real world failures', () => {
       expect(data.results[0].warnings).toEqual([])
     })
   })
+
+  describe('BidiButton', () => {
+    beforeAll(() => {
+      fixture = path.join(__dirname, './fixtures/real-world/BidiButton.js')
+    })
+
+    it('should have one result', () => {
+      expect(data.results.length).toEqual(1)
+    })
+
+    it('should use the right file', () => {
+      expect(data.results[0].source).toEqual(fixture)
+    })
+
+    it('should not have errored', () => {
+      expect(data.errored).toEqual(false)
+    })
+
+    it('should not have any warnings', () => {
+      expect(data.results[0].warnings).toEqual([])
+    })
+  })
 })