CrateSidebar: Link report button to support page

The report form's crate field should be automatically filled when
navigating from the report button in the CrateSidebar.

Author: eth3lbert

app/components/crate-sidebar.hbs

@@ -130,11 +130,13 @@
       {{/unless}}
     {{/if}}
 
-    <a
-      href="mailto:[email protected]?subject=The%20%22{{@crate.name}}%22%20crate&body=I'm%20reporting%20the%20https%3A%2F%2Fcrates.io%2Fcrates%2F{{@crate.name}}%20crate%20because%3A%0A%0A-%20%5B%20%5D%20it%20contains%20spam%0A-%20%5B%20%5D%20it%20is%20name-squatting%20(reserving%20a%20crate%20name%20without%20content)%0A-%20%5B%20%5D%20it%20is%20abusive%20or%20otherwise%20harmful%0A-%20%5B%20%5D%20it%20contains%20a%20vulnerability%20(please%20try%20to%20contact%20the%20crate%20author%20first)%0A-%20%5B%20%5D%20it%20is%20violating%20the%20usage%20policy%20in%20some%20other%20way%20(please%20specify%20below)%0A%0AAdditional%20details%3A%0A%0A%3Cplease%20add%20more%20information%20if%20you%20can%3E"
+    <LinkTo
+      @route="support"
+      @query={{hash inquire="crate-violation" crate=@crate.name}}
+      data-test-id="link-crate-report"
       local-class="report-button"
     >
       Report crate
-    </a>
+    </LinkTo>
   </div>
 </section>

e2e/acceptance/support.spec.ts

@@ -178,6 +178,138 @@ Additional details:
 
 Additional details:
 
