Forem: Steve

React-Native SVG Example

Steve — Sat, 10 Apr 2021 04:00:00 +0000

Series Intro

Welcome to the first post of my React Native series! Each article in the series will dive into a different aspect of the framework. Let’s go!

Getting Started

To begin we’ll need a React Native application to add SVGs to. I started a new one in my examples repo under svg with the npx react-native init PROJECTNAME command. An existing app will work as well but we’ll have to check version compatibility. Our next step is to fire up the app. I run npm run start which just calls react-native start. Now metro is running in this terminal and we need to open a new terminal. In the new terminal let’s fire up the app in either iOS or Android. I started with Android so I ran npm run android which just runs react-native run-android. Now we have an Android emulator running our app! Here’s a screenshot of where we’re at on Android:

Drawing SVGs

React Native doesn’t support SVG out of the box. So we’ll have to install a package to handle SVGs for us. I chose svg-react-native. Here’s where we need to pay attention to the versions we’re on. There are various steps to getting this package to work in the app depending on the versions it has. Be sure to read through the Readme and the table of versions. Since I’m on a brand new app I ran npm i react-native-svg to install the latest. Now with the package installed we can import it and start drawing SVGs in our app! I added a separate component to contain my SVG: /components/svg.js. Here’s my component code:

import React from 'react';
import type {Node} from 'react';
import Svg, {Circle, Rect, Path} from 'react-native-svg';
import {View} from 'react-native';

const SvgComp = (): Node => {
  return (
    <View>
      <Svg height="100" width="100">
        <Rect x="0" y="0" width="100" height="100" fill="black" />
        <Circle cx="50" cy="50" r="30" fill="yellow" />
        <Circle cx="40" cy="40" r="4" fill="black" />
        <Circle cx="60" cy="40" r="4" fill="black" />
        <Path d="M 40 60 A 10 10 0 0 0 60 60" stroke="black" />
      </Svg>
    </View>
  );
};

export default SvgComp;

And here’s a screenshot of how it renders in the Android emulator:

NOTE

I had to restart metro and re-run the android command to get SVGs working.

Check out the supported elements to see what else we can do with SVGs now.

Using an SVG Font

Being able to draw our own SVGs is cool but let’s pull in an SVG font with a bunch of icons we can use. I chose a set of open source icons called Feather. Yiğithan has already done the work for those of us that want to use Feather icon SVGs in our React Native apps with react-native-feather. Install the package with npm i react-native-feather and pop in any of the Feather icons. I created another separate component to try out Feather icons in my example app: /components/feather.js. Here’s my component code:

import React from 'react';
import type {Node} from 'react';
import {View} from 'react-native';
import {ArrowUpCircle} from 'react-native-feather';

const FeatherComp = (): Node => {
  return (
    <View>
      <ArrowUpCircle stroke="red" fill="#fff" width={32} height={32} />
    </View>
  );
};

export default FeatherComp;

And here’s a screenshot of how it renders in the Android emulator:

This is great because now we have access to all of the Feather icons as React components. But what if we had an SVG file we wanted to use?

Using SVG Files

Maybe we have some SVG files we want to include rather than including a font of them. For this case we’ll need another package. Kristerkari has us covered with react-native-svg-transformer. Install the package with npm i --save-dev react-native-svg-transformer. Next we’ll update our metro config to handle transforming SVGs. Here’s what my metro.config.js looks like now:

const {getDefaultConfig} = require('metro-config');

module.exports = (async () => {
  const {
    resolver: {sourceExts, assetExts},
  } = await getDefaultConfig();
  return {
    transformer: {
      getTransformOptions: async () => ({
        transform: {
          experimentalImportSupport: false,
          inlineRequires: true,
        },
      }),
      babelTransformerPath: require.resolve('react-native-svg-transformer'),
    },
    resolver: {
      assetExts: assetExts.filter(ext => ext !== 'svg'),
      sourceExts: [...sourceExts, 'svg'],
    },
  };
})();

I needed some SVG files so I grabbed these:

