test: add unit tests for buildFillSteps

test/build-workflow/buildFillSteps.test.ts

@@ -0,0 +1,183 @@
+import { loadFixtures } from '../loadFixtures';
+import { buildFillSteps } from '../../src/build-workflow';
+import { ElementEvent } from '../../src/types';
+
+describe('buildFillSteps', () => {
+  it('clicking and typing in a text input creates a single fill step', async () => {
+    const fillTextInput = await loadFixtures('fillTextInput');
+
+    const steps = buildFillSteps(fillTextInput.events as ElementEvent[]);
+
+    expect(steps.length).toBe(1);
+    expect(steps[0]).toMatchSnapshot();
+  });
+
+  it('clicking and editing existing text in a text input creates a single fill step', async () => {
+    const fillExistingTextInput = await loadFixtures('fillExistingTextInput');
+
+    const steps = buildFillSteps(fillExistingTextInput.events as ElementEvent[]);
+
+    expect(steps.length).toBe(1);
+    expect(steps[0]).toMatchSnapshot();
+  });
+
+  it('clicking and typing in a textarea creates a single fill step', async () => {
+    const fillTextarea = await loadFixtures('fillTextarea');
+
+    const steps = buildFillSteps(fillTextarea.events as ElementEvent[]);
+
+    expect(steps.length).toBe(1);
+    expect(steps[0]).toMatchSnapshot();
+  });
+
+  it('clicking and typing in a contenteditable creates a single fill step', async () => {
+    const fillContentEditable = await loadFixtures('fillContentEditable');
+
+    const steps = buildFillSteps(fillContentEditable.events as ElementEvent[]);
+
+    expect(steps.length).toBe(1);
+    expect(steps[0]).toMatchSnapshot();
+  });
+
+  it('clicking and editing existing text in a contenteditable creates a single fill step', async () => {
+    const fillExistingContentEditable = await loadFixtures('fillExistingContentEditable');
+
+    const steps = buildFillSteps(fillExistingContentEditable.events as ElementEvent[]);
+
+    expect(steps.length).toBe(1);
+    expect(steps[0]).toMatchSnapshot();
+  });
+
+  it('clicking and typing in a search input creates a single fill step', async () => {
+    const fillSearchInput = await loadFixtures('fillSearchInput');
+
+    const steps = buildFillSteps(fillSearchInput.events as ElementEvent[]);
+
+    expect(steps.length).toBe(1);
+    expect(steps[0]).toMatchSnapshot();
+  });
+
+  it('clicking and typing in a browser date input creates a single fill step', async () => {
+    const fillDateInput = await loadFixtures('fillDateInput');
+
+    const steps = buildFillSteps(fillDateInput.events as ElementEvent[]);
+
+    expect(steps.length).toBe(1);
+    expect(steps[0]).toMatchSnapshot();
+  });
+
+  it('clicking and typing in a browser datetime-local input creates a single fill step', async () => {
+    const fillDateTimeLocalInput = await loadFixtures('fillDateTimeLocalInput');
+
+    const steps = buildFillSteps(fillDateTimeLocalInput.events as ElementEvent[]);
+
+    expect(steps.length).toBe(1);
+    expect(steps[0]).toMatchSnapshot();
+  });
+
+  it('clicking and typing in a browser time input creates a single fill step', async () => {
+    const fillTimeInput = await loadFixtures('fillTimeInput');
+
+    const steps = buildFillSteps(fillTimeInput.events as ElementEvent[]);
+
+    expect(steps.length).toBe(1);
+    expect(steps[0]).toMatchSnapshot();
+  });
+
+  it('clicking and typing in a browser week input creates a single fill step', async () => {
+    const fillWeekInput = await loadFixtures('fillWeekInput');
+
+    const steps = buildFillSteps(fillWeekInput.events as ElementEvent[]);
+
+    expect(steps.length).toBe(1);
+    expect(steps[0]).toMatchSnapshot();
+  });
+
+  it('clicking and typing in a browser month input creates a single fill step', async () => {
+    const fillMonthInput = await loadFixtures('fillMonthInput');
+
+    const steps = buildFillSteps(fillMonthInput.events as ElementEvent[]);
+
+    expect(steps.length).toBe(1);
+    expect(steps[0]).toMatchSnapshot();
+  });
+
+  it('clicking and typing in a browser number input creates a single fill step', async () => {
+    const fillNumberInput = await loadFixtures('fillNumberInput');
+
+    const steps = buildFillSteps(fillNumberInput.events as ElementEvent[]);
+
+    expect(steps.length).toBe(1);
+    expect(steps[0]).toMatchSnapshot();
+  });
+
+  it('clicking and typing in a browser email input creates a single fill step', async () => {
+    const fillEmailInput = await loadFixtures('fillEmailInput');
+
+    const steps = buildFillSteps(fillEmailInput.events as ElementEvent[]);
+
+    expect(steps.length).toBe(1);
+    expect(steps[0]).toMatchSnapshot();
+  });
+
+  it('clicking and typing in a browser password input creates a single fill step', async () => {
+    const fillPasswordInput = await loadFixtures('fillPasswordInput');
+
+    const steps = buildFillSteps(fillPasswordInput.events as ElementEvent[]);
+
+    expect(steps.length).toBe(1);
+    expect(steps[0]).toMatchSnapshot();
+  });
+
+  it('clicking and typing in a browser phone number input creates a single fill step', async () => {
+    const fillPhoneInput = await loadFixtures('fillPhoneInput');
+
+    const steps = buildFillSteps(fillPhoneInput.events as ElementEvent[]);
+
+    expect(steps.length).toBe(1);
+    expect(steps[0]).toMatchSnapshot();
+  });
+
+  it('clicking and typing in a browser url input creates a single fill step', async () => {
+    const fillUrlInput = await loadFixtures('fillUrlInput');
+
+    const steps = buildFillSteps(fillUrlInput.events as ElementEvent[]);
+
+    expect(steps.length).toBe(1);
+    expect(steps[0]).toMatchSnapshot();
+  });
+
+  it('picking a color from a browser color input creates a single fill step', async () => {
+    const pickColorInput = await loadFixtures('pickColorInput');
+
+    const steps = buildFillSteps(pickColorInput.events as ElementEvent[]);
+
+    expect(steps.length).toBe(1);
+    expect(steps[0]).toMatchSnapshot();
+  });
+
+  it('picking a number on a browser range input creates a single fill step', async () => {
+    const pickRangeInput = await loadFixtures('pickRangeInput');
+
+    const steps = buildFillSteps(pickRangeInput.events as ElementEvent[]);
+
+    expect(steps.length).toBe(1);
+    expect(steps[0]).toMatchSnapshot();
+  });
+
+  it('clicking a checkbox does not create a fill step', async () => {
+    const selectCheckboxInput = await loadFixtures('selectCheckboxInput');
+
+    const steps = buildFillSteps(selectCheckboxInput.events as ElementEvent[]);
+
+    expect(steps.length).toBe(0);
+  });
+
+  it('clicking a radio button does not create a fill step ', async () => {
+    const selectRadioInput = await loadFixtures('selectRadioInput');
+
+    const steps = buildFillSteps(selectRadioInput.events as ElementEvent[]);
+
+    expect(steps.length).toBe(0);
+  });
+});

