Repository: ionic-team/ionic-framework
File: core/src/components/button/test/form-reference/button.e2e.ts (TypeScript)

Code before:
         <ion-button type="submit">Submit</ion-button>
      </form>
    `);

    const submitEvent = await page.spyOnEvent('submit');

    await page.click('ion-button');

    expect(submitEvent).toHaveReceivedEvent();
  });

  test.describe('should throw a warning if the form cannot be found', () => {
    test('form is a string selector', async ({ page }) => {
      await page.setContent(`<ion-button type="submit" form="missingForm">Submit</ion-button>`);

      const logs: string[] = [];

      page.on('console', (msg) => {
        logs.push(msg.text());
      });

      await page.click('ion-button');

      expect(logs.length).toBe(1);
      expect(logs[0]).toContain(
        '[Ionic Warning]: Form with selector: "#missingForm" could not be found. Verify that the selector is correct and the form is rendered in the DOM.'
      );
    });

    test('form is an element reference', async ({ page }) => {
      await page.setContent(`
        <ion-button type="submit">Submit</ion-button>
        <script>
          const form = document.querySelector('form');
          const button = document.querySelector('ion-button');

          button.form = form;
        </script>
      `);

      const logs: string[] = [];

      page.on('console', (msg) => {
        logs.push(msg.text());
      });

      await page.click('ion-button');

      expect(logs.length).toBe(1);
      expect(logs[0]).toContain(
        '[Ionic Warning]: The provided "form" element could not be found. Verify that the form is rendered in the DOM.'

Review comment (bug):
This check seems brittle. The moment we change the contents of the warning, this test will fail. Are you trying to check that a warning is logged or are you trying to check what the contents of the warning are?

Code after:
         <ion-button type="submit">Submit</ion-button>
      </form>
    `);

    const submitEvent = await page.spyOnEvent('submit');

    await page.click('ion-button');

    expect(submitEvent).toHaveReceivedEvent();
  });

  test.describe('should throw a warning if the form cannot be found', () => {
    test('form is a string selector', async ({ page }) => {
      await page.setContent(`<ion-button type="submit" form="missingForm">Submit</ion-button>`);

      const logs: string[] = [];

      page.on('console', (msg) => {
        logs.push(msg.text());
      });

      await page.click('ion-button');

      expect(logs.length).toBe(1);
      expect(logs[0]).toContain(
        '[Ionic Warning]: Form with selector: "#missingForm" could not be found. Verify that the id is correct and the form is rendered in the DOM.'
      );
    });

    test('form is an element reference', async ({ page }) => {
      await page.setContent(`
        <ion-button type="submit">Submit</ion-button>
        <script>
          const form = document.querySelector('form');
          const button = document.querySelector('ion-button');

          button.form = form;
        </script>
      `);

      const logs: string[] = [];

      page.on('console', (msg) => {
        logs.push(msg.text());
      });

      await page.click('ion-button');

      expect(logs.length).toBe(1);
      expect(logs[0]).toContain(
        '[Ionic Warning]: The provided "form" element is invalid. Verify that the form is a HTMLFormElement and rendered in the DOM.'