A colorized one: firefox.svg from Kristerkari’s example repo
And a customizable one: coffee.svg from Feather

And another new component for SVG files: ./components/svg-files.js. Here’s the component code:

import React from 'react';
import type {Node} from 'react';
import {View} from 'react-native';
import Coffee from '../assets/icons/coffee.svg';
import Firefox from '../assets/icons/firefox.svg';

const SvgFilesComp = (): Node => {
  return (
    <View>
      <Firefox />
      <Coffee />
    </View>
  );
};

export default SvgFilesComp;

And here’s a screenshot of how it renders in the Android emulator:

NOTE

I had to restart metro and re-run the android command to get SVGs working.

Notice that our coffee SVG isn’t visible but taking space. That’s because its designed to be customizable. We need to pass in some arguments if we want it to render in color. Which arguments and whether it’s customizable at all depends on the SVG.

For instance, both SVGs I chose have widths and heights set for them. If we don’t include those properties then their defaults are used. If we pass in a width to the firefox SVG check out what happens:

<Firefox width={50} />
<Coffee />

The image is the correct size but the overall SVG is still taking up a lot more room than it needs. We have to pass in both sizes to fix this. While we’re at it, let’s give some color to our coffee icon by passing in a fill color.

<Firefox width={50} height={50} />
<Coffee fill={'blue'} />

Now our firefox looks good but our coffee icon does not. This particular icon isn’t meant to have a fill. Rather, we should pass in a stroke to get the desired look.

<Firefox width={50} height={50} />
<Coffee stroke={'#333'} />

Now those are some good looking SVGs in a React Native app!

Conclusion

In this article we covered how to include SVGs inside a React Native application using three different methods:

Drawing them
Importing an SVG font
Loading from .svg files

Thanks for reading! Please share using any of the buttons below and stay tuned for more of my React Native series of posts. Don’t hesitate to reach out in the comments below or on any of the links in the author profile.

MacOS OpenJDK Maintenance

Steve — Sun, 21 Mar 2021 04:00:00 +0000

What is OpenJDK?

An open-source implementation of the Java platform SE. To read more check out official site.

Why have multiple versions?

Why not? Not all apps are able to keep up with Java versions and those that do might need some time when a new version comes out. For example: I’m working with React-Native building mobile apps for both iOS and Android. To build the Android app it uses Gradle 6.5 which doesn’t support the latest version of Java (16) yet.

Installing

I have OpenJDK installed through AdoptOpenJDK using brew. I like to keep all my apps and libs as up-to-date as possible so I run brew upgrade a lot. One of those times it upgraded AdoptOpenJDK to 16. Lucky for me they also publish older versions on brew but there’s an extra step.

My initial thought was to run brew install adoptopenjdk@15 but it didn’t work. The versioned casks are contained in their Tap which I found out by checking out their brew page and subsequently their open-source tap code.

So the fix was to get into the tap (brew tap adoptopenjdk/openjdk) and run the command above again.

Switching between versions

Now I have two versions of OpenJDK available to my system: 16 and 15. To switch between them I found a little function to pop into my .zshrc file:

jdk() {
  export JAVA_VERSION=$1
  java -version
}

Now to switch between JDK versions I run jdk 15 or any version I have installed.

Dev Setup

Steve — Mon, 16 Nov 2020 05:00:00 +0000

I try to keep my setup pretty minimal but the following is my list of must-haves. All are easily searchable so I have not included links except to my settings hosted as GitHub Gists.

Physical
- MacBook Air (Light but powerful)
- Logitech MX Master 2S
- Bose QC 25
- Fidget Spinner
- Moleskine grid notebook
- Lamy Safari Fountain Pen
- Blackwing Pencil
Digital
- Zsh (as well as Oh-my-zsh and zsh-completions)
- .zshrc
- Brew
- NVM
- RVM
- VSCodium (No MS branding/telemetry)
- Extensions:
  - Bookmarks
  - Bracket Pair Colorizer 2
  - ES7 React/Recux/GraphQL/React-native Snippets
  - ESLint
  - GitLens
  - JavaScript (ES6) code snippets
  - Live Server
  - Material Icon Theme
  - Night Owl
  - REST Client
  - SVG
  - TODO Highlight
  - YAML
