feat(blocks): Add support of blocks

ideal-postcodes · May 8, 2024 · 1d07520 · 1d07520
1 parent 7d159e6
commit 1d07520
Show file tree

Hide file tree

Showing 15 changed files with 279 additions and 65 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -64,3 +64,15 @@ jobs:
         env:
           CYPRESS_WC_VERSION: "80"
           CYPRESS_API_KEY: ${{ secrets.API_KEY }}
+  woocommerce_8_8:
+    runs-on: ubuntu-20.04
+    steps:
+      - uses: actions/checkout@v1
+      - name: Launch WooCommerce 8.8
+        run: make bootstrap-82
+        env:
+          COMPOSE_INTERACTIVE_NO_CLI: 1
+      - uses: cypress-io/github-action@v2
+        env:
+          CYPRESS_WC_VERSION: "82"
+          CYPRESS_API_KEY: ${{ secrets.API_KEY }}
diff --git a/Makefile b/Makefile
@@ -90,6 +90,10 @@ bootstrap-70: up-70 init-db init-wp init-wc seed init-ip
 .PHONY: bootstrap-80
 bootstrap-80: up-80 init-db init-wp init-wc seed init-ip
 
+## Bootstrap 8.8.3 WooCommerce environment
+.PHONY: bootstrap-82
+bootstrap-82: up-82 init-db init-wp init-wc seed init-ip
+
 ## Launch WC 4.2
 .PHONY: up-42
 up-42:
@@ -181,6 +185,12 @@ up-80:
 	docker-compose -f docker-compose.yml -f docker/80.yml up -d
 
 
+## Launch WC 8.8.3 with WP 6
+.PHONY: up-82
+up-82:
+	docker-compose -f docker-compose.yml -f docker/82.yml up -d
+
+
 ## -- Development Methods --
 
 ## Shell into Wordpress container

diff --git a/cypress/integration/003_checkout.ts b/cypress/integration/003_checkout.ts
@@ -2,6 +2,8 @@
 import { address as addresses } from "@ideal-postcodes/api-fixtures";
 import { selectors as billingSelectors } from "../../lib/checkout_billing";
 import { selectors as shippingSelectors } from "../../lib/checkout_shipping";
+import { selectors as billingBlocksSelectors } from "../../lib/checkout_blocks_billing";
+import { selectors as shippingBlockSelectors } from "../../lib/checkout_blocks_shipping";
 
 const address = addresses.jersey;
 
@@ -10,42 +12,48 @@ Cypress.on("uncaught:exception", (err, runnable) => {
   return false;
 });
 
