Merge 83e337b into 3c3c335

src/components/LoginButton.jsx

@@ -2,8 +2,8 @@ import React from 'react';
 import auth from 'solid-auth-client';
 
 /** Button that lets the user log in with Solid. */
-export default function LoginButton({ popup }) {
+export default function LoginButton({ popup, className = 'solid auth login' }) {
   return <button
-    className="solid auth login"
+    className={className}
     onClick={() => auth.popupLogin({ popupUri: popup })}>Log in</button>;
 }

src/components/LogoutButton.jsx

@@ -2,8 +2,8 @@ import React from 'react';
 import auth from 'solid-auth-client';
 
 /** Button that lets the user log out with Solid. */
-export default function LogoutButton() {
+export default function LogoutButton({ className = 'solid auth logout' }) {
   return <button
-    className="solid auth logout"
+    className={className}
     onClick={() => auth.logout()}>Log out</button>;
 }

test/components/AuthButton-test.jsx

@@ -4,23 +4,55 @@ import { mount } from 'enzyme';
 import auth from 'solid-auth-client';
 
 describe('An AuthButton', () => {
-  let button;
-  beforeAll(() => (button = mount(<AuthButton/>)));
-  afterAll(() => button.unmount());
+  describe('default', function () {
+    let button;
+    beforeEach(() => (button = mount(<AuthButton />)));
+    afterEach(() => button.unmount());
 
-  describe('when the user is not logged in', () => {
-    beforeAll(() => auth.mockWebId(null));
+    describe('when the user is not logged in', () => {
+      beforeAll(() => auth.mockWebId(null));
 
-    it('renders the log in button', () => {
-      expect(button.text()).toBe('Log in');
+      it('renders the log in button', () => {
+        expect(button.text()).toBe('Log in');
+      });
+
+      it('uses default class names', () => {
+        expect(button.find('button').prop('className')).toEqual('solid auth login');
+      });
+    });
+
+    describe('renders the log out button', () => {
+      beforeAll(() => auth.mockWebId('https://example.org/#me'));
+
+      it('has "Log out" as text', () => {
+        expect(button.text()).toBe('Log out');
+      });
+
+      it('uses default class names', () => {
+        expect(button.find('button').prop('className')).toEqual('solid auth logout');
+      });
     });
   });
 
-  describe('renders the log out button', () => {
-    beforeAll(() => auth.mockWebId('https://example.org/#me'));
+  describe('custom class names', function () {
+    let button;
+    beforeEach(() => (button = mount(<AuthButton className="custom styling"/>)));
+    afterEach(() => button.unmount());
+
+    describe('when the user is not logged in', () => {
+      beforeAll(() => auth.mockWebId(null));
+
+      it('respects custom styling in button class name', () => {
+        expect(button.find('button').prop('className')).toEqual('custom styling');
+      });
+    });
+
+    describe('renders the log out button', () => {
+      beforeAll(() => auth.mockWebId('https://example.org/#me'));
 
-    it('has "Log out" as text', () => {
-      expect(button.text()).toBe('Log out');
+      it('respects custom styling in button class name', () => {
+        expect(button.find('button').prop('className')).toEqual('custom styling');
+      });
     });
   });
 });