09. July 2019

Drupal field and image suddenly disappear or gets deleted

This happened to me every morning, every time I boot up my computer and load up the site. One solution I found was to save the file permanently and save the path on another variable.

Form Field:

$form['logo_upload'] = [
  '#title' => $this->t('Upload Logo'),
  '#description' => $this->t('Choose file'),
  '#type' => 'managed_file',
  '#name' => 'logo',
  '#size' => 20,
  '#upload_location' => 'public://img/logo',
];

Form Submit function:

public function submitForm(array &$form, FormStateInterface $form_state) {
  $form_file = $form_state->getValue('logo_upload', 0);
  $logo_path = $config->getItem('logo_path');
  if (!empty($form_file) && is_array($form_file)) {
    $file = File::load($form_file[0]);
    $file_uri = $file->getFileUri();
    $image_path = file_url_transform_relative(file_create_url($file_uri));
    if ($logo_path != $image_path) {
      $file->setPermanent();
      $file->save();
      $form_state
        ->setValue('logo_path', $image_path)
        ->setValue('logo_upload', '');
  }
}

I added this $image_path = file_url_transform_relative(file_create_url($file_uri)); to create a relative path and save it to logo_path variable. This development in on Drupal 8.

04. July 2019

Backstop.js

Create a folder and install backstop globally

$ npm install -g backstopjs

Backstop workflow

Setup backstop instances

$ backstop init

To create a site reference, you need to run

$ backstop reference

Once you have your reference, you can start running the test.

$ backstop test

If all your test passes and you want to update your reference with the latest screenshots.

$ backstop approve

04. July 2019

Nightwatch.js

Create a folder and install night watch

mkdir nightwatch-frontend; npm install nightwatch -g --dev-save

Select WebDriver Service

So you have an option to what browser and driver you want to use for testing, there’s Firefox(GekoDriver), Chrome(ChromeDriver), Edge(Microsoft WebDriver), Safari(SafariDriver). I always use Chrome for development, so let’s install ChromeDriver.

Chrome Driver

npm install chromedriver --save-dev

nightwatch.json

Nightwatch expects to have nightwatch.json configuration file in your root directory and paste this code inside.

{
  "src_folders" : ["tests"],

  "webdriver" : {
    "start_process": true,
    "server_path": "node_modules/.bin/chromedriver",
    "port": 9515
  },

  "test_settings" : {
    "default" : {
      "desiredCapabilities": {
        "browserName": "chrome"
      }
    }
  }
}

Settings for different environment

This is really convenient and you don’t need to change URL every environment. You can set URL for local development and different URL for testing and production.

{
  ...
  "test_settings" : {
    "default" : {
      "launch_url" : "http://localhost",
      "globals" : {
        "myGlobalVar" : "some value",
        "otherGlobal" : "some other value"
      }
    },

    "integration" : {
      "launch_url" : "http://staging.host",
      "globals" : {
        "myGlobalVar" : "other value"
      }
    }
  }
}
nightwatch --env integration

Test Group

tests/
  ├── logingroup
  |   ├── login_test.js
  |   └── otherlogin_test.js
  ├── addressbook
  |   ├── addressbook_test.js
  |   └── contact_test.js
  ├── chat
  |   ├── chatwindow_test.js
  |   ├── chatmessage_test.js
  |   └── otherchat_test.js
  └── smoketests
      ├── smoke_test.js
      └── othersmoke_test.js

To run smoke tests:

nightwatch --group smoketests

To skip smoke tests:

nightwatch --skipgroup smoketests

Skipping multiple groups

nightwatch -skipgroup addessbook,chat

You can use tags as well but were not covering it here.

Lets write some basic test

Inside your tests folder create file first-test.js and paste the code sample and run nightwatch.

module.exports = {
  'Demo test Google' : function (browser) {
    browser.url('https://www.google.com');
    browser.expect.element('#hplogo').to.be.present; 
    browser
      .waitForElementVisible('body')
      .setValue('input[type=text]', 'nightwatch')
      .waitForElementVisible('input[name=btnK]')
      .click('input[name=btnK]')
      .pause(1000)
      .assert.containsText('#main', 'Night Watch');
    browser.end();
  }
}
nightwatch --env default

Chrome browser will open and simulate the test.

I hope this helps you setup nightwatch basic testing. Chow!!!