super testing

miguelcobain · Apr 21, 2017 · f0e6dbb · f0e6dbb
1 parent 384d201
commit f0e6dbb
Show file tree

Hide file tree

Showing 6 changed files with 238 additions and 15 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,7 +1,7 @@
 module.exports = {
   root: true,
   parserOptions: {
-    ecmaVersion: 6,
+    ecmaVersion: 2017,
     sourceType: 'module'
   },
   extends: [

diff --git a/.travis.yml b/.travis.yml
@@ -1,10 +1,16 @@
 ---
 language: node_js
 node_js:
-  - "6"
+  - "7"
 
+dist: trusty
 sudo: false
 
+addons:
+  apt:
+    packages:
+     - google-chrome-stable
+
 cache:
   directories:
     - $HOME/.npm
@@ -34,6 +40,11 @@ install:
   - npm install
   - bower install
 
+before_script:
+  - "export DISPLAY=:99.0"
+  - "sh -e /etc/init.d/xvfb start"
+  - sleep 3 # give xvfb some time to start
+
 script:
   # Usually, it's ok to finish the test scenario without reverting
   #  to the addon's original dependency state, skipping "cleanup".

diff --git a/addon/templates/components/paper-expansion-panel.hbs b/addon/templates/components/paper-expansion-panel.hbs
@@ -2,4 +2,5 @@
   collapsed=(component "paper-expansion-panel/collapsed" expanded=expanded onExpand=(action expand))
   expanded=(component "paper-expansion-panel/expanded" expanded=expanded onClose=(action collapse))
   collapse=(action collapse)
+  expand=(action expand)
 )}}
diff --git a/package.json b/package.json
@@ -32,7 +32,7 @@
   "devDependencies": {
     "broccoli-asset-rev": "^2.4.5",
     "ember-ajax": "^2.4.1",
-    "ember-cli": "2.12.1",
+    "ember-cli": "2.13.0-beta.3",
     "ember-cli-dependency-checker": "^1.3.0",
     "ember-cli-eslint": "^3.0.0",
     "ember-cli-github-pages": "^0.1.2",
@@ -46,9 +46,10 @@
     "ember-disable-prototype-extensions": "^1.1.0",
     "ember-export-application-global": "^1.0.5",
     "ember-load-initializers": "^0.6.0",
+    "ember-native-dom-helpers": "^0.3.9",
     "ember-paper": "^1.0.0-alpha.19",
     "ember-resolver": "^2.0.3",
-    "ember-source": "~2.12.0",
+    "ember-source": "^2.13.0-beta.2",
     "ember-truth-helpers": "^1.3.0",
     "ember-welcome-page": "^2.0.2",
     "eslint-plugin-ember-suave": "^1.0.0",

diff --git a/testem.js b/testem.js
@@ -3,10 +3,16 @@ module.exports = {
   "test_page": "tests/index.html?hidepassed",
   "disable_watching": true,
   "launch_in_ci": [
-    "PhantomJS"
+    // "PhantomJS",
+    "Chrome"
   ],
   "launch_in_dev": [
     "PhantomJS",
     "Chrome"
-  ]
+  ],
+  "browser_args": {
+    "Chrome": [
+      "--touch-events"
+    ]
+  }
 };
diff --git a/tests/integration/components/paper-expansion-panel-test.js b/tests/integration/components/paper-expansion-panel-test.js
@@ -1,25 +1,229 @@
 import { moduleForComponent, test } from 'ember-qunit';
 import hbs from 'htmlbars-inline-precompile';
+import { find, click, keyEvent } from 'ember-native-dom-helpers';
 
 moduleForComponent('paper-expansion-panel', 'Integration | Component | paper expansion panel', {
   integration: true
 });
 
