test(e2e): write more e2e tests for provinces page and its subpages

components/contact-list.tsx

@@ -16,7 +16,10 @@ type ContactListProps = {
 export function ContactList(props: ContactListProps) {
   const contactList = useMemo(
     () => (
-      <div className="bg-white shadow overflow-hidden rounded-md">
+      <div
+        className="bg-white shadow overflow-hidden rounded-md"
+        data-testid="contact-list"
+      >
         <ul className="divide-y divide-gray-200">
           {props.data.map((contact, index) => (
             <ContactListItem

cypress/e2e/contacts/search.js

@@ -0,0 +1,49 @@
+describe("contacts page typed search", () => {
+  beforeEach(() => {
+    cy.visit("/provinces/dki-jakarta");
+  });
+
+  it("search by phone number", () => {
+    cy.findByRole("textbox", {
+      name: /cari kontak:/i,
+    }).type("08111617101");
+
+    cy.findByRole("button", {
+      name: /cari/i,
+    }).click();
+
+    cy.forEachContactItem(() =>
+      cy.findByText("08111617101").should("be.visible"),
+    );
+  });
+
+  it("search by address", () => {
+    cy.findByRole("textbox", {
+      name: /cari kontak:/i,
+    }).type("Sudirman{enter}");
+
+    cy.forEachContactItem(() =>
+      cy.findAllByText(/sudirman/i).should("be.visible"),
+    );
+  });
+
+  it("search by provider", () => {
+    cy.findByRole("textbox", {
+      name: /cari kontak:/i,
+    }).type("dompet dhuafa{enter}");
+
+    cy.forEachContactItem(() =>
+      cy.findAllByText(/dompet dhuafa/i).should("be.visible"),
+    );
+  });
+
+  it("displays the empty state when the search keyword matches nothing", () => {
+    cy.findByRole("textbox", {
+      name: /cari kontak:/i,
+    }).type("aoeu{enter}");
+
+    cy.findByRole("heading", {
+      name: /fasilitas tidak ditemukan/i,
+    }).should("be.visible");
+  });
+});

cypress/support/commands.js

@@ -23,3 +23,9 @@
 //
 // -- This will overwrite an existing command --
 // Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+
+Cypress.Commands.add("forEachContactItem", (assertionFn) => {
+  cy.findByTestId("contact-list").within(() =>
+    cy.get("li").each((contact) => cy.wrap(contact).within(assertionFn)),
+  );
+});

package.json

@@ -72,7 +72,7 @@
     "cloudinary-build-url": "^0.2.1",
     "critters": "^0.0.10",
     "cross-env": "^7.0.3",
-    "cypress": "8.2.0",
+    "cypress": "8.4.0",
     "eslint": "7.30.0",
     "eslint-config-kentcdodds": "^19.1.0",
     "eslint-config-next": "11.0.1",

yarn.lock

@@ -1541,10 +1541,10 @@
   resolved "https://registry.yarnpkg.com/@corex/deepmerge/-/deepmerge-2.6.20.tgz#a72d1cb5a101fd11160815b96f499a588362ba5b"
   integrity sha512-oZZxwDtV0bf8VPcSIhZPvdBFUkVIC8zRblUjrrVAsbGRiqUuZJfoXw2M6NDiIXWcUCfOqbkFND6Yf3b9ej9AjA==
 
-"@cypress/request@^2.88.5":
-  version "2.88.5"
-  resolved "https://registry.yarnpkg.com/@cypress/request/-/request-2.88.5.tgz#8d7ecd17b53a849cfd5ab06d5abe7d84976375d7"
-  integrity sha512-TzEC1XMi1hJkywWpRfD2clreTa/Z+lOrXDCxxBTBPEcY5azdPi56A6Xw+O4tWJnaJH3iIE7G5aDXZC6JgRZLcA==
+"@cypress/request@^2.88.6":
+  version "2.88.6"
+  resolved "https://registry.yarnpkg.com/@cypress/request/-/request-2.88.6.tgz#a970dd675befc6bdf8a8921576c01f51cc5798e9"
+  integrity sha512-z0UxBE/+qaESAHY9p9sM2h8Y4XqtsbDCt0/DPOrqA/RZgKi4PkxdpXyK4wCCnSk1xHqWHZZAE+gV6aDAR6+caQ==
   dependencies:
     aws-sign2 "~0.7.0"
     aws4 "^1.8.0"
@@ -1559,13 +1559,12 @@
     isstream "~0.1.2"
     json-stringify-safe "~5.0.1"
     mime-types "~2.1.19"
-    oauth-sign "~0.9.0"
     performance-now "^2.1.0"
     qs "~6.5.2"
     safe-buffer "^5.1.2"
     tough-cookie "~2.5.0"
     tunnel-agent "^0.6.0"
-    uuid "^3.3.2"
+    uuid "^8.3.2"
 
 "@cypress/xvfb@^1.2.4":
   version "1.2.4"
@@ -4689,12 +4688,12 @@ currently-unhandled@^0.4.1:
   dependencies:
     array-find-index "^1.0.1"
 
-cypress@8.2.0:
-  version "8.2.0"
-  resolved "https://registry.yarnpkg.com/cypress/-/cypress-8.2.0.tgz#1e4e9f6218324e82a95c1b9cad7f3965ba663d7f"
-  integrity sha512-jg7S5VxxslwsgEyAkCE9ZCkFADxOUY1bSWScp1cWnga88K0TZgFQ0zdxyG9Mw/4spLGuvkriIZ62am+TR6C04w==
+cypress@8.4.0:
+  version "8.4.0"
+  resolved "https://registry.yarnpkg.com/cypress/-/cypress-8.4.0.tgz#09ec06a73f1cb10121c103cba15076e659e24876"
+  integrity sha512-RtVgGFR06ikyMaq/VqapeqOjGaIA42PpK7F0qe1MCiFArfUuJECsLmeYaOA+1TlmNUgJNMSF5fWKkZIJr5Uc7w==
   dependencies:
-    "@cypress/request" "^2.88.5"
+    "@cypress/request" "^2.88.6"
     "@cypress/xvfb" "^1.2.4"
     "@types/node" "^14.14.31"
     "@types/sinonjs__fake-timers" "^6.0.2"
@@ -9847,11 +9846,6 @@ nwsapi@^2.2.0:
   resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.2.0.tgz#204879a9e3d068ff2a55139c2c772780681a38b7"
   integrity sha512-h2AatdwYH+JHiZpv7pt/gSX1XoRGb7L/qSIeuqA6GwYoF9w1vP1cw42TO0aI2pNyshRK5893hNSl+1//vHK7hQ==
 
-oauth-sign@~0.9.0:
-  version "0.9.0"
-  resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.9.0.tgz#47a7b016baa68b5fa0ecf3dee08a85c679ac6455"
-  integrity sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==
-
 object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
@@ -13240,11 +13234,16 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.3.2.tgz#1b4af4955eb3077c501c23872fc6513811587131"
   integrity sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA==
 
-uuid@^3.0.1, uuid@^3.3.2:
+uuid@^3.0.1:
   version "3.4.0"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"
   integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==
 
+uuid@^8.3.2:
+  version "8.3.2"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
+  integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
+
 v8-compile-cache@^2.0.3, v8-compile-cache@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz#2de19618c66dc247dcfb6f99338035d8245a2cee"