antwort 0.0.12 → 1.0.0

data/spec/email/data_spec.rb

@@ -0,0 +1,40 @@
+require 'spec_helper'
+
+describe Antwort::EmailData do
+  let(:data) { Antwort::EmailData.new(name: '1-demo') }
+
+  describe 'on Initialization' do
+    it 'has a name attribute' do
+      expect(data.name).to eq('1-demo')
+    end
+
+    it 'has a data attribute' do
+      result = {
+        foo: [{ title: 'foo' }, { title: 'bar' }]
+      }
+      expect(data.data).to eq(result)
+    end
+
+    describe 'has a path attribute, which' do
+      it 'has /data appended' do
+        expect(data.path).to eq(fixtures_root + '/data')
+      end
+
+      it 'defaults to pwd/data' do
+        expect(Antwort::EmailData.new(name: 'foo').path).to eq("#{Dir.pwd}/data")
+      end
+    end
+
+    describe 'has a file, which' do
+      it 'can be set as param' do
+        a = Antwort::EmailData.new(file: '/usr/foo/bar.yml')
+        expect(a.file).to eq('/usr/foo/bar.yml')
+      end
+
+      it 'defaults to pwd/data' do
+        a = Antwort::EmailData.new(name: '1-demo')
+        expect(a.file).to eq("#{Dir.pwd}/data/1-demo.yml")
+      end
+    end
+  end
+end

data/spec/email/template_spec.rb

@@ -0,0 +1,116 @@
+require 'spec_helper'
+
+describe Antwort::EmailTemplate do
+  let(:demo)          { Antwort::EmailTemplate.new('1-demo') }
+  let(:no_layout)     { Antwort::EmailTemplate.new('2-no-layout') }
+  let(:no_title)      { Antwort::EmailTemplate.new('3-no-title') }
+  let(:custom_layout) { Antwort::EmailTemplate.new('4-custom-layout') }
+  let(:no_images)     { Antwort::EmailTemplate.new('no-images') }
+
+  describe 'Initialization' do
+    it 'has a the name' do
+      expect(demo.name).to eq('1-demo')
+    end
+
+    it 'has a the path' do
+      expect(demo.path).to eq('emails/1-demo')
+    end
+
+    it 'has a the index file' do
+      expect(demo.file).to eq('emails/1-demo/index.html.erb')
+    end
+  end
+
+  describe 'body attribute' do
+    context 'with YAML front matter' do
+      it 'ignores front matter' do
+        four = '<p>Email four has a custom layout.</p>'
+        expect(custom_layout.body).to eq(four)
+      end
+    end
+    context 'without YAML front matter' do
+      it 'receives file as body' do
+        three = '<h1>Hello Three</h1>'
+        expect(no_title.body).to eq(three)
+      end
+    end
+  end
+
+  describe 'title attribute' do
+    context 'with a title' do
+      it 'returns the title' do
+        expect(demo.title).to eq('Email One')
+      end
+    end
+
+    context 'without a title' do
+      it "defaults to 'Untitled'" do
+        expect(no_title.title).to eq('Untitled')
+      end
+    end
+  end
+
+  describe 'data attribute' do
+    context 'with a YAML file' do
+      it 'sets to YAML data' do
+        expect(demo.data[:foo].length).to eq(2)
+        expect(demo.data[:foo].first).to eq(title: 'foo')
+        expect(demo.data[:foo].last).to eq(title: 'bar')
+      end
+    end
+
+    context 'without a YAML file' do
+      it 'defaults to empty hash' do
+        expect(no_title.data).to eq({})
+      end
+    end
+  end
+
+  describe "layout" do
+    it "defaults to :'emails/shared/layout'" do
+      expect(demo.layout).to eq(:'emails/shared/layout')
+    end
+
+    it 'can be a custom layout' do
+      expect(custom_layout.layout).to eq(:'emails/4-custom-layout/layout')
+    end
+
+    it 'can be false (i.e. has no layout)' do
+      expect(no_layout.layout).to be false
+    end
+  end
+
+  it 'has a url helper' do
+    expect(demo.url).to eq('/template/1-demo')
+  end
+
+  describe 'API' do
+    it '`#has_images?`' do
+      expect(demo.has_images?).to be true
+      expect(Antwort::EmailTemplate.new('shared').has_images?).to be true
+      expect(no_images.has_images?).to be false
+    end
+
+    it "`#images` lists all images in template's assets" do
+      expect(demo.images).to eq ['placeholder.png']
+      expect(Antwort::EmailTemplate.new('shared').images).to eq ['placeholder-grey.png', 'placeholder-white.png']
+      expect(Antwort::EmailTemplate.new('no-images').images).to eq []
+    end
+
+    it '`#image_path` returns path for an image' do
+      expect(demo.image_path('placeholder.png')).to eq 'assets/images/1-demo/placeholder.png'
+      expect(demo.image_path('does-not-exist.png')).to be nil
+    end
+
+    it '`#partials` lists all partials of the template' do
+      expect(demo.partials).to eq ['_bar.erb', '_foo.erb']
+      expect(no_layout.partials).to eq []
+    end
+
+    it '`#last_build`' do
+      demo2 = Antwort::EmailTemplate.new('demo')
+      expect(demo.last_build).to eq('1-demo-123')
+      expect(demo2.last_build).to eq('demo-20160102')
+    end
+  end
+end

