[gh-59] update test and add component e2e test

obadakhalili · Jul 27, 2022 · 54c6ca9 · 54c6ca9
1 parent c2fec43
commit 54c6ca9
Show file tree

Hide file tree

Showing 4 changed files with 324 additions and 3 deletions.
diff --git a/packages/vue3/src/VueVisualFilter/FilterCondition.vue b/packages/vue3/src/VueVisualFilter/FilterCondition.vue
@@ -82,7 +82,7 @@ export default {
       name="conditionDeletion"
       :deleteCondition="() => $emit('deleteCondition', condition)"
     >
-      <button @click="$emit('deleteCondition', condition)">x</button>
+      <button @click="$emit('deleteCondition', condition)" data-testId="remove-condition-button">x</button>
     </slot>
   </div>
 </template>
diff --git a/packages/vue3/src/VueVisualFilter/FilterGroup.vue b/packages/vue3/src/VueVisualFilter/FilterGroup.vue
@@ -58,7 +58,7 @@ export default {
         name="groupDeletion"
         :deleteGroup="() => $emit('deleteGroup', group)"
       >
-        <button @click="$emit('deleteGroup', group)">x</button>
+        <button @click="$emit('deleteGroup', group)" data-testId="remove-group-button">x</button>
       </slot>
     </div>
     <div v-if="group.filters.length" class="ml-10 space-y-1">

diff --git a/packages/vue3/src/tests/VueVisualFilter.test.js b/packages/vue3/src/tests/VueVisualFilter.test.js
@@ -1,4 +1,4 @@
-import { render, fireEvent } from "@testing-library/vue"
+import { render, fireEvent, queryByTestId } from "@testing-library/vue"
 import "@testing-library/jest-dom"
 import { GroupType, FilterType, DataType } from "@visual-filter/common"
 
@@ -208,6 +208,8 @@ test("filter of type condition renders as expected on initial render after selec
 
   await fireEvent.update(filterTypeSelect, FilterType.CONDITION)
 
+  expect(filterTypeSelect).toHaveValue(FilterType.CONDITION)
+
   const {
     data: [
       {
@@ -242,3 +244,73 @@ test("filter of type condition renders as expected on initial render after selec
 
   expect(spyFilterUpdateEvent.calls).toMatchSnapshot()
 })
+
+test("end-to-end test the component", async ({ commonProps }) => {
+  let latestCallIndex = -1
+  const spyFilterUpdateEvent = vi.fn(() => {
+    ++latestCallIndex
+  })
+  const methods = render(VueVisualFilter, {
+    props: {
+      ...commonProps,
+      onFilterUpdate: spyFilterUpdateEvent,
+    },
+  })
+
+  await fireEvent.update(
+    methods.queryByTestId("filter-type-select"),
+    FilterType.CONDITION,
+  )
+
+  expect(spyFilterUpdateEvent.calls[latestCallIndex]).toMatchSnapshot()
+
+  await fireEvent.update(
+    methods.queryByTestId("group-type-select"),
+    GroupType.OR,
+  )
+  await fireEvent.update(
+    methods.queryByTestId("filter-type-select"),
+    FilterType.GROUP,
+  )
+  await fireEvent.update(
+    methods.queryAllByTestId("filter-type-select")[1],
+    FilterType.CONDITION,
+  )
+
+  await fireEvent.update(
+    methods.queryAllByTestId("field-name-select")[1],
+    "Last Name",
+  )
+  await fireEvent.update(methods.queryAllByTestId("argument-input")[1], "Buz")
+
+  expect(spyFilterUpdateEvent.calls[latestCallIndex]).toMatchSnapshot()
+
+  await fireEvent.update(
+    methods.queryAllByTestId("filter-type-select")[1],
+    FilterType.CONDITION,
+  )
+
+  await fireEvent.update(
+    methods.queryAllByTestId("field-name-select")[2],
+    "Age",
+  )
+  await fireEvent.update(methods.queryAllByTestId("method-select")[2], ">")
+  await fireEvent.update(methods.queryAllByTestId("argument-input")[2], 18)
+
+  expect(spyFilterUpdateEvent.calls[latestCallIndex]).toMatchSnapshot()
+
+  await fireEvent.click(methods.queryByTestId("remove-group-button"))
+
+  expect(methods.queryAllByTestId("group-type-select").length).toBe(1)
+  expect(methods.queryAllByTestId("filter-type-select").length).toBe(1)
+  expect(spyFilterUpdateEvent.calls[latestCallIndex]).toMatchSnapshot()
+
+  await fireEvent.click(methods.queryByTestId("remove-condition-button"))
+  await fireEvent.update(methods.queryByTestId("group-type-select"), GroupType.AND)
+
+  expect(methods.queryAllByTestId("field-name-select").length).toBe(0)
+  expect(methods.queryAllByTestId("method-select").length).toBe(0)
+  expect(methods.queryAllByTestId("argument-input").length).toBe(0)
+
+  expect(spyFilterUpdateEvent.calls[latestCallIndex]).toMatchSnapshot()
+})
diff --git a/packages/vue3/src/tests/__snapshots__/VueVisualFilter.test.js.snap b/packages/vue3/src/tests/__snapshots__/VueVisualFilter.test.js.snap
@@ -1,5 +1,254 @@
 // Vitest Snapshot v1
 
+exports[`end-to-end test the component 1`] = `
+[
+  {
+    "data": [
+      {
+        "name": "First Name",
+        "type": "nominal",
+        "values": [
+          "Foo",
+        ],
+      },
+      {
+        "name": "Last Name",
+        "type": "nominal",
+        "values": [
+          "Bar",
+        ],
+      },
+      {
+        "name": "Age",
+        "type": "numeric",
+        "values": [
+          18,
+        ],
+      },
+    ],
+    "filter": {
+      "filters": [
+        {
+          "argument": "Foo",
+          "dataType": "nominal",
+          "fieldName": "First Name",
+          "method": "contains",
+          "type": "condition",
+        },
+      ],
+      "groupType": "and",
+      "type": "group",
+    },
+  },
+]
+`;
+
+exports[`end-to-end test the component 2`] = `
+[
+  {
+    "data": [
+      {
+        "name": "First Name",
+        "type": "nominal",
+        "values": [
+          "Foo",
+          "Fizz",
+        ],
+      },
+      {
+        "name": "Last Name",
+        "type": "nominal",
+        "values": [
+          "Bar",
+          "Buzz",
+        ],
+      },
+      {
+        "name": "Age",
+        "type": "numeric",
+        "values": [
+          18,
+          19,
+        ],
+      },
+    ],
+    "filter": {
+      "filters": [
+        {
+          "argument": "Foo",
+          "dataType": "nominal",
+          "fieldName": "First Name",
+          "method": "contains",
+          "type": "condition",
+        },
+        {
+          "filters": [
+            {
+              "argument": "Buz",
+              "dataType": "nominal",
+              "fieldName": "Last Name",
+              "method": "contains",
+              "type": "condition",
+            },
+          ],
+          "groupType": "and",
+          "type": "group",
+        },
+      ],
+      "groupType": "or",
+      "type": "group",
+    },
+  },
+]
+`;
+
+exports[`end-to-end test the component 3`] = `
+[
+  {
+    "data": [
+      {
+        "name": "First Name",
+        "type": "nominal",
+        "values": [
+          "Foo",
+          "Fizz",
+        ],
+      },
+      {
+        "name": "Last Name",
+        "type": "nominal",
+        "values": [
+          "Bar",
+          "Buzz",
+        ],
+      },
+      {
+        "name": "Age",
+        "type": "numeric",
+        "values": [
+          18,
+          19,
+        ],
+      },
+    ],
+    "filter": {
+      "filters": [
+        {
+          "argument": "Foo",
+          "dataType": "nominal",
+          "fieldName": "First Name",
+          "method": "contains",
+          "type": "condition",
+        },
+        {
+          "filters": [
+            {
+              "argument": "Buz",
+              "dataType": "nominal",
+              "fieldName": "Last Name",
+              "method": "contains",
+              "type": "condition",
+            },
+            {
+              "argument": "18",
+              "dataType": "numeric",
+              "fieldName": "Age",
+              "method": ">",
+              "type": "condition",
+            },
+          ],
+          "groupType": "and",
+          "type": "group",
+        },
+      ],
+      "groupType": "or",
+      "type": "group",
+    },
+  },
+]
+`;
+
+exports[`end-to-end test the component 4`] = `
+[
+  {
+    "data": [
+      {
+        "name": "First Name",
+        "type": "nominal",
+        "values": [
+          "Foo",
+        ],
+      },
+      {
+        "name": "Last Name",
+        "type": "nominal",
+        "values": [
+          "Bar",
+        ],
+      },
+      {
+        "name": "Age",
+        "type": "numeric",
+        "values": [
+          18,
+        ],
+      },
+    ],
+    "filter": {
+      "filters": [
+        {
+          "argument": "Foo",
+          "dataType": "nominal",
+          "fieldName": "First Name",
+          "method": "contains",
+          "type": "condition",
+        },
+      ],
+      "groupType": "or",
+      "type": "group",
+    },
+  },
+]
+`;
+
+exports[`end-to-end test the component 5`] = `
+[
+  {
+    "data": [
+      {
+        "name": "First Name",
+        "type": "nominal",
+        "values": [
+          "Foo",
+          "Fizz",
+        ],
+      },
+      {
+        "name": "Last Name",
+        "type": "nominal",
+        "values": [
+          "Bar",
+          "Buzz",
+        ],
+      },
+      {
+        "name": "Age",
+        "type": "numeric",
+        "values": [
+          18,
+          19,
+        ],
+      },
+    ],
+    "filter": {
+      "filters": [],
+      "groupType": "and",
+      "type": "group",
+    },
+  },
+]
+`;
+
 exports[`expect \`onFilterUpdate\` event to be called with correct parameters when changing group type select 1`] = `
 [
   [