+const isBlocks = parseInt(Cypress.env("WC_VERSION"), 10) >= 82;
+
 describe("Checkout", () => {
-  before(() => {
+  beforeEach(() => {
     cy.login();
     cy.visit("/?product=test");
     cy.get("button[name='add-to-cart']").click({ force: true });
     cy.get("a").contains("View cart").click({ force: true });
-    cy.get("a").contains("Proceed to checkout").click({ force: true });
+    cy.get("a").contains("Proceed to checkout", { matchCase: false }).click({ force: true });
   });
 
   it("Autocomplete", function () {
     const events = { triggered: false };
-
+    const selectors = isBlocks ? billingBlocksSelectors : billingSelectors;
     cy.window().then((window) => {
       window.jQuery(window.document.body).on("update_checkout", () => {
         events.triggered = true;
       });
-      cy.get(".woocommerce-billing-fields").within(() => {
+      if(isBlocks) {
+        cy.get("#checkbox-control-0").uncheck();
+        cy.wait(200);
+      }
+      cy.get(isBlocks ? "#billing" : ".woocommerce-billing-fields").within(() => {
         if (!Cypress.env("LEGACY")) {
-          cy.get(billingSelectors.country).select("GB", { force: true });
+          isBlocks ? cy.get(selectors.country).type("United Kingdom").type("{enter}") : cy.get(selectors.country).select("GB", { force: true });
           cy.wait(1000);
         }
-        cy.get(billingSelectors.line_1)
+        cy.get(selectors.line_1)
           .click({ force: true })
           .focus()
           .type(address.line_1);
         //here wait because it not catching the xhr call to get list
         cy.wait(5000);
-        cy.get(billingSelectors.line_1).clear();
-        cy.get(billingSelectors.line_1).type(address.line_1);
+        cy.get(selectors.line_1).clear();
+        cy.get(selectors.line_1).type(address.line_1);
         cy.wait(500);
         cy.get(".idpc_ul li").first().click({ force: true });
-        cy.get(billingSelectors.post_town).should(
+        cy.get(selectors.post_town).should(
           "have.value",
           "Jersey"
         );
-        cy.get(billingSelectors.postcode).should(
+        cy.get(selectors.postcode).should(
           "have.value",
           address.postcode
         );
@@ -56,15 +64,18 @@ describe("Checkout", () => {
 
   it("Postcode Lookup", function () {
     const events = { triggered: false };
-
+    const selectors = isBlocks ? billingBlocksSelectors : billingSelectors;
     cy.window().then((window) => {
       window.jQuery(window.document.body).on("update_checkout", () => {
         events.triggered = true;
       });
-
-      cy.get(".woocommerce-billing-fields").within(() => {
+      if(isBlocks) {
+        cy.get("#checkbox-control-0").uncheck();
+        cy.wait(200);
+      }
+      cy.get(isBlocks ? "#billing" : ".woocommerce-billing-fields").within(() => {
         if (!Cypress.env("LEGACY")) {
-          cy.get(billingSelectors.country).select("GB", { force: true });
+          isBlocks ? cy.get(selectors.country).type("United Kingdom").type("{enter}") : cy.get(selectors.country).select("GB", { force: true });
           cy.wait(1000);
         }
         cy.get("#idpc_input")
@@ -73,11 +84,11 @@ describe("Checkout", () => {
         cy.get("#idpc_button").click({ force: true });
         cy.wait(1000);
         cy.get("#idpc_dropdown").select("0");
-        cy.get(billingSelectors.post_town).should(
+        cy.get(selectors.post_town).should(
           "have.value",
           "Jersey"
         );
-        cy.get(billingSelectors.postcode).should(
+        cy.get(selectors.postcode).should(
           "have.value",
           address.postcode
         );
@@ -88,34 +99,35 @@ describe("Checkout", () => {
   });
 
   describe("Shipping", function () {
+    const selectors = isBlocks ? shippingBlockSelectors : shippingSelectors;
     before(function () {
-      cy.get("#ship-to-different-address-checkbox").check();
+      if(!isBlocks) cy.get("#ship-to-different-address-checkbox").check();
     });
 
     it("Autocomplete", function () {
-      cy.get(".woocommerce-shipping-fields").within(() => {
+      cy.get(isBlocks ? "#shipping" : ".woocommerce-shipping-fields").within(() => {
         if (!Cypress.env("LEGACY")) {
-          cy.get(shippingSelectors.country).select("GB", { force: true });
+          isBlocks ? cy.get(selectors.country).type("United Kingdom").type("{enter}") : cy.get(selectors.country).select("GB", { force: true });
           cy.wait(1000);
         }
-        cy.get(shippingSelectors.line_1).clear().type(address.line_1);
+        cy.get(selectors.line_1).clear().type(address.line_1);
         cy.wait(500);
         cy.get(".idpc_ul li").first().click({ force: true });
-        cy.get(shippingSelectors.post_town).should(
+        cy.get(selectors.post_town).should(
           "have.value",
           "Jersey"
         );
-        cy.get(shippingSelectors.postcode).should(
+        cy.get(selectors.postcode).should(
           "have.value",
           address.postcode
         );
       });
     });
 
     it("Postcode Lookup", function () {
-      cy.get(".woocommerce-shipping-fields").within(() => {
+      cy.get(isBlocks ? "#shipping" : ".woocommerce-shipping-fields").within(() => {
         if (!Cypress.env("LEGACY")) {
-          cy.get(shippingSelectors.country).select("GB", { force: true });
+          isBlocks ? cy.get(selectors.country).type("United Kingdom").type("{enter}") : cy.get(selectors.country).select("GB", { force: true });
           cy.wait(1000);
         }
         cy.get("#idpc_input")
@@ -124,11 +136,11 @@ describe("Checkout", () => {
         cy.get("#idpc_button").click({ force: true });
         cy.wait(1000);
         cy.get("#idpc_dropdown").select("0");
-        cy.get(shippingSelectors.post_town).should(
+        cy.get(selectors.post_town).should(
           "have.value",
           "Jersey"
         );
-        cy.get(shippingSelectors.postcode).should(
+        cy.get(selectors.postcode).should(
           "have.value",
           address.postcode
         );

diff --git a/cypress/integration/006_separate_finder.ts b/cypress/integration/006_separate_finder.ts
@@ -1,6 +1,9 @@
 /// <reference types="cypress" />;
 import { address as addresses } from "@ideal-postcodes/api-fixtures";
-import { selectors } from "../../lib/checkout_billing";
+import { selectors as billingSelectors } from "../../lib/checkout_billing";
+import {
+  selectors as billingBlocksSelectors
+} from "../../lib/checkout_blocks_billing";
 
 const address = addresses.jersey;
 
@@ -9,7 +12,14 @@ Cypress.on("uncaught:exception", (err, runnable) => {
   return false;
 });
 
-describe("Separate finder", () => {
+const isBlocks = parseInt(Cypress.env("WC_VERSION"), 10) >= 82;
+
+isBlocks && describe("Separate finder", function () {
+  it.skip("when enabled renders address finder in new field")
+})
+
+!isBlocks && describe("Separate finder", function () {
+  const selectors = isBlocks ? billingBlocksSelectors : billingSelectors;
   beforeEach(function () {
     cy.login();
     cy.visit(
@@ -38,11 +48,15 @@ describe("Separate finder", () => {
       cy.visit("/?product=test");
       cy.get("button[name='add-to-cart']").click({ force: true });
       cy.get("a").contains("View cart").click({ force: true });
-      cy.get("a").contains("Proceed to checkout").click({ force: true });
-      cy.get(".woocommerce-billing-fields").within(() => {
+      cy.get("a").contains("Proceed to checkout", { matchCase: false }).click({ force: true });
+      if(isBlocks) {
+        cy.get("#checkbox-control-0").uncheck();
+        cy.wait(200);
+      }
+      cy.get(isBlocks ? "#billing" : ".woocommerce-billing-fields").within(() => {
         cy.wait(1000);
         if (!Cypress.env("LEGACY")) {
-          cy.get(selectors.country).select("GB", { force: true });
+          isBlocks ? cy.get(selectors.country).type("United Kingdom").type("{enter}") : cy.get(selectors.country).select("GB", { force: true });
           cy.wait(1000);
         }
         cy.get(selectors.line_1)

diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts
@@ -47,7 +47,8 @@ declare namespace Cypress {
     installwc59(): void;
     installwc60(): void;
     installwc70(): void;
-    installwc80(): void
+    installwc80(): void;
+    installwc82(): void;
   }
 }
 
@@ -396,3 +397,34 @@ Cypress.Commands.add("installwc80", () => {
   cy.url({ timeout: 300000 }).should('contain', '/wp-admin/admin.php?page=wc-admin');
   cy.wait(1000);
 })
+
+Cypress.Commands.add("installwc82", () => {
+  cy.login();
+  cy.visit("/wp-admin/admin.php?page=wc-admin&path=%2Fsetup-wizard");
+  cy.get(".components-button.woocommerce-profiler-setup-store__button.is-primary").click();
+  cy.wait(1000);
+  cy.get(".components-button.woocommerce-profiler-button.is-primary").click();
+  cy.wait(1000);
+  cy.get("#woocommerce-select-control-0__control-input").click();
+  cy.wait(200);
+  cy.get("#woocommerce-select-control__option-0-electronics_and_computers").click({ force: true });
+  cy.get("#woocommerce-select-control-1__control-input").click();
+  cy.wait(200);
+  cy.get("#woocommerce-select-control__option-1-GB").click({ force: true });
+  cy.wait(200);
+  cy.get(".components-button.woocommerce-profiler-button.is-primary").click();
+  cy.wait(1000);
+  cy.get(".components-button.woocommerce-profiler-navigation-skip-link.is-link").click();
+  cy.url({ timeout: 300000 }).should('contain', '/wp-admin/admin.php?page=wc-admin');
+  cy.contains("Get your products shipped").click();
+  cy.url({ timeout: 300000 }).should('contain', '/wp-admin/admin.php?page=wc-admin&task=shipping');
+  cy.get("#woocommerce-shipping-rate__toggle-0").click();
+  cy.contains("Save shipping options").click();
+  cy.get(".components-button.woocommerce-task-shipping-recommendations_skip-button.dual.is-tertiary").click();
+  cy.url({ timeout: 300000 }).should('contain', '/wp-admin/admin.php?page=wc-admin');
+  cy.contains("Collect sales tax").click();
+  cy.url({ timeout: 300000 }).should('contain', '/wp-admin/admin.php?page=wc-admin&task=tax');
+  cy.contains("I don't charge sales tax").click();
+  cy.url({ timeout: 300000 }).should('contain', '/wp-admin/admin.php?page=wc-admin');
+  cy.wait(1000);
+})
diff --git a/docker/82.yml b/docker/82.yml
@@ -0,0 +1,8 @@
+version: "3.3"
+services:
+  web:
+    build:
+      args:
+        # for now there is beta image for wp 5.8
+        BASE_IMAGE: wordpress:6.5.2-apache
+        WOOCOMMERCE_VERSION: 8.8.3
diff --git a/lib/checkout_blocks_billing.ts b/lib/checkout_blocks_billing.ts
@@ -0,0 +1,21 @@
+import { Binding } from "@ideal-postcodes/jsutil";
+import { newBind } from "./extension";
+
+export const pageTest = (): boolean => {
+  return document.querySelector('div[data-block-name="woocommerce/checkout"]') !== null;
+}
+
+export const selectors = {
+  line_1: "#billing-address_1",
+  line_2: "#billing-address_2",
+  post_town: "#billing-city",
+  county: "#billing-state",
+  postcode: "#billing-postcode",
+  organisation_name: "#billing-company",
+  country: "#billing-country input",
+};
+
+export const bind = newBind(selectors, true);
+
+//@ts-ignore
+export const binding: Binding = { pageTest, bind };
diff --git a/lib/checkout_blocks_shipping.ts b/lib/checkout_blocks_shipping.ts
@@ -0,0 +1,20 @@
+import { Binding } from "@ideal-postcodes/jsutil";
+import { newBind } from "./extension";
+
+export const pageTest = (): boolean =>
+  document.querySelector('div[data-block-name="woocommerce/checkout"]') !== null;
+
+export const selectors = {
+  line_1: "#shipping-address_1",
+  line_2: "#shipping-address_2",
+  post_town: "#shipping-city",
+  county: "#shipping-state",
+  postcode: "#shipping-postcode",
+  organisation_name: "#shipping-company",
+  country: "#shipping-country input",
+};
+
+export const bind = newBind(selectors, true);
+
+//@ts-ignore
+export const binding: Binding = { pageTest, bind };