Merge pull request #26 from skwirowski/12-ui-red-button

[#12] UI Red Button

src/app/App.js

@@ -1,4 +1,7 @@
+import {redButton} from './redButton'
+
 export const App = ({options}) => {
+    redButton('play the game');
 }
 
 

src/app/redButton.js

@@ -0,0 +1,10 @@
+export const redButton = (text) => {
+    const app = document.querySelector('#swquiz-app');
+    const button = document.createElement('button');
+    let buttonText = document.createTextNode(`${text}`);
+    button.setAttribute('id', 'red-button');
+    button.setAttribute('class', 'button button--red button--uppercase');
+    button.setAttribute('data-testid', 'red-button');
+    button.appendChild(buttonText);
+    app.appendChild(button);
+}

styles/App.css

@@ -15,3 +15,22 @@ body {
     font-family: 'Montserrat', sans-serif;
     padding: 0 5vw;
 }
+
+.button {
+    border-radius: 16px;
+    font-size: 42px;
+    font-weight: 500;
+    height: 100px;
+    line-height: 51.2px;
+    width: 600px;
+}
+
+.button--red {
+    background: rgba(255, 0, 0, 0.8);
+    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    color: #fff;
+}
+
+.button--uppercase {
+    text-transform: uppercase;
+}

test/redButton.test.js

@@ -0,0 +1,26 @@
+import { redButton } from '../src/app/redButton'
+import { screen } from '@testing-library/dom'
+import '@testing-library/jest-dom/extend-expect';
+
+test('button has class button button--red button--uppercase', () => {
+    document.body.innerHTML = `<div id="swquiz-app"></div>`;
+    const testText = 'play the game';
+    redButton(testText);
+    expect(screen.getByTestId('red-button')).toHaveClass('button button--red button--uppercase');
+})
+
+test('button has text', () => {
+    document.body.innerHTML = `<div id="swquiz-app"></div>`;
+    const testText = 'play the game';
+    redButton(testText);
+    expect(screen.getByTestId('red-button')).not.toBeEmptyDOMElement();
+})
+
+test('button has text - play the game', () => {
+    document.body.innerHTML = `<div id="swquiz-app"></div>`;
+    const testText = 'play the game';
+    redButton(testText);
+    expect(screen.getByTestId('red-button')).toHaveTextContent('play the game');
+})
+
+