add test pages for all lesson types

Author: terichadbourne

src/main.js

@@ -45,6 +45,12 @@ import MutableFileSystem10 from './tutorials/Mutable-File-System/10.vue'
 import MutableFileSystem11 from './tutorials/Mutable-File-System/11.vue'
 import Tests01 from './tutorials/Tests/01.vue'
 import Tests02 from './tutorials/Tests/02.vue'
+import Tests03 from './tutorials/Tests/03.vue'
+import Tests04 from './tutorials/Tests/04.vue'
+import Tests05 from './tutorials/Tests/05.vue'
+import Tests06 from './tutorials/Tests/06.vue'
+import Tests07 from './tutorials/Tests/07.vue'
+import Tests08 from './tutorials/Tests/08.vue'
 
 Vue
   .use(VueRouter)
@@ -100,6 +106,12 @@ const routes = [
   { path: '/tests', component: Landing, props: { tutorialId: 'tests' } },
   { path: '/tests/01', component: Tests01 },
   { path: '/tests/02', component: Tests02 },
+  { path: '/tests/03', component: Tests03 },
+  { path: '/tests/04', component: Tests04 },
+  { path: '/tests/05', component: Tests05 },
+  { path: '/tests/06', component: Tests06 },
+  { path: '/tests/07', component: Tests07 },
+  { path: '/tests/08', component: Tests08 },
   { path: '/tests/resources', component: ResourcesLesson, props: { tutorialId: 'tests' } },
   // 404
   { path: '*', name: '404' }

src/static/tutorials.json

@@ -146,14 +146,33 @@
 				"description": "We'll need to delete this before we merge!",
 				"lessons": [
 					{ "to": "/tests/01", "name": "Sample multiple choice lesson" },
-					{ "to": "/tests/02", "name": "This is another lesson" }
+					{ "to": "/tests/02", "name": "Another multiple choice lesson" },
+					{ "to": "/tests/03", "name": "Sample text-only lesson" },
+					{ "to": "/tests/04", "name": "Another text-only lesson" },
+					{ "to": "/tests/05", "name": "Sample excercise lesson with useful concepts box" },
+					{ "to": "/tests/06", "name": "Another excercise lesson without concepts" },
+					{ "to": "/tests/07", "name": "Sample file upload lesson" },
+					{ "to": "/tests/08", "name": "Another file upload lesson" }
 				],
 				"resources": [
 					{
-						"title": "JS-IPFS Files API",
-						"link": "https://github.com/ipfs/interface-js-ipfs-core/blob/master/SPEC/FILES.md",
+						"title": "Lipsum",
+						"link": "https://www.lipsum.com/",
 						"type": "docs",
-						"description": "Notice that these docs contain two sections, one for top-level methods relevant to files and one for the Mutable File System (MFS) you learned about in this tutorial."
+						"description": "This is a pretend resource."
+					},
+					{
+						"title": "Lorem Ipsum",
+						"link": "https://loremipsum.io/",
+						"type": "demo",
+						"description": "What a great fake resource!"
+
+					},
+					{
+						"title": "This Fake ProtoSchool Tutorial",
+						"link": "http://localhost:3000/#/tests",
+						"type": "tutorial",
+						"description": "The best fake resource ever."
 					}
 				]
 			}

src/tutorials/Tests/03.md

@@ -0,0 +1,3 @@
+## Oh hey there!
+
+This is a sample **text-only lesson**. Great reading, huh?

src/tutorials/Tests/03.vue

@@ -0,0 +1,19 @@
+<template>
+  <Lesson
+    :text="text"
+    lessonTitle="Sample text-only lesson" />
+</template>
+
+<script>
+import Lesson from '../../components/Lesson'
+import text from './03.md'
+
+export default {
+  components: {
+    Lesson
+  },
+  data: () => {
+    return { text }
+  }
+}
+</script>

src/tutorials/Tests/04.md

@@ -0,0 +1 @@
+This is another sample **text-only lesson**. Hope you're enjoying this.

src/tutorials/Tests/04.vue

@@ -0,0 +1,19 @@
+<template>
+  <Lesson
+    :text="text"
+    lessonTitle="Another text-only lesson" />
+</template>
+
+<script>
+import Lesson from '../../components/Lesson'
+import text from './04.md'
+
+export default {
+  components: {
+    Lesson
+  },
+  data: () => {
+    return { text }
+  }
+}
+</script>

src/tutorials/Tests/05-concepts.md

@@ -0,0 +1 @@
+**CID** - Content Identifier. An unique address for a block of data in IPFS that is derived from its content.

src/tutorials/Tests/05-exercise.md

@@ -0,0 +1 @@
+Use `ipfs.dag.put` to create a node for the data `{ test: 1 }`. Return the CID of your new node.

