// @ts-nocheck
import React from 'react';
import '@testing-library/jest-dom/extend-expect';
import { fireEvent, render, waitFor } from '@testing-library/react';
import { Link } from '../../Link';
import { Masthead, MastheadNav, MastheadNavItem, MastheadUser, MastheadUserItem } from '.';
import { Notification, Notifications } from '../NotificationPanel';
describe('Masthead', function () {
  var wrapper;
  afterEach(function () {
    jest.clearAllMocks();
  });
  describe('minimal props', function () {
    beforeEach(function () {
      wrapper = render( /*#__PURE__*/React.createElement(Masthead, {
        title: "title"
      }));
    });
    it('should render the masthead', function () {
      expect(wrapper.getByTestId('masthead')).toBeInTheDocument();
    });
    it('should set the masthead banner `role` attribute to `banner`', function () {
      expect(wrapper.getByTestId('masthead-banner')).toHaveAttribute('role', 'banner');
    });
    it('should render the service name', function () {
      expect(wrapper.getByTestId('masthead-servicename')).toHaveTextContent('title');
    });
    it('should render the default logo', function () {
      expect(wrapper.getByTestId('logo')).toBeInTheDocument();
    });
    it('should set the logo `role` to `presentation`', function () {
      expect(wrapper.getByTestId('logo')).toHaveAttribute('role', 'presentation');
    });
    it('should not render the avatar', function () {
      expect(wrapper.queryAllByTestId('masthead-avatar')).toHaveLength(0);
    });
    it('should not include a search button', function () {
      expect(wrapper.queryAllByTestId('masthead-search-button')).toHaveLength(0);
    });
    it('should not include the notification component', function () {
      expect(wrapper.queryAllByTestId('notification-panel')).toHaveLength(0);
    });
    it('should not render the nav', function () {
      expect(wrapper.queryAllByTestId('masthead-nav')).toHaveLength(0);
    });
  });
  describe('all props', function () {
    var consoleWarnSpy;
    var onSearchSpy;
    beforeEach(function () {
      consoleWarnSpy = jest.spyOn(global.console, 'warn');
      var notification = /*#__PURE__*/React.createElement(Notification, {
        "data-arbitrary": "arbitrary-notification",
        link: /*#__PURE__*/React.createElement(Link, {
          href: "notifications/1"
        }),
        name: "Thomas Stephens",
        action: "added a new comment to your",
        on: "review",
        when: new Date('2019-11-05T10:57:00.000Z'),
        description: "A long description that will be shortened"
      });
      var props = {
        'data-arbitrary': 'arbitrary-masthead',
        hasUnreadNotification: true,
        homeLink: /*#__PURE__*/React.createElement(Link, {
          "data-arbitrary": "arbitrary-home-link",
          href: "/"
        }),
        Logo: function Logo(_ref) {
          var role = _ref.role;
          return /*#__PURE__*/React.createElement("svg", {
            role: role
          });
        },
        nav: /*#__PURE__*/React.createElement(MastheadNav, {
          "data-arbitrary": "arbitrary-nav"
        }, /*#__PURE__*/React.createElement(MastheadNavItem, {
          "data-arbitrary": "arbitrary-nav-item",
          link: /*#__PURE__*/React.createElement(Link, {
            href: "/first"
          }, "First")
        }), /*#__PURE__*/React.createElement(MastheadNavItem, {
          link: /*#__PURE__*/React.createElement(Link, {
            href: "/second"
          }, "Second")
        })),
        notifications: /*#__PURE__*/React.createElement(Notifications, {
          "data-arbitrary": "arbitrary-notifications",
          link: /*#__PURE__*/React.createElement(Link, {
            href: "notifications"
          })
        }, notification, notification),
        onSearch: function onSearch() {
          return true;
        },
        title: 'title',
        user: /*#__PURE__*/React.createElement(MastheadUser, {
          "data-arbitrary": "arbitrary-user",
          initials: "AB",
          link: /*#__PURE__*/React.createElement(Link, {
            href: "/user-profile"
          })
        })
      };
      onSearchSpy = jest.spyOn(props, 'onSearch');
      wrapper = render( /*#__PURE__*/React.createElement(Masthead, props));
    });
    it('should spread arbitrary props on the masthead', function () {
      expect(wrapper.getByTestId('masthead')).toHaveAttribute('data-arbitrary', 'arbitrary-masthead');
    });
    it('should spread arbitrary props on the home link', function () {
      expect(wrapper.getByTestId('masthead-home-link')).toHaveAttribute('data-arbitrary', 'arbitrary-home-link');
    });
    it('should spread arbitrary props on the nav', function () {
      expect(wrapper.getByTestId('masthead-nav')).toHaveAttribute('data-arbitrary', 'arbitrary-nav');
    });
    it('should spread arbitrary props on the nav item', function () {
      expect(wrapper.getAllByTestId('masthead-nav-item')[0]).toHaveAttribute('data-arbitrary', 'arbitrary-nav-item');
    });
    it('should spread arbitrary props on the user', function () {
      expect(wrapper.getByTestId('masthead-user')).toHaveAttribute('data-arbitrary', 'arbitrary-user');
    });
    it('should warn the consumer for using the deprecated `link` prop', function () {
      expect(consoleWarnSpy).toHaveBeenCalledTimes(1);
      expect(consoleWarnSpy).toHaveBeenCalledWith('WARN - MODDS - The `link` prop is deprecated');
    });
    it('should render the masthead', function () {
      expect(wrapper.getByTestId('masthead')).toBeInTheDocument();
    });
    it('should set the masthead banner `role` attribute to `banner`', function () {
      expect(wrapper.getByTestId('masthead-banner')).toHaveAttribute('role', 'banner');
    });
    it('should render the service name', function () {
      expect(wrapper.getByTestId('masthead-servicename')).toHaveTextContent('title');
    });
    it('should not render the default logo', function () {
      expect(wrapper.queryAllByTestId('logo')).toHaveLength(0);
    });
    it('should render the custom logo', function () {
      expect(wrapper.getByTestId('custom-logo')).toBeInTheDocument();
    });
    it('should set the logo `role` to `presentation`', function () {
      expect(wrapper.getByTestId('custom-logo')).toHaveAttribute('role', 'presentation');
    });
    it('should render the avatar', function () {
      expect(wrapper.getByText('AB')).toBeInTheDocument();
    });
    it('should link the avatar', function () {
      var avatar = wrapper.getByText('AB');
      var link = avatar.parentElement.parentElement;
      expect(link.getAttribute('href')).toEqual('/user-profile');
    });
    it('should include a search button', function () {
      expect(wrapper.queryByTestId('masthead-search-button')).toBeInTheDocument();
    });
    it('should set the `aria-expanded` attribute on the search button to `false`', function () {
      expect(wrapper.queryByTestId('masthead-search-button')).toHaveAttribute('aria-expanded', 'false');
    });
    it('should set the `aria-label` attribute on the search button to `Show search`', function () {
      expect(wrapper.queryByTestId('masthead-search-button')).toHaveAttribute('aria-label', 'Show search');
    });
    it('should not show the search bar', function () {
      expect(wrapper.queryByTestId('searchbar')).toBeNull();
    });
    it('should set the `aria-expanded` attribute on the notification button to `false`', function () {
      expect(wrapper.queryByTestId('notification-button')).toHaveAttribute('aria-expanded', 'false');
    });
    it('should set the `aria-label` attribute on the notification button to `Show notifications`', function () {
      expect(wrapper.queryByTestId('notification-button')).toHaveAttribute('aria-label', 'Show notifications');
    });
    it('should set the `aria-haspopup` attribute on the notification button to `true`', function () {
      expect(wrapper.queryByTestId('notification-button')).toHaveAttribute('aria-haspopup', 'true');
    });
    it('should include an unread notification indicator', function () {
      expect(wrapper.queryByTestId('not-read')).toBeInTheDocument();
    });
    it('should render the nav items', function () {
      expect(wrapper.getByText('First').getAttribute('href')).toEqual('/first');
      expect(wrapper.getByText('Second').getAttribute('href')).toEqual('/second');
    });
    describe('when the user clicks on the search option', function () {
      beforeEach(function () {
        wrapper.queryByTestId('masthead-search-button').click();
      });
      it('should set the `aria-expanded` attribute on the search button to `true`', function () {
        expect(wrapper.queryByTestId('masthead-search-button')).toHaveAttribute('aria-expanded', 'true');
      });
      it('should show the search bar', function () {
        expect(wrapper.queryByTestId('searchbar')).toBeInTheDocument();
      });
      describe('and then searches', function () {
        beforeEach(function () {
          var searchbarForm = wrapper.queryByTestId('searchbar-form');
          fireEvent(searchbarForm, new Event('submit', {
            bubbles: true,
            cancelable: true
          }));
        });
        it('should use the onSearch method passed to the masthead to search', function () {
          expect(onSearchSpy).toHaveBeenCalledTimes(1);
          expect(onSearchSpy).toHaveBeenCalledWith(expect.objectContaining({
            _reactName: 'onSubmit'
          }), '');
        });
        it('should hide the searchbar from view', function () {
          return waitFor(function () {
            return expect(wrapper.queryByTestId('searchbar')).toBeNull();
          });
        });
      });
      describe('and the user clicks on the search button again', function () {
        beforeEach(function () {
          fireEvent(wrapper.queryByTestId('masthead-search-button'), new MouseEvent('click', {
            bubbles: true,
            cancelable: true
          }));
        });
        it('should not show the search bar', function () {
          return waitFor(function () {
            return expect(wrapper.queryByTestId('searchbar')).toBeNull();
          });
        });
        it('should remove the rule on the wrapper so mobile scrolling is enabled again', function () {
          expect(wrapper.queryByTestId('masthead')).not.toHaveClass('rn-masthead--show-search');
        });
      });
    });
    describe('when the user opens the notifications', function () {
      beforeEach(function () {
        wrapper.queryByTestId('notification-button').click();
      });
      it('should spread arbitrary props on the notifications', function () {
        expect(wrapper.getByTestId('notifications-sheet')).toHaveAttribute('data-arbitrary', 'arbitrary-notifications');
      });
      it('should spread arbitrary props on the notifications item', function () {
        expect(wrapper.getAllByTestId('notification')[0]).toHaveAttribute('data-arbitrary', 'arbitrary-notification');
      });
      it('should set the `aria-expanded` attribute on the notification button to `true`', function () {
        expect(wrapper.queryByTestId('notification-button')).toHaveAttribute('aria-expanded', 'true');
      });
      it('should have set the `aria-owns` attribute on the notification button to the ID of the sheet', function () {
        var sheetId = wrapper.getByTestId('notifications-sheet').getAttribute('id');
        expect(wrapper.queryByTestId('notification-button')).toHaveAttribute('aria-owns', sheetId);
      });
      describe('when the user clicks the notification button again', function () {
        beforeEach(function () {
          wrapper.queryByTestId('notification-button').click();
        });
        it('should remove the rule on the wrapper so mobile scrolling is enabled again', function () {
          return waitFor(function () {
            return expect(wrapper.queryByTestId('masthead')).not.toHaveClass('rn-masthead--show-notifications');
          });
        });
      });
    });
  });
  describe('when the avatar has links', function () {
    beforeEach(function () {
      wrapper = render( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Masthead, {
        title: "title",
        user: /*#__PURE__*/React.createElement(MastheadUser, {
          initials: "AB"
        }, /*#__PURE__*/React.createElement(MastheadUserItem, {
          "data-arbitrary": "arbitrary-user-item",
          link: /*#__PURE__*/React.createElement(Link, {
            href: "/profile"
          }, "Profile")
        }), /*#__PURE__*/React.createElement(MastheadUserItem, {
          link: /*#__PURE__*/React.createElement(Link, {
            href: "/settings"
          }, "Settings")
        }), /*#__PURE__*/React.createElement(MastheadUserItem, {
          link: /*#__PURE__*/React.createElement(Link, {
            href: "/support"
          }, "Support")
        }), /*#__PURE__*/React.createElement(MastheadUserItem, {
          link: /*#__PURE__*/React.createElement(Link, {
            href: "/logout"
          }, "Logout")
        }))
      }), /*#__PURE__*/React.createElement("div", null, "Other content")));
    });
    it('should add the avatar', function () {
      expect(wrapper.getByText('AB')).toBeInTheDocument();
    });
    it('should set the `aria-label` attribute on the search button to `Show search`', function () {
      expect(wrapper.queryByTestId('user-button')).toHaveAttribute('aria-label', 'Show user options');
    });
    it('should not show the links', function () {
      expect(wrapper.queryByText('Profile')).not.toBeInTheDocument();
      expect(wrapper.queryByText('Settings')).not.toBeInTheDocument();
      expect(wrapper.queryByText('Support')).not.toBeInTheDocument();
      expect(wrapper.queryByText('Logout')).not.toBeInTheDocument();
    });
    describe('and the avatar is clicked', function () {
      beforeEach(function () {
        wrapper.getByText('AB').click();
      });
      it('should show the links', function () {
        return waitFor(function () {
          expect(wrapper.getByText('Profile')).toBeVisible();
          expect(wrapper.getByText('Settings')).toBeVisible();
          expect(wrapper.getByText('Support')).toBeVisible();
          expect(wrapper.getByText('Logout')).toBeVisible();
        });
      });
      it('should spread arbitrary props on the user item', function () {
        expect(wrapper.getAllByTestId('masthead-user-item')[0]).toHaveAttribute('data-arbitrary', 'arbitrary-user-item');
      });
      describe('and the avatar is clicked again', function () {
        beforeEach(function () {
          wrapper.getByText('AB').click();
        });
        it('should not show the links', function () {
          return waitFor(function () {
            expect(wrapper.queryByText('Profile')).not.toBeVisible();
            expect(wrapper.queryByText('Settings')).not.toBeVisible();
            expect(wrapper.queryByText('Support')).not.toBeVisible();
            expect(wrapper.queryByText('Logout')).not.toBeVisible();
          });
        });
      });
      describe('and the elsewhere in the document is clicked', function () {
        beforeEach(function () {
          fireEvent(document, new MouseEvent('mousedown', {
            bubbles: true,
            cancelable: true
          }));
        });
        it('should not show the links', function () {
          return waitFor(function () {
            expect(wrapper.queryByText('Profile')).toBeVisible();
            expect(wrapper.queryByText('Settings')).toBeVisible();
            expect(wrapper.queryByText('Support')).toBeVisible();
            expect(wrapper.queryByText('Logout')).toBeVisible();
          });
        });
      });
    });
  });
});