data/spec/fixtures/assets/css/demo/include.scss

@@ -0,0 +1,3 @@
+// demo/include.scss
+
+@import "../shared/include";

data/spec/fixtures/assets/css/demo/inline.scss

@@ -0,0 +1,33 @@
+// demo/inline.scss
+
+@import "../shared/inline";
+
+// Use email specific stylesheets for custom code that isn't used elsewhere.
+// This helps for overriding default styles.
+
+code {
+  font-size: 14px;
+  line-height: 16px;
+  font-family: 'Courier New', Courier, monospace;
+  background-color: #eeeeee;
+  color: #333333;
+
+  display: inline-block;
+  padding: 0 4px;
+  vertical-align: middle;
+}
+
+.table {
+  td {
+    border: 1px solid #dddddd;
+    border-left-width: 0;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    &:first-child {
+      border-left-width: 1px;
+    }
+  }
+}
+
+// Note: These layout styles may not work across all email clients.
+// They are here for documentation purposes.

data/spec/fixtures/assets/css/no-images/include.scss

@@ -0,0 +1 @@
+// no-images/include.scss

data/spec/fixtures/assets/css/no-images/inline.scss

@@ -0,0 +1,2 @@
+// no-images/inline.scss
+

data/spec/fixtures/assets/css/shared/_base.scss

@@ -0,0 +1,64 @@
+// shared/based.scss
+
+@import "_vars";
+@import "_mixins";
+
+body {
+  margin: 0;
+  padding: 0;
+}
+
+.container {
+  width: 600px;
+  max-width: 600px;
+}
+
+.container-padding {
+  padding-left: $gutter;
+  padding-right: $gutter;
+}
+
+.content {
+  background-color: #ffffff;
+}
+
+.title {
+  font-weight: bold;
+  font-size:   24px;
+  line-height: 28px;
+  font-family: $fontFamily;
+}
+
+.body-text {
+  font-size:   16px;
+  line-height: 20px;
+  font-family: $fontFamily;
+}
+
+
+//-- Buttons
+
+.button {
+  td {
+    @include border-radius(3px);
+    background-color: $buttonBgColor;
+  }
+
+  a {
+    @include border-radius(3px);
+    @include font(bold, 14px, 20px);
+    text-decoration: none;
+    display: inline-block;
+    padding: 12px 18px;
+    border: 1px solid darken($buttonBgColor, 5%);
+    background-color: $buttonBgColor;
+    color: $buttonColor;
+  }
+
+  &.green {
+    td, a {
+      background-color: $greenBtnBgColor;
+      border-color: darken($greenBtnBgColor, 5%);
+    }
+  }
+}