src/tutorials/Tests/05.md

@@ -0,0 +1,22 @@
+**This is a sample standard excercise lesson with a useful concepts box.**
+
+In this tutorial we'll be exploring the IPFS DAG API, which lets us store data
+objects in IPFS. (You can store more exciting things in IPFS, like your favorite
+cat GIF, but you'd need to use a different API for that.)
+
+You can create a new node by passing a data object into the `ipfs.dag.put` method,
+which returns a Content Identifier (CID) for the newly created node.
+
+```javascript
+ipfs.dag.put({ hello: 'world' })
+```
+
+A CID is an address for a block of data in IPFS that is derived from its content. Every
+time someone puts the same `{ hello: 'world' }` data into IPFS, they'll get back an
+identical CID to the one you got. If they put in `{ hell0: 'w0rld' }` instead, the
+CID will be different.
+
+_Note: Throughout our lessons we'll be using a code editor like the one below.
+Enter your solution code within the `run` function that's pre-populated for you,
+being sure to return the requested value within that function. (You won't need to
+update the `return run` line at the end; that's just there to make the code editor work.)_

src/tutorials/Tests/05.vue

@@ -0,0 +1,58 @@
+<template>
+  <Lesson
+    :text="text"
+    :validate="validate"
+    :exercise="exercise"
+    :concepts="concepts"
+    :solution="solution"
+    lessonTitle="Sample excercise lesson with useful concepts box">
+  </Lesson>
+</template>
+
+<script>
+import Lesson from '../../components/Lesson'
+import text from './05.md'
+import concepts from './05-concepts.md'
+import exercise from './05-exercise.md'
+import CID from 'cids'
+
+const validate = async (result, ipfs) => {
+  if (!result) {
+    return { fail: 'You forgot to return a result :)' }
+  }
+
+  if (!CID.isCID(result)) {
+    return { fail: 'Did not return a valid CID instance.' }
+  }
+
+  const hash = 'bafyreicaoyussrycqolu4k2iaxleu2uakjlq57tuxq3djxn4wnyfp4yk3y'
+  if (result.toBaseEncodedString() === hash) {
+    return { success: 'Everything works!' }
+  } else {
+    const obj = await ipfs.dag.get(result)
+    const expected = JSON.stringify({ test: 1 })
+    const got = JSON.stringify(obj.value)
+
+    return { fail: `Was expecting \`${expected}\` but got \`${got}\`.` }
+  }
+}
+
+const solution = `/* globals ipfs */
+
+const run = async () => {
+  let cid = await ipfs.dag.put({ test: 1 })
+  return cid
+}
+
+return run
+`
+
+export default {
+  components: {
+    Lesson
+  },
+  data: () => {
+    return { text, validate, exercise, concepts, solution }
+  }
+}
+</script>

src/tutorials/Tests/06-exercise.md

@@ -0,0 +1 @@
+Use `ipfs.dag.put` to create a node for the data `{ test: 1 }`. Return the CID of your new node.

src/tutorials/Tests/06.md

@@ -0,0 +1,22 @@
+**This is a sample standard excercise lesson with a useful concepts box.**
+
+In this tutorial we'll be exploring the IPFS DAG API, which lets us store data
+objects in IPFS. (You can store more exciting things in IPFS, like your favorite
+cat GIF, but you'd need to use a different API for that.)
+
+You can create a new node by passing a data object into the `ipfs.dag.put` method,
+which returns a Content Identifier (CID) for the newly created node.
+
+```javascript
+ipfs.dag.put({ hello: 'world' })
+```
+
+A CID is an address for a block of data in IPFS that is derived from its content. Every
+time someone puts the same `{ hello: 'world' }` data into IPFS, they'll get back an
+identical CID to the one you got. If they put in `{ hell0: 'w0rld' }` instead, the
+CID will be different.
+
+_Note: Throughout our lessons we'll be using a code editor like the one below.
+Enter your solution code within the `run` function that's pre-populated for you,
+being sure to return the requested value within that function. (You won't need to
+update the `return run` line at the end; that's just there to make the code editor work.)_

src/tutorials/Tests/06.vue

@@ -0,0 +1,56 @@
+<template>
+  <Lesson
+    :text="text"
+    :validate="validate"
+    :exercise="exercise"
+    :solution="solution"
+    lessonTitle="Another excercise lesson without concepts">
+  </Lesson>
+</template>
+
+<script>
+import Lesson from '../../components/Lesson'
+import text from './06.md'
+import exercise from './05-exercise.md'
+import CID from 'cids'
+
+const validate = async (result, ipfs) => {
+  if (!result) {
+    return { fail: 'You forgot to return a result :)' }
+  }
+
+  if (!CID.isCID(result)) {
+    return { fail: 'Did not return a valid CID instance.' }
+  }
+
+  const hash = 'bafyreicaoyussrycqolu4k2iaxleu2uakjlq57tuxq3djxn4wnyfp4yk3y'
+  if (result.toBaseEncodedString() === hash) {
+    return { success: 'Everything works!' }
+  } else {
+    const obj = await ipfs.dag.get(result)
+    const expected = JSON.stringify({ test: 1 })
+    const got = JSON.stringify(obj.value)
+
+    return { fail: `Was expecting \`${expected}\` but got \`${got}\`.` }
+  }
+}
+
+const solution = `/* globals ipfs */
+
+const run = async () => {
+  let cid = await ipfs.dag.put({ test: 1 })
+  return cid
+}
+
+return run
+`
+
+export default {
+  components: {
+    Lesson
+  },
+  data: () => {
+    return { text, validate, exercise, solution }
+  }
+}
+</script>

src/tutorials/Tests/07-exercise.md

@@ -0,0 +1 @@
+First, upload one or more files by dragging and dropping below or clicking to make a selection from your file explorer.  Next, in the code editor, remove the comment markers (`//`) that precede `return files` within the `run` function.

src/tutorials/Tests/07.md

@@ -0,0 +1,7 @@
+**This is a sample file lesson.**
+
+As a matter of security, web browsers don't let us directly change files that live in your computer's file system. Therefore you'll need to upload one or more files to the browser that you can use throughout this tutorial.
+
+Within each exercise, you'll see that you can upload files from your computer either by dragging and dropping or selecting them from your file explorer. If you look closely at the `run` function in the code editor, you'll notice that it now takes an argument `files`. When you upload files from your computer, we'll make sure they're passed into the function as the `files` array. As long as you don't refresh your browser, these files will remain accessible for the next lesson in the tutorial, but you'll also have the option to upload different files to work with for each lesson.
+
+To practice, let's upload one or more files from your computer and take a look at what's been received by the browser as the `files` array.

src/tutorials/Tests/07.vue

@@ -0,0 +1,58 @@
+<template>
+  <FileLesson
+    :text="text"
+    :code="code"
+    :validate="validate"
+    :modules="modules"
+    :exercise="exercise"
+    :solution="solution"
+    lessonTitle="Sample file upload lesson">
+  </FileLesson>
+</template>
+
+<script>
+import FileLesson from '../../components/FileLesson.vue'
+import text from './07.md'
+import exercise from './07-exercise.md'
+import { logFiles } from '../../utils/files'
+
+const validate = async (result, ipfs) => {
+  if (!result || typeof result.length === 'undefined') {
+    return { fail: 'Looks like you forgot to return a result. Did you forget to remove the `//` before `return files`?' }
+  } else if (typeof result.length === 'number') {
+    const fileCount = result.length > 1 ? `${result.length} files` : '1 file'
+    return {
+      success: `You successfully uploaded ${fileCount}!`,
+      logDesc: "Check out the data below to see the data now accessible in the `files` array. Note that these files are only in the browser right now. In the next lesson we'll see how to add them to IPFS.",
+      log: logFiles(result)
+    }
+  } else {
+    return { fail: 'Something is wrong. Reset the code and see the instructions.' }
+  }
+}
+
+const code = `const run = async (files) => {
+  /* remove the '//' on the line below to complete this challenge */
+  // return files
+}
+return run
+`
+
+const solution = `const run = async (files) => {
+  return files
+}
+
+return run
+`
+
+const modules = { cids: require('cids') }
+
+export default {
+  components: {
+    FileLesson
+  },
+  data: () => {
+    return { text, validate, code, modules, exercise, solution }
+  }
+}
+</script>

src/tutorials/Tests/08-exercise.md

@@ -0,0 +1 @@
+First, upload one or more files by dragging and dropping below or clicking to make a selection from your file explorer.  Next, in the code editor, remove the comment markers (`//`) that precede `return files` within the `run` function.

src/tutorials/Tests/08.md

@@ -0,0 +1,7 @@
+**This is a sample file lesson.**
+
+As a matter of security, web browsers don't let us directly change files that live in your computer's file system. Therefore you'll need to upload one or more files to the browser that you can use throughout this tutorial.
+
+Within each exercise, you'll see that you can upload files from your computer either by dragging and dropping or selecting them from your file explorer. If you look closely at the `run` function in the code editor, you'll notice that it now takes an argument `files`. When you upload files from your computer, we'll make sure they're passed into the function as the `files` array. As long as you don't refresh your browser, these files will remain accessible for the next lesson in the tutorial, but you'll also have the option to upload different files to work with for each lesson.
+
+To practice, let's upload one or more files from your computer and take a look at what's been received by the browser as the `files` array.