- Settings
- Firefox (main driver)
- Hyper
- LICEcap
- OBS
- Chromium (for testing apps)
- Chrome (for testing apps)
- Vanilla
- Time Out
- OpenJDK
- Nginx
- SVGO

Dual-booting Linux Mint

Steve — Fri, 08 Nov 2019 05:00:00 +0000

Why Linux

I’ve always heard that Linux is the way to go but I never tried it. I had Windows and it worked fine for me. I took some training at work that required Linux so I started using it inside a virtual machine. I got comfortable with it and decided it would be fun to try at home.

Why Mint

Based on this Dev.to article it sounded like where a Linux newbie like myself should start. I tried a couple versions inside VirtualBox before committing. I used OSBoxes to quickly get them up and running.

Why Dual-Boot

I chose to dual-boot because I didn’t want to risk losing Windows if I messed up the Mint install. Also because the Mint install made it really easy.

How I did it

Disclaimer!

I’ll recount the steps I took and the references I used but can’t guarantee any of it for anyone else.Also it’s a good idea to follow along with Mint’s install docs.

1. Back Up Data

I backed up my data because there’s always a chance it could get wiped from existence.

2. Download Linux Mint

I grabbed the 64bit Cinnamon version from here.

3. Create a Bootable USB

I used Etcher to flash the image onto my USB drive but any flashing software should do the trick.

4. Create Disk Space

My first attempt didn’t take because I didn’t have any room. I ended up freeing up some space from my Windows partitions.

5. Update Boot Configuration

I had to disable secure boot and change the boot order in the BIOS.

6. Install Mint

I followed the on-screen instructions at this point. Here are the important bits:

Dual booting with Windows
Create partitions
- Root (I used 20Gb)
- Swap (I used 8Gb)
- Home (I used the rest of my free space)A few more on-screen instructions and I was ready to go!

7. Use Mint

Mint is installed and ready to go. I’m on a Razer Blade Stealth and everything works out of the box except for closing the lid. I’m sure there are other things that don’t quite work that I haven’t encountered yet. When I close the lid Mint is supposed to suspend but when I open the lid back up I have to hard shutdown before my laptop will wake up and respond. Other than that I’m very happy with Mint and hope that this article helps you!

JavaScript Selenium Mocha QuickStart Guide

Steve — Wed, 20 Jul 2016 04:00:00 +0000

Getting started with JavaScript, Selenium and Mocha!

In this article we’ll be using Mocha and Selenium to write tests for web applications. This will be a starter project we can build on for various projects and in future articles.

Requirements

Here are the requirements before we get started:

NodeJS (A JavaScript runtime)
Selenium JavaScript language bindings (But we’ll use NPM to grab these)
MochaJS (Mocha is a JS test framework)
ChaiJS (Chai is an assertion library)
Any browsers installed that you want to test Supported Platforms

Selenium Prep

If you haven’t read through my quick Overview of Selenium you should do that now. Selenium will need a few things configured before it’ll do its magic!

NodeJs Tutorial

If you’re unfamiliar with NodeJS I recommend this tutorial to get you started: NodeHero. It’s packed with helpful information. It’s a good resource to keep open in a tab while working through this post.

Create Project

To kick things off we’ll need a new project. Using a command prompt or Explorer we need to create a new folder for our project. Once we have our folder we can use the command prompt to begin installing the packages we’ll need.

Initializing Project

NodeJS comes with its own package manager: NPM. It is also used to initialize a project. Run the following command and fill in each section: npm init. This will create the package.json file. This file tracks dependencies and project information.

Installing Packages

NPM is also responsible for installing packages. The command for installing a package is npm install <package>. We need to install Selenium, Mocha and Chai.

npm install selenium-webdriver --save
npm install mocha --save
npm install chai --save

These will install in the node_modules folder and get tracked in our package.json file.

