✅ Added EJS Codelab templates (#941)

henriette-einstein · web-flow · commit 2db332e4b83b · 2020-04-23T22:06:27.000+02:00
diff --git a/packages/core/spec/fixtures/templates/ejs-codelabs/document.ejs b/packages/core/spec/fixtures/templates/ejs-codelabs/document.ejs
@@ -0,0 +1,46 @@
+<html>
+  <head>
+    <meta
+      name="viewport"
+      content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes"
+    />
+    <meta name="theme-color" content="#4F7DC9" />
+    <meta charset="UTF-8" />
+    <title><%= node.getDocument().getTitle()%></title>
+    <link
+      rel="stylesheet"
+      href="//fonts.googleapis.com/css?family=Source+Code+Pro:400|Roboto:400,300,400italic,500,700|Roboto+Mono"
+    />
+    <link
+      rel="stylesheet"
+      href="//fonts.googleapis.com/icon?family=Material+Icons"
+    />
+    <link
+      rel="stylesheet"
+      href="https://storage.googleapis.com/codelab-elements/codelab-elements.css"
+    />
+    <style>
+      .success {
+        color: #1e8e3e;
+      }
+      .error {
+        color: red;
+      }
+    </style>
+  </head>
+  <body>
+    <google-codelab
+      codelab-gaid=""
+      id="<%= node.getDocument().hasAttribute('id') ? node.getDocument().getAttribute('id'):Math.floor(Math.random() * 1000000)%>"
+      environment="web"
+      feedback-link="<%=node.getDocument().getAttribute('feedback-link')%>"
+      title="<%=node.getDocument().getTitle() %>"
+    >
+      <%- node.getContent() %>
+    </google-codelab>
+    <script src="https://storage.googleapis.com/codelab-elements/native-shim.js"></script>
+    <script src="https://storage.googleapis.com/codelab-elements/custom-elements.min.js"></script>
+    <script src="https://storage.googleapis.com/codelab-elements/prettify.js"></script>
+    <script src="https://storage.googleapis.com/codelab-elements/codelab-elements.js"></script>
+  </body>
+</html>
diff --git a/packages/core/spec/fixtures/templates/ejs-codelabs/helpers.js b/packages/core/spec/fixtures/templates/ejs-codelabs/helpers.js
@@ -0,0 +1,5 @@
+module.exports.attributeIfSet = (attName, attValue) => {
+  if (attName && attValue !== undefined && attValue.trim().length > 0) {
+    return attName.trim() + '="' + attValue.trim() + '"'
+  }
+}
diff --git a/packages/core/spec/fixtures/templates/ejs-codelabs/preamble.ejs b/packages/core/spec/fixtures/templates/ejs-codelabs/preamble.ejs
@@ -0,0 +1,3 @@
+<google-codelab-step label="Overview">
+  <%- node.getContent() %>
+</google-codelab-step>
diff --git a/packages/core/spec/fixtures/templates/ejs-codelabs/section.ejs b/packages/core/spec/fixtures/templates/ejs-codelabs/section.ejs
@@ -0,0 +1,13 @@
+<% if (node.getLevel() === 1) { %>
+<google-codelab-step
+  label="<%= node.getTitle() %>"
+  <%- helpers.attributeIfSet('duration', node.getAttribute('duration')) %>
+>
+    <%- node.getContent() %>
+</google-codelab-step>
+<% } else { %>
+  <section>
+    <h<%= node.getLevel() %>><%- node.getTitle() %></h<%= node.getLevel() %>>
+   <%- node.getContent() %>
+  </section>
+<% } %>
diff --git a/packages/core/spec/node/asciidoctor.spec.js b/packages/core/spec/node/asciidoctor.spec.js
@@ -2529,6 +2529,31 @@ In other words, it’s about discovering writing zen.`
       const result = asciidoctor.convert('content', options)
       expect(result).to.contain('<p class="paragraph-ejs">content</p>')
     }).timeout(5000)
+    describe('Using EJS Codelab templates', () => {
+      it('should render a Codelab HTML instance', () => {
+        const options = { safe: 'safe', standalone: 'true', backend: 'html5', template_dir: 'spec/fixtures/templates/ejs-codelabs' }
+        const content = `
+= Codelab Test
+:id: my-id
+:feedback-link: http://my-feedback.org
+
+This is a preamble
+
+[duration=5]
+== Step 1
+`
+        const result = asciidoctor.convert(content, options)
+        expect(result).to.contain('<google-codelab')
+        expect(result).to.contain('title="Codelab Test"')
+        // Feedback and ID set
+        expect(result).to.contain('id="my-id"')
+        expect(result).to.contain('feedback-link="http://my-feedback.org"')
+        // Preamble becomes overview
+        expect(result).to.contain('label="Overview"')
+        expect(result).to.contain('label="Step 1"')
+        expect(result).to.contain('duration="5"')
+      }).timeout(5000)
+    })
     it('should use a Handlebars template', () => {
       const options = { safe: 'safe', backend: 'html5', template_dir: 'spec/fixtures/templates/handlebars' }
       const result = asciidoctor.convert('content', options)

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+<google-codelab-step label="Overview">`
	`2`	`+ <%- node.getContent() %>`
	`3`	`+</google-codelab-step>`