add redButton component jest tests

src/app/redButton.js

@@ -2,8 +2,9 @@ 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.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

@@ -1,5 +1,3 @@
-@import './components/redButton.css';
-
 body {
     font-family: 'Montserrat', sans-serif;
 }

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');
+})
+
+