Copy to clipboard notification

[Joseph-Cashmore]

Makes use of "react-notifications" which would be easily usable elsewhere in other components for success, error, info messages etc.

Required installation of react-notifications and its dependencies.

Main import is in App.js,

Notification component then used within listHeader component

[github-actions]

Check out a preview at https://dev.thelist.app/refs/pull/76/merge!

[Joseph-Cashmore]

There does seem to be a warning in VS Code about a "type" for this import. It doesn't stop things from working, but I couldn't find a means of solving this warning. If it's something we should look into further I can do

[samstradling]

There's an open issue here that suggests a workaround: minhtranite/react-notifications#29

[Joseph-Cashmore]

"success" can also be changed to error etc for different notification types

[samstradling]

I think we should add a test for this, we'll need to mock out 'react-notifications', allowing us to know when it is called.

jest.mock('react-notifications');

We can then simulate clicking on the button and check that the text is copied to clipboard and that the notification is shown

describe('without the web share API available', () => {
  const writeText = jest.fn(); // create a mock function for writeText
  beforeEach(() => {
    // set the navigator items up for our test
    global.navigator.share = null;
    global.navigator.clipboard = { writeText };

    // render and click on the share icon
    const { getByTitle } = render(<ListHeader />);
    const shareIcon = getByTitle('Share this list');
    fireEvent.click(shareIcon);
  });

  it('copies the item to the clipboard', () => {
    expect(writeText).toHaveBeenCalledWith('https://thelist.app');
  });

  it('triggers a notification', () => {
    expect(NotificationManager.success).toHaveBeenCalledWith('Get sharing your list with others!', 'Copied to Clipboard!', 3000);
  });
});

[Joseph-Cashmore]

Great, thanks will get a test added :)

[Joseph-Cashmore]

Not sure where I'm supposed to place "jest.mock('react-notifications');" and in what context. I understand when you make a mock function and assign it to a constant, but how does the test know to utilise this line of code?

[samstradling]

There's some great documentation about it here, but the short answer is that it replaces every method in react-notifications with a mocked version that:

1. doesn't call the actual underlying implementation
2. allows you to check that the methods were called in the way you expect.

https://jestjs.io/docs/en/mock-functions#mocking-modules

[Joseph-Cashmore]

For some reason placing this css code in the component file didn't have any affect on the built in styling

[samstradling]

I think this is great, but we should have a go at creating our own version of these, it'll be quite fun 😄