gistfile.md

Copilot story for workshop

Write a comment giving overall context

• Go to LostPet.razor
• Create a new line after 50 (after step 2)
• Create a comment that says

<!-- Step 2.5  - pet’s last location h2 element followed by dropdown -->

• On the next line, GitHub Copilot should suggest

<h2>Step 2.5: Where was your pet last seen?</h2>

• On the next line write a comment that says

<!— dropdown menu with location —>

• On the next line GitHub Copilot should suggest a list of locations
• We want to make the locations even more specific
• Delete the dropdown menu that GitHub Copilot
• Edit the comment from

<!— dropdown menu with location —> 

TO

<!— dropdown menu with locations in Washington state —>

• GitHub Copilot suggested a few locations to us, but maybe too many. We can make our comment even more specific
• Edit the comment to say

<!— dropdown menu with 5 locations in Washington state —>

• Let Copilot give a suggestion
• We will see that the petModel doesn’t have a Location, so it’s throwing an error
• On line 13, type the word “Public” and GitHub Copilot should suggest

public string Location { get; set; }

• Make a new line on line 25 and GitHub Copilot should suggest

Location = “”;

• Let’s run the app to see the changes

        <!-- Step 2.5  - pet’s last location h2 element followed by dropdown -->
        <h2>Step 2.5: Where was your pet last seen?</h2>
        <!-- dropdown menu with 5 locations in Washington state -->
        <div class="form-group row justify-content-center">
            <label for="petLocation" class="col-2 col-form-label">Pet Location</label>
            <div class="col-4">
                <InputSelect id="location" @bind-Value="petModel.Location">
                    <option>Seattle</option>
                    <option>Bellevue</option>
                    <option>Redmond</option>
                    <option>Issaquah</option>
                    <option>Bothell</option>
                </InputSelect>
            </div>
        </div>

Backend

• Add these values to the backend to make sure it gets added to the database
• petspotr.py

class pet:
    def __init__(self, ID, Name, Type, Breed, Images, State, OwnerEmail, Location):
        self.ID = ID
        self.Name = Name
        self.Type = Type
        self.Breed = Breed
        self.Images = Images
        self.State = State
        self.OwnerEmail = OwnerEmail
        self.Location = Location

• app.py

    p = pet(
            data['id'],
            data['name'],
            data['type'],
            data['breed'],
            data['images'],
            data['state'],
            data['ownerEmail'],
            data['location']
        )
    

VIDEO REFERENCE: https://drive.google.com/file/d/1eTyx_G16Lv5I0sNcgmkdaTj9qUsqAib0/view?usp=sharing

MainLayout.razor

• We are going to create a new page with a list of tips for owners who lost their pets
• Create a new line on line 18
• Create a comment that

<!— create a link for tips —>

• Accept the suggestion
• Run the app to see the changes
• Click the link to see that it only renders a blank page, so we need to add something to the page
• Create a new page called Tips.razor in the Pages folder
• In the Tips.razor file add the following lines

@page "/tips"

<PageTitle>Tips for Pet Owners</PageTitle>

• Write this comment

<!-- Create an unordered list of tips with advice for pet owners who lost their pets include tips for places to search and ways to stay calm and an h2-->

• Let Copilot suggest , and it should give you something similar:

<!-- Create an unordered list of tips with advice for pet owners who lost their pets include tips for places to search and ways to stay calm and an h2-->
<h2 class="tips">Tips for Pet Owners</h2>
<ul class="tips">
<li>Check your yard and the surrounding area for your pet.</li>
<li>Check your home for your pet.</li>
<li>Check your neighborhood for your pet.</li>
<li>Check your local animal shelters and animal control facilities.</li>
</ul>

• Let’s check the app for changes

Write some tests

• Create a new file in your playwright/tests file called lostpage.spec.ts
• Write a comment giving context that says

// create playwright tests for LostPage.razor 

• On the next line, write a comment that says

// import dependencies

• On the next line GitHub Copilot will suggest

import { test, expect } from '@playwright/test';

• Write a comment that says,

// test that h2 element with the words "Step 1: Tell us about your pet and how to contact you" renders

• On the next lines GitHub Copilot should suggest,

test('h2 element with the words "Step 1: Tell us about your pet and how to contact you" renders', async ({ page }) => {
    await page.goto('http://localhost:5000/lostpage');
    const h2 = page.locator('h2');
    expect(await h2.innerText()).toContain('Step 1: Tell us about your pet and how to contact you');
});

• Write a comment that says,

// test that dropdown menu renders

• GitHub Copilot should suggest

test('dropdown menu renders', async ({ page }) => {
    await page.goto('http://localhost:5000/lostpage');
    const dropdown = page.locator('select');
    expect(await dropdown.innerText()).toContain('Dog');
});

• Write a comment that says,

// test that you can upload images when you click button with button 

• GitHub Copilot will suggest the below

test('you can upload images when you click button with button', async ({ page }) => {
    await page.goto('http://localhost:5000/lostpage');
    const button = page.locator('button');
    await button.click();
    const input = page.locator('input');
    await input.setInputFiles('C:/Users/Owner/Desktop/IMG_20201015_135244.jpg');
    expect(await input.innerText()).toContain('IMG_20201015_135244.jpg');
} );

• Try Copilot Labs use the custom brush to delete comments (results may very — experimental)

Video Reference: https://drive.google.com/file/d/1AjZlZfFeLsKeIBrdqJ74ywEnTI9Bwkyp/view?usp=sharing