Here’s what our folder structure looks like:

We can now write our first test and use our installed packages! Here’s what the package.json file should look like at this point:

{
"name": "selenium-js-mocha",
"version": "1.0.0",
"description": "A project to go along with blog posts explaining how to get started with functional testing using Selenium, JavaScript and Mocha. ",
"main": "test1.js",
"dependencies": {
"chai": "^3.5.0",
"mocha": "^2.5.3",
"selenium-webdriver": "^2.53.2"
},
"devDependencies": {},
"scripts": {
"test": "mocha test1.js"
},
"author": "Stephen Cavender",
"license": "ISC"
}

Write Test

We’ll write our test against The Internet¹.

Let’s create a new JS file in our project folder: I’ll create test1.js.

// Load dependecies
var assert = require('chai').assert,
test = require('selenium-webdriver/testing'),
webdriver = require('selenium-webdriver');

// Our test
test.describe('Test', function () {
test.it('Title should be "The Internet"', function () {
// Set timeout to 10 seconds
this.timeout(10000);

// Get driver
// var driver = new webdriver.Builder().
// withCapabilities(webdriver.Capabilities.firefox()).
// build();
// var driver = new webdriver.Builder().
// withCapabilities(webdriver.Capabilities.edge()).
// build();
// var driver = new webdriver.Builder().
// withCapabilities(webdriver.Capabilities.ie()).
// build();
var driver = new webdriver.Builder().
withCapabilities(webdriver.Capabilities.chrome()).
build();

// Go to URL
driver.get('http://the-internet.herokuapp.com');

// Find title and assert
driver.executeScript('return document.title').then(function(return_value) {
assert.equal(return_value, 'The Internet')
});

// Quit webdriver
driver.quit();
});
});

Load dependencies
Create test
Set timeout (test runs too fast and fails without increasing the timeout)
Get a web driver
Set the URL property (tells the driver to go to that URL)
Assert on the title of the driver
Dispose of the driver

Run Test

Now that we have a functional test we can run it. Save the test file and let’s grab our command prompt. To run tests we call the mocha command and our test file.

mocha test1.js

Run that in the command prompt and we should see our test run and the command prompt will tell us the result of the test. If the package.json is set up with a test script we can also run our test by calling the npm test script.

npm test

This is how the command prompt displays our test run:

And this is how bash displays our test run:

This is a basic, and brittle, example of how Selenium works. We’ll cover a much better testing approach in a later post to avoid such things! This is not an example of best practices by any means. This is to get you a working example of Selenium. Stay tuned for more posts on how to use Selenium, best practices for automating tests and video tutorials!

Thanks for reading! Be sure to share this post if you found it helpful and don’t hesitate to chat with me about it!

Credit to Dave Haeffner. ↩

Originally published at cavender.dev

Selenium Overview & Setup

Steve — Sat, 25 Jun 2016 04:00:00 +0000

Quick Selenium Overview

In this article we’ll explore what Selenium is and how to prep our environment to use it.

Selenium is an umbrella project for a range of tools and libraries that enable and support the automation of web browsers. - From https://seleniumhq.github.io/docs/index.html

Selenium enables us to:

Open browsers
Navigate web pages
Find web elements
Manipulate web elements
Run JavaScript

Language Bindings

First we’ll need to get the language bindings we want. The bindings will need to be downloaded and referenced in our project. Some IDE’s have package managers that will do this for us. We’ll talk more about how that’s done in separate articles. For now just know that we’ll need some language bindings to get Selenium to work.

Webdrivers

Selenium’s power comes from webdrivers; called such because they “drive the web.” In the articles to come we’ll be using Chrome, Firefox, Edge and IE; we’ll need drivers for each.

Chrome

ChromeDriver is a separate executable loaded by Selenium when Chrome is the desired browser. Download the latest driver and place it in an easily-accessible location. I keep mine in C:/webdrivers/. Download and install the latest Chrome.

Firefox

