Fixes Issue #51

src/components/Main.vue

@@ -143,22 +143,43 @@ export default {
                 }
             ];
 
+            let firstFlag = issues[0].flags;
+
+            //if flag at beginning of text, remove dummy start flag 
+            if(firstFlag.length > 0 && firstFlag[0][0] === 0){
+                flags = [];
+            }
+
             issues.map(issue => 
                 flags = flags.concat(this.mapFlag(issue)));
             return flags;
         },
 
-        getBlurbs(text, flags) {
-
+         getBlurbs(text, flags) {
             //splits and demarcates text into blurbs
-            //using the start and end indexes of flags
-
+            //using the start and end indices of flags
             let textArray = text.split("");
+            // Create an empty element at the beginning of the text so, 
+            // textArray[0] is an empty element instead of the beginning of the text.
+            textArray.unshift(""); 
+            // Modifies the text into flags with their order, e.g. ||#number||flag
             for (const [i, flag] of flags.entries()) {
-                textArray[flag.end] = "[!]||||" + textArray[flag.end];
+                // Checks if the flag is in the middle, so it includes 
+                // the flagged word's punctuation
+                textArray[flag.end] = textArray[flag.end]  === ' ' || textArray[flag.end] === '\n'
+                ? "[!]||||" + textArray[flag.end]
+                : textArray[flag.end] + "[!]||||";
+                // Adds the order number of the flag. 
                 textArray[flag.start] = `[!]||${i}||` + textArray[flag.start];
             }
-            return textArray.join("").split("[!]");
+            // Splits the text into an array of flags
+            textArray = textArray.join("").split("[!]"); 
+            textArray.shift(); 
+            // Removes the last element if it is empty or undefined
+            if (textArray[-1] === '||||undefined' || textArray[-1] === '||||'){
+                textArray.pop(); 
+            }
+            return textArray; 
         },
 
         getMessages(text, flags, messages){
@@ -190,7 +211,6 @@ export default {
                     const flags = this.getFlags(issues);
                     const text = payload.text;
                     const messages = this.getBlurbs(text, flags);
-
                     this.messages = this.getMessages(text, flags, messages);
                     this.summaries = this.getSummaries(issues);
                 });

src/main.js

@@ -3,7 +3,7 @@ import App from './App.vue'
 import "bulma/css/bulma.css";
 import { Server } from 'miragejs'
 
-const RESPONSE = {
+const detectFlag = {
     'issues': [{
         'flags': [],
         'name': 'Unnecessarily Gendered Words',
@@ -44,14 +44,62 @@ const RESPONSE = {
     'text': 'Some willing text'
 };
 
+const detectStartAndEnd = {
+    'issues': [{
+        'flags': [
+            [0, 5, 'Beginning', 'Flags should work at the beginning of the text',
+                'See if this flag works', -1.0
+            ],
+            [18, 22, 'Middle', 'Flags should work in the middle of the text',
+                'See if this flag works', -1.0
+            ],
+            [50, 53, 'End', 'Flags should work at the end of the text',
+                'See if this flag works', -1.0
+            ]
+        ],
+        'name': 'Flag position test',
+        'summary': 'Flags should work correctly regardles of where they appear in the text.'
+    }],
+    'text': 'Start. There is a flag in the middle of the text. End.'
+};
+
+
+
+const detectPunctuation = {
+    'issues': [{
+        'flags': [
+            [7, 14, 'Beginning', 'Flags should work at the beginning of the text',
+                'See if this flag works', -1.0
+            ],
+            [21, 28, 'Middle', 'Flags should work in the middle of the text',
+                'See if this flag works', -1.0
+            ],
+            [37, 44, 'End', 'Flags should work at the end of the text',
+                'See if this flag works', -1.0
+            ]
+        ],
+        'name': 'Flag position test',
+        'summary': 'Flags should work correctly regardles of where they appear in the text.'
+    }],
+    'text': 'She is willing. I am willing. She is willing.'
+};
+
+
 if (process.env.NODE_ENV === "test") {
     new Server({
 
         routes() {
             this.timing = 0;
             this.urlPrefix = 'https://api.biascorrect.org';
-            this.post("/check", () => {
-                return RESPONSE;
+            this.post("/check", (schema, request) => {
+                let text = JSON.parse(request.requestBody).text;
+                if (text.includes('willing')) {
+                    return detectFlag;
+                } else if (text.includes('She')) {
+                    return detectPunctuation;
+                } else {
+                    return detectStartAndEnd;
+                }
             })
         }
     })
@@ -61,4 +109,4 @@ Vue.config.productionTip = false
 
 new Vue({
     render: h => h(App),
-}).$mount('#app')
+}).$mount('#app')

test/Blurb.spec.js

@@ -41,6 +41,35 @@ describe('A blurb', function() {
         expect(element).to.exist;
     });
 
+    describe('should be rendered correctly', function() {
+        let page;
+        before(async function() {
+            page = await browser.newPage();
+            await page.goto(PAGE_URL);
+            await page.type(SEL_TEXTAREA, 'Start. There is a flag in the middle of the text. End.');
+
+            const button = await page.$(SEL_SUBMIT);
+            await button.click();
+        });
+        after(async function() {
+            await page.close();
+        });
+        it('should get different text', async function() {
+            const element = await page.$(SEL_BLURBS);
+            const text = await page.evaluate(element => element.innerText, element);
+            expect(text).to.include("middle");
+        });
+        it('at the start of the text.', async function() {
+            const element = await page.$$(SEL_NOTICE);
+            const text = await page.evaluate(element => element.innerText, element[0]);
+            expect(text).to.eql("Start ");
+        });
+        it('at the end of the text.', async function() {
+            const element = await page.$$(SEL_NOTICE);
+            const text = await page.evaluate(element => element.innerText, element[2]);
+            expect(text).to.eql("End ");
+        })
+    });
 
     describe('The tooltip', function() {