Add tests for new user profile components

src/annotator/components/test/ProfileModal-test.js

+import { act } from 'preact/test-utils';
+import { mount } from 'enzyme';
+
+import { EventBus } from '../../util/emitter';
+import { ProfileModal } from '../ProfileModal';
+
+describe('ProfileModal', () => {
+  const profileURL = 'https://test.hypothes.is/user-profile';
+
+  let components;
+  let eventBus;
+  let emitter;
+
+  const outerSelector = '[data-testid="profile-outer"]';
+
+  const createComponent = config => {
+    const component = mount(
+      <ProfileModal
+        eventBus={eventBus}
+        config={{ profileAppUrl: profileURL, ...config }}
+      />
+    );
+    components.push(component);
+    return component;
+  };
+
+  beforeEach(() => {
+    components = [];
+    eventBus = new EventBus();
+    emitter = eventBus.createEmitter();
+  });
+
+  afterEach(() => {
+    components.forEach(component => component.unmount());
+  });
+
+  it('hides modal on first render', () => {
+    const wrapper = createComponent();
+    const outer = wrapper.find(outerSelector);
+
+    assert.isTrue(outer.hasClass('hidden'));
+  });
+
+  it('shows modal on "openProfile" event', () => {
+    const wrapper = createComponent();
+
+    emitter.publish('openProfile', 'myGroup');
+    wrapper.update();
+
+    const outer = wrapper.find(outerSelector);
+    assert.isFalse(outer.hasClass('hidden'));
+
+    const iframe = wrapper.find('iframe');
+    assert.equal(iframe.prop('src'), profileURL);
+  });
+
+  it('hides modal on closing', () => {
+    const wrapper = createComponent();
+
+    emitter.publish('openProfile', 'myGroup');
+    wrapper.update();
+
+    let outer = wrapper.find(outerSelector);
+    assert.isFalse(outer.hasClass('hidden'));
+
+    act(() => {
+      wrapper.find('IconButton').prop('onClick')();
+    });
+    wrapper.update();
+
+    outer = wrapper.find(outerSelector);
+
+    assert.isTrue(outer.hasClass('hidden'));
+  });
+});

src/annotator/test/profile-test.js

+import { useEffect } from 'preact/hooks';
+import { act } from 'preact/test-utils';
+
+import { Profile, $imports } from '../profile';
+import { EventBus } from '../util/emitter';
+
+describe('Profile', () => {
+  // `Profile` instances created by current test
+  let profiles;
+  let container;
+  let cleanUpCallback;
+
+  const createProfile = (config = {}) => {
+    const eventBus = new EventBus();
+    const profile = new Profile(container, eventBus, config);
+
+    profiles.push(profile);
+
+    return profile;
+  };
+
+  beforeEach(() => {
+    profiles = [];
+    container = document.createElement('div');
+    cleanUpCallback = sinon.stub();
+
+    const FakeProfileModal = () => {
+      useEffect(() => {
+        return () => {
+          cleanUpCallback();
+        };
+      }, []);
+      return <div id="profile-modal" />;
+    };
+
+    $imports.$mock({
+      './components/ProfileModal': { ProfileModal: FakeProfileModal },
+    });
+  });
+
+  afterEach(() => {
+    profiles.forEach(n => n.destroy());
+    $imports.$restore();
+  });
+
+  describe('profile container', () => {
+    it('creates the container', () => {
+      assert.isFalse(container.hasChildNodes());
+      const profile = createProfile();
+      const shadowRoot = profile._outerContainer.shadowRoot;
+      assert.isNotNull(shadowRoot);
+      assert.isNotNull(shadowRoot.querySelector('#profile-modal'));
+    });
+
+    it('removes the container', () => {
+      const profile = createProfile();
+      profile.destroy();
+      assert.isFalse(container.hasChildNodes());
+    });
+
+    it('calls the clean up function of the ProfileModal when the container is removed', () => {
+      // Necessary to run the useEffect for first time and register the cleanup function
+      let profile;
+      act(() => {
+        profile = createProfile();
+      });
+      // Necessary to run the cleanup function of the useEffect
+      act(() => {
+        profile.destroy();
+      });
+      assert.called(cleanUpCallback);
+    });
+  });
+});

src/annotator/test/sidebar-test.js

@@ -380,6 +380,28 @@ describe('Sidebar', () => {
       });
     });
 
+    describe('on "openProfile" event', () => {
+      it('hides the sidebar', () => {
+        const sidebar = createSidebar();
+        sinon.stub(sidebar, 'hide').callThrough();
+        sinon.stub(sidebar._emitter, 'publish');
+        emitSidebarEvent('openProfile');
+        assert.calledWith(sidebar._emitter.publish, 'openProfile');
+        assert.calledOnce(sidebar.hide);
+        assert.notEqual(sidebar.iframeContainer.style.visibility, 'hidden');
+      });
+    });
+
+    describe('on "closeProfile" internal event', () => {
+      it('shows the sidebar', () => {
+        const sidebar = createSidebar();
+        sinon.stub(sidebar, 'show').callThrough();
+        sidebar._emitter.publish('closeProfile');
+        assert.calledOnce(sidebar.show);
+        assert.equal(sidebar.iframeContainer.style.visibility, '');
+      });
+    });
+
     describe('on "loginRequested" event', () => {
       it('calls the onLoginRequest callback function if one was provided', () => {
         const onLoginRequest = sandbox.stub();

src/sidebar/components/ProfileView.tsx

+/* istanbul ignore next - this is a temporary dummy implementation */
 export default function ProfileView() {
   return <div className="text-center">Profile</div>;
 }