The FirefoxDriver comes built-in with the Selenium language bindings. Download and install the latest Firefox. Mozilla is working on a new driver for their browser called MarionetteDriver. However, it has not been released as of this writing. Feel free to download the latest driver and put it in the same location as the ChromeDriver.

Edge

The Microsoft WebDriver is a separate executable loaded up by Selenium when Edge is requested as a browser. Download the latest driver and keep it in the same location as the other driver(s). Make sure you have the latest updates for Edge.

IE

The IEDriverServer is maintained and distributed by the Selenium group. Download the latest driver and put it in the same location as the other driver(s). Make sure you have the latest updates for IE.

Adding to PATH

Now that we have all the drivers we’ll want to use we need to add an entry to our PATH environment variable. If you’ve never done anything with environment variables I would recommend reading this guide. Follow the instructions and add the folder containing your webdrivers.

Now Selenium will be ready to go! Check out one of my other articles for the environment you want to use with Selenium:

Thanks for reading! Be sure to share this post if you found it helpful and don’t hesitate to chat with me about it!

Originally published at cavender.dev

C# Selenium MSTest QuickStart Guide

Steve — Sat, 18 Jun 2016 04:00:00 +0000

Getting started with C#, Selenium and MSTest!

In this article we’ll be using MSTest and Selenium to write tests for web applications. This will be a starter project we can build on for various projects and in future articles.

Requirements

Here are the requirements before we get started:

Visual Studio (A Microsoft Integrated Development Environment or IDE)
Nuget (A package manager for Visual Studio)
Selenium C# language bindings (But we’ll use NuGet to grab these)
Any browsers installed that you want to test Supported Platforms

Selenium Prep

If you haven’t read through my quick Overview of Selenium you should do that now. Selenium will need a few things configured before it’ll do its magic!

Create Project

To kick things off we’ll need a new project.

File > New > Project

Select the Unit Test Project template ( Templates > Visual C# > Test ), give it a name and configure some options. Press Ok to create the project. Visual Studio will create the project and open up your first UnitTest class.

Import/Install Selenium

Now we’ll need to grab the Selenium DLLs and give our project access to them.

Tools > NuGet Package Manager > Manage NuGet Packages for Solution

Select Browse, search for ‘Selenium’ and install both Selenium.WebDriver and Selenium.Support for your new project.

Write Test

Now the fun begins; we can write the first Selenium test! We’ll write our test against The Internet¹.

Here’s some code to put inside the TestMethod1()

//var driver = new OpenQA.Selenium.Firefox.FirefoxDriver
//var driver = new OpenQA.Selenium.Edge.EdgeDriver
//var driver = new OpenQA.Selenium.IE.InternetExplorerDriver
var driver = new OpenQA.Selenium.Chrome.ChromeDriver
{
Url = "http://the-internet.herokuapp.com/"
};
Assert.IsTrue(driver.Title == "The Internet");
driver.Dispose();

Get a web driver
Set the URL property (tells the driver to go to that URL)
Assert on the title of the driver
Dispose of the driver

Run Test

Now that we have a functional test we can run it. First, if the Test Explorer isn’t displayed we need to add it.

Test > Windows > Test Explorer

Our test isn’t showing up yet. We need to build the solution for it to recognize that we’ve written a test it can run. Right click on the solution in the Solution Explorer and Build or Rebuild the solution. If the build is successful we should see our test show up in the Test Explorer. Now we can right click on our test and tell it to run. If all went according to plan we should see a Chrome window pop up, navigate to Google’s home page and then close.

This is a basic, and brittle, example of how Selenium works. If our assertion returns false the test will report a failure but the browser window will still be alive. This test is brittle in that it can’t run any code after the Assert if the Assert returns false. We’ll cover a much better testing approach in a later post to avoid such things! This is not an example of best practices by any means. This is to get you a working example of Selenium. Stay tuned for more posts on how to use Selenium, best practices for automating tests and video tutorials!

Thanks for reading! Be sure to share this post if you found it helpful and don’t hesitate to chat with me about it!

Credit to Dave Haeffner. ↩

Originally published at cavender.dev