QA: Emails & Messages App testing

[lkostrowski]

App installation:

• User with the Manage Apps and Manage orders permission should be able to install the app
• After the app installation, the configuration panel should be accessible

Channels configuration:

• All shop channels should be displayed in the sidebar (change of the store channels should be reflected in that)
• If teres no MJML configuration, the select field should be disabled and the helper message should point the User to the MJML tab to create one

MJML

MJML Configuration tab:

• User should be able to add MJML configuration using the plus icon
• User should be able to modify the existing MJML configuration
• User should be able to remove the MJML configuration using bin icon on the configurations sidebar
• User should see validation errors displayed if the form is filled improperly
• User should be able to turn on and off events

MJML Event editing view:

• If the user change width of the browser, the 2 column layout should change to single column
• Change of the email subject should be reflected by the preview
• User should be able to use handlebars templates in the subject field (example {{ order.id }}) with the data in the example payload
• Change of the email template should be reflected by the preview
• User should be able to use handlebars templates in the email body

MJML Emails delivery:

To test if the emails are sent, I recommend using the https://mailtrap.io/ and fill SMTP details in the MJML configuration.

• if the channel configuration is not active, the email should not be sent
• if MJML configuration is not active, the email should not be sent
• if the event is not active, the email should not be sent

Sendgrid

Configuration tab

• User should be able to add configuration using the plus icon
• User should be able to modify the existing configuration
• User should be able to remove the configuration using bin icon on the configurations sidebar
• User should see validation errors displayed if the form is filled improperly
• User should be able to turn on and off events
• User should be able to choose sender from the select field, after the proper API Key is saved in the configuration

Event configuration tab

• User should be able to choose one of the existing dynamic templates (has to be created in Sendgrid dashboard)

Installation manifest URLs

https://emails-and-messages.saleor.app/api/manifest
https://emails-and-messages.staging.saleor.app/api/manifest

[lkostrowski]

@krzysztofwolski please prepare some basic user stories / scenarios, so QA can pick this up and run some tests before its released in Appstore

cc @michalina-graczyk

[szczecha]

Validation errors appear only for a second

App version staging 1.1.0

1. Install the app
2. Go to the MJML tab and create a new configuration
3. Save the empty form
   Result: Only general error is shown
   After recording, I see that there are error messages under the input but they disappear too quickly

Error.handling.Email.App.mov

[szczecha]

Email is sent when MJML config is not active

App version staging 1.1.0

