tests(bootstrap): add test covering conflict on styling td's

Author: awerlang

bower.json

@@ -7,9 +7,9 @@
   ],
   "description": "Make your HTML tables look great on every device",
   "main": [
-      "release/angular-responsive-tables.js",
-      "release/angular-responsive-tables.css"
-    ],
+    "release/angular-responsive-tables.js",
+    "release/angular-responsive-tables.css"
+  ],
   "keywords": [
     "angular",
     "angularjs",
@@ -32,6 +32,7 @@
   },
   "devDependencies": {
     "angular-mocks": "^1.3.4",
-    "jquery": "~2.1.4"
+    "jquery": "~2.1.4",
+    "bootstrap": "*"
   }
 }

karma.conf.js

@@ -18,7 +18,9 @@ module.exports = function(config) {
       'bower_components/jquery/dist/jquery.js',
       'bower_components/angular/angular.js',
       'bower_components/angular-mocks/angular-mocks.js',
+      'bower_components/bootstrap/dist/css/bootstrap.css',
       'src/**/*.js',
+      'src/**/*.css',
       'tests/**/*.spec.js'
     ],
 
@@ -59,7 +61,17 @@ module.exports = function(config) {
 
     // start these browsers
     // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
-    browsers: ['Chrome'],
+    browsers: ['mobile'],
+    
+    customLaunchers: {
+      mobile: {
+        base: "Chrome",
+        flags: ["--window-size=320,600"]
+      },
+      desktop: {
+        base: "Chrome"
+      }
+    },
 
 
     // Continuous Integration mode

tests/directive.spec.js

@@ -82,4 +82,39 @@ describe('directive', function () {
 		expect(firstDataRow.eq(2).attr('data-title')).toBe('Third title');
 		expect(firstDataRow.eq(3).attr('data-title')).toBe('Forth title');
 	});
+
+	fit('supports bootstrap', function () {
+		var markup = [
+		    '<table wt-responsive-table class="table" style="display: none;">',
+		    '    <thead>',
+		    '        <tr>',
+		    '            <th>First title</th>',
+		    '            <th>Second title</th>',
+		    '            <th>Third title</th>',
+		    '            <th>Forth title</th>',
+		    '        </tr>',
+		    '    </thead>',
+		    '    <tbody>',
+		    '        <tr>',
+		    '            <td>First column</td>',
+		    '            <td>Second column</td>',
+		    '            <td>Third column</td>',
+		    '            <td>Forth column</td>',
+		    '        </tr>',
+		    '    </tbody>',
+		    '</table>'
+		].join('');
+		var element = angular.element(markup);
+		angular.element("body").append(element);
+		
+		var firstDataRow = element.find('tbody tr td');
+		
+		var styles = getComputedStyle(firstDataRow[0]);
+		expect(styles.paddingLeft).toBe('8px');
+
+		$compile(element);
+		$rootScope.$digest();
+
+		expect(styles.paddingLeft).toBe('50%');
+	});
 });