Feature/tests

package.json

@@ -14,7 +14,7 @@
     "babel-plugin-transform-object-assign": "^6.22.0",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-preset-airbnb": "^2.4.0",
-    "babel-preset-env": "^1.6.0",
+    "babel-preset-env": "^1.7.0",
     "babel-preset-react": "^6.24.1",
     "babel-runtime": "^6.23.0",
     "css-loader": "^0.28.7",
@@ -37,18 +37,21 @@
   },
   "dependencies": {
     "brace": "^0.11.1",
-    "core-js": "^2.5.1",
+    "core-js": "^2.5.6",
     "custom-event-polyfill": "^0.3.0",
-    "draft-convert": "^2.0.0",
+    "draft-convert": "^2.1.2",
     "draft-js": "^0.10.3",
     "draft-js-export-html": "^1.2.0",
+    "enzyme": "^3.2.0",
+    "extract-text-webpack-plugin": "^3.0.0",
     "immutable": "^3.8.2",
     "js-beautify": "^1.7.5",
     "lodash-es": "^4.17.4",
     "moment": "^2.20.1",
     "node-sass": "^4.5.3",
-    "postcss-loader": "^2.0.8",
+    "postcss-loader": "^2.1.5",
     "prop-types": "^15.6.0",
+    "puppeteer": "^1.4.0",
     "react": "^16.0.0",
     "react-ace": "^5.9.0",
     "react-dom": "^16.0.0",

src/react/__tests__/ete.test.js

@@ -0,0 +1,130 @@
+import puppeteer from 'puppeteer';
+
+const APP_ADMIN = 'http://liveblogdemo.bigbite.site/wp-admin';
+const APP_ADD_NEW = 'http://liveblogdemo.bigbite.site/wp-admin/post-new.php';
+const USER = 'root';
+const PASSWORD = 'y)uCa%BBSGvXvs&WiU';
+const TIMEOUT = 30000;
+
+let browser;
+let page;
+
+const renderEntry = async (content = false) => {
+  await page.click('.public-DraftEditor-content');
+  await page.keyboard.type(content || 'This is some test content');
+  await page.click('.liveblog-publish-btn');
+};
+
+const renderEntries = async (amount, content = false) => {
+  let times = amount;
+  if (times === 0) return Promise.resolve([]);
+  times -= 1;
+  const entries = await renderEntry().then(() => renderEntries(times, content));
+  return Promise.resolve(entries);
+};
+
+describe('End to End', async () => {
+  beforeAll(async () => {
+    browser = await puppeteer.launch({ headless: false });
+    page = await browser.newPage();
+  }, TIMEOUT);
+
+  it('should create a new liveblog', async () => {
+    await page.goto(APP_ADMIN);
+    await page.evaluate((login, pass) => {
+      document.querySelector('#user_login').value = login;
+      document.querySelector('#user_pass').value = pass;
+      document.querySelector('#wp-submit').click();
+    }, USER, PASSWORD);
+
+    await page.waitForNavigation();
+    await page.goto(APP_ADD_NEW, { waitUntil: 'load' });
+    await page.click('input[name=post_title]');
+    await page.keyboard.type('Liveblog Test');
+    await page.keyboard.down('Tab');
+    await page.keyboard.type('[liveblog_key_events]');
+    await page.click('#liveblog button[value=enable]');
+    await page.click('#publish');
+    await page.waitForNavigation();
+    await page.click('#message a');
+  }, TIMEOUT);
+
+  it('should render the editor', async () => {
+    await page.waitForSelector('.liveblog-editor-container');
+    const editor = await page.$('.liveblog-editor-container');
+    expect(editor).toBeDefined();
+  }, TIMEOUT);
+
+  it('should render an entry', async () => {
+    await page.waitForSelector('.public-DraftEditor-content');
+    await renderEntry();
+    await page.waitForSelector('.liveblog-entry');
+    const entry = await page.$('.liveblog-entry');
+    expect(entry).toBeDefined();
+  }, TIMEOUT);
+
+  it('should delete an entry', async () => {
+    await page.click('.liveblog-btn-delete');
+    const entryExists = await page.$$eval('.liveblog-entry', deleted => deleted);
+    expect(entryExists).toBeFalsy();
+  }, TIMEOUT);
+
+  it('should render multiple entries', async () => {
+    await renderEntries(15);
+    await page.reload({ waitUntil: ['load', 'networkidle0'] });
+    const pagination = await page.evaluate(() =>
+      document.querySelector('.liveblog-pagination-pages').innerHTML,
+    );
+    expect(pagination).toEqual('1 of 3');
+  }, TIMEOUT);
+
+  it('should delete multiple entries', async () => {
+    await page.click('.liveblog-btn-delete');
+    await page.click('.liveblog-btn-delete');
+    await page.click('.liveblog-btn-delete');
+    await page.click('.liveblog-btn-delete');
+    await page.click('.liveblog-btn-delete');
+    await page.reload({ waitUntil: ['load', 'networkidle0'] });
+    const feedChildrenCount = await page.evaluate(() =>
+      document.querySelector('.liveblog-feed').children.length,
+    );
+    expect(feedChildrenCount).toEqual(5);
+  }, TIMEOUT);
+
+  it('should render different pages', async () => {
+    await page.click('.liveblog-pagination-next');
+    await page.waitFor(4000);
+    const feedChildrenCount = await page.evaluate(() =>
+      document.querySelector('.liveblog-feed').children.length,
+    );
+    await page.waitForSelector('.liveblog-pagination-pages');
+    const pagination = await page.evaluate(() =>
+      document.querySelector('.liveblog-pagination-pages').innerHTML,
+    );
+    expect(pagination).toEqual('2 of 3');
+    expect(feedChildrenCount).toEqual(5);
+  }, TIMEOUT);
+
+  it('should add a key event', async () => {
+    await page.click('.liveblog-pagination-first');
+    await page.waitFor(4000);
+    await renderEntry('/key This is a test key event');
+    await page.waitForSelector('.liveblog-event');
+    const event = await page.$('.liveblog-event');
+    expect(event).toBeDefined();
+  });
+
+  it('should take you to a key event on click', async () => {
+    await page.click('.liveblog-pagination-last');
+    await page.click('.liveblog-event');
+    await page.waitForSelector('.is-key-event');
+    const event = await page.$('.is-key-event');
+    expect(event).toBeDefined();
+  });
+
+  afterAll(async () => {
+    await page.close();
+    await browser.disconnect();
+    await browser.close();
+  }, TIMEOUT);
+}, TIMEOUT);

src/react/mockData/reducers/api.js

@@ -0,0 +1,67 @@
+/* eslint-disable */
+export default {
+  "entries": [
+    {
+        "id": "2977",
+        "type": "new",
+        "render": "<p>This is some test content</p>\n",
+        "content": "<p>This is some test content</p>",
+        "css_classes": "liveblog byuser comment-author-bb_admin bypostauthor even thread-even depth-1 liveblog-entry liveblog-entry-class-2977",
+        "timestamp": 1511873011,
+        "avatar_img": "<img alt='' src='http://1.gravatar.com/avatar/72465b47ce5554b3a30bdbbb21f5afeb?s=30&#038;d=mm&#038;r=g' srcset='http://1.gravatar.com/avatar/72465b47ce5554b3a30bdbbb21f5afeb?s=60&amp;d=mm&amp;r=g 2x' class='avatar avatar-30 photo' height='30' width='30' />",
+        "author_link": "bb_admin",
+        "entry_time": 1511873011,
+        "key_event": false
+    },
+    {
+        "id": "2976",
+        "type": "new",
+        "render": "<p>This is some test content</p>\n",
+        "content": "<p>This is some test content</p>",
+        "css_classes": "liveblog byuser comment-author-bb_admin bypostauthor odd alt thread-odd thread-alt depth-1 liveblog-entry liveblog-entry-class-2976",
+        "timestamp": 1511873011,
+        "avatar_img": "<img alt='' src='http://1.gravatar.com/avatar/72465b47ce5554b3a30bdbbb21f5afeb?s=30&#038;d=mm&#038;r=g' srcset='http://1.gravatar.com/avatar/72465b47ce5554b3a30bdbbb21f5afeb?s=60&amp;d=mm&amp;r=g 2x' class='avatar avatar-30 photo' height='30' width='30' />",
+        "author_link": "bb_admin",
+        "entry_time": 1511873011,
+        "key_event": false
+    },
+    {
+        "id": "2975",
+        "type": "new",
+        "render": "<p>This is some test content</p>\n",
+        "content": "<p>This is some test content</p>",
+        "css_classes": "liveblog byuser comment-author-bb_admin bypostauthor even thread-even depth-1 liveblog-entry liveblog-entry-class-2975",
+        "timestamp": 1511873011,
+        "avatar_img": "<img alt='' src='http://1.gravatar.com/avatar/72465b47ce5554b3a30bdbbb21f5afeb?s=30&#038;d=mm&#038;r=g' srcset='http://1.gravatar.com/avatar/72465b47ce5554b3a30bdbbb21f5afeb?s=60&amp;d=mm&amp;r=g 2x' class='avatar avatar-30 photo' height='30' width='30' />",
+        "author_link": "bb_admin",
+        "entry_time": 1511873011,
+        "key_event": false
+    },
+    {
+        "id": "2974",
+        "type": "new",
+        "render": "<p>This is some test content</p>\n",
+        "content": "<p>This is some test content</p>",
+        "css_classes": "liveblog byuser comment-author-bb_admin bypostauthor odd alt thread-odd thread-alt depth-1 liveblog-entry liveblog-entry-class-2974",
+        "timestamp": 1511873011,
+        "avatar_img": "<img alt='' src='http://1.gravatar.com/avatar/72465b47ce5554b3a30bdbbb21f5afeb?s=30&#038;d=mm&#038;r=g' srcset='http://1.gravatar.com/avatar/72465b47ce5554b3a30bdbbb21f5afeb?s=60&amp;d=mm&amp;r=g 2x' class='avatar avatar-30 photo' height='30' width='30' />",
+        "author_link": "bb_admin",
+        "entry_time": 1511873011,
+        "key_event": false
+    },
+    {
+        "id": "2973",
+        "type": "new",
+        "render": "<p>This is some test content</p>\n",
+        "content": "<p>This is some test content</p>",
+        "css_classes": "liveblog byuser comment-author-bb_admin bypostauthor even thread-even depth-1 liveblog-entry liveblog-entry-class-2973",
+        "timestamp": 1511873011,
+        "avatar_img": "<img alt='' src='http://1.gravatar.com/avatar/72465b47ce5554b3a30bdbbb21f5afeb?s=30&#038;d=mm&#038;r=g' srcset='http://1.gravatar.com/avatar/72465b47ce5554b3a30bdbbb21f5afeb?s=60&amp;d=mm&amp;r=g 2x' class='avatar avatar-30 photo' height='30' width='30' />",
+        "author_link": "bb_admin",
+        "entry_time": 1511873011,
+        "key_event": false
+    }
+  ],
+  "page": 1,
+  "pages": 3
+}

src/react/mockData/reducers/config.js

@@ -0,0 +1,4 @@
+export default {
+  refresh_interval: 10,
+  timestamp: 1511878837,
+};

src/react/mockData/reducers/events.js

@@ -0,0 +1,16 @@
+/* eslint-disable */
+export default [
+  {
+    "id": "3251",
+    "type": "new",
+    "render": "<p><span class=\"liveblog-command type-key\">key</span> This is a test Key Event</p>\n",
+    "content": "<p>/key This is a test Key Event</p>",
+    "css_classes": "liveblog byuser comment-author-bb_admin bypostauthor even thread-even depth-1 liveblog-entry liveblog-entry-class-3251 type-key",
+    "timestamp": 1511885820,
+    "avatar_img": "<img alt='' src='http://1.gravatar.com/avatar/72465b47ce5554b3a30bdbbb21f5afeb?s=30&#038;d=mm&#038;r=g' srcset='http://1.gravatar.com/avatar/72465b47ce5554b3a30bdbbb21f5afeb?s=60&amp;d=mm&amp;r=g 2x' class='avatar avatar-30 photo' height='30' width='30' />",
+    "author_link": "bb_admin",
+    "entry_time": 1511885820,
+    "key_event": true,
+    "key_event_content": "<span class=\"liveblog-command type-key\">key</span> This is a test Key Event"
+  }
+]

src/react/mockData/reducers/polling.js

@@ -0,0 +1,20 @@
+/* eslint-disable */
+export default {
+  "entries": [
+      {
+          "id": "3250",
+          "type": "new",
+          "render": "<p>test</p>\n",
+          "content": "<p>test</p>",
+          "css_classes": "liveblog byuser comment-author-bb_admin bypostauthor even thread-even depth-1 liveblog-entry liveblog-entry-class-3250",
+          "timestamp": 1511882674,
+          "avatar_img": "<img alt='' src='http://1.gravatar.com/avatar/72465b47ce5554b3a30bdbbb21f5afeb?s=30&#038;d=mm&#038;r=g' srcset='http://1.gravatar.com/avatar/72465b47ce5554b3a30bdbbb21f5afeb?s=60&amp;d=mm&amp;r=g 2x' class='avatar avatar-30 photo' height='30' width='30' />",
+          "author_link": "bb_admin",
+          "entry_time": 1511882674,
+          "key_event": false
+      }
+  ],
+  "latest_timestamp": 1511882674,
+  "refresh_interval": 10,
+  "pages": 1
+}

src/react/mockData/utils/applyUpdateEntries.js

@@ -0,0 +1,66 @@
+export const currentEntries = {
+  id_1: {
+    id: 1,
+    type: 'new',
+    content: 'test',
+  },
+  id_2: {
+    id: 2,
+    type: 'new',
+    content: 'test',
+  },
+  id_3: {
+    id: 3,
+    type: 'new',
+    content: 'test',
+  },
+};
+
+export const newEntries = [
+  {
+    id: 4,
+    type: 'new',
+    content: 'test',
+  },
+  {
+    id: 3,
+    type: 'update',
+    content: 'updated',
+  },
+  {
+    id: 2,
+    type: 'delete',
+    content: '',
+  },
+];
+
+export const expectedEntries = {
+  id_4: {
+    id: 4,
+    type: 'new',
+    content: 'test',
+  },
+  id_1: {
+    id: 1,
+    type: 'new',
+    content: 'test',
+  },
+  id_3: {
+    id: 3,
+    type: 'update',
+    content: 'updated',
+  },
+};
+
+export const expectedEntriesPolling = {
+  id_1: {
+    id: 1,
+    type: 'new',
+    content: 'test',
+  },
+  id_3: {
+    id: 3,
+    type: 'update',
+    content: 'updated',
+  },
+};