tests: use env file for e2e tests (saleor#2457)

README.md

@@ -1,6 +1,5 @@
 ![Saleor Dashboard](https://user-images.githubusercontent.com/44495184/185379472-2a204c0b-9b7a-4a3e-93c0-2cb85205ed5e.png)
 
-
 <div align="center">
   <h1>Saleor Dashboard</h1>
 </div>
@@ -54,7 +53,6 @@ $ cd saleor-dashboard
 
 Check [release log](https://github.com/saleor/saleor-dashboard/releases/) for the latest release
 
-
 #### Using development version
 
 If you want to use the latest development version, checkout to the `main` branch:
@@ -71,7 +69,7 @@ $ npm i
 
 ### Configuration
 
-Create ```.env``` file in a root directory or set environment variables with following values:
+Create `.env` file in a root directory or set environment variables with following values:
 
 - `API_URI` (required) - URI of a running instance of Saleor GraphQL API.
   If you are running Saleor locally with the default settings, set `API_URI` to: `http://localhost:8000/graphql/`.
@@ -90,6 +88,7 @@ To start the development server run:
 ```
 $ npm start
 ```
+
 In case you see CORS errors make sure to check [CORS configuration](https://docs.saleor.io/docs/3.x/developer/running-saleor/configuration#allowed_client_hosts) of your Saleor instance or CORS settings in the Cloud Console.
 
 ### Production
@@ -120,6 +119,32 @@ import { CustomAdapter } from "./adapters/";
 const errorTracker = ErrorTrackerFactory(CustomAdapter(config));
 ```
 
+### Running e2e tests
+
+Add Cypress specific env variables to `.env` file (created in configuration section above):
+
+```
+CYPRESS_USER_NAME=
+CYPRESS_USER_PASSWORD=
+CYPRESS_SECOND_USER_NAME=
+CYPRESS_PERMISSIONS_USERS_PASSWORD=
+
+CYPRESS_mailHogUrl=
+STRIPE_SECRET_KEY=
+STRIPE_PUBLIC_KEY=
+
+// not required
+CYPRESS_RECORD_KEY= // if you want your local runs recorded
+```
+
+For values of those variables refer to our internal documentation.
+
+You are ready to run cypress commands like:
+
+```shell
+npm run cy:open
+```
+
 ##### Usage with Sentry adapter:
 
 Sentry is used as the default tracker so no changes in code are necessary and the configuration is done via environment variables.

cypress/plugins/index.js

@@ -21,28 +21,31 @@
 const graphql = require("graphql-request");
 
 module.exports = async (on, config) => {
-  // make env variables visible for cypress
   // require("cypress-mochawesome-reporter/plugin")(on); - uncomment to run reports
+
+  require("dotenv").config();
+
   config.env.API_URI = process.env.API_URI;
   config.env.APP_MOUNT_URI = process.env.APP_MOUNT_URI;
   config.env.SHOP = await getShopInfo(process.env);
   config.env.STRIPE_SECRET_KEY = process.env.STRIPE_SECRET_KEY;
   config.env.STRIPE_PUBLIC_KEY = process.env.STRIPE_PUBLIC_KEY;
+  config.env.USER_NAME = process.env.CYPRESS_USER_NAME;
+  config.env.USER_PASSWORD = process.env.CYPRESS_USER_PASSWORD;
+  config.env.SECOND_USER_NAME = process.env.CYPRESS_SECOND_USER_NAME;
+  config.env.PERMISSIONS_USERS_PASSWORD =
+    process.env.CYPRESS_PERMISSIONS_USERS_PASSWORD;
+  config.env.grepTags = process.env.CYPRESS_grepTags;
 
-  on("before:browser:launch", (browser = {}, launchOptions) => {
+  on("before:browser:launch", ({}, launchOptions) => {
     launchOptions.args.push("--proxy-bypass-list=<-loopback>");
     return launchOptions;
   });
+
   return config;
 };
 
 function getShopInfo(envVariables) {
-  // envVariables.CYPRESS_USER_NAME
-  const variables = {
-    email: envVariables.CYPRESS_USER_NAME,
-    password: envVariables.CYPRESS_USER_PASSWORD,
-  };
-
   const createTokenMutation = graphql.gql`mutation tokenCreate($email: String!, $password: String!){
     tokenCreate(email:$email, password:$password){
       token
@@ -58,11 +61,17 @@ function getShopInfo(envVariables) {
   const client = new graphql.GraphQLClient(envVariables.API_URI, {
     headers: {},
   });
-  return client.request(createTokenMutation, variables).then(data => {
-    const token = data.tokenCreate.token;
-    client.setHeader("Authorization", `JWT ${token}`);
-    return client
-      .request(getShopInfoQuery)
-      .then(shopInfo => shopInfo.shop.version);
-  });
+
+  return client
+    .request(createTokenMutation, {
+      email: envVariables.CYPRESS_USER_NAME,
+      password: envVariables.CYPRESS_USER_PASSWORD,
+    })
+    .then(data => {
+      const token = data.tokenCreate.token;
+      client.setHeader("Authorization", `JWT ${token}`);
+      return client
+        .request(getShopInfoQuery)
+        .then(shopInfo => shopInfo.shop.version);
+    });
 }