test/fixtures/fillDateInput.json

@@ -0,0 +1 @@
+{"events":[{"isTrusted":true,"name":"mousedown","page":0,"selector":"[data-qa=\"html-date-picker\"]","target":{"type":"tag","name":"input","voidElement":true,"attrs":{"data-qa":"html-date-picker","type":"date"},"children":[]},"time":1594312354211},{"isTrusted":true,"name":"click","page":0,"selector":"[data-qa=\"html-date-picker\"]","target":{"type":"tag","name":"input","voidElement":true,"attrs":{"data-qa":"html-date-picker","type":"date"},"children":[]},"time":1594312354261},{"isTrusted":true,"name":"keydown","page":0,"selector":"[data-qa=\"html-date-picker\"]","target":{"type":"tag","name":"input","voidElement":true,"attrs":{"data-qa":"html-date-picker","type":"date"},"children":[]},"time":1594312358208,"value":"0"},{"isTrusted":true,"name":"keyup","page":0,"selector":"[data-qa=\"html-date-picker\"]","target":{"type":"tag","name":"input","voidElement":true,"attrs":{"data-qa":"html-date-picker","type":"date"},"children":[]},"time":1594312358269,"value":"0"},{"isTrusted":true,"name":"keydown","page":0,"selector":"[data-qa=\"html-date-picker\"]","target":{"type":"tag","name":"input","voidElement":true,"attrs":{"data-qa":"html-date-picker","type":"date"},"children":[]},"time":1594312358315,"value":"4"},{"isTrusted":true,"name":"keyup","page":0,"selector":"[data-qa=\"html-date-picker\"]","target":{"type":"tag","name":"input","voidElement":true,"attrs":{"data-qa":"html-date-picker","type":"date"},"children":[]},"time":1594312358382,"value":"4"},{"isTrusted":true,"name":"keydown","page":0,"selector":"[data-qa=\"html-date-picker\"]","target":{"type":"tag","name":"input","voidElement":true,"attrs":{"data-qa":"html-date-picker","type":"date"},"children":[]},"time":1594312362320,"value":"1"},{"isTrusted":true,"name":"keydown","page":0,"selector":"[data-qa=\"html-date-picker\"]","target":{"type":"tag","name":"input","voidElement":true,"attrs":{"data-qa":"html-date-picker","type":"date"},"children":[]},"time":1594312362409,"value":"0"},{"isTrusted":true,"name":"keyup","page":0,"selector":"[data-qa=\"html-date-picker\"]","target":{"type":"tag","name":"input","voidElement":true,"attrs":{"data-qa":"html-date-picker","type":"date"},"children":[]},"time":1594312362431,"value":"1"},{"isTrusted":true,"name":"keyup","page":0,"selector":"[data-qa=\"html-date-picker\"]","target":{"type":"tag","name":"input","voidElement":true,"attrs":{"data-qa":"html-date-picker","type":"date"},"children":[]},"time":1594312362498,"value":"0"},{"isTrusted":true,"name":"keydown","page":0,"selector":"[data-qa=\"html-date-picker\"]","target":{"type":"tag","name":"input","voidElement":true,"attrs":{"data-qa":"html-date-picker","type":"date"},"children":[]},"time":1594312366956,"value":"1"},{"isTrusted":true,"name":"input","page":0,"selector":"[data-qa=\"html-date-picker\"]","target":{"type":"tag","name":"input","voidElement":true,"attrs":{"data-qa":"html-date-picker","type":"date"},"children":[]},"time":1594312366958,"value":"0001-04-10"},{"isTrusted":true,"name":"change","page":0,"selector":"[data-qa=\"html-date-picker\"]","target":{"type":"tag","name":"input","voidElement":true,"attrs":{"data-qa":"html-date-picker","type":"date"},"children":[]},"time":1594312366985,"value":"0001-04-10"},{"isTrusted":true,"name":"keyup","page":0,"selector":"[data-qa=\"html-date-picker\"]","target":{"type":"tag","name":"input","voidElement":true,"attrs":{"data-qa":"html-date-picker","type":"date"},"children":[]},"time":1594312367066,"value":"1"},{"isTrusted":true,"name":"keydown","page":0,"selector":"[data-qa=\"html-date-picker\"]","target":{"type":"tag","name":"input","voidElement":true,"attrs":{"data-qa":"html-date-picker","type":"date"},"children":[]},"time":1594312367090,"value":"9"},{"isTrusted":true,"name":"input","page":0,"selector":"[data-qa=\"html-date-picker\"]","target":{"type":"tag","name":"input","voidElement":true,"attrs":{"data-qa":"html-date-picker","type":"date"},"children":[]},"time":1594312367092,"value":"0019-04-10"},{"isTrusted":true,"name":"change","page":0,"selector":"[data-qa=\"html-date-picker\"]","target":{"type":"tag","name":"input","voidElement":true,"attrs":{"data-qa":"html-date-picker","type":"date"},"children":[]},"time":1594312367093,"value":"0019-04-10"},{"isTrusted":true,"name":"keyup","page":0,"selector":"[data-qa=\"html-date-picker\"]","target":{"type":"tag","name":"input","voidElement":true,"attrs":{"data-qa":"html-date-picker","type":"date"},"children":[]},"time":1594312367183,"value":"9"},{"isTrusted":true,"name":"keydown","page":0,"selector":"[data-qa=\"html-date-picker\"]","target":{"type":"tag","name":"input","voidElement":true,"attrs":{"data-qa":"html-date-picker","type":"date"},"children":[]},"time":1594312367250,"value":"9"},{"isTrusted":true,"name":"input","page":0,"selector":"[data-qa=\"html-date-picker\"]","target":{"type":"tag","name":"input","voidElement":true,"attrs":{"data-qa":"html-date-picker","type":"date"},"children":[]},"time":1594312367252,"value":"0199-04-10"},{"isTrusted":true,"name":"change","page":0,"selector":"[data-qa=\"html-date-picker\"]","target":{"type":"tag","name":"input","voidElement":true,"attrs":{"data-qa":"html-date-picker","type":"date"},"children":[]},"time":1594312367253,"value":"0199-04-10"},{"isTrusted":true,"name":"keyup","page":0,"selector":"[data-qa=\"html-date-picker\"]","target":{"type":"tag","name":"input","voidElement":true,"attrs":{"data-qa":"html-date-picker","type":"date"},"children":[]},"time":1594312367336,"value":"9"},{"isTrusted":true,"name":"keydown","page":0,"selector":"[data-qa=\"html-date-picker\"]","target":{"type":"tag","name":"input","voidElement":true,"attrs":{"data-qa":"html-date-picker","type":"date"},"children":[]},"time":1594312367404,"value":"9"},{"isTrusted":true,"name":"input","page":0,"selector":"[data-qa=\"html-date-picker\"]","target":{"type":"tag","name":"input","voidElement":true,"attrs":{"data-qa":"html-date-picker","type":"date"},"children":[]},"time":1594312367406,"value":"1999-04-10"},{"isTrusted":true,"name":"change","page":0,"selector":"[data-qa=\"html-date-picker\"]","target":{"type":"tag","name":"input","voidElement":true,"attrs":{"data-qa":"html-date-picker","type":"date"},"children":[]},"time":1594312367407,"value":"1999-04-10"},{"isTrusted":true,"name":"keyup","page":0,"selector":"[data-qa=\"html-date-picker\"]","target":{"type":"tag","name":"input","voidElement":true,"attrs":{"data-qa":"html-date-picker","type":"date"},"children":[]},"time":1594312367495,"value":"9"},{"isTrusted":true,"name":"keydown","page":0,"selector":"[data-qa=\"html-date-picker\"]","target":{"type":"tag","name":"input","voidElement":true,"attrs":{"data-qa":"html-date-picker","type":"date"},"children":[]},"time":1594312368597,"value":"Tab"},{"isTrusted":true,"name":"keyup","page":0,"selector":"[href=\"https://github.com/mui-org/material-ui\"]","target":{"type":"tag","name":"a","voidElement":false,"attrs":{"href":"https://github.com/mui-org/material-ui"},"children":[{"type":"text","content":"Material UI"}]},"time":1594312368687,"value":"Tab"}]}