Config:
Request URL: https://emails-and-messages.staging.saleor.app/api/trpc/appConfiguration.getChannelConfiguration?batch=1&input=%7B%220%22%3A%7B%22channelSlug%22%3A%22default-channel%22%7D%7D
{result: {data: {active: true,

Request URL: https://emails-and-messages.staging.saleor.app/api/trpc/mjmlConfiguration.getConfigurations?batch=1&input=%7B%7D

[
    {
        "result": {
            "data": [
                {
                    "id": "1679494839016",
                    "active": false,
                    "configurationName": "MailTrap",
                    "senderName": "SaleorSender",
                    "senderEmail": "sender@example.com",
                    "smtpHost": "sandbox.smtp.mailtrap.io",
                    "smtpPort": "2525",
                    "smtpUser": "***",
                    "smtpPassword": "***",
                    "encryption": "TLS",
                    "events": [
                        {
                            "active": true,
                            "eventType": "ORDER_CREATED",
                            "template": "\n<mjml>\n  <mj-body>\n    <mj-section>\n      <mj-column>\n        <mj-text font-size=\"16px\">\n          Hello!\n        </mj-text>\n        <mj-text>\n          Order {{ order.number }} has been created.\n        </mj-text>\n      </mj-column>\n    </mj-section>\n    \n    <mj-section>\n      <mj-column>\n        <mj-table>\n          <thead>\n            <tr>\n              <th>\n                Billing address\n              </th>\n              <th>\n                Shipping address\n              </th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr>\n              <td>\n                {{#if order.billingAddress}}\n                  {{ order.billingAddress.streetAddress1 }}\n                {{else}}\n                  No billing address\n                {{/if}}\n              </td>\n              <td>\n                {{#if order.shippingAddress}}\n                  {{ order.shippingAddress.streetAddress1}}\n                {{else}}\n                  No shipping required\n                {{/if}}\n              </td>\n            </tr>\n          </tbody>\n        </mj-table>\n      </mj-column>\n    </mj-section>\n\n    \n  <mj-section>\n    <mj-column>\n      <mj-table>\n        <tbody>\n          {{#each order.lines }}\n            <tr>\n              <td style=\"width:66px\">\n                <img height=\"66\" src=\"{{this.thumbnail.url}}\" style=\"border:0;display:block;outline:none;text-decoration:none;height:66px;width:100%;font-size:13px;\" width=\"66\">\n              </td>\n              <td>\n                {{ this.quantity }} x {{ this.productName }} - {{ this.variantName }}\n              </td>\n              <td align=\"right\">\n                {{ this.totalPrice.gross.amount }} {{ this.totalPrice.gross.currency }}\n              </td>\n            </tr>\n          {{/each}}\n          <tr>\n            <td>\n            </td>\n            <td align=\"right\">\n              Shipping: {{ order.shippingPrice.gross.amount }} {{ order.shippingPrice.gross.currency }}\n            </td>\n          </tr>\n          <tr>\n            <td>\n            </td>\n            <td align=\"right\">\n              Total: {{ order.total.gross.amount }} {{ order.total.gross.currency }}\n            </td>\n          </tr>\n        </tbody>\n      </mj-table>\n    </mj-column>\n  </mj-section>\n\n  </mj-body>\n</mjml>",
                            "subject": "Order {{ order.number }} has been created as"
                        },
                        {
                            "active": false,
                            "eventType": "ORDER_FULFILLED",
                            "template": "\n<mjml>\n  <mj-body>\n    <mj-section>\n      <mj-column>\n        <mj-text font-size=\"16px\">\n          Hello!\n        </mj-text>\n        <mj-text>\n          Order {{ order.number}} has been fulfilled.\n        </mj-text>\n      </mj-column>\n    </mj-section>\n    \n    <mj-section>\n      <mj-column>\n        <mj-table>\n          <thead>\n            <tr>\n              <th>\n                Billing address\n              </th>\n              <th>\n                Shipping address\n              </th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr>\n              <td>\n                {{#if order.billingAddress}}\n                  {{ order.billingAddress.streetAddress1 }}\n                {{else}}\n                  No billing address\n                {{/if}}\n              </td>\n              <td>\n                {{#if order.shippingAddress}}\n                  {{ order.shippingAddress.streetAddress1}}\n                {{else}}\n                  No shipping required\n                {{/if}}\n              </td>\n            </tr>\n          </tbody>\n        </mj-table>\n      </mj-column>\n    </mj-section>\n\n    \n  <mj-section>\n    <mj-column>\n      <mj-table>\n        <tbody>\n          {{#each order.lines }}\n            <tr>\n              <td>\n                {{ this.quantity }} x {{ this.productName }} - {{ this.variantName }}\n              </td>\n              <td align=\"right\">\n                {{ this.totalPrice.gross.amount }} {{ this.totalPrice.gross.currency }}\n              </td>\n            </tr>\n          {{/each}}\n          <tr>\n            <td>\n            </td>\n            <td align=\"right\">\n              Shipping: {{ order.shippingPrice.gross.amount }} {{ order.shippingPrice.gross.currency }}\n            </td>\n          </tr>\n          <tr>\n            <td>\n            </td>\n            <td align=\"right\">\n              Total: {{ order.total.gross.amount }} {{ order.total.gross.currency }}\n            </td>\n          </tr>\n        </tbody>\n      </mj-table>\n    </mj-column>\n  </mj-section>\n\n  </mj-body>\n</mjml>",
                            "subject": "Order {{ order.number }} has been fulfilled"
                        },
                        {
                            "active": false,
                            "eventType": "ORDER_CONFIRMED",
                            "template": "\n<mjml>\n  <mj-body>\n    <mj-section>\n      <mj-column>\n        <mj-text font-size=\"16px\">\n        Hello!\n        </mj-text>\n        <mj-text>\n          Order {{ order.number}} has been confirmed.\n        </mj-text>\n      </mj-column>\n    </mj-section>\n    \n    <mj-section>\n      <mj-column>\n        <mj-table>\n          <thead>\n            <tr>\n              <th>\n                Billing address\n              </th>\n              <th>\n                Shipping address\n              </th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr>\n              <td>\n                {{#if order.billingAddress}}\n                  {{ order.billingAddress.streetAddress1 }}\n                {{else}}\n                  No billing address\n                {{/if}}\n              </td>\n              <td>\n                {{#if order.shippingAddress}}\n                  {{ order.shippingAddress.streetAddress1}}\n                {{else}}\n                  No shipping required\n                {{/if}}\n              </td>\n            </tr>\n          </tbody>\n        </mj-table>\n      </mj-column>\n    </mj-section>\n\n    \n  <mj-section>\n    <mj-column>\n      <mj-table>\n        <tbody>\n          {{#each order.lines }}\n            <tr>\n              <td>\n                {{ this.quantity }} x {{ this.productName }} - {{ this.variantName }}\n              </td>\n              <td align=\"right\">\n                {{ this.totalPrice.gross.amount }} {{ this.totalPrice.gross.currency }}\n              </td>\n            </tr>\n          {{/each}}\n          <tr>\n            <td>\n            </td>\n            <td align=\"right\">\n              Shipping: {{ order.shippingPrice.gross.amount }} {{ order.shippingPrice.gross.currency }}\n            </td>\n          </tr>\n          <tr>\n            <td>\n            </td>\n            <td align=\"right\">\n              Total: {{ order.total.gross.amount }} {{ order.total.gross.currency }}\n            </td>\n          </tr>\n        </tbody>\n      </mj-table>\n    </mj-column>\n  </mj-section>\n\n    </mj-body>\n</mjml>",
                            "subject": "Order {{ order.number }} has been confirmed"
                        },
                        {
                            "active": false,
                            "eventType": "ORDER_CANCELLED",
                            "template": "\n<mjml>\n  <mj-body>\n    <mj-section>\n      <mj-column>\n        <mj-text font-size=\"16px\">\n            Hello!\n        </mj-text>\n        <mj-text>\n          Order {{ order.number}} has been cancelled.\n        </mj-text>\n      </mj-column>\n    </mj-section>\n    \n    <mj-section>\n      <mj-column>\n        <mj-table>\n          <thead>\n            <tr>\n              <th>\n                Billing address\n              </th>\n              <th>\n                Shipping address\n              </th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr>\n              <td>\n                {{#if order.billingAddress}}\n                  {{ order.billingAddress.streetAddress1 }}\n                {{else}}\n                  No billing address\n                {{/if}}\n              </td>\n              <td>\n                {{#if order.shippingAddress}}\n                  {{ order.shippingAddress.streetAddress1}}\n                {{else}}\n                  No shipping required\n                {{/if}}\n              </td>\n            </tr>\n          </tbody>\n        </mj-table>\n      </mj-column>\n    </mj-section>\n\n    \n  <mj-section>\n    <mj-column>\n      <mj-table>\n        <tbody>\n          {{#each order.lines }}\n            <tr>\n              <td>\n                {{ this.quantity }} x {{ this.productName }} - {{ this.variantName }}\n              </td>\n              <td align=\"right\">\n                {{ this.totalPrice.gross.amount }} {{ this.totalPrice.gross.currency }}\n              </td>\n            </tr>\n          {{/each}}\n          <tr>\n            <td>\n            </td>\n            <td align=\"right\">\n              Shipping: {{ order.shippingPrice.gross.amount }} {{ order.shippingPrice.gross.currency }}\n            </td>\n          </tr>\n          <tr>\n            <td>\n            </td>\n            <td align=\"right\">\n              Total: {{ order.total.gross.amount }} {{ order.total.gross.currency }}\n            </td>\n          </tr>\n        </tbody>\n      </mj-table>\n    </mj-column>\n  </mj-section>\n\n  </mj-body>\n</mjml>",
                            "subject": "Order {{ order.number }} has been cancelled"
                        },
                        {
                            "active": false,
                            "eventType": "ORDER_FULLY_PAID",
                            "template": "\n<mjml>\n  <mj-body>\n    <mj-section>\n      <mj-column>\n        <mj-text font-size=\"16px\">\n          Hello!\n        </mj-text>\n        <mj-text>\n          Order {{ order.number}} has been fully paid.\n        </mj-text>\n      </mj-column>\n    </mj-section>\n    \n    <mj-section>\n      <mj-column>\n        <mj-table>\n          <thead>\n            <tr>\n              <th>\n                Billing address\n              </th>\n              <th>\n                Shipping address\n              </th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr>\n              <td>\n                {{#if order.billingAddress}}\n                  {{ order.billingAddress.streetAddress1 }}\n                {{else}}\n                  No billing address\n                {{/if}}\n              </td>\n              <td>\n                {{#if order.shippingAddress}}\n                  {{ order.shippingAddress.streetAddress1}}\n                {{else}}\n                  No shipping required\n                {{/if}}\n              </td>\n            </tr>\n          </tbody>\n        </mj-table>\n      </mj-column>\n    </mj-section>\n\n    \n  <mj-section>\n    <mj-column>\n      <mj-table>\n        <tbody>\n          {{#each order.lines }}\n            <tr>\n              <td>\n                {{ this.quantity }} x {{ this.productName }} - {{ this.variantName }}\n              </td>\n              <td align=\"right\">\n                {{ this.totalPrice.gross.amount }} {{ this.totalPrice.gross.currency }}\n              </td>\n            </tr>\n          {{/each}}\n          <tr>\n            <td>\n            </td>\n            <td align=\"right\">\n              Shipping: {{ order.shippingPrice.gross.amount }} {{ order.shippingPrice.gross.currency }}\n            </td>\n          </tr>\n          <tr>\n            <td>\n            </td>\n            <td align=\"right\">\n              Total: {{ order.total.gross.amount }} {{ order.total.gross.currency }}\n            </td>\n          </tr>\n        </tbody>\n      </mj-table>\n    </mj-column>\n  </mj-section>\n  \n  </mj-body>\n</mjml>",
                            "subject": "Order {{ order.number }} has been fully paid"
                        },
                        {
                            "active": true,
                            "eventType": "INVOICE_SENT",
                            "template": "\n<mjml>\n  <mj-body>\n    <mj-section>\n      <mj-column>\n        <mj-text font-size=\"16px\">\n          Hi!\n        </mj-text>\n        <mj-text>\n          New invoice has been created\n        </mj-text>\n      </mj-column>\n    </mj-section>\n  </mj-body>\n</mjml>",
                            "subject": "New invoice has been created"
                        }
                    ]
                }
            ]
        }
    }
]

Try to send an invoice for orders create in this channel
Email was sent

[krzysztofwolski]

Updated scenarios for Sendgrid

[lkostrowski]

@szczecha if you have time, please check also Sendgrid scenarios, thanks

[szczecha]

Placeholder for sender details should disappear or be smaller after selecting sender from the dropdown:

App version: 1.2.0

Create a new sendgrid configuration
Save
Select sender

[szczecha]

When saving the configuration without selecting a template, an error may indicate that the template is required

App version: 1.2.0

Create a new SendGrid configuration
Save
Open one of the event configurations
Change event to disabled and save

[szczecha]

Impossible to disable an event from SendGrid configuration if the event doesn't have a template

App version: 1.2.0
Create a new SendGrid configuration
Save
Try to disable one of the events

Screen.Recording.2023-03-27.at.13.54.42.mov