Rename to thank-you; update BEM; update tests

app/components/thank-you-container.js

@@ -0,0 +1,9 @@
+import Ember from 'ember';
+
+const {
+  Component
+} = Ember;
+
+export default Component.extend({
+  classNames: ['thank-you-container']
+});

app/controllers/project/donate.js

@@ -96,7 +96,7 @@ export default Controller.extend({
 
   _transitionToThankYou() {
     let project = get(this, 'project');
-    return this.transitionToRoute('project.thankyou', project);
+    return this.transitionToRoute('project.thank-you', project);
   },
 
   _handleError(error) {

app/router.js

@@ -57,7 +57,7 @@ AppRouter.map(function() {
       this.route('task', { path: '/:number' });
     });
     this.route('donate');
-    this.route('thankyou');
+    this.route('thank-you');
   });
 
   this.route('projects', {

app/styles/app.scss

@@ -83,7 +83,7 @@
 @import "templates/about";
 @import "templates/oauth-stripe";
 @import "templates/project/index";
-@import "templates/project/thankyou";
+@import "templates/project/thank-you";
 @import "templates/project/settings/contributors";
 @import "templates/start/expertise";
 @import "templates/start/hello";

app/styles/templates/project/thank-you.scss

@@ -0,0 +1,29 @@
+.thank-you-container {
+  margin: 3em;
+  text-align: center;
+
+  &__project-icon {
+    $file: "/assets/images/icons/fireworks-large";
+    $height: 100px;
+    $width: 100px;
+    @include background-image-retina($file, "png", $height, $width);
+    display: block;
+    height: $height;
+    margin: 1.4em auto;
+    width: $width;
+  }
+
+  h3 {
+    font-size: $header-font-size-large;
+    font-weight: 600;
+    margin: 10px 0;
+  }
+
+  p {
+    margin-bottom: 1.4em;
+  }
+
+  &__message {
+    color: $light-text;
+  }
+}

app/templates/components/thank-you-container.hbs

@@ -0,0 +1,10 @@
+<div class="thank-you-container__project-icon" data-test-selector="project icon"></div>
+<h3>Thank you!</h3>
+<div class="thank-you-container__message">
+  <p data-test-selector="thank you message">
+    From all the volunteers on the {{project.title}} team.
+  </p>
+  <p>
+    {{link-to "Back to project" "project" project.organization.slug project.slug}}
+  </p>
+</div>

app/templates/project/thank-you.hbs

@@ -0,0 +1,2 @@
+{{project-header project=model}}
+{{thank-you-container project=model}}

tests/acceptance/project-donate-test.js

@@ -128,7 +128,7 @@ test('Allows adding a card and donating (creating a subscription)', function(ass
     assert.ok(subscription, 'Subscription was created sucessfully.');
     assert.equal(subscription.userId, user.id, 'User was set to current user.');
     assert.equal(subscription.projectId, project.id, 'Project was set to current project.');
-    assert.equal(currentRouteName(), 'project.thankyou', 'User was redirected to the thank you route.');
+    assert.equal(currentRouteName(), 'project.thank-you', 'User was redirected to the thank you route.');
   });
 });
 

tests/acceptance/project-thank-you-test.js

@@ -0,0 +1,49 @@
+import { test } from 'qunit';
+import moduleForAcceptance from 'code-corps-ember/tests/helpers/module-for-acceptance';
+
+import { authenticateSession } from 'code-corps-ember/tests/helpers/ember-simple-auth';
+import createProjectWithSluggedRoute from 'code-corps-ember/tests/helpers/mirage/create-project-with-slugged-route';
+import projectThankYouPage from '../pages/project/thank-you';
+
+moduleForAcceptance('Acceptance | Project - thank-you');
+
+test('It requires authentication', function(assert) {
+  assert.expect(1);
+
+  let project = createProjectWithSluggedRoute();
+  let { organization } = project;
+
+  projectThankYouPage.visit({
+    organization: organization.slug,
+    project: project.slug
+  });
+
+  andThen(() => {
+    assert.equal(currentRouteName(), 'login');
+  });
+});
+
+test('It directs you to the project when done', function(assert) {
+  assert.expect(2);
+
+  let user = server.create('user');
+  authenticateSession(this.application, { 'user_id': user.id });
+
+  let project = createProjectWithSluggedRoute();
+  let { organization } = project;
+
+  projectThankYouPage.visit({
+    organization: organization.slug,
+    project: project.slug
+  });
+
+  andThen(() => {
+    assert.ok(projectThankYouPage.thankYouContainer.isVisible, 'The thank you container component renders.');
+
+    projectThankYouPage.thankYouContainer.clickLink();
+  });
+
+  andThen(() => {
+    assert.equal(currentRouteName(), 'project.index', 'Link leads to project page.');
+  });
+});

tests/integration/components/thank-you-container-test.js

@@ -0,0 +1,25 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+import PageObject from 'ember-cli-page-object';
+import thankYouContainerComponent from '../../pages/components/thank-you-container';
+
+let page = PageObject.create(thankYouContainerComponent);
+
+moduleForComponent('thank-you-container', 'Integration | Component | thank-you container', {
+  integration: true,
+  beforeEach() {
+    this.set('project', {
+      id: 42,
+      title: 'A Test Project'
+    });
+
+    page.setContext(this);
+    page.render(hbs`{{thank-you-container project=project}}`);
+  }
+});
+
+test('it renders the thank you text', function(assert) {
+  assert.expect(1);
+
+  assert.equal(page.thankYouText, `From all the volunteers on the ${this.get('project.title')} team.`);
+});

tests/pages/components/thankyou-container.js → tests/pages/components/thank-you-container.js

@@ -1,14 +1,16 @@
 import {
-  attribute,
+  clickable,
   text
 } from 'ember-cli-page-object';
 
 export default {
+  scope: '.thank-you-container',
+
   icon: {
-    scope: '[data-test-selector="project icon"]',
-    alt: attribute('alt'),
-    src: attribute('src')
+    scope: '[data-test-selector="project icon"]'
   },
 
+  clickLink: clickable('a'),
+
   thankYouText: text('[data-test-selector="thank you message"]')
 };

tests/pages/project/thank-you.js

@@ -0,0 +1,8 @@
+import { create, visitable } from 'ember-cli-page-object';
+import thankYouContainer from 'code-corps-ember/tests/pages/components/thank-you-container';
+
+export default create({
+  visit: visitable(':organization/:project/thank-you'),
+
+  thankYouContainer
+});