data/spec/fixtures/assets/css/shared/_mixins.scss

@@ -0,0 +1,25 @@
+//
+// Mixins
+// -------------------
+// shared properties that we don't want to repeatedly define
+
+@mixin padding($top: $gutter, $right: $gutter, $bottom: $gutter, $left: $gutter) {
+  padding-top:    $top;
+  padding-right:  $right;
+  padding-bottom: $bottom;
+  padding-left:   $left;
+}
+
+@mixin border-radius($radius: 4px){
+  -webkit-border-radius: $radius;
+  -moz-border-radius: $radius;
+  border-radius: $radius;
+}
+
+@mixin font($weight: normal, $size: 14px, $line-height: 20px, $family: $fontFamily) {
+  font-weight: $weight;
+  font-size:   $size;
+  line-height: $line-height;
+  font-family: $family;
+}
+

data/spec/fixtures/assets/css/shared/_reset.scss

@@ -0,0 +1,59 @@
+//
+// Common Email Resets
+// -------------------
+// This file contains common email resets to adjust for quirks
+// across email clients. We've separated these definitions
+// because you should never need to change this.
+
+
+// General resets
+body {
+  margin:0;
+  padding:0;
+  -ms-text-size-adjust:100%;
+  -webkit-text-size-adjust:100%;
+}
+
+table {
+  border-spacing: 0;
+}
+
+table td {
+  border-collapse:collapse;
+}
+
+// Normalize Outlook.com styles
+.ExternalClass{
+width:100%;
+}
+
+.ExternalClass,
+.ExternalClass p,
+.ExternalClass span,
+.ExternalClass font,
+.ExternalClass td,
+.ExternalClass div{
+  line-height: 100%;
+}
+
+// Outermost container in Outlook.com
+.ReadMsgBody {
+  width: 100%;
+  background-color: #ebebeb;
+}
+
+// Remove any extra Outlook Spacing
+table{
+  mso-table-lspace: 0pt;
+  mso-table-rspace: 0pt;
+}
+
+// Weird image resizing in Outlook
+img{
+  -ms-interpolation-mode:bicubic;
+}
+
+// Sometimes Yahoo turns text into ads/search links
+.yshortcuts a {
+  border-bottom: none !important;
+}

data/spec/fixtures/assets/css/shared/_vars.scss

@@ -0,0 +1,12 @@
+
+// Variables
+// -------------------
+
+$fontFamily:    Helvetica, Arial, sans-serif;
+
+$gutter:        20px;
+
+$buttonBgColor:   #2095F2;
+$buttonColor:     #ffffff;
+
+$greenBtnBgColor: #8AC249;

data/spec/fixtures/assets/css/shared/include.scss

@@ -0,0 +1,23 @@
+
+// Included Styles
+// ------------------------
+// These styles will be included in the <head> of your email.
+// Remember to use !important to override inlined styles.
+
+@import "_vars";
+@import "_mixins";
+@import "_reset";
+
+@media screen and (max-width: 600px) {
+  .container {
+    width: 100% !important;
+    max-width: 100% !important;
+  }
+}
+
+@media screen and (max-width: 400px) {
+  .container-padding {
+    padding-left: $gutter/2;
+    padding-right: $gutter/2;
+  }
+}

data/spec/fixtures/assets/css/shared/inline.scss

@@ -0,0 +1,9 @@
+@import "_vars";
+@import "_mixins";
+@import "_base";
+
+// Yahoo <table align="center"> fix
+table[align="center"] {
+  margin-left: auto;
+  margin-right: auto;
+}

data/spec/fixtures/build/demo-20160101/demo.html

