Readme, styling, test

- Update frontend readme to dunk on Chrome and recommend Firefox instead
- Fix some frontend test
- Apply some "styling"

frontend-reactive/README.md

@@ -10,7 +10,7 @@ You will need the following things properly installed on your computer.
 - [Git](https://git-scm.com/)
 - [Node.js](https://nodejs.org/) (with npm)
 - [Ember CLI](https://cli.emberjs.com/release/)
-- [Google Chrome](https://google.com/chrome/)
+- ~~Google Chrome~~ NO, Fuck off. Bad ember. No Chrome. [Firefox](https://www.mozilla.org/en-US/firefox/new/) does the job just fine. Or, if you really want to use Chrome, use [Ungoogled Chromium](https://github.com/ungoogled-software/ungoogled-chromium)
 
 ## Installation
 

frontend-reactive/app/components/timeline/note.hbs

@@ -1,4 +1,4 @@
-<div>
+<div class="timeline-note">
   <h3>{{@username}}</h3>
   <p>{{@content}}</p>
 </div>

frontend-reactive/app/styles/app.css

@@ -1 +1,6 @@
 /* Ember supports plain CSS out of the box. More info: https://cli.emberjs.com/release/advanced-use/stylesheets/ */
+
+.timeline-note {
+	display: flex;
+	flex-direction: column;
+}

frontend-reactive/tests/integration/components/timeline/note-test.ts

@@ -1,26 +1,25 @@
-import { module, test } from 'qunit';
+import { module, test } from "qunit";
-import { setupRenderingTest } from 'frontend-reactive/tests/helpers';
+import { setupRenderingTest } from "frontend-reactive/tests/helpers";
-import { render } from '@ember/test-helpers';
+import { render } from "@ember/test-helpers";
-import { hbs } from 'ember-cli-htmlbars';
+import { hbs } from "ember-cli-htmlbars";
 
-module('Integration | Component | timeline/note', function (hooks) {
+module("Integration | Component | timeline/note", function (hooks) {
-  setupRenderingTest(hooks);
+	setupRenderingTest(hooks);
 
-  test('it renders', async function (assert) {
+	test("it renders", async function (assert) {
-    // Set any properties with this.set('myProperty', 'value');
+		// Set any properties with this.set('myProperty', 'value');
-    // Handle any actions with this.set('myAction', function(val) { ... });
+		// Handle any actions with this.set('myAction', function(val) { ... });
 
-    await render(hbs`<Timeline::Note />`);
+		await render(hbs`<Timeline::Note />`);
 
-    assert.dom().hasText('');
+		assert.dom().hasText("");
 
-    // Template block usage:
+		// Template block usage:
-    await render(hbs`
+		await render(hbs`
-      <Timeline::Note>
+      <Timeline::Note @username="bob" @content="some content"/>
-        template block text
-      </Timeline::Note>
     `);
 
-    assert.dom().hasText('template block text');
+		assert.dom("h3").hasText("bob");
-  });
+		assert.dom("p").hasText("some content");
+	});
 });