+test detail
+`;
+      let subject = `The "nanomsg" crate`;
+      let address = '[email protected]';
+      let mailto = `mailto:${address}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
+      // wait for `window.open()` to be called
+      await page.waitForFunction(() => !!globalThis.openKwargs);
+      await page.waitForFunction(expect => globalThis.openKwargs.url === expect, mailto);
+      await page.waitForFunction(expect => globalThis.openKwargs.target === expect, '_self');
+    });
+  });
+
+  test.describe('reporting a crate from crate page', () => {
+    test.beforeEach(async ({ page, mirage }) => {
+      await mirage.config({ trackRequests: true });
+      await mirage.addHook(server => {
+        globalThis._routes = server._config.routes;
+        let crate = server.create('crate', { name: 'nanomsg' });
+        server.create('version', { crate, num: '0.6.0' });
+      });
+      // mock `window.open()`
+      await page.addInitScript(() => {
+        globalThis.open = (url, target, features) => {
+          globalThis.openKwargs = { url, target, features };
+          return { document: { write() {}, close() {} }, close() {} } as ReturnType<(typeof globalThis)['open']>;
+        };
+      });
+
+      await page.goto('/crates/nanomsg');
+      await page.getByTestId('link-crate-report').click();
+      await expect(page).toHaveURL('/support?crate=nanomsg&inquire=crate-violation');
+      await expect(page.getByTestId('crate-input')).toHaveValue('nanomsg');
+    });
+
+    test('empty crate should shows errors', async ({ page }) => {
+      const crateInput = page.getByTestId('crate-input');
+      await crateInput.fill('');
+      await expect(crateInput).toHaveValue('');
+      const reportButton = page.getByTestId('report-button');
+      await reportButton.click();
+
+      await expect(page.getByTestId('crate-invalid')).toBeVisible();
+      await expect(page.getByTestId('reasons-invalid')).toBeVisible();
+      await expect(page.getByTestId('detail-invalid')).not.toBeVisible();
+
+      await page.waitForFunction(() => globalThis.openKwargs === undefined);
+    });
+
+    test('other reason selected without given detail shows an error', async ({ page }) => {
+      const spam = page.getByTestId('spam-checkbox');
+      await spam.check();
+      await expect(spam).toBeChecked();
+      const other = page.getByTestId('other-checkbox');
+      await other.check();
+      await expect(other).toBeChecked();
+      const detailInput = page.getByTestId('detail-input');
+      await expect(detailInput).toHaveValue('');
+      const reportButton = page.getByTestId('report-button');
+      await reportButton.click();
+
+      await expect(page.getByTestId('crate-invalid')).not.toBeVisible();
+      await expect(page.getByTestId('reasons-invalid')).not.toBeVisible();
+      await expect(page.getByTestId('detail-invalid')).toBeVisible();
+
+      await page.waitForFunction(() => globalThis.openKwargs === undefined);
+    });
+
+    test('valid form without detail', async ({ page }) => {
+      const spam = page.getByTestId('spam-checkbox');
+      await spam.check();
+      await expect(spam).toBeChecked();
+      const detailInput = page.getByTestId('detail-input');
+      await expect(detailInput).toHaveValue('');
+
+      await page.waitForFunction(() => globalThis.openKwargs === undefined);
+      const reportButton = page.getByTestId('report-button');
+      await reportButton.click();
+
+      await expect(page.getByTestId('crate-invalid')).not.toBeVisible();
+      await expect(page.getByTestId('reasons-invalid')).not.toBeVisible();
+      await expect(page.getByTestId('detail-invalid')).not.toBeVisible();
+
+      let body = `I'm reporting the https://crates.io/crates/nanomsg crate because:
+
+- [x] it contains spam
+- [ ] it is name-squatting (reserving a crate name without content)
+- [ ] it is abusive or otherwise harmful
+- [ ] it contains a vulnerability (please try to contact the crate author first)
+- [ ] it is violating the usage policy in some other way (please specify below)
+
+Additional details:
+
+
+`;
+      let subject = `The "nanomsg" crate`;
+      let address = '[email protected]';
+      let mailto = `mailto:${address}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
+      // wait for `window.open()` to be called
+      await page.waitForFunction(() => !!globalThis.openKwargs);
+      await page.waitForFunction(expect => globalThis.openKwargs.url === expect, mailto);
+      await page.waitForFunction(expect => globalThis.openKwargs.target === expect, '_self');
+    });
+
+    test('valid form with required detail', async ({ page }) => {
+      const spam = page.getByTestId('spam-checkbox');
+      await spam.check();
+      await expect(spam).toBeChecked();
+      const other = page.getByTestId('other-checkbox');
+      await other.check();
+      await expect(other).toBeChecked();
+      const detailInput = page.getByTestId('detail-input');
+      await detailInput.fill('test detail');
+      await expect(detailInput).toHaveValue('test detail');
+
+      await page.waitForFunction(() => globalThis.openKwargs === undefined);
+      const reportButton = page.getByTestId('report-button');
+      await reportButton.click();
+
+      await expect(page.getByTestId('crate-invalid')).not.toBeVisible();
+      await expect(page.getByTestId('reasons-invalid')).not.toBeVisible();
+      await expect(page.getByTestId('detail-invalid')).not.toBeVisible();
+
+      let body = `I'm reporting the https://crates.io/crates/nanomsg crate because:
+
+- [x] it contains spam
+- [ ] it is name-squatting (reserving a crate name without content)
+- [ ] it is abusive or otherwise harmful
+- [ ] it contains a vulnerability (please try to contact the crate author first)
+- [x] it is violating the usage policy in some other way (please specify below)
+
+Additional details:
+
 test detail
 `;
       let subject = `The "nanomsg" crate`;

tests/acceptance/support-test.js

@@ -180,6 +180,123 @@ Additional details:
 
 Additional details:
 
+test detail
+`;
+      let subject = `The "nanomsg" crate`;
+      let address = '[email protected]';
+      let mailto = `mailto:${address}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
+      assert.true(!!window.openKwargs);
+      assert.strictEqual(window.openKwargs.url, mailto);
+      assert.strictEqual(window.openKwargs.target, '_self');
+    });
+  });
+
+  module('reporting a crate from crate page', function () {
+    setupWindowMock(hooks);
+
+    async function prepare(context, assert) {
+      let server = context.server;
+      let crate = server.create('crate', { name: 'nanomsg' });
+      server.create('version', { crate, num: '0.6.0' });
+
+      window.open = (url, target, features) => {
+        window.openKwargs = { url, target, features };
+        return { document: { write() {}, close() {} }, close() {} };
+      };
+
+      await visit('/crates/nanomsg');
+      await click('[data-test-id="link-crate-report"]');
+      assert.strictEqual(currentURL(), '/support?crate=nanomsg&inquire=crate-violation');
+      assert.dom('[data-test-id="crate-input"]').hasValue('nanomsg');
+    }
+
+    test('empty crate should shows errors', async function (assert) {
+      await prepare(this, assert);
+      await fillIn('[data-test-id="crate-input"]', '');
+      assert.dom('[data-test-id="crate-input"]').hasValue('');
+      await click('[data-test-id="report-button"]');
+
+      assert.dom('[data-test-id="crate-invalid"]').exists();
+      assert.dom('[data-test-id="reasons-invalid"]').exists();
+      assert.dom('[data-test-id="detail-invalid"]').doesNotExist();
+
+      assert.strictEqual(window.openKwargs, undefined);
+    });
+
+    test('other reason selected without given detail shows an error', async function (assert) {
+      await prepare(this, assert);
+
+      await click('[data-test-id="spam-checkbox"]');
+      assert.dom('[data-test-id="spam-checkbox"]').isChecked();
+      await click('[data-test-id="other-checkbox"]');
+      assert.dom('[data-test-id="other-checkbox"]').isChecked();
+      assert.dom('[data-test-id="detail-input"]').hasValue('');
+      await click('[data-test-id="report-button"]');
+
+      assert.dom('[data-test-id="crate-invalid"]').doesNotExist();
+      assert.dom('[data-test-id="reasons-invalid"]').doesNotExist();
+      assert.dom('[data-test-id="detail-invalid"]').exists();
+
+      assert.strictEqual(window.openKwargs, undefined);
+    });
+
+    test('valid form without detail', async function (assert) {
+      await prepare(this, assert);
+
+      await click('[data-test-id="spam-checkbox"]');
+      assert.dom('[data-test-id="spam-checkbox"]').isChecked();
+      assert.dom('[data-test-id="detail-input"]').hasValue('');
+      await click('[data-test-id="report-button"]');
+
+      assert.dom('[data-test-id="crate-invalid"]').doesNotExist();
+      assert.dom('[data-test-id="reasons-invalid"]').doesNotExist();
+      assert.dom('[data-test-id="detail-invalid"]').doesNotExist();
+
+      let body = `I'm reporting the https://crates.io/crates/nanomsg crate because:
+
+- [x] it contains spam
+- [ ] it is name-squatting (reserving a crate name without content)
+- [ ] it is abusive or otherwise harmful
+- [ ] it contains a vulnerability (please try to contact the crate author first)
+- [ ] it is violating the usage policy in some other way (please specify below)
+
+Additional details:
+
+
+`;
+      let subject = `The "nanomsg" crate`;
+      let address = '[email protected]';
+      let mailto = `mailto:${address}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
+      assert.true(!!window.openKwargs);
+      assert.strictEqual(window.openKwargs.url, mailto);
+      assert.strictEqual(window.openKwargs.target, '_self');
+    });
+
+    test('valid form with required detail', async function (assert) {
+      await prepare(this, assert);
+
+      await click('[data-test-id="spam-checkbox"]');
+      assert.dom('[data-test-id="spam-checkbox"]').isChecked();
+      await click('[data-test-id="other-checkbox"]');
+      assert.dom('[data-test-id="other-checkbox"]').isChecked();
+      await fillIn('[data-test-id="detail-input"]', 'test detail');
+      assert.dom('[data-test-id="detail-input"]').hasValue('test detail');
+      await click('[data-test-id="report-button"]');
+
+      assert.dom('[data-test-id="crate-invalid"]').doesNotExist();
+      assert.dom('[data-test-id="reasons-invalid"]').doesNotExist();
+      assert.dom('[data-test-id="detail-invalid"]').doesNotExist();
+
+      let body = `I'm reporting the https://crates.io/crates/nanomsg crate because:
+
+- [x] it contains spam
+- [ ] it is name-squatting (reserving a crate name without content)
+- [ ] it is abusive or otherwise harmful
+- [ ] it contains a vulnerability (please try to contact the crate author first)
+- [x] it is violating the usage policy in some other way (please specify below)
+
+Additional details:
+
 test detail
 `;
       let subject = `The "nanomsg" crate`;