@@ -0,0 +1,177 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<html lang="en">
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- So that mobile will display zoomed in -->
+  <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- enable media queries for windows phone 8 -->
+   <meta name="format-detection" content="telephone=no"> <!-- disable auto telephone linking in iOS -->
+  <title>Fixture Demo</title>
+<style type="text/css">
+body {
+  margin: 0;
+  padding: 0;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+}
+
+table {
+  border-spacing: 0;
+}
+
+table td {
+  border-collapse: collapse;
+}
+
+.ExternalClass {
+  width: 100%;
+}
+
+.ExternalClass,
+.ExternalClass p,
+.ExternalClass span,
+.ExternalClass font,
+.ExternalClass td,
+.ExternalClass div {
+  line-height: 100%;
+}
+
+.ReadMsgBody {
+  width: 100%;
+  background-color: #ebebeb;
+}
+
+table {
+  mso-table-lspace: 0pt;
+  mso-table-rspace: 0pt;
+}
+
+img {
+  -ms-interpolation-mode: bicubic;
+}
+
+.yshortcuts a {
+  border-bottom: none !important;
+}
+
+@media screen and (max-width: 600px) {
+  .container {
+    width: 100% !important;
+    max-width: 100% !important;
+  }
+}
+@media screen and (max-width: 400px) {
+  .container-padding {
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+}
+</style>
+
+
+</head>
+<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="margin:0;padding:0">
+
+<!-- 100% wrapper (grey background) -->
+<table border="0" width="100%" height="100%" cellpadding="0" cellspacing="0">
+  <tr>
+    <td align="center" valign="top">
+
+      <br>
+
+      <!-- 600px container (white background) -->
+      <table border="0" width="600" cellpadding="0" cellspacing="0" class="container" style="width:600px;max-width:600px">
+        <tr>
+          <td class="content container-padding" style="padding-left:20px;padding-right:20px;background-color:#ffffff">
+            <br>
+
+<div class="title" style="font-weight:bold;font-size:24px;line-height:28px;font-family:Helvetica, Arial, sans-serif">Using Antwort Generator</div>
+<br>
+
+<div class="body-text" style="font-size:16px;line-height:20px;font-family:Helvetica, Arial, sans-serif">
+  This is a demo email to get you started. The ID is 'demo', based on the file name.
+  <br><br>
+
+  Make sure your body text is always wrapped with a <code style="font-size:14px;line-height:16px;font-family:'Courier New', Courier, monospace;background-color:#eeeeee;color:#333333;display:inline-block;padding:0 4px;vertical-align:middle">.body-text</code> class, if not within a <code style="font-size:14px;line-height:16px;font-family:'Courier New', Courier, monospace;background-color:#eeeeee;color:#333333;display:inline-block;padding:0 4px;vertical-align:middle">td</code> then as least within a <code style="font-size:14px;line-height:16px;font-family:'Courier New', Courier, monospace;background-color:#eeeeee;color:#333333;display:inline-block;padding:0 4px;vertical-align:middle">div</code>.
+  <br><br>
+
+  <strong>Loading YAML Data</strong><br>
+  If you have a YAML file with the same name as your email-template name, for example a <code style="font-size:14px;line-height:16px;font-family:'Courier New', Courier, monospace;background-color:#eeeeee;color:#333333;display:inline-block;padding:0 4px;vertical-align:middle">demo.yml</code> for the <code style="font-size:14px;line-height:16px;font-family:'Courier New', Courier, monospace;background-color:#eeeeee;color:#333333;display:inline-block;padding:0 4px;vertical-align:middle">demo</code> email, you can load data like this:
+  <br><br>
+
+
+    • Peter<br>
+
+    • Paul<br>
+
+    • Mary<br>
+
+  <br><br>
+
+  <strong>Image Tag Helper</strong><br>
+
+  Adding images in email requires a lot of extra markup. To dry up the code, we have an <code style="font-size:14px;line-height:16px;font-family:'Courier New', Courier, monospace;background-color:#eeeeee;color:#333333;display:inline-block;padding:0 4px;vertical-align:middle">image_tag</code> helper, which you can use like this:<br>
+  <img src="/assets/shared/placeholder.png" border="0" alt="Placeholder" width="50" height="50" class="foo" hspace="0" vspace="0">
+  <br><br>
+
+
+  <strong>Button Helper</strong><br>
+  This is how you use the <code style="font-size:14px;line-height:16px;font-family:'Courier New', Courier, monospace;background-color:#eeeeee;color:#333333;display:inline-block;padding:0 4px;vertical-align:middle">button</code> helper:
+  <br><br>
+  <table border="0" cellspacing="0" cellpadding="0" class="button">
+  <tr>
+    <td align="center" style="-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;background-color:#2095F2"><a href="/" style="-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;font-weight:bold;font-size:14px;line-height:20px;font-family:Helvetica, Arial, sans-serif;text-decoration:none;display:inline-block;padding:12px 18px;border:1px solid #0e89eb;background-color:#2095F2;color:#ffffff"><!--[if mso]>&nbsp;<![endif]-->Default Button →<!--[if mso]>&nbsp;<![endif]--></a></td>
+  </tr>
+</table>
+<br>
+  <table border="0" cellspacing="0" cellpadding="0" class="button green">
+  <tr>
+    <td align="center" style="-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;background-color:#8AC249;border-color:#7db53d"><a href="/" style="-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;font-weight:bold;font-size:14px;line-height:20px;font-family:Helvetica, Arial, sans-serif;text-decoration:none;display:inline-block;padding:12px 18px;border:1px solid #0e89eb;background-color:#8AC249;color:#ffffff;border-color:#7db53d"><!--[if mso]>&nbsp;<![endif]-->A green button →<!--[if mso]>&nbsp;<![endif]--></a></td>
+  </tr>
+</table>
+
+  <br><br>
+
+  To create additional button styles, make sure you add the appropriate CSS class definitions. See <code style="font-size:14px;line-height:16px;font-family:'Courier New', Courier, monospace;background-color:#eeeeee;color:#333333;display:inline-block;padding:0 4px;vertical-align:middle">_base.scss</code> for an example.
+  <br><br>
+</div>
+
+
+<div class="body-text" style="font-size:16px;line-height:20px;font-family:Helvetica, Arial, sans-serif">
+  <strong>Using Partials</strong>
+  <br><br>
+
+  You can use the <code style="font-size:14px;line-height:16px;font-family:'Courier New', Courier, monospace;background-color:#eeeeee;color:#333333;display:inline-block;padding:0 4px;vertical-align:middle">partial</code> helper to include external files. Note: partial filenames <em>must</em> begin with an underscore '_'. Use the optional <code style="font-size:14px;line-height:16px;font-family:'Courier New', Courier, monospace;background-color:#eeeeee;color:#333333;display:inline-block;padding:0 4px;vertical-align:middle">locals</code> attribute to pass data to the partial.
+</div>
+<br>
+
+<table border="0" cellspacing="0" cellpadding="0" class="table">
+  <tr>
+
+    <td width="200" align="center" class="body-text" style="font-size:16px;line-height:20px;font-family:Helvetica, Arial, sans-serif;border:1px solid #dddddd;border-left-width:1px;padding-top:10px;padding-bottom:10px">
+      <em>Hello Peter</em><br>
+    </td>
+
+    <td width="200" align="center" class="body-text" style="font-size:16px;line-height:20px;font-family:Helvetica, Arial, sans-serif;border:1px solid #dddddd;border-left-width:0;padding-top:10px;padding-bottom:10px">
+      <em>Hello Paul</em><br>
+    </td>
+
+    <td width="200" align="center" class="body-text" style="font-size:16px;line-height:20px;font-family:Helvetica, Arial, sans-serif;border:1px solid #dddddd;border-left-width:0;padding-top:10px;padding-bottom:10px">
+      <em>Hello Mary</em><br>
+    </td>
+
+  </tr>
+</table>
+<br><br>
+
+          </td>
+        </tr>
+      </table>
+      <!--/600px container -->
+
+    </td>
+  </tr>
+</table>
+<!--/100% wrapper-->
+
+</body>
+</html>