Merge pull request #48 from doug-wade/add-writing-fe-tests

Add writing fe tests

code-examples/components-as-functions.example

@@ -1,10 +1,9 @@
-Vue.component('lesson-title', {
-  props: ['title'],
-  template: '<span>{{ title }}</span>'
-})
+const myComponent = () => (
+  <div>Hello World!</div>
+)
 
 function lessonTitle(title) {
-  return document.createElement('span').setAttribute('text', title);
+  return document.createElement('span').setAttribute('text', title)
 }
 
 const fib = (n) => {

code-examples/fib-final.example

@@ -7,7 +7,7 @@ const fib = (n) => {
   if (n === 0 || n === 1) {
     return n
   }
-  return makeAdder(fib(makeSubtracter(1)(n) + fib(makeSubtracter(2)(n))(n)
+  return makeAdder(fib(makeSubtracter(1)(n)))(fib(makeSubtracter(2)(n)))
 }
 export default { fib }
 

code-examples/ltr-basic-test.example

@@ -0,0 +1,15 @@
+import {render, screen} from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import Greeter from './greeter'
+
+it('displays a greeting', async () => {
+  // Arrange
+  const name = "World"
+  render(<Greeter name={name} />)
+
+  // Act
+  await screen.findByRole('heading')
+
+  // Assert
+  expect(screen.getByRole('heading')).toHaveTextContent(`Hello ${name}`)
+})

code-examples/ltr-fake-timers.example

@@ -0,0 +1,12 @@
+describe('my fake timers', () => {
+    beforeEach(() => {
+        jest.useFakeTimers()
+    })
+
+    it('runs setTimeout', ...)
+
+    afterEach(() => {
+        jest.runOnlyPendingTimers()
+        jest.useRealTimers()
+    })
+})

code-examples/ltr-mock-test.example

@@ -0,0 +1,19 @@
+import {render, screen} from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import Greeter from './greeter'
+
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: (str: string) => 'Привіт' })
+}))
+
+test('displays a greeting', async () => {
+  // Arrange
+  const name = "Світ"
+  render(<Greeter language="ukr" name={name} />)
+
+  // Act
+  await screen.findByRole('heading')
+
+  // Assert
+  expect(screen.getByRole('heading')).toHaveTextContent(`Привіт ${name}`)
+})

code-examples/ltr-screen-queries.example

@@ -0,0 +1,13 @@
+// Queries Accessible to Everyone
+screen.getByRole('button', { hidden: true })
+screen.getByLabelText('Username')
+screen.getByPlaceholderText('Username')
+screen.getByText(/about/i)
+screen.getByDisplayValue('Alaska')
+
+// Semantic Queries
+screen.getByAltText(/incredibles.*? poster/i)
+screen.getByTitle('Delete')
+
+// Test IDs
+screen.getByTestId('custom-element')

code-examples/ltr-screen-query-types.example

@@ -0,0 +1,11 @@
+screen.getByRole('spinbutton', {value: {now: 5}})
+// <button>Volume</button>
+
+screen.getAllByRole('spinbutton', {value: {min: 0}})
+// [
+//   <button>Volume</button>,
+//   <button>Pitch</button>
+// ]
+
+screen.queryByRole('spinbutton', {value: {now: 5}})
+// null

code-examples/ltr-spies-test.example

@@ -0,0 +1,15 @@
+import {render, screen} from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import Button from './button'
+
+test('calls the onClick handler', async () => {
+  // Arrange
+  const handleClick = jest.fn();
+  render(<Button onClick={handleClick} />)
+
+  // Act
+  await userEvent.click(await screen.findByRole('button'))
+
+  // Assert
+  expect(handleClick).toHaveBeenCalled()
+})

code-examples/ltr-user-event-types.example

@@ -0,0 +1,37 @@
+pointer(input: PointerActionInput | Array<PointerActionInput>): Promise<void>
+pointer([
+  // touch the screen at element1
+  {keys: '[TouchA>]', target: element1},
+  // move the touch pointer to element2
+  {pointerName: 'TouchA', target: element2},
+  // release the touch pointer at the last position (element2)
+  {keys: '[/TouchA]'},
+])
+
+keyboard(input: KeyboardInput): Promise<void>
+keyboard('{Shift>}A{/Shift}')
+
+clear(element: Element): Promise<void>
+clear(screen.queryByRole('spinbutton'))
+
+selectOptions(
+  element: Element,
+  values: HTMLElement | HTMLElement[] | string[] | string,
+): Promise<void>
+deselectOptions(
+  element: Element,
+  values: HTMLElement | HTMLElement[] | string[] | string,
+): Promise<void>
+selectOptions(screen.getByRole('listbox'), ['1', 'C'])
+
+upload(
+  element: HTMLElement,
+  fileOrFiles: File | File[],
+): Promise<void>
+upload(screen.getByLabelText(/upload file/i), new File())
+
+hover(element: Element): Promise<void>
+hover(screen.getByRole('button'))
+
+unhover(element: Element): Promise<void>
+unhover(screen.getByRole('button'))

code-examples/ltr-user-events.example

@@ -0,0 +1,10 @@
+test('type into an input field', async () => {
+  const user = userEvent.setup()
+
+  render(<input defaultValue="Hello," />)
+  const input = screen.getByRole('textbox')
+
+  await user.type(input, ' World!')
+
+  expect(input).toHaveValue('Hello, World!')
+})

code-examples/storybook-naming-hierarchy.example

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { DurationInput as DurationInputComponent } from './common/forms/DurationInput'
+
+const meta: Meta<typeof DurationInputComponent> = {
+  title: 'common/forms/DurationInput',
+  component: DurationInputComponent,
+}
+
+export default meta
+type Story = StoryObj<typeof DurationInputComponent>
+
+export const DurationInput: Story = {}

code-examples/using-args.example

@@ -0,0 +1,20 @@
+import type { Meta } from '@storybook/react';
+
+import { Button } from './Button';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+  argTypes: {
+    variant: { control: 'select', options: ['primary', 'secondary', 'tertiary'] },
+    label: { control: 'text' }
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+export const Default: Story = {
+    render({ label, variant }) {
+        return <Button label={label} variant={variant} />
+    }
+}

code-examples/writing-a-story.example

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from './Button';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Button>;
+
+export const Primary: Story = {
+  render: () => <Button variant="primary" label="Button" />,
+};
+
+export const Secondary: Story = {
+  render: () => <Button variant="secondary" label="Other Button" />,
+}