-test('it renders', function(assert) {
+test('it renders the collapsed state', function(assert) {
+  assert.expect(1);
 
-  // Set any properties with this.set('myProperty', 'value');
-  // Handle any actions with this.on('myAction', function(val) { ... });
+  this.render(hbs`
+    {{#paper-expansion-panel as |panel|}}
+      {{#panel.collapsed}}
+        collapsed content
+      {{/panel.collapsed}}
+    {{/paper-expansion-panel}}
+  `);
+
+  assert.equal(find('.md-button').textContent.trim(), 'collapsed content');
+});
+
+test('it renders the expanded state when button is clicked', async function(assert) {
+  assert.expect(3);
+
+  this.render(hbs`
+    {{#paper-expansion-panel as |panel|}}
+      {{#panel.collapsed}}
+        collapsed content
+      {{/panel.collapsed}}
+
+      {{#panel.expanded as |expanded|}}
+        {{#expanded.header}}
+          expanded header
+        {{/expanded.header}}
+
+        {{#expanded.content}}
+          expanded content
+        {{/expanded.content}}
+
+        {{#expanded.footer}}
+          expanded footer
+        {{/expanded.footer}}
+
+      {{/panel.expanded}}
+    {{/paper-expansion-panel}}
+  `);
+
+  await click('.md-button');
+
+  assert.equal(find('md-list-item').textContent.trim(), 'expanded header');
+  assert.equal(find('md-expansion-panel-content').textContent.trim(), 'expanded content');
+  assert.equal(find('md-expansion-panel-footer').textContent.trim(), 'expanded footer');
+});
+
+test('it renders the expanded state when expanded=true', function(assert) {
+  assert.expect(3);
 
-  this.render(hbs`{{paper-expansion-panel}}`);
+  this.render(hbs`
+    {{#paper-expansion-panel expanded=true as |panel|}}
+      {{#panel.collapsed}}
+        collapsed content
+      {{/panel.collapsed}}
+
+      {{#panel.expanded as |expanded|}}
+        {{#expanded.header}}
+          expanded header
+        {{/expanded.header}}
+
+        {{#expanded.content}}
+          expanded content
+        {{/expanded.content}}
+
+        {{#expanded.footer}}
+          expanded footer
+        {{/expanded.footer}}
+
+      {{/panel.expanded}}
+    {{/paper-expansion-panel}}
+  `);
+
+  assert.equal(find('md-list-item').textContent.trim(), 'expanded header');
+  assert.equal(find('md-expansion-panel-content').textContent.trim(), 'expanded content');
+  assert.equal(find('md-expansion-panel-footer').textContent.trim(), 'expanded footer');
+});
 
-  assert.equal(this.$().text().trim(), '');
+test('toggling expanded toggles states', function(assert) {
+  assert.expect(4);
 
-  // Template block usage:
   this.render(hbs`
-    {{#paper-expansion-panel}}
-      template block text
+    {{#paper-expansion-panel expanded=expanded as |panel|}}
+      {{#panel.collapsed}}
+        collapsed content
+      {{/panel.collapsed}}
+
+      {{#panel.expanded as |expanded|}}
+        {{#expanded.header}}
+          expanded header
+        {{/expanded.header}}
+
+        {{#expanded.content}}
+          expanded content
+        {{/expanded.content}}
+
+        {{#expanded.footer}}
+          expanded footer
+        {{/expanded.footer}}
+
+      {{/panel.expanded}}
     {{/paper-expansion-panel}}
   `);
 
-  assert.equal(this.$().text().trim(), 'template block text');
+  assert.equal(find('.md-button').textContent.trim(), 'collapsed content');
+
+  this.set('expanded', true);
+
+  assert.equal(find('md-list-item').textContent.trim(), 'expanded header');
+  assert.equal(find('md-expansion-panel-content').textContent.trim(), 'expanded content');
+  assert.equal(find('md-expansion-panel-footer').textContent.trim(), 'expanded footer');
 });
+
+test('yielded expand/collapse actions work', async function(assert) {
+  assert.expect(3);
+
+  this.render(hbs`
+    {{#paper-expansion-panel as |panel|}}
+      {{#panel.collapsed}}
+        collapsed content
+        <div class="expand" onclick={{action panel.expand}}></div>
+      {{/panel.collapsed}}
+
+      {{#panel.expanded as |expanded|}}
+        {{#expanded.header}}
+          expanded header
+        {{/expanded.header}}
+
+        {{#expanded.content}}
+          expanded content
+          <div class="collapse" onclick={{action panel.collapse}}></div>
+        {{/expanded.content}}
+
+        {{#expanded.footer}}
+          expanded footer
+        {{/expanded.footer}}
+
+      {{/panel.expanded}}
+    {{/paper-expansion-panel}}
+  `);
+
+  assert.ok(find('md-expansion-panel').classList.contains('md-close'));
+
+  await click('.expand');
+  assert.ok(find('md-expansion-panel').classList.contains('md-open'));
+
+  await click('.collapse');
+  assert.ok(find('md-expansion-panel').classList.contains('md-close'));
+});
+
+test('onExpandedChange is sent on expand/collapse', async function(assert) {
+  assert.expect(2);
+
+  this.set('onExpandedChange', (state) => {
+    assert.ok(state, 'action was sent with true');
+  });
+
+  this.render(hbs`
+    {{#paper-expansion-panel onExpandedChange=(action onExpandedChange) as |panel|}}
+      {{#panel.collapsed}}
+        collapsed content
+      {{/panel.collapsed}}
+
+      {{#panel.expanded as |expanded|}}
+        {{#expanded.header}}
+          expanded header
+        {{/expanded.header}}
+
+        {{#expanded.content}}
+          expanded content
+        {{/expanded.content}}
+
+        {{#expanded.footer}}
+          expanded footer
+        {{/expanded.footer}}
+
+      {{/panel.expanded}}
+    {{/paper-expansion-panel}}
+  `);
+
+  await click('.md-button');
+
+  this.set('onExpandedChange', (state) => {
+    assert.notOk(state, 'action was sent with false');
+  });
+
+  await click('.md-button');
+});
+
+test('pressing enter/escape expands/collapses', async function(assert) {
+  assert.expect(2);
+
+  this.render(hbs`
+    {{#paper-expansion-panel as |panel|}}
+      {{#panel.collapsed}}
+        collapsed content
+      {{/panel.collapsed}}
+
+      {{#panel.expanded as |expanded|}}
+        {{#expanded.header}}
+          expanded header
+        {{/expanded.header}}
+
+        {{#expanded.content}}
+          expanded content
+        {{/expanded.content}}
+
+        {{#expanded.footer}}
+          expanded footer
+        {{/expanded.footer}}
+
+      {{/panel.expanded}}
+    {{/paper-expansion-panel}}
+  `);
+
+  await keyEvent('.md-button', 'keydown', 13);
+  assert.ok(find('md-expansion-panel').classList.contains('md-open'));
+
+  await keyEvent('.md-button', 'keydown', 27);
+  assert.ok(find('md-expansion-panel').classList.contains('md-close'));
+});