Robert DeLuca Robdel12

## get-example-dom.js
export default function getExampleDOM() {
  // This is just a raw example of setting up some DOM
  // that we can interact with. Swap this with your UI
  // framework of choice 😉
  let div = document.createElement("div");

  div.innerHTML = `
    <label for="username">Username</label>
    <input id="username" />
    <button>Print Username</button>

## myinput.test.js
import { mount } from 'testing-hooks/react-dom';
import { type } from 'interactor.js';
import MyInputComponent from './MyInputComponent';

describe('MyInputComponent', () => {
  beforeEach(async () => {
    await mount(
      <MyInputComponent {...props} />
    );
  });

## how-to-run.md

      
              4 files
            
          
              0 forks
            
          
              0 comments
            
          
              1 star
            
          
                Robdel12
                / how-to-run.md
            
            
              Last active
              April 5, 2019 17:08
            
              
                A small example of Percy & puppeteer 
              
          
    The quickest test suite to setup

Once you fill in the URLs you want to snapshot, you can run the visual tests by:

Setting your PERCY_TOKEN to a project in https://percy.io
Running npm run percy (or yarn percy)
??
Get other work done (profit)!

That's about it :p

  
## 00-problem.md

      
              4 files
            
          
              0 forks
            
          
              1 comment
            
          
              0 stars
            
          
                Robdel12
                / 00-problem.md
            
            
              Last active
              February 15, 2019 23:25
            
              
                The smallest needed reproduction for UTF-8 / CSS child selector encoding issues with Chrome webdriver
              
          
    What is this?

When using the Chrome webdriver with inline styles that have a child selector (>),
calling browser.page_source improperly encodes the child selector to &gt;.
This works properly in Firefox and Safari, but not Chrome.
This example was served with a SimpleHTTPServer in Python (python -m SimpleHTTPServer). I even went as far
as to try and serve these files with UTF-8 encoding:

  
## font-repo.html
<html>
<head></head>
<body>
  <div style='font-family: Arial'>
    This is my text with Arial.  Is it going to render consistently?
  </div>
  <div style='font-family: Times'>
    This is my text with Times.  Is it going to render consistently?
  </div>
  <div style='font-family: serif'>

## example-test.js
describe('My suite', () => {
  // ... lots of tests!
  describe('My nested suite', () => {
    // ... lots of tests!
    it('Percy: takes a snapshot', () => {
      cy.percySnapshot();
    });
  });
});

## checkbox-jest-test.js
describe("Checkbox", () => {
  let checkbox = new CheckboxInteractor("label");
  //...previous test

  it("has the right tabindex", async () => {
    await mount(() => <Checkbox tabIndex="2" />);

    expect(checkbox.tabIndex).toBe("2");
  });


## first-interactor-example.js
import Interactor, { is, focusable } from '@bigtest/interactor';

@Interactor.extend
class CheckboxInteractor {
  hasFocus = is("input", ":focus");
  focusCheckbox = focusable("input");
}

// You can use `@bigtest/interactor` without a
// decorator by passing a POJO to `Interactor.from`

## first-jest-example.js
//...typical imports
import { mount } from '@bigtest/react';
import CheckboxInteractor from './interactor';

describe("Checkbox", () => {
  let checkbox = new CheckboxInteractor("label");

  it("calls onFocus() when focus is set", async () => {
    let handleFocus = jest.fn();


## checkbox-interactor.js
import Interactor, {
  attribute,
  property,
  clickable,
  focusable,
  blurrable,
  is
} from "@bigtest/interactor";

@Interactor.extend
	export default function getExampleDOM() {
	// This is just a raw example of setting up some DOM
	// that we can interact with. Swap this with your UI
	// framework of choice 😉
	let div = document.createElement("div");

	div.innerHTML = `
	<label for="username">Username</label>
	<input id="username" />
	<button>Print Username</button>
	import { mount } from 'testing-hooks/react-dom';
	import { type } from 'interactor.js';
	import MyInputComponent from './MyInputComponent';

	describe('MyInputComponent', () => {
	beforeEach(async () => {
	await mount(
	<MyInputComponent {...props} />
	);
	});
	<html>
	<head></head>
	<body>
	<div style='font-family: Arial'>
	This is my text with Arial. Is it going to render consistently?
	</div>
	<div style='font-family: Times'>
	This is my text with Times. Is it going to render consistently?
	</div>
	<div style='font-family: serif'>
	describe('My suite', () => {
	// ... lots of tests!
	describe('My nested suite', () => {
	// ... lots of tests!
	it('Percy: takes a snapshot', () => {
	cy.percySnapshot();
	});
	});
	});
	describe("Checkbox", () => {
	let checkbox = new CheckboxInteractor("label");
	//...previous test

	it("has the right tabindex", async () => {
	await mount(() => <Checkbox tabIndex="2" />);

	expect(checkbox.tabIndex).toBe("2");
	});
	import Interactor, { is, focusable } from '@bigtest/interactor';

	@Interactor.extend
	class CheckboxInteractor {
	hasFocus = is("input", ":focus");
	focusCheckbox = focusable("input");
	}

	// You can use `@bigtest/interactor` without a
	// decorator by passing a POJO to `Interactor.from`
	//...typical imports
	import { mount } from '@bigtest/react';
	import CheckboxInteractor from './interactor';

	describe("Checkbox", () => {
	let checkbox = new CheckboxInteractor("label");

	it("calls onFocus() when focus is set", async () => {
	let handleFocus = jest.fn();
	import Interactor, {
	attribute,
	property,
	clickable,
	focusable,
	blurrable,
	is
	} from "@bigtest/interactor";

	@Interactor.extend