📜  测试 fullstackopen (1)

📅  最后修改于: 2023-12-03 15:26:59.287000             🧑  作者: Mango

测试 Fullstackopen

如果你是一名Web开发人员,Fullstackopen是一门值得你学习的全栈Web开发课程,它由赫尔辛基大学提供,以JavaScript为主要语言,主要涵盖React、Redux、Node.js、MongoDB等技术栈。

课程压轴: 测试

在全栈开发中,测试是非常关键的一环。Fullstackopen非常注重测试的内容,支持在线测试、单元测试、集成测试和端到端测试。其中最重要的测试课程是Part5,在这里可以找到。

测试课程主要信息包括以下部分:

介绍

介绍了测试的相关概念,包括测试类型、测试原则等。

单元测试

以Jest为例,介绍了如何编写JavaScript单元测试,并提供在线的练习。

代码片段:

xtest('render only title and author at first', () => {
  const component = render(
    <Blog blog={blog} />
  )
  expect(component.container).toHaveTextContent(
    'TDD harms architecture.'
  )
  expect(component.container).toHaveTextContent(
    'Robert C. Martin'
  )
  expect(component.container).not.toHaveTextContent(
    'added by'
  )
  expect(component.container).not.toHaveTextContent(
    'likes'
  )
})

集成测试

介绍了如何编写简单的集成测试,以及在测试过程中遇到的常见问题。

代码片段:

describe('Login', function() {
  beforeEach(function() {
    cy.visit('/')
  })
  it('front page can be opened', function() {
    cy.contains('blogs')
    cy.contains('login')
  })

  it('user can log in', function() {
    cy.contains('login').click()
    cy.get('#username').type('Matti')
    cy.get('#password').type('sekret')
    cy.get('#login-button').click()

    cy.contains('Matti logged in')
  })

  it('login fails with wrong password', function() {
    cy.contains('login').click()
    cy.get('#username').type('Matti')
    cy.get('#password').type('wrong')
    cy.get('#login-button').click()

    cy.get('.error')
      .should('contain', 'Wrong credentials')
      .and('have.css', 'color', 'rgb(255, 0, 0)')

    cy.get('html').should('not.contain', 'Matti logged in')
  })
})

端到端测试

介绍了如何编写端到端测试,并对常用的Cypress测试工具进行了解。

代码片段:

describe('Blog app', function() {
  beforeEach(function() {
    cy.request('POST', 'http://localhost:3003/api/testing/reset')

    const user = {
      name: 'Matti Luukkainen',
      username: 'mluukkai',
      password: 'salainen'
    }
    cy.request('POST', 'http://localhost:3003/api/users/', user)

    cy.visit('http://localhost:3000')
  })

  it('Login form is shown', function() {
    cy.contains('login')
  })

  it('succeeds with correct credentials', function() {
    cy.contains('login').click()
    cy.get('#username').type('mluukkai')
    cy.get('#password').type('salainen')
    cy.get('#login-button').click()

    cy.contains('Matti Luukkainen logged in')
  })

  it('fails with wrong credentials', function() {
    cy.contains('login').click()
    cy.get('#username').type('mluukkai')
    cy.get('#password').type('wrong')
    cy.get('#login-button').click()

    cy.get('.error')
      .should('contain', 'Wrong username or password')
      .and('have.css', 'color', 'rgb(255, 0, 0)')

    cy.get('html').should('not.contain', 'Matti Luukkainen logged in')
  })
})

以上是Fullstackopen中测试部分的部分资料,如果你想更进一步了解全栈开发和测试,那么这是一份非常好的学习资料。