Fixed save button behavior (#9238)

* Fixed save button, but it's slow to update when clicking unsave

* Update app/javascript/articles/components/SaveButton.jsx

Co-authored-by: Nick Taylor <nick@iamdeveloper.com>

* Update app/javascript/articles/components/SaveButton.jsx

Co-authored-by: Nick Taylor <nick@iamdeveloper.com>

* Update app/javascript/articles/components/SaveButton.jsx

Co-authored-by: Nick Taylor <nick@iamdeveloper.com>

* I added the suggested changes but the issue still persists

* Added tests.

Co-authored-by: Nick Taylor <nick@iamdeveloper.com>
Co-authored-by: Nick Taylor <nick@dev.to>

app/javascript/articles/components/SaveButton.jsx

@@ -8,15 +8,16 @@ export class SaveButton extends Component {
 
     const { isBookmarked } = props;
 
-    this.state = { buttonText: isBookmarked ? 'Saved' : 'Save' };
+    this.state = {
+      buttonText: isBookmarked ? 'Saved' : 'Save',
+    };
   }
 
   render() {
     const { buttonText } = this.state;
-
     const { article, isBookmarked, onClick } = this.props;
 
-    const mouseOver = (_e) => {
+    const mouseMove = (_e) => {
       this.setState({ buttonText: isBookmarked ? 'Unsave' : 'Save' });
     };
 
@@ -26,7 +27,10 @@ export class SaveButton extends Component {
 
     const handleClick = (_e) => {
       onClick(_e);
-      this.setState({ buttonText: isBookmarked ? 'Unsave' : 'Saved' });
+      this.setState({
+        buttonText: isBookmarked ? 'Save' : 'Saved',
+        isBookmarked: !isBookmarked,
+      });
     };
 
     if (article.class_name === 'Article') {
@@ -39,8 +43,8 @@ export class SaveButton extends Component {
           data-initial-feed
           data-reactable-id={article.id}
           onClick={handleClick}
-          onMouseOver={mouseOver}
-          onFocus={mouseOver}
+          onMouseMove={mouseMove}
+          onFocus={mouseMove}
           onMouseout={mouseOut}
           onBlur={mouseOut}
         >

app/javascript/articles/components/__tests__/SaveButton.test.jsx

@@ -0,0 +1,87 @@
+import { h } from 'preact';
+import { fireEvent, render } from '@testing-library/preact';
+import { axe } from 'jest-axe';
+import { SaveButton } from '../SaveButton';
+
+it('should have no a11y violations', async () => {
+  const article = { class_name: 'Article', id: 1 };
+  const { container } = render(<SaveButton article={article} />);
+  const results = await axe(container);
+
+  expect(results).toHaveNoViolations();
+});
+
+it('should render button as bookmarked', () => {
+  const article = { class_name: 'Article', id: 1 };
+  const { queryByText } = render(<SaveButton article={article} isBookmarked />);
+  const saveButton = queryByText('Saved');
+
+  expect(saveButton).not.toBeNull();
+});
+
+it('should button as not being bookmarked', () => {
+  const article = { class_name: 'Article', id: 1 };
+  const { queryByText } = render(
+    <SaveButton article={article} isBookmarked={false} />,
+  );
+  const saveButton = queryByText('Save');
+
+  expect(saveButton).not.toBeNull();
+});
+
+it('should bookmark when it previously was not', async () => {
+  const article = { class_name: 'Article', id: 1 };
+  const { getByText, findByText } = render(
+    <SaveButton onClick={jest.fn()} article={article} isBookmarked={false} />,
+  );
+  const saveButton = getByText('Save');
+  saveButton.click();
+
+  const savedButton = await findByText('Saved');
+
+  expect(savedButton).not.toBeNull();
+});
+
+it('should unbookmark when it previously was bookmarked', async () => {
+  const article = { class_name: 'Article', id: 1 };
+  const { getByText, findByText } = render(
+    <SaveButton onClick={jest.fn()} article={article} isBookmarked />,
+  );
+
+  const savedButton = getByText('Saved');
+  savedButton.click();
+
+  const saveButton = await findByText('Save');
+
+  expect(saveButton).not.toBeNull();
+});
+
+it('should change text to unbookmark when hovering over button and it is bookmarked', async () => {
+  const article = { class_name: 'Article', id: 1 };
+  const { getByText, findByText } = render(
+    <SaveButton onClick={jest.fn()} article={article} isBookmarked />,
+  );
+
+  const savedButton = getByText('Saved');
+  fireEvent.mouseMove(savedButton);
+
+  const saveButton = await findByText('Unsave');
+
+  expect(saveButton).not.toBeNull();
+});
+
+it('should not change button text when hovering over button and it is not bookmarked', async () => {
+  const article = { class_name: 'Article', id: 1 };
+  const { getByText, findByText } = render(
+    <SaveButton onClick={jest.fn()} article={article} isBookmarked={false} />,
+  );
+
+  const savedButton = getByText('Save');
+  fireEvent.mouseMove(savedButton);
+
+  // We're checking for the same button text again because we need to find the element again
+  // again after the mouse has moved over the button.
+  const saveButton = await findByText('Save');
+
+  expect(saveButton